[TMA-406&201] User Handle UI for Individual Moments (#129)

* initial work

* made big progress towards flatlist moment view

* UI done, just need to pass in data now

* minor fixes to get things actually running correctly

* vertical scroll working

* initial index working

* moment drawer text color to red

* moved report to drawer

* removed garbage

* added ?

2 files changed, 54 insertions, 12 deletions

diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/Avatar.tsx
index d3c53043..ba4ec36c 100644
--- a/src/components/profile/Avatar.tsx
+++ b/src/components/profile/Avatar.tsx
@@ -1,12 +1,13 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
 
 const PROFILE_DIM = 100;
+
 interface AvatarProps {
-  style: object;
+  style?: object;
   userXId: string | undefined;
   screenType: ScreenType;
 }
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 18462cbb..91fb3d2b 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
-import {Alert, TouchableOpacity} from 'react-native';
+import {Alert, StyleSheet, TouchableOpacity, ViewProps} from 'react-native';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
-import {deleteMoment} from '../../services';
+import {deleteMoment, sendReport} from '../../services';
 import {GenericMoreInfoDrawer} from '../common';
 
-interface MomentMoreInfoDrawerProps {
+interface MomentMoreInfoDrawerProps extends ViewProps {
   isOpen: boolean;
   setIsOpen: (visible: boolean) => void;
   momentId: string;
-  dismissScreenAndUpdate: Function;
+  isOwnProfile: boolean;
+  dismissScreenAndUpdate: () => void;
 }
 
 const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
-  const {momentId, setIsOpen, dismissScreenAndUpdate} = props;
+  const {momentId, setIsOpen, isOwnProfile, dismissScreenAndUpdate} = props;
 
   const handleDeleteMoment = async () => {
     setIsOpen(false);
@@ -38,21 +39,61 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
     });
   };
 
+  const handleReportMoment = async () => {
+    setIsOpen(false);
+    setTimeout(() => {
+      Alert.alert(
+        'Report Issue',
+        undefined,
+        [
+          {
+            text: 'Mark as inappropriate',
+            onPress: () => sendReport(momentId, 'Mark as inappropriate'),
+          },
+          {
+            text: 'Cancel',
+            style: 'cancel',
+          },
+          {
+            text: 'Mark as abusive',
+            onPress: () => sendReport(momentId, 'Mark as abusive'),
+          },
+        ],
+        {cancelable: false},
+      );
+    }, 500);
+  };
+
   return (
     <>
       <TouchableOpacity
+        style={styles.icon}
         onPress={() => {
           setIsOpen(true);
         }}>
         <MoreIcon height={30} width={30} color={'white'} />
       </TouchableOpacity>
-      <GenericMoreInfoDrawer
-        {...props}
-        showIcons={false}
-        buttons={[['Delete Moment', handleDeleteMoment]]}
-      />
+      {isOwnProfile ? (
+        <GenericMoreInfoDrawer
+          {...props}
+          showIcons={false}
+          buttons={[['Delete Moment', handleDeleteMoment]]}
+        />
+      ) : (
+        <GenericMoreInfoDrawer
+          {...props}
+          showIcons={false}
+          buttons={[['Report an Issue', handleReportMoment]]}
+        />
+      )}
     </>
   );
 };
 
+const styles = StyleSheet.create({
+  icon: {
+    marginRight: '3%',
+  },
+});
+
 export default MomentMoreInfoDrawer;