[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, 73 insertions, 182 deletions

diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index d1b21d0f..469c648e 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,30 +1,18 @@
-import AsyncStorage from '@react-native-community/async-storage';
 import {BlurView} from '@react-native-community/blur';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-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 {useDispatch, useSelector} from 'react-redux';
+import React from 'react';
+import {FlatList, StyleSheet, View} from 'react-native';
+import {useSelector} from 'react-redux';
 import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
 import {
-  CaptionScreenHeader,
-  CommentsCount,
-  MomentMoreInfoDrawer,
+  IndividualMomentTitleBar,
+  MomentPostContent,
+  MomentPostHeader,
 } from '../../components';
-import {getMomentCommentsCount} from '../../services';
-import {sendReport} from '../../services/ReportingService';
-import {loadUserMoments, logout} from '../../store/actions';
-import {DUMMY_USERNAME} from '../../store/initialStates';
 import {RootState} from '../../store/rootreducer';
-import {
-  getTimePosted,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-  StatusBarHeight,
-} from '../../utils';
+import {MomentType} from '../../types';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 
 /**
  * Individual moment view opened when user clicks on a moment tile
@@ -42,89 +30,52 @@ interface IndividualMomentProps {
   navigation: IndividualMomentNavigationProp;
 }
 
+const ITEM_HEIGHT = SCREEN_HEIGHT * (9 / 10);
+
 const IndividualMoment: React.FC<IndividualMomentProps> = ({
   route,
   navigation,
 }) => {
-  const {
-    moment_category,
-    path_hash,
-    date_time,
-    moment_id,
-  } = route.params.moment;
+  const {moment_category, moment_id} = route.params.moment;
   const {userXId, screenType} = route.params;
-
-  const {
-    user: {userId: loggedInUserId, username: loggedInUsername},
-  } = useSelector((state: RootState) => state.user);
-
+  const {username: loggedInUsername} = useSelector(
+    (state: RootState) => state.user.user,
+  );
   const {
     user: {username},
   } = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : {user: {username: DUMMY_USERNAME}};
+    : useSelector((state: RootState) => state.user);
 
-  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 [drawerVisible, setDrawerVisible] = useState(false);
-
-  useEffect(() => {
-    const timePeriod = async () => {
-      setElapsedTime(getTimePosted(date_time));
-    };
-
-    const loadComments = async () => {
-      const token = await AsyncStorage.getItem('token');
-      if (!token) {
-        dispatch(logout());
-        return;
-      }
-      getMomentCommentsCount(moment_id, setCommentsCount, token);
-    };
+  const {moments} = userXId
+    ? useSelector((state: RootState) => state.userX[screenType][userXId])
+    : useSelector((state: RootState) => state.moments);
 
-    timePeriod();
-    loadComments();
-  }, [date_time, dispatch, loggedInUserId, moment_id]);
+  const isOwnProfile = username === loggedInUsername;
+  const momentData = moments.filter(
+    (m) => m.moment_category === moment_category,
+  );
+  const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
 
-  const sendReportAlert = async () => {
-    const token = await AsyncStorage.getItem('token');
-    setIsReporting(true);
-    Alert.alert(
-      'Report Issue',
-      undefined,
-      [
-        {
-          text: 'Mark as inappropriate',
-          onPress: () =>
-            sendReport(
-              moment_id,
-              'Mark as inappropriate',
-              token ? token : '',
-              setIsReporting,
-            ),
-        },
-        {
-          text: 'Cancel',
-          onPress: () => setIsReporting(false),
-          style: 'cancel',
-        },
-        {
-          text: 'Mark as abusive',
-          onPress: () =>
-            sendReport(
-              moment_id,
-              'Mark as abusive',
-              token ? token : '',
-              setIsReporting,
-            ),
-        },
-      ],
-      {cancelable: false},
-    );
-  };
+  const renderMomentPost = ({item}: {item: MomentType}) => (
+    <View style={styles.postContainer}>
+      <MomentPostHeader
+        userXId={userXId}
+        screenType={screenType}
+        username={isOwnProfile ? loggedInUsername : username}
+        momentId={item.moment_id}
+        style={styles.postHeader}
+      />
+      <MomentPostContent
+        style={styles.postContent}
+        momentId={item.moment_id}
+        caption={item.caption}
+        pathHash={item.path_hash}
+        dateTime={item.date_time}
+        screenType={screenType}
+      />
+    </View>
+  );
 
   return (
     <BlurView
@@ -132,119 +83,59 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
       blurAmount={10}
       reducedTransparencyFallbackColor="white"
       style={styles.contentContainer}>
-      <View style={styles.buttonsContainer}>
-        <Button
-          title="Close"
-          buttonStyle={styles.button}
-          onPress={() => {
-            navigation.pop();
-          }}
-        />
-        {!userXId && (
-          <MomentMoreInfoDrawer
-            isOpen={drawerVisible}
-            setIsOpen={setDrawerVisible}
-            momentId={moment_id}
-            dismissScreenAndUpdate={() => {
-              dispatch(loadUserMoments(loggedInUserId));
-              navigation.pop();
-            }}
-          />
-        )}
-      </View>
-      <CaptionScreenHeader
+      <IndividualMomentTitleBar
         style={styles.header}
+        close={() => navigation.pop()}
         {...{title: moment_category}}
       />
-      <Image
-        style={styles.image}
-        source={{uri: path_hash}}
-        resizeMode={'cover'}
-      />
-
-      <View style={styles.bodyContainer}>
-        <CommentsCount
-          comments_count={comments_count}
-          moment_id={moment_id}
-          screenType={screenType}
+      <View style={styles.content}>
+        <FlatList
+          data={momentData}
+          renderItem={renderMomentPost}
+          keyExtractor={(item, index) => index.toString()}
+          showsVerticalScrollIndicator={false}
+          snapToAlignment={'start'}
+          snapToInterval={ITEM_HEIGHT}
+          decelerationRate={'fast'}
+          initialScrollIndex={initialIndex}
+          getItemLayout={(data, index) => ({
+            length: ITEM_HEIGHT,
+            offset: ITEM_HEIGHT * index,
+            index,
+          })}
+          pagingEnabled
         />
-        <Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
       </View>
-      <Animated.Text style={styles.captionText}>
-        {route.params.moment.caption}
-      </Animated.Text>
-      {userXId && !isOwnProfile && !isReporting && (
-        <TouchableOpacity onPress={sendReportAlert}>
-          <Animated.Text style={styles.reportIssue}>
-            {'Report an issue'}
-          </Animated.Text>
-        </TouchableOpacity>
-      )}
     </BlurView>
   );
 };
 const styles = StyleSheet.create({
   contentContainer: {
     width: SCREEN_WIDTH,
-    paddingTop: StatusBarHeight,
     height: SCREEN_HEIGHT,
-    flex: 2,
-    flexDirection: 'column',
+    paddingTop: StatusBarHeight,
+    flex: 1,
     paddingBottom: 0,
   },
-  buttonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginLeft: '3%',
-    marginRight: '3%',
-  },
-  button: {
-    backgroundColor: 'transparent',
-  },
   shareButtonTitle: {
     fontWeight: 'bold',
     color: '#6EE7E7',
   },
+  content: {
+    flex: 9,
+  },
   header: {
-    marginVertical: 20,
+    flex: 1,
   },
-  image: {
-    position: 'relative',
+  postContainer: {
+    height: ITEM_HEIGHT,
     width: SCREEN_WIDTH,
-    aspectRatio: 1,
-    marginBottom: '3%',
-  },
-  bodyContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginLeft: '7%',
-    marginRight: '5%',
-    marginBottom: '2%',
-  },
-  text: {
-    position: 'relative',
-    paddingBottom: '1%',
-    paddingTop: '1%',
-    marginLeft: '7%',
-    marginRight: '2%',
-    color: '#ffffff',
-    fontWeight: 'bold',
-  },
-  captionText: {
-    position: 'relative',
-    paddingBottom: '34%',
-    paddingTop: '1%',
-    marginLeft: '5%',
-    marginRight: '5%',
-    color: '#ffffff',
-    fontWeight: 'bold',
+    flex: 1,
   },
-  reportIssue: {
-    position: 'relative',
-    color: 'white',
-    textAlign: 'center',
-    textDecorationLine: 'underline',
+  postHeader: {
+    flex: 1,
   },
+  postContent: {flex: 9},
 });
 
 export default IndividualMoment;
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 34f85c28..2cc809a3 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -48,7 +48,7 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
     if (newCommentsAvailable) {
       loadComments();
     }
-  }, [newCommentsAvailable]);
+  }, [dispatch, moment_id, newCommentsAvailable]);
 
   return (
     <CenteredView>