[TMA-409] Delete Moments (#124)

* edit profile to use HeaderHeight instead of percentage

* delete moment done with TODOs for backend

* actually hitting the endpoint

* ops

* moved isProfileView check to drawer component

* misunderstood suggestion, now is better

* an extra layer of indirection

* fixed some bugs and code improvement

7 files changed, 254 insertions, 113 deletions

diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
new file mode 100644
index 00000000..5c58f903
--- /dev/null
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {BottomDrawer} from '.';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+// conforms the JSX onPress attribute type
+type OnPressHandler = (event: GestureResponderEvent) => void;
+
+interface GenericMoreInfoDrawerProps extends ViewProps {
+  isOpen: boolean;
+  setIsOpen: (visible: boolean) => void;
+  showIcons: boolean;
+  // An array of title, onPressHandler, and icon component
+  buttons: [string, OnPressHandler, JSX.Element?][];
+}
+
+const GenericMoreInfoDrawer: React.FC<GenericMoreInfoDrawerProps> = (props) => {
+  const {buttons, showIcons} = props;
+  // each button is 80px high, cancel button is always there
+  const initialSnapPosition =
+    (buttons.length + 1) * 80 + useSafeAreaInsets().bottom;
+  let panelButtonStyle: ViewStyle[] = [
+    {
+      height: 80,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    showIcons ? {} : {justifyContent: 'center'},
+  ];
+  return (
+    <BottomDrawer
+      {...props}
+      showHeader={false}
+      initialSnapPosition={initialSnapPosition}>
+      <View style={styles.panel}>
+        {buttons.map(([title, action, icon], index) => (
+          <View key={index}>
+            <TouchableOpacity style={panelButtonStyle} onPress={action}>
+              {showIcons && <View style={styles.icon}>{icon}</View>}
+              <Text style={styles.panelButtonTitle}>{title}</Text>
+            </TouchableOpacity>
+            <View style={styles.divider} />
+          </View>
+        ))}
+        <TouchableOpacity
+          style={panelButtonStyle}
+          onPress={() => props.setIsOpen(false)}>
+          {/* a dummy icon for aligning the cancel button */}
+          {showIcons && <View style={styles.icon} />}
+          <Text style={styles.panelButtonTitleCancel}>Cancel</Text>
+        </TouchableOpacity>
+      </View>
+    </BottomDrawer>
+  );
+};
+
+const styles = StyleSheet.create({
+  panel: {
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  panelButtonTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: 'black',
+  },
+  icon: {
+    height: 25,
+    width: 25,
+    marginLeft: SCREEN_WIDTH * 0.3,
+    marginRight: 25,
+  },
+  panelButtonTitleCancel: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: TAGG_TEXT_LIGHT_BLUE,
+  },
+  divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
+});
+
+export default GenericMoreInfoDrawer;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index f6521497..661d2f52 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -16,3 +16,4 @@ export {default as PostCarousel} from './PostCarousel';
 export {default as TaggDatePicker} from './TaggDatePicker';
 export {default as BottomDrawer} from './BottomDrawer';
 export {default as TaggLoadingTndicator} from './TaggLoadingIndicator';
+export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
new file mode 100644
index 00000000..18462cbb
--- /dev/null
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {Alert, TouchableOpacity} from 'react-native';
+import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
+import {deleteMoment} from '../../services';
+import {GenericMoreInfoDrawer} from '../common';
+
+interface MomentMoreInfoDrawerProps {
+  isOpen: boolean;
+  setIsOpen: (visible: boolean) => void;
+  momentId: string;
+  dismissScreenAndUpdate: Function;
+}
+
+const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
+  const {momentId, setIsOpen, dismissScreenAndUpdate} = props;
+
+  const handleDeleteMoment = async () => {
+    setIsOpen(false);
+    deleteMoment(momentId).then((success) => {
+      if (success) {
+        // set time out for UI transitions
+        setTimeout(() => {
+          Alert.alert('Moment deleted!', '', [
+            {
+              text: 'OK',
+              onPress: () => dismissScreenAndUpdate(),
+              style: 'cancel',
+            },
+          ]);
+        }, 500);
+      } else {
+        setTimeout(() => {
+          Alert.alert(
+            'We were unable to delete that moment 😭 , please try again later!',
+          );
+        }, 500);
+      }
+    });
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={() => {
+          setIsOpen(true);
+        }}>
+        <MoreIcon height={30} width={30} color={'white'} />
+      </TouchableOpacity>
+      <GenericMoreInfoDrawer
+        {...props}
+        showIcons={false}
+        buttons={[['Delete Moment', handleDeleteMoment]]}
+      />
+    </>
+  );
+};
+
+export default MomentMoreInfoDrawer;
diff --git a/src/components/profile/MoreInfoDrawer.tsx b/src/components/profile/MoreInfoDrawer.tsx
deleted file mode 100644
index a8908b4d..00000000
--- a/src/components/profile/MoreInfoDrawer.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import React, {useContext} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {BottomDrawer} from '../common';
-import PersonOutline from '../../assets/ionicons/person-outline.svg';
-import {useSelector} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
-
-interface MoreInfoDrawerProps {
-  isOpen: boolean;
-  setIsOpen: (visible: boolean) => void;
-}
-
-const MoreInfoDrawer: React.FC<MoreInfoDrawerProps> = (props) => {
-  const insets = useSafeAreaInsets();
-  const initialSnapPosition = 160 + insets.bottom;
-  const navigation = useNavigation();
-  const {
-    user: {userId, username},
-  } = useSelector((state: RootState) => state.user);
-
-  const goToEditProfile = () => {
-    navigation.push('EditProfile', {
-      userId: userId,
-      username: username,
-    });
-    props.setIsOpen(false);
-  };
-
-  return (
-    <BottomDrawer
-      {...props}
-      showHeader={false}
-      initialSnapPosition={initialSnapPosition}>
-      <View style={styles.panel}>
-        <TouchableOpacity style={styles.panelButton} onPress={goToEditProfile}>
-          <PersonOutline style={styles.icon} />
-          <Text style={styles.panelButtonTitle}>Edit Profile</Text>
-        </TouchableOpacity>
-        <View style={styles.divider} />
-        <TouchableOpacity
-          style={styles.panelButton}
-          onPress={() => props.setIsOpen(false)}>
-          {/* Just a placeholder "icon" for easier alignment */}
-          <View style={styles.icon} />
-          <Text style={styles.panelButtonTitleCancel}>Cancel</Text>
-        </TouchableOpacity>
-      </View>
-    </BottomDrawer>
-  );
-};
-
-const styles = StyleSheet.create({
-  panel: {
-    height: SCREEN_HEIGHT,
-    backgroundColor: 'white',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-  },
-  panelButton: {
-    height: 80,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  panelButtonTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: 'black',
-  },
-  icon: {
-    height: 25,
-    width: 25,
-    color: 'black',
-    marginLeft: SCREEN_WIDTH * 0.3,
-    marginRight: 25,
-  },
-  panelButtonTitleCancel: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
-  },
-  divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
-});
-
-export default MoreInfoDrawer;
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 621aae9a..677728d2 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,14 +1,12 @@
-import React, {useState, useContext} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
-import {TAGG_DARK_BLUE} from '../../constants';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import Avatar from './Avatar';
-import MoreInfoDrawer from './MoreInfoDrawer';
-import FollowCount from './FollowCount';
+import React, {useState} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import Avatar from './Avatar';
+import FollowCount from './FollowCount';
+import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
 
 type ProfileHeaderProps = {
   userXId: string;
@@ -25,16 +23,10 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
   return (
     <View style={styles.container}>
       {!userXId && (
-        <>
-          <TouchableOpacity
-            style={styles.more}
-            onPress={() => {
-              setDrawerVisible(true);
-            }}>
-            <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
-          </TouchableOpacity>
-          <MoreInfoDrawer isOpen={drawerVisible} setIsOpen={setDrawerVisible} />
-        </>
+        <ProfileMoreInfoDrawer
+          isOpen={drawerVisible}
+          setIsOpen={setDrawerVisible}
+        />
       )}
       <View style={styles.row}>
         <Avatar
@@ -91,12 +83,6 @@ const styles = StyleSheet.create({
   follows: {
     marginHorizontal: SCREEN_HEIGHT / 50,
   },
-  more: {
-    position: 'absolute',
-    right: '5%',
-    marginTop: '4%',
-    zIndex: 1,
-  },
 });
 
 export default ProfileHeader;
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
new file mode 100644
index 00000000..4fe24128
--- /dev/null
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -0,0 +1,90 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, TouchableOpacity} from 'react-native';
+import {useSelector} from 'react-redux';
+import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
+import PersonOutline from '../../assets/ionicons/person-outline.svg';
+import {TAGG_DARK_BLUE, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootreducer';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {GenericMoreInfoDrawer} from '../common';
+
+interface ProfileMoreInfoDrawerProps {
+  isOpen: boolean;
+  setIsOpen: (visible: boolean) => void;
+}
+
+const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
+  const {setIsOpen} = props;
+  const navigation = useNavigation();
+  const {
+    user: {userId, username},
+  } = useSelector((state: RootState) => state.user);
+
+  const goToEditProfile = () => {
+    navigation.push('EditProfile', {
+      userId: userId,
+      username: username,
+    });
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        style={styles.more}
+        onPress={() => {
+          setIsOpen(true);
+        }}>
+        <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
+      </TouchableOpacity>
+      <GenericMoreInfoDrawer
+        {...props}
+        showIcons={true}
+        buttons={[
+          ['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
+        ]}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  panel: {
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  panelButton: {
+    height: 80,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  panelButtonTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: 'black',
+  },
+  icon: {
+    height: 25,
+    width: 25,
+    color: 'black',
+    marginLeft: SCREEN_WIDTH * 0.3,
+    marginRight: 25,
+  },
+  panelButtonTitleCancel: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: TAGG_TEXT_LIGHT_BLUE,
+  },
+  divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
+  more: {
+    position: 'absolute',
+    right: '5%',
+    marginTop: '4%',
+    zIndex: 1,
+  },
+});
+
+export default ProfileMoreInfoDrawer;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index 0f57347b..dc3872b1 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -5,4 +5,5 @@ export {default as ProfileBody} from './ProfileBody';
 export {default as ProfileHeader} from './ProfileHeader';
 export {default as ProfilePreview} from './ProfilePreview';
 export {default as Followers} from './Followers';
-export {default as MoreInfoDrawer} from './MoreInfoDrawer';
+export {default as ProfileMoreInfoDrawer} from './ProfileMoreInfoDrawer';
+export {default as MomentMoreInfoDrawer} from './MomentMoreInfoDrawer';