Enable deleting posts

src/components/context-menu.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { Dimensions, View, Image } from "react-native";
+import { FontAwesome } from '@expo/vector-icons';
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+    renderers
+} from "react-native-popup-menu";
+
+const { SlideInMenu } = renderers;
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+const ContextMenuJsx = (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>
+                    <FontAwesome
+                        name = "ellipsis-h"
+                        size = { props.size ? props.size : 24 }
+                        color = { props.colour ? props.colour : "black" } />
+                </MenuTrigger>
+                <MenuOptions customStyles = { optionsStyles }>
+                    { props.children }
+                </MenuOptions>
+            </Menu>
+        </View>
+    );
+}
+
+export { ContextMenuJsx as default };

src/components/pages/view-post.js

@@ -18,6 +18,9 @@ const ViewPostJsx = ({navigation}) => {
               navigation = { navigation }>
             <PostByDataJsx
                 navigation = { navigation }
+                afterDelete = {
+                    () => navigation.goBack()
+                }
                 data = { state.post } />
         </ScreenWithBackBarJsx>
     );

src/components/posts/post.js

@@ -15,7 +15,8 @@ import * as requests from "src/requests";
 
 import PostActionBarJsx from "src/components/posts/post-action-bar";
 
-import ModerateMenuJsx from "src/components/moderate-menu.js";
+import { MenuOption } from "react-native-popup-menu";
+import ContextMenuJsx from "src/components/context-menu.js";
 
 const SCREEN_WIDTH = Dimensions.get("window").width;
 const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
@@ -106,9 +107,27 @@ export const RawPostJsx = (props) => {
                     { props.data.account.acct }
                 </Text>
                 </TouchableOpacity>
-                <ModerateMenuJsx
+                <ContextMenuJsx
-                    containerStyle = { styles.menu }
+                      containerStyle = { styles.menu }
-                    triggerStyle = { styles.ellipsis } />
+                      colour = "#666">
+                    { props.own
+                        ? <>
+                            <MenuOption
+                                text = "Delete"
+                                onSelect = { props.onDelete } />
+                        </>
+                        : <>
+                            <MenuOption
+                                text = "Don't show me their posts"/>
+                            <MenuOption
+                                text = "Mute" />
+                            <MenuOption
+                                text = "Block" />
+                            <MenuOption
+                                text = "Report" />
+                        </>
+                    }
+                </ContextMenuJsx>
             </View>
             {
                 props.data.media_attachments.length > 1 ?
@@ -176,20 +195,23 @@ export const PostByDataJsx = (props) => {
 
     let [state, setState] = useState({
         loaded: false,
+        deleted: false,
         data: props.data,
         dimensions: []
     });
 
     useEffect(() => {
-        let instance, accessToken;
+        let instance, accessToken, own;
         AsyncStorage
             .multiGet([
                 "@user_instance",
+                "@user_profile",
                 "@user_token",
             ])
-            .then(([instancePair, tokenPair]) => {
+            .then(([instancePair, profilePair, tokenPair]) => {
                 instance = instancePair[1];
                 accessToken = JSON.parse(tokenPair[1]).access_token;
+                own = state.data.account.id == JSON.parse(profilePair[1]).id;
             })
             .then(() =>
                 Promise.all(
@@ -201,6 +223,7 @@ export const PostByDataJsx = (props) => {
                     dimensions: dimensions,
                     instance,
                     accessToken,
+                    own,
                     loaded: true
                 });
             });
@@ -273,15 +296,34 @@ export const PostByDataJsx = (props) => {
         });
     };
 
+    const _handleDelete = async () => {
+        await requests.deleteStatus(
+            state.instance,
+            state.data.id,
+            state.accessToken
+        );
+
+        if (props.afterDelete) {
+            // Useful for when we need to navigate away from ViewPost
+            props.afterDelete();
+        } else {
+            setState({...state,
+                deleted: true,
+            });
+        }
+    }
+
     return (
         <View>
-            { state.loaded ?
+            { state.loaded && !state.deleted ?
                 <RawPostJsx
                     data = { state.data }
                     dimensions = { state.dimensions }
                     onFavourite = { _handleFavourite }
                     onReblog = { _handleReblog }
-                    onBookmark = { _handleBookmark }
+                    onBookmark = { _handleDelete }
+                    onDelete = { _handleDelete }
+                    own = { state.own }
                     navigation = { props.navigation }/>
                 : <View></View> }
         </View>
@@ -314,10 +356,6 @@ const styles = {
         marginRight: SCREEN_WIDTH / 28,
         borderRadius: 50
     },
-    ellipsis: {
-        width: SCREEN_WIDTH / 15,
-        height: SCREEN_WIDTH / 15
-    },
     photo: {
         flex: 1,
     },