Add edit moment option to drawer

1 files changed, 53 insertions, 49 deletions

diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index a5411935..a796ffd8 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/core';
 import React, {useEffect, useState} from 'react';
 import {
   Alert,
@@ -11,7 +11,7 @@ import {
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
 import {ERROR_DELETE_MOMENT, MOMENT_DELETED_MSG} from '../../constants/strings';
 import {deleteMoment, sendReport} from '../../services';
-import {ScreenType} from '../../types/types';
+import {MomentTagType, MomentType, ScreenType} from '../../types/types';
 import {GenericMoreInfoDrawer} from '../common';
 
 enum MomentDrawerOptions {
@@ -23,26 +23,36 @@ enum MomentDrawerOptions {
 interface MomentMoreInfoDrawerProps extends ViewProps {
   isOpen: boolean;
   setIsOpen: (visible: boolean) => void;
-  momentId: string;
   isOwnProfile: boolean;
   momentTagId: string;
   removeTag: () => Promise<void>;
   dismissScreenAndUpdate: () => void;
+  screenType: ScreenType;
+  moment: MomentType;
+  tags: MomentTagType[];
 }
 
 const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
   const {
-    momentId,
     setIsOpen,
     isOwnProfile,
     dismissScreenAndUpdate,
     momentTagId,
     removeTag,
+    screenType,
+    moment,
+    tags,
   } = props;
 
+  const navigation = useNavigation();
+
+  const [drawerButtons, setDrawerButtons] = useState<
+    [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][]
+  >([]);
+
   const handleDeleteMoment = async () => {
     setIsOpen(false);
-    deleteMoment(momentId).then((success) => {
+    deleteMoment(moment.moment_id).then((success) => {
       if (success) {
         // set time out for UI transitions
         setTimeout(() => {
@@ -92,7 +102,8 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
         [
           {
             text: 'Mark as inappropriate',
-            onPress: () => sendReport(momentId, 'Mark as inappropriate'),
+            onPress: () =>
+              sendReport(moment.moment_id, 'Mark as inappropriate'),
           },
           {
             text: 'Cancel',
@@ -100,7 +111,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
           },
           {
             text: 'Mark as abusive',
-            onPress: () => sendReport(momentId, 'Mark as abusive'),
+            onPress: () => sendReport(moment.moment_id, 'Mark as abusive'),
           },
         ],
         {cancelable: false},
@@ -108,59 +119,52 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
     }, 500);
   };
 
-  const [drawerButtons, setDrawerButtons] = useState<
-    [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][]
-  >(
-    isOwnProfile
-      ? [
-          [
-            MomentDrawerOptions.DeleteMoment,
-            handleDeleteMoment,
-            undefined,
-            {color: 'red'},
-          ],
-          [MomentDrawerOptions.EditMoment, handleEditMoment],
-        ]
-      : [
-          [
-            MomentDrawerOptions.ReportIssue,
-            handleReportMoment,
-            undefined,
-            {color: 'red'},
-          ],
-        ],
-  );
+  const handleEditMoment = async () => {
+    setIsOpen(false);
+    navigation.navigate('CaptionScreen', {
+      screenType: screenType,
+      selectedTags: tags,
+      moment: moment,
+    });
+  };
 
   /*
    *  Update bottom drawer options to contain/not contain 'remove tag' option
    */
   useEffect(() => {
-    const setupBottomDrawer = () => {
-      const present = drawerButtons.findIndex(
-        (button) => button[0] === MomentDrawerOptions.RemoveTag,
-      );
-      /*
-       * If user is not tagged but button is present, remove button from bottom drawer
-       * If user is tagged but button is not present, add button to bottom drawer
-       */
-      if (momentTagId !== '' && present === -1) {
-        const localDrawerButtons = drawerButtons;
-        localDrawerButtons.push([
+    let newButtons: [
+      string,
+      (event: GestureResponderEvent) => void,
+      JSX.Element?,
+      TextStyle?,
+    ][] = [];
+    if (!isOwnProfile) {
+      newButtons.push([
+        MomentDrawerOptions.ReportIssue,
+        handleReportMoment,
+        undefined,
+        {color: 'red'},
+      ]);
+      // should we have the "delete moment" option?
+      if (momentTagId !== '') {
+        newButtons.push([
           MomentDrawerOptions.RemoveTag,
           handleRemoveTag,
           undefined,
           {color: 'red'},
         ]);
-        setDrawerButtons(localDrawerButtons);
-      } else if (momentTagId === '' && present !== -1) {
-        const filteredButtons = drawerButtons.filter(
-          (button) => button[0] !== MomentDrawerOptions.RemoveTag,
-        );
-        setDrawerButtons(filteredButtons);
       }
-    };
-    setupBottomDrawer();
-  }, [momentTagId]);
+    } else {
+      newButtons.push([
+        MomentDrawerOptions.DeleteMoment,
+        handleDeleteMoment,
+        undefined,
+        {color: 'red'},
+      ]);
+      newButtons.push([MomentDrawerOptions.EditMoment, handleEditMoment]);
+    }
+    setDrawerButtons(newButtons);
+  }, [tags, momentTagId]);
 
   return (
     <>