Add moderation context menu to profiles

src/components/moderate-menu.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { Dimensions, View, Image } from "react-native";
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+    renderers
+} from "react-native-popup-menu";
+
+const { SlideInMenu } = renderers;
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+const ModerateMenuJsx = (props) => {
+    const optionsStyles = {
+        optionWrapper: { // The wrapper around a single option
+            paddingLeft: SCREEN_WIDTH / 15,
+            paddingTop: SCREEN_WIDTH / 30,
+            paddingBottom: SCREEN_WIDTH / 30
+        },
+        optionsWrapper: { // The wrapper around all options
+            marginTop: SCREEN_WIDTH / 20,
+            marginBottom: SCREEN_WIDTH / 20,
+        },
+        optionsContainer: { // The Animated.View
+            borderTopLeftRadius: 10,
+            borderTopRightRadius: 10
+        }
+    };
+
+    return (
+        <View style = { props.containerStyle }>
+            <Menu renderer = { SlideInMenu }>
+                <MenuTrigger>
+                    <Image
+                        source = { require("assets/eva-icons/ellipsis.png") }
+                        style = { props.triggerStyle }/>
+                </MenuTrigger>
+                <MenuOptions customStyles = { optionsStyles }>
+                    <MenuOption text="Hide" />
+                    <MenuOption text="Unfollow" />
+                    <MenuOption text="Mute" />
+                    <MenuOption text="Block" />
+                </MenuOptions>
+            </Menu>
+        </View>
+    );
+}
+
+export { ModerateMenuJsx as default };

src/components/pages/profile.js

@@ -17,6 +17,8 @@ import {
     ScreenWithFullNavigationJsx
 } from "src/components/navigation/navigators";
 
+import ModerateMenuJsx from "src/components/moderate-menu.js";
+
 const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
 const TEST_POSTS = [
     {
@@ -141,7 +143,8 @@ const ViewProfileJsx = ({navigation}) => {
 const ProfileDisplayJsx = ({navigation}) => {
     const accountName = navigation.getParam("acct", "");
     let [state, setState] = useState({
-        loaded: false
+        loaded: false,
+        own: false
     });
 
     const notif_pack = {
@@ -195,11 +198,22 @@ const ProfileDisplayJsx = ({navigation}) => {
                                     @{state.profile.username }
                                 </Text>
                             </View>
-                            <TouchableWithoutFeedback>
+                            {
-                                <Image
+                                state.own ?
-                                    source = { activeOrNot(state.unread_notifs, notif_pack) }
+                                    <TouchableWithoutFeedback>
-                                    style = { styles.bell } />
+                                        <Image
-                            </TouchableWithoutFeedback>
+                                            source = { activeOrNot(state.unread_notifs, notif_pack) }
+                                            style = {
+                                                [
+                                                    styles.profileHeaderIcon,
+                                                    styles.profileContextConatiner
+                                                ]
+                                            } />
+                                    </TouchableWithoutFeedback>
+                                : <ModerateMenuJsx
+                                    triggerStyle = { styles.profileHeaderIcon }
+                                    containerStyle = { styles.profileContextContainer } />
+                            }
                         </View>
                         <Text style = { styles.accountStats }>
                             { state.profile.statuses_count } posts &#8226;&nbsp;
@@ -270,10 +284,11 @@ const styles = {
         borderRadius: "100%",
         marginRight: screen_width / 20
     },
-    bell: {
+    profileHeaderIcon: {
         width: screen_width / 12,
         height: screen_width / 12,
-
+    },
+    profileContextContainer: {
         marginLeft: "auto",
         marginRight: screen_width / 15
     },

src/components/posts/post.js

@@ -8,26 +8,15 @@ import {
     ScrollView
 } from "react-native";
 
-import {
+import { pluralize, timeToAge} from "src/interface/rendering"
-    Menu,
-    MenuOptions,
-    MenuOption,
-    MenuTrigger,
-    renderers
-} from "react-native-popup-menu";
-
-
-import { pluralize, timeToAge } from "src/interface/rendering"
 
 import PostActionBarJsx from "src/components/posts/post-action-bar";
 
+import ModerateMenuJsx from "src/components/moderate-menu.js";
+
 const SCREEN_WIDTH = Dimensions.get("window").width;
 const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
 
-// Extract the SlideInMenu function from `renderers`
-// This will be used in RawPostJsx
-const { SlideInMenu } = renderers;
-
 function getAutoHeight(w1, h1, w2) {
     /*
     Given the original dimensions and the new width, calculate what would
@@ -90,20 +79,9 @@ export const RawPostJsx = (props) => {
                     source = { { uri: props.data.avatar } } />
                 <Text
                     style = { styles.postHeaderName }>{ props.data.username }</Text>
-                <View style = { styles.menu }>
+                <ModerateMenuJsx
-                    <Menu renderer = { SlideInMenu }>
+                    containerStyle = { styles.menu }
-                        <MenuTrigger>
+                    triggerStyle = { styles.ellipsis } />
-                            <Image
-                                source = { require("assets/eva-icons/ellipsis.png") }
-                                style = { styles.ellipsis }/>
-                        </MenuTrigger>
-                        <MenuOptions customStyles = { optionsStyles }>
-                            <MenuOption text="Hide" />
-                            <MenuOption text="Unfollow" />
-                            <MenuOption text="Block" />
-                        </MenuOptions>
-                    </Menu>
-                </View>
             </View>
             {
                 props.data.media_attachments.length > 1 ?