Add edit option to bottom drawer, Style

3 files changed, 35 insertions, 16 deletions

diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index 0928ed44..cfc45131 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -3,15 +3,16 @@ import {
   GestureResponderEvent,
   StyleSheet,
   Text,
+  TextStyle,
   TouchableOpacity,
   View,
   ViewProps,
   ViewStyle,
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import BottomDrawer from './BottomDrawer';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import BottomDrawer from './BottomDrawer';
 
 // conforms the JSX onPress attribute type
 type OnPressHandler = (event: GestureResponderEvent) => void;
@@ -20,13 +21,12 @@ interface GenericMoreInfoDrawerProps extends ViewProps {
   isOpen: boolean;
   setIsOpen: (visible: boolean) => void;
   showIcons: boolean;
-  textColor: string;
   // An array of title, onPressHandler, and icon component
-  buttons: [string, OnPressHandler, JSX.Element?][];
+  buttons: [string, OnPressHandler, JSX.Element?, TextStyle?][];
 }
 
 const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
-  const {buttons, showIcons, textColor} = props;
+  const {buttons, showIcons} = props;
   // each button is 80px high, cancel button is always there
   const initialSnapPosition =
     (buttons.length + 1) * 80 + useSafeAreaInsets().bottom;
@@ -44,13 +44,11 @@ const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
       showHeader={false}
       initialSnapPosition={initialSnapPosition}>
       <View style={styles.panel}>
-        {buttons.map(([title, action, icon], index) => (
+        {buttons.map(([title, action, icon, textStyle], index) => (
           <View key={index}>
             <TouchableOpacity style={panelButtonStyle} onPress={action}>
               {showIcons && <View style={styles.icon}>{icon}</View>}
-              <Text style={[styles.panelButtonTitle, {color: textColor}]}>
-                {title}
-              </Text>
+              <Text style={[styles.panelButtonTitle, textStyle]}>{title}</Text>
             </TouchableOpacity>
             <View style={styles.divider} />
           </View>
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 1265497e..a5411935 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -1,20 +1,24 @@
+import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {
   Alert,
   GestureResponderEvent,
   StyleSheet,
+  TextStyle,
   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 {ScreenType} from '../../types/types';
 import {GenericMoreInfoDrawer} from '../common';
 
 enum MomentDrawerOptions {
   DeleteMoment = 'Delete Moment',
   ReportIssue = 'Report an Issue',
   RemoveTag = 'Remove yourself from moment',
+  EditMoment = 'Edit Moment',
 }
 interface MomentMoreInfoDrawerProps extends ViewProps {
   isOpen: boolean;
@@ -105,12 +109,27 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
   };
 
   const [drawerButtons, setDrawerButtons] = useState<
-    [string, (event: GestureResponderEvent) => void, JSX.Element?][]
-  >([
+    [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][]
+  >(
     isOwnProfile
-      ? [MomentDrawerOptions.DeleteMoment, handleDeleteMoment]
-      : [MomentDrawerOptions.ReportIssue, handleReportMoment],
-  ]);
+      ? [
+          [
+            MomentDrawerOptions.DeleteMoment,
+            handleDeleteMoment,
+            undefined,
+            {color: 'red'},
+          ],
+          [MomentDrawerOptions.EditMoment, handleEditMoment],
+        ]
+      : [
+          [
+            MomentDrawerOptions.ReportIssue,
+            handleReportMoment,
+            undefined,
+            {color: 'red'},
+          ],
+        ],
+  );
 
   /*
    *  Update bottom drawer options to contain/not contain 'remove tag' option
@@ -129,6 +148,8 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
         localDrawerButtons.push([
           MomentDrawerOptions.RemoveTag,
           handleRemoveTag,
+          undefined,
+          {color: 'red'},
         ]);
         setDrawerButtons(localDrawerButtons);
       } else if (momentTagId === '' && present !== -1) {
@@ -153,7 +174,6 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
       <GenericMoreInfoDrawer
         {...props}
         showIcons={false}
-        textColor={'red'}
         buttons={drawerButtons}
       />
     </>
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index ecc45211..656f81bb 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -55,12 +55,12 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
         <GenericMoreInfoDrawer
           {...props}
           showIcons={false}
-          textColor={'red'}
           buttons={[
             [
               (isBlocked ? 'Unblock' : 'Block') + ` ${userXName}`,
               onBlockUnblock,
               undefined,
+              {color: 'red'},
             ],
           ]}
         />
@@ -68,7 +68,6 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
         <GenericMoreInfoDrawer
           {...props}
           showIcons={true}
-          textColor={'black'}
           buttons={[
             [
               'Settings',
@@ -77,6 +76,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
                 source={require('../../assets/images/settings/settings.png')}
                 style={styles.image}
               />,
+              {color: 'black'},
             ],
             [
               'Edit Profile',
@@ -85,6 +85,7 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
                 source={require('../../assets/images/settings/edit-profile.png')}
                 style={styles.image}
               />,
+              {color: 'black'},
             ],
           ]}
         />