Add a context menu for posts

Curiously, the context menu doesn't seem to open when tested in FireFox
while live reloading is active; it only works when the page loading
has been interrupted. Presumably this won't be an issue when run
on a device but something to look into nonetheless as it does kind of
throw off debugging

package-lock.json

@@ -6129,6 +6129,11 @@
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
       "integrity": "sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ=="
     },
+    "react-native-popup-menu": {
+      "version": "0.15.10",
+      "resolved": "https://registry.npmjs.org/react-native-popup-menu/-/react-native-popup-menu-0.15.10.tgz",
+      "integrity": "sha512-w7MaicsfpclK7g/omjMchNaXwhMi0apt/DC734AbHuJTWCfv5mF3JgL1UzRW19ncFMBRfQeYapPy/zUyJCGgEQ=="
+    },
     "react-native-reanimated": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz",

package.json

@@ -9,21 +9,22 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/core": "5.2.3",
     "@react-navigation/native": "5.1.1",
+    "@react-navigation/stack": "5.2.3",
     "expo": "^38.0.9",
     "expo-status-bar": "^1.0.2",
     "react": "~16.11.0",
     "react-dom": "~16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-gesture-handler": "~1.6.0",
+    "react-native-popup-menu": "^0.15.10",
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
     "react-native-web": "~0.11.7",
     "react-navigation": "^4.4.0",
-    "react-navigation-stack": "^2.8.2",
+    "react-navigation-stack": "^2.8.2"
-    "@react-navigation/stack": "5.2.3",
-    "@react-navigation/core": "5.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

src/components/navigation/navigators.js

@@ -1,43 +1,69 @@
 import React from "react";
 import { View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
+
+import { MenuProvider } from "react-native-popup-menu";
+
 import BackBarJsx from "./back-bar";
 import TrayJsx from "src/components/navigation/tray";
 
+// Provider for context menus
+// Allows for establishing global styling of context menus
+const ContextJsx = (props) => {
+    return (
+        <MenuProvider customStyles = { providerStyles }>
+            { props.children }
+        </MenuProvider>
+    );
+};
+
 export const ScreenWithTrayJsx = (props) => {
     return (
-        <View style = { { flex: 1 } }>
+        <ContextJsx>
-            <ScrollView>
+            <View style = { { flex: 1 } }>
-                { props.children }
+                <ScrollView>
+                    { props.children }
             </ScrollView>
             <TrayJsx
-                active = { props.active }
+                    active = { props.active }
-                navigation = { props.navigation } />
+                    navigation = { props.navigation } />
-        </View>
+            </View>
-    )
+        </ContextJsx>
+    );
 };
 
 export const ScreenWithBackBarJsx = (props) => {
     return (
-        <View style = { { flex: 1 } }>
+        <ContextJsx>
-            <BackBarJsx navigation = { props.navigation } />
+            <View style = { { flex: 1 } }>
-            <ScrollView>
+                <BackBarJsx navigation = { props.navigation } />
-                { props.children }
+                <ScrollView>
-            </ScrollView>
+                    { props.children }
-        </View>
+                </ScrollView>
+            </View>
+        </ContextJsx>
     );
 };
 
 export const ScreenWithFullNavigationJsx = (props) => {
     return (
-        <View style = { { flex: 1 } }>
+        <ContextJsx>
-            <BackBarJsx navigation = { props.navigation } />
+            <View style = { { flex: 1 } }>
-            <ScrollView>
+                <BackBarJsx navigation = { props.navigation } />
-                { props.children }
+                <ScrollView>
-            </ScrollView>
+                    { props.children }
-            <TrayJsx
+                </ScrollView>
-                active = { props.active }
+                <TrayJsx
-                navigation = { props.navigation } />
+                    active = { props.active }
-        </View>
+                    navigation = { props.navigation } />
+            </View>
+        </ContextJsx>
     );
+};
+
+const providerStyles = {
+    backdrop: {
+        backgroundColor: "black",
+        opacity: 0.5
+    }
 }

src/components/posts/post.js

@@ -1,11 +1,23 @@
 import React, { useEffect, useState } from "react";
-import { Image, View, Text, Dimensions } from "react-native";
+import { Image, View, Text, Dimensions, TouchableWithoutFeedback } from "react-native";
+
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+    renderers
+} from "react-native-popup-menu";
 
 import PostActionBarJsx from "src/components/posts/post-action-bar";
 
 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
@@ -65,6 +77,20 @@ export const RawPostJsx = (props) => {
                     source = { { uri: props.data.avatar } } />
                 <Text
                     style = { styles.postHeaderName }>{ props.data.username }</Text>
+                <View style = { styles.menu }>
+                    <Menu renderer = { SlideInMenu }>
+                        <MenuTrigger>
+                            <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>
             { /* TODO: support for more than one image per post */ }
             <Image
@@ -190,12 +216,20 @@ const styles = {
         fontWeight: "bold",
         marginTop: -2
     },
+    menu: {
+        marginLeft: "auto",
+        marginRight: SCREEN_WIDTH / 30
+    },
     pfp: {
         width: SCREEN_WIDTH / 10,
         height: SCREEN_WIDTH / 10,
         marginRight: SCREEN_WIDTH / 28,
         borderRadius: "100%"
     },
+    ellipsis: {
+        width: SCREEN_WIDTH / 15,
+        height: SCREEN_WIDTH / 15
+    },
     photo: {
         flex: 1,
     },
@@ -209,3 +243,26 @@ const styles = {
         paddingTop: 10
     }
 };
+
+// customStyles for react-native-popup-menu should be defined in particular
+// objects to be interpreted correctly.
+
+//const menuStyles = {
+//    menuProviderWrapper
+//}
+
+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
+    }
+}