2 files changed, 94 insertions, 19 deletions

diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx
index 3c3ee4c3..ae9e96a0 100644
--- a/src/components/moments/MomentPostHeader.tsx
+++ b/src/components/moments/MomentPostHeader.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   StyleSheet,
   Text,
@@ -20,6 +20,8 @@ interface MomentPostHeaderProps extends ViewProps {
   screenType: ScreenType;
   username: string;
   momentId: string;
+  momentTagId: string;
+  removeTag: () => Promise<void>;
 }
 
 const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
@@ -28,6 +30,8 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
   username,
   momentId,
   style,
+  momentTagId,
+  removeTag,
 }) => {
   const [drawerVisible, setDrawerVisible] = useState(false);
   const dispatch = useDispatch();
@@ -66,6 +70,8 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
         setIsOpen={setDrawerVisible}
         momentId={momentId}
         isOwnProfile={isOwnProfile}
+        momentTagId={momentTagId}
+        removeTag={removeTag}
         dismissScreenAndUpdate={() => {
           dispatch(loadUserMoments(loggedInUserId));
           navigation.pop();
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 77c349ca..1ac05fb0 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 = () => {
+    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 = async () => {
+      const present = drawerButtons.findIndex(
+        (button) => button[0] === MomentDrawerOptions.RemoveTag,
+      );
+      if (momentTagId !== '') {
+        if (present === -1) {
+          const localDrawerButtons = drawerButtons;
+          localDrawerButtons.push([
+            MomentDrawerOptions.RemoveTag,
+            handleRemoveTag,
+          ]);
+          setDrawerButtons(localDrawerButtons);
+        }
+      } else {
+        if (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}
+      />
     </>
   );
 };