Enable moderation menu options for comments. Closes #29

package-lock.json

@@ -18277,6 +18277,7 @@
       "resolved": "https://registry.npmjs.org/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.59.0.tgz",
       "integrity": "sha512-1O3wrnMq4NcPQ1asEcl9lRDn/t+F1Oef6S9WaYVIKEhg9m/EQRGVrrTVP+R6B5Eeaj3+zNKbzM8Dx/NWy1hUbQ==",
       "requires": {
+        "@babel/core": "^7.0.0",
         "babel-preset-fbjs": "^3.3.0",
         "metro-babel-transformer": "0.59.0",
         "metro-react-native-babel-preset": "0.59.0",

src/components/pages/view-comments.js

@@ -177,7 +177,7 @@ const CommentJsx = (props) => {
                     </View>
                     <TouchableOpacity
                           onPress = {
-                              props.onReply(
+                              props.onReplyFactory(
                                   props.data.account.acct,
                                   props.data.id
                               )
@@ -189,7 +189,7 @@ const CommentJsx = (props) => {
                         </View>
                     </TouchableOpacity>
                     <TouchableOpacity
-                          onPress = { props.onFavourite(props.data) }>
+                          onPress = { props.onFavouriteFactory(props.data) }>
                         <Ionicons
                             name = { activeOrNot(props.data.favourited, packs.favourited) }
                             size = { 15 }
@@ -207,13 +207,22 @@ const CommentJsx = (props) => {
                                 { props.profile.acct == props.data.account.acct
                                     ? <>
                                         <MenuOption
-                                            onSelect = { props.onDelete(props.data) }
+                                            text = "Delete"
-                                            text = "Delete" />
+                                            onSelect = {
+                                                props.onDeleteFactory(props.data.id)
+                                            } />
                                     </>
                                     : <>
-                                        <MenuOption text = "Report" />
+                                        <MenuOption
-                                        <MenuOption text = "Mute" />
+                                            text = "Mute"
-                                        <MenuOption text = "Block" />
+                                            onSelect = {
+                                                props.onMuteFactory(props.data.account.id)
+                                            } />
+                                        <MenuOption
+                                            text = "Block"
+                                            onSelect = {
+                                                props.onBlockFactory(props.data)
+                                            } />
                                     </>
                                 }
                             </MenuOptions>
@@ -273,7 +282,22 @@ const ViewCommentsJsx = (props) => {
         return threadify(descendants);
     }
 
-    const _onReplyFactory = (acct, id) => {
+    const _hideStatus = id => {
+        /*
+         * Instead of waiting for the server to register that a status
+         * shouldn't be retrieved next time the context is fetched, it's more
+         * efficient to just remove it on the client side.
+         *
+         * Returns a new collection of threads without the comment with the
+         * given id
+         */
+        
+        return state.descendants.map(thread =>
+            thread.filter(comment => comment.id != id)
+        ).filter(thread => thread.length > 0);
+    };
+
+    const onReplyFactory = (acct, id) => {
         return () => {
             setState({...state,
                 inReplyTo: {
@@ -284,7 +308,7 @@ const ViewCommentsJsx = (props) => {
         }
     };
 
-    const _onFavouriteFactory = (data) => {
+    const onFavouriteFactory = (data) => {
         return async () => {
             if(!data.favourited) {
                 await requests.favouriteStatus(
@@ -306,28 +330,24 @@ const ViewCommentsJsx = (props) => {
         }
     }
 
-    const _onDeleteFactory = data => {
+    // Returns a function that returns a callback for a context menu option
-        return async () => {
+    // It's not every day you get to use third order functions
-            await requests.deleteStatus(
+    const _onModerateFactory = request => id => async () => {
-                state.instance,
+        await request(
-                data.id,
+            state.instance,
-                state.accessToken,
+            id,
-            );
+            state.accessToken,
+        );
 
-            // It appears that it takes a moment for the Context of a
+        setState({...state,
-            // post to register that a comment has been deleted, so instead
+            descendants: _hideStatus(id),
-            // of waiting for it, it's more efficient to just drop the comment
+        });
-            // on the client side.
-            const newThreads = state.descendants.map(thread =>
-                thread.filter(comment => comment.id != data.id)
-            ).filter(thread => thread.length > 0);
-
-            setState({...state,
-                descendants: newThreads,
-            });
-        };
     };
 
+    const onDeleteFactory = _onModerateFactory(requests.deleteStatus);
+    const onMuteFactory = _onModerateFactory(requests.muteAccount);
+    const onBlockFactory = _onModerateFactory(requests.blockAccount);
+
     const _handleCancelSubReply = () => {
         setState({...state,
             inReplyTo: {
@@ -366,9 +386,11 @@ const ViewCommentsJsx = (props) => {
         <CommentJsx
             { ...props }
             profile = { state.profile }
-            onFavourite = { _onFavouriteFactory }
+            onFavouriteFactory = { onFavouriteFactory }
-            onReply = { _onReplyFactory }
+            onReplyFactory = { onReplyFactory }
-            onDelete = { _onDeleteFactory } />
+            onMuteFactory = { onMuteFactory }
+            onBlockFactory = { onBlockFactory }
+            onDeleteFactory = { onDeleteFactory } />
     );
 
     return (