containers/Comments//Ideas//BaseApi: make comments deletable, also fixes

 #242

BaseApi.js

@@ -99,7 +99,15 @@ const makeDeleteRequest = (url, token = null) => {
     method: 'DELETE',
     headers: getHeaders(token)
   })
-    .then(response => response)
+    .then(response => {
+      const statusCode = response.status;
+      let data;
+      statusCode == 204 ? data = {} : data = response.json();
+      return Promise.all([ statusCode, data ]);
+    })
+    .then(values => {
+      return {statusCode: values[0], data: values[1]};
+    })
     .catch(error => console.error(error));
 };
 
@@ -165,6 +173,13 @@ const API = {
     const ct_url = endpoints.comments.replace('$contentTypeId', contentTypeId);
     const url = ct_url.replace('$objectPk', objectPk);
     return makePostRequest(url, data, token);
+  },
+  deleteComment(contentTypeId, objectPk, commentPk, token = null) {
+    const ct_url = endpoints.comment.replace('$contentTypeId', contentTypeId);
+    const ct_obj_url = ct_url.replace('$objectPk', objectPk);
+    const url = ct_obj_url.replace('$commentPk', commentPk);
+    console.log(url);
+    return makeDeleteRequest(url, token);
   }
 };
 

containers/Comments/Comment.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { View, Image } from 'react-native';
+import { Alert, View, Image } from 'react-native';
 import { Button } from 'react-native-elements';
 import { styles } from './Comment.styles';
 import { TextSourceSans } from '../../components/TextSourceSans';
@@ -19,12 +19,64 @@ export const Comment = (props) => {
   const [hasExcerpt, setHasExcerpt] = useState(false);
   const [processing, setProcessing] = useState(false);
   const [comment, setComment] = useState(props.comment);
+  const [commentBeingProcessed, setCommentBeingProcessed] = useState(props.comment);
+  const commentMenuItems = [
+    {
+      title: 'Edit',
+      icon: 'pencil',
+      action: () => console.log('Edit comment'),
+      isFirst: true,
+      isAllowed: comment.has_changing_permission
+    },
+    {
+      title: 'Delete',
+      icon: 'trash',
+      action: () => props.toggleDeleteModal(),
+      isAllowed: comment.has_deleting_permission
+    },
+    {
+      title: 'Report',
+      icon: 'flag',
+      action: () => console.log('Report comment'),
+      isFirst: !comment.has_changing_permission && !comment.has_deleting_permission,
+      isLast: true,
+      isAllowed: true
+    },
+    {
+      title: 'Cancel',
+      action: () => props.toggleMenu(),
+      isCancel: true,
+      isAllowed: true
+    },
+  ];
+
+  const commentDeleteModalItems = [
+    {
+      // space is to center the text
+      title: '   This comment will be deleted.\nThis action cannot be undone.',
+      isText: true
+    },
+    {
+      title: 'Delete',
+      action: () => deleteComment()
+    },
+    {
+      title: 'Cancel',
+      action: () => props.toggleDeleteModal(),
+      isCancel: true
+    },
+  ];
 
   useEffect(() => {
     setComment(props.comment);
     props.openSubComments && setShowSubComments(true);
   }, [props.openSubComments, props.comment]);
 
+  useEffect(() => {
+    props.setDeleteModalItems(commentDeleteModalItems);
+    props.setMenuItems(commentMenuItems);
+  }, [commentBeingProcessed]);
+
   const toggleSubComments = () => {
     setShowSubComments(!showSubComments);
   };
@@ -81,6 +133,46 @@ export const Comment = (props) => {
       });
   };
 
+  const deleteComment = () => {
+    AsyncStorage.getItem('authToken')
+      .then((token) => API.deleteComment(commentBeingProcessed.content_type, commentBeingProcessed.object_pk, commentBeingProcessed.id, token))
+      .then((response) => {
+        const {statusCode, data} = response;
+        props.toggleDeleteModal();
+        if (statusCode == 200) {
+          Alert.alert('Your comment was deleted.', 'Thank you for participating!',  [{ text: 'Ok' }]);
+          fetchComment();
+        }
+        else {
+          const errorMessage = 'That did not work.';
+          let errorDetail;
+          if (statusCode==403) {
+            errorDetail = data.detail;
+          }
+          else if (statusCode == 400) {
+            errorDetail = 'Bad request';
+          }
+          Alert.alert(errorMessage, errorDetail, [{ text: 'Ok' }]);
+        }
+      });
+  };
+
+  const getCommentTextDisplay = (comment) => {
+    if (comment.is_removed) {
+      return 'Deleted by creator on ' + DateService(comment.modified);
+    }
+    else if (comment.is_censored || comment.is_blocked) {
+      return 'Deleted by moderation on '+ DateService(comment.modified);
+    }
+    else {
+      return comment.comment;
+    }
+  };
+
+  const isDisplayed = (comment) => {
+    return !(comment.is_deleted || comment.is_blocked);
+  };
+
   const optionsIcon = (<IconSLI name='options-vertical' size={22} />);
   const arrowUpIcon = (<IconSLI name='arrow-up' size={18} />);
   const arrowDownIcon = (<IconSLI name='arrow-down' size={18} />);
@@ -91,18 +183,25 @@ export const Comment = (props) => {
     <View style={styles.container}>
       <View style={styles.top}>
         <View style={styles.topLeft}>
+          {isDisplayed(comment) &&
           <Image source={{ uri: comment.user_image }} style={styles.avatar} />
+          }
           <View style={styles.author}>
             <TextSourceSans style={styles.username}>{comment.user_name}</TextSourceSans>
+            {isDisplayed(comment) &&
             <TextSourceSans style={styles.date}>{DateService(comment.created)}</TextSourceSans>
+            }
           </View>
         </View>
+        {isDisplayed(comment) &&
         <TextSourceSans>
           <Button
             icon={optionsIcon}
             type='clear'
+            onPress={() => {setCommentBeingProcessed(comment); props.toggleMenu();}}
           />
         </TextSourceSans>
+        }
       </View>
       <View>
         {!showWholeComment &&
@@ -111,7 +210,7 @@ export const Comment = (props) => {
             numberOfLines={NUM_OF_LINES}
             onTextLayout={onTextLayout}
           >
-            {comment.comment}
+            {getCommentTextDisplay(comment)}
           </TextSourceSans>
         }
         {showWholeComment &&
@@ -174,6 +273,10 @@ export const Comment = (props) => {
         <SubComments
           comments={comment.child_comments}
           handleRate={handleRate}
+          setCommentBeingProcessed={setCommentBeingProcessed}
+          toggleMenu={props.toggleMenu}
+          getCommentTextDisplay={getCommentTextDisplay}
+          isDisplayed={isDisplayed}
         />
       }
     </View>

containers/Comments/Comments.js

@@ -17,6 +17,10 @@ export const Comments = (props) => {
           comment={comment}
           handleReply={props.handleReply}
           openSubComments={(props.commentLastCommented==comment.id) ? true : false}
+          setMenuItems={props.setMenuItems}
+          toggleMenu={props.toggleMenu}
+          setDeleteModalItems={props.setDeleteModalItems}
+          toggleDeleteModal={props.toggleDeleteModal}
         />)}
     </View>
   );

containers/Comments/SubComment.js

@@ -36,26 +36,33 @@ export const SubComment = (props) => {
     <View style={styles.subContainer}>
       <View style={styles.top}>
         <View style={styles.topLeft}>
+          {props.isDisplayed(comment) &&
           <Image source={{ uri: comment.user_image }} style={styles.avatar} />
+          }
           <View style={styles.author}>
             <TextSourceSans style={styles.username}>{comment.user_name}</TextSourceSans>
+            {props.isDisplayed(comment) &&
             <TextSourceSans style={styles.date}>{DateService(comment.created)}</TextSourceSans>
+            }
           </View>
         </View>
+        {props.isDisplayed(comment) &&
         <TextSourceSans>
           <Button
             icon={optionsIcon}
             type='clear'
+            onPress={() => {props.setCommentBeingProcessed(comment); props.toggleMenu();}}
           />
         </TextSourceSans>
+        }
       </View>
       {!showWholeComment &&
         <TextSourceSans
           style={styles.comment}
           numberOfLines={NUM_OF_LINES}
           onTextLayout={onTextLayout}
         >
-          {comment.comment}
+          {props.getCommentTextDisplay(comment)}
         </TextSourceSans>
       }
       {showWholeComment &&

containers/Comments/SubComments.js

@@ -10,6 +10,10 @@ export const SubComments = (props) => {
           key={`comment-${comment.id}`}
           comment={comment}
           handleRate={props.handleRate}
+          setCommentBeingProcessed={props.setCommentBeingProcessed}
+          toggleMenu={props.toggleMenu}
+          getCommentTextDisplay={props.getCommentTextDisplay}
+          isDisplayed={props.isDisplayed}
         />)}
     </View>
   );

containers/Ideas/Idea.js

@@ -30,7 +30,7 @@ export const Idea = (props) => {
   // be used if permission does not allow commenting
   const [showCommentForm, setShowCommentForm] = useState(true);
 
-  const menuItems = [
+  const ideaMenuItems = [
     {
       title: 'Edit',
       icon: 'pencil',
@@ -44,7 +44,7 @@ export const Idea = (props) => {
     {
       title: 'Delete',
       icon: 'trash',
-      action: () => toggleDeleteModal(),
+      action: () => {setDeleteModalItems(ideaDeleteModalItems); toggleDeleteModal();},
       isAllowed: ideaState.has_deleting_permission
     },
     {
@@ -57,16 +57,16 @@ export const Idea = (props) => {
     },
     {
       title: 'Cancel',
-      action: () => setMenuVisible(false),
+      action: () => toggleMenu(),
       isCancel: true,
       isAllowed: true
     },
   ];
 
-  const deleteModalItems = [
+  const ideaDeleteModalItems = [
     {
       // space is to center the text
-      title: '   This idea will be deleted.\nThis action cannot be undone',
+      title: '   This idea will be deleted.\nThis action cannot be undone.',
       isText: true
     },
     {
@@ -80,19 +80,22 @@ export const Idea = (props) => {
     },
   ];
 
+  const [menuItems, setMenuItems] = useState(ideaMenuItems);
+  const [deleteModalItems, setDeleteModalItems] = useState(ideaDeleteModalItems);
+
   const getLabels = () => {
     let labelsList = [];
     ideaState.category && labelsList.push(ideaState.category.name);
     ideaState.labels.length > 0 && labelsList.push(...ideaState.labels.map(label => label.name));
     return labelsList;
   };
 
-  const toggleMenu = () => setMenuVisible(!menuVisible);
+  const toggleMenu = () => setMenuVisible(prevState => !prevState);
 
-  const toggleDeleteModal = () => (
-    setDeleteModalVisible(!deleteModalVisible),
-    setMenuVisible(false)
-  );
+  const toggleDeleteModal = () => {
+    setDeleteModalVisible(prevState => !prevState);
+    setMenuVisible(false);
+  };
 
   const handleRate = async(value) => {
     if (processing) return;
@@ -181,9 +184,26 @@ export const Idea = (props) => {
   const deleteIdea = () => {
     AsyncStorage.getItem('authToken')
       .then((token) => API.deleteIdea(moduleId, ideaState.pk, token))
-      .then(() => {
-        Alert.alert('Your idea was deleted.', 'Thank you for participating!',  [{ text: 'Ok' }]);
-        props.navigation.navigate('IdeaProject');
+      .then((response) => {
+        const {statusCode, data} = response;
+        toggleDeleteModal();
+        if (statusCode == 204) {
+          Alert.alert('Your idea was deleted.', 'Thank you for participating!',  [{ text: 'Ok' }]);
+          props.navigation.navigate('IdeaProject', {
+            project: project
+          });
+        }
+        else {
+          const errorMessage = 'That did not work.';
+          let errorDetail;
+          if (statusCode==403) {
+            errorDetail = data.detail;
+          }
+          else if (statusCode == 400) {
+            errorDetail = 'Bad request';
+          }
+          Alert.alert(errorMessage, errorDetail, [{ text: 'Ok' }]);
+        }
       });
   };
 
@@ -234,7 +254,7 @@ export const Idea = (props) => {
           <Button
             icon={optionsIcon}
             type='clear'
-            onPress={toggleMenu}
+            onPress={() => {setMenuItems(ideaMenuItems); toggleMenu();}}
           />
         </View>
         <View style={styles.titleContainer}>
@@ -297,6 +317,10 @@ export const Idea = (props) => {
             comments={comments}
             handleReply={handleCommentReply}
             commentLastCommented={commentLastCommented}
+            setMenuItems={setMenuItems}
+            toggleMenu={toggleMenu}
+            setDeleteModalItems={setDeleteModalItems}
+            toggleDeleteModal={toggleDeleteModal}
           />
         </View>}
       </ScrollView>