[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

2 files changed, 43 insertions, 40 deletions

diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index 00a043cd..ab58db41 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -31,7 +31,7 @@ import {
 } from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
 import Animated from 'react-native-reanimated';
-import {SCREEN_HEIGHT} from '../../utils';
+import {HeaderHeight, SCREEN_HEIGHT} from '../../utils';
 import {RootState} from '../../store/rootReducer';
 import {useDispatch, useSelector} from 'react-redux';
 import {loadUserData} from '../../store/actions';
@@ -70,7 +70,9 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (needsUpdate) dispatch(loadUserData({userId, username}));
+    if (needsUpdate) {
+      dispatch(loadUserData({userId, username}));
+    }
   }, [loadUserData, needsUpdate]);
 
   const [isCustomGender, setIsCustomGender] = React.useState<boolean>(
@@ -502,7 +504,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: '10%',
+    marginTop: HeaderHeight,
     flex: 1,
     flexDirection: 'column',
     width: '100%',
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 2739324e..d1b21d0f 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,34 +1,30 @@
-import React, {useEffect, useState} from 'react';
-import {StyleSheet, View, Image, Text} from 'react-native';
-import {Button} from 'react-native-elements';
+import AsyncStorage from '@react-native-community/async-storage';
 import {BlurView} from '@react-native-community/blur';
-import {
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-  StatusBarHeight,
-  getTimePosted,
-} from '../../utils';
-import {UserType} from '../../types';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {CaptionScreenHeader} from '../../components';
-import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
+import React, {useEffect, useState} from 'react';
+import {Alert, Image, StyleSheet, View} from 'react-native';
+import {Button} from 'react-native-elements';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
-import {CommentsCount} from '../../components';
-import AsyncStorage from '@react-native-community/async-storage';
+import {useDispatch, useSelector} from 'react-redux';
+import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
+import {
+  CaptionScreenHeader,
+  CommentsCount,
+  MomentMoreInfoDrawer,
+} from '../../components';
 import {getMomentCommentsCount} from '../../services';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {Alert} from 'react-native';
 import {sendReport} from '../../services/ReportingService';
-import {logout} from '../../store/actions';
-import {useDispatch, useSelector} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
+import {loadUserMoments, logout} from '../../store/actions';
 import {DUMMY_USERNAME} from '../../store/initialStates';
-
-const NO_USER: UserType = {
-  userId: '',
-  username: '',
-};
+import {RootState} from '../../store/rootreducer';
+import {
+  getTimePosted,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  StatusBarHeight,
+} from '../../utils';
 
 /**
  * Individual moment view opened when user clicks on a moment tile
@@ -59,7 +55,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
   const {userXId, screenType} = route.params;
 
   const {
-    user: {userId: loggedInUserId, username: loggedInusername},
+    user: {userId: loggedInUserId, username: loggedInUsername},
   } = useSelector((state: RootState) => state.user);
 
   const {
@@ -68,22 +64,14 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : {user: {username: DUMMY_USERNAME}};
 
-  const isOwnProfile = username === loggedInusername;
-  const [user, setUser] = useState<UserType>(NO_USER);
-  const [caption, setCaption] = React.useState(route.params.moment.caption);
+  const isOwnProfile = username === loggedInUsername;
   const [elapsedTime, setElapsedTime] = React.useState<string>();
   const [comments_count, setCommentsCount] = React.useState('');
   const [isReporting, setIsReporting] = React.useState(false);
   const dispatch = useDispatch();
-
-  const handleCaptionUpdate = (caption: string) => {
-    setCaption(caption);
-  };
+  const [drawerVisible, setDrawerVisible] = useState(false);
 
   useEffect(() => {
-    if (!loggedInUserId) {
-      setUser(NO_USER);
-    }
     const timePeriod = async () => {
       setElapsedTime(getTimePosted(date_time));
     };
@@ -99,7 +87,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
 
     timePeriod();
     loadComments();
-  }, [date_time, loggedInUserId]);
+  }, [date_time, dispatch, loggedInUserId, moment_id]);
 
   const sendReportAlert = async () => {
     const token = await AsyncStorage.getItem('token');
@@ -152,6 +140,17 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
             navigation.pop();
           }}
         />
+        {!userXId && (
+          <MomentMoreInfoDrawer
+            isOpen={drawerVisible}
+            setIsOpen={setDrawerVisible}
+            momentId={moment_id}
+            dismissScreenAndUpdate={() => {
+              dispatch(loadUserMoments(loggedInUserId));
+              navigation.pop();
+            }}
+          />
+        )}
       </View>
       <CaptionScreenHeader
         style={styles.header}
@@ -171,7 +170,9 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
         />
         <Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
       </View>
-      <Animated.Text style={styles.captionText}>{caption}</Animated.Text>
+      <Animated.Text style={styles.captionText}>
+        {route.params.moment.caption}
+      </Animated.Text>
       {userXId && !isOwnProfile && !isReporting && (
         <TouchableOpacity onPress={sendReportAlert}>
           <Animated.Text style={styles.reportIssue}>