Merge pull request #450 from shravyaramesh/tma885-remove-tag-drawer

[TMA-885] Remove tag bottom drawer

1 files changed, 87 insertions, 18 deletions

diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 77c349ca..1265497e 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -1,20 +1,40 @@
-import React from 'react';
-import {Alert, StyleSheet, TouchableOpacity, ViewProps} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {
+  Alert,
+  GestureResponderEvent,
+  StyleSheet,
+  TouchableOpacity,
+  ViewProps,
+} from 'react-native';
 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 {GenericMoreInfoDrawer} from '../common';
 
+enum MomentDrawerOptions {
+  DeleteMoment = 'Delete Moment',
+  ReportIssue = 'Report an Issue',
+  RemoveTag = 'Remove yourself from moment',
+}
 interface MomentMoreInfoDrawerProps extends ViewProps {
   isOpen: boolean;
   setIsOpen: (visible: boolean) => void;
   momentId: string;
   isOwnProfile: boolean;
+  momentTagId: string;
+  removeTag: () => Promise<void>;
   dismissScreenAndUpdate: () => void;
 }
 
 const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
-  const {momentId, setIsOpen, isOwnProfile, dismissScreenAndUpdate} = props;
+  const {
+    momentId,
+    setIsOpen,
+    isOwnProfile,
+    dismissScreenAndUpdate,
+    momentTagId,
+    removeTag,
+  } = props;
 
   const handleDeleteMoment = async () => {
     setIsOpen(false);
@@ -38,6 +58,27 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
     });
   };
 
+  const handleRemoveTag = async () => {
+    setIsOpen(false);
+    setTimeout(() => {
+      Alert.alert(
+        MomentDrawerOptions.RemoveTag,
+        'Are you sure you want to be removed from this moment?',
+        [
+          {
+            text: 'Remove',
+            onPress: removeTag,
+          },
+          {
+            text: 'Cancel',
+            style: 'cancel',
+          },
+        ],
+        {cancelable: false},
+      );
+    }, 500);
+  };
+
   const handleReportMoment = async () => {
     setIsOpen(false);
     setTimeout(() => {
@@ -63,6 +104,43 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
     }, 500);
   };
 
+  const [drawerButtons, setDrawerButtons] = useState<
+    [string, (event: GestureResponderEvent) => void, JSX.Element?][]
+  >([
+    isOwnProfile
+      ? [MomentDrawerOptions.DeleteMoment, handleDeleteMoment]
+      : [MomentDrawerOptions.ReportIssue, handleReportMoment],
+  ]);
+
+  /*
+   *  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([
+          MomentDrawerOptions.RemoveTag,
+          handleRemoveTag,
+        ]);
+        setDrawerButtons(localDrawerButtons);
+      } else if (momentTagId === '' && present !== -1) {
+        const filteredButtons = drawerButtons.filter(
+          (button) => button[0] !== MomentDrawerOptions.RemoveTag,
+        );
+        setDrawerButtons(filteredButtons);
+      }
+    };
+    setupBottomDrawer();
+  }, [momentTagId]);
+
   return (
     <>
       <TouchableOpacity
@@ -72,21 +150,12 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
         }}>
         <MoreIcon height={30} width={30} color={'white'} />
       </TouchableOpacity>
-      {isOwnProfile ? (
-        <GenericMoreInfoDrawer
-          {...props}
-          showIcons={false}
-          textColor={'red'}
-          buttons={[['Delete Moment', handleDeleteMoment]]}
-        />
-      ) : (
-        <GenericMoreInfoDrawer
-          {...props}
-          showIcons={false}
-          textColor={'red'}
-          buttons={[['Report an Issue', handleReportMoment]]}
-        />
-      )}
+      <GenericMoreInfoDrawer
+        {...props}
+        showIcons={false}
+        textColor={'red'}
+        buttons={drawerButtons}
+      />
     </>
   );
 };