[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 ?

16 files changed, 366 insertions, 211 deletions

diff --git a/src/assets/ionicons/close-outline.svg b/src/assets/ionicons/close-outline.svg
new file mode 100644
index 00000000..4e8abc1c
--- /dev/null
+++ b/src/assets/ionicons/close-outline.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Close</title><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368L144 144M368 144L144 368'/></svg>
\ No newline at end of file
diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index d210c39a..325e2788 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -1,8 +1,8 @@
+import {useNavigation} from '@react-navigation/native';
 import * as React from 'react';
-import {Text} from 'react-native-animatable';
 import {StyleSheet, TouchableOpacity} from 'react-native';
+import {Text} from 'react-native-animatable';
 import CommentIcon from '../../assets/icons/moment-comment-icon.svg';
-import {useNavigation} from '@react-navigation/native';
 import {ScreenType} from '../../types';
 
 /**
@@ -11,20 +11,20 @@ import {ScreenType} from '../../types';
  */
 
 type CommentsCountProps = {
-  comments_count: string;
-  moment_id: string;
+  commentsCount: string;
+  momentId: string;
   screenType: ScreenType;
 };
 
 const CommentsCount: React.FC<CommentsCountProps> = ({
-  comments_count,
-  moment_id,
+  commentsCount,
+  momentId,
   screenType,
 }) => {
   const navigation = useNavigation();
   const navigateToCommentsScreen = async () => {
     navigation.push('MomentCommentsScreen', {
-      moment_id,
+      moment_id: momentId,
       screenType,
     });
   };
@@ -33,7 +33,7 @@ const CommentsCount: React.FC<CommentsCountProps> = ({
       <TouchableOpacity onPress={() => navigateToCommentsScreen()}>
         <CommentIcon style={styles.image} />
         <Text style={styles.count}>
-          {comments_count !== '0' ? comments_count : ''}
+          {commentsCount !== '0' ? commentsCount : ''}
         </Text>
       </TouchableOpacity>
     </>
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index 5c58f903..3607ef8f 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
   panelButtonTitle: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: 'black',
+    color: 'red',
   },
   icon: {
     height: 25,
diff --git a/src/components/moments/CaptionScreenHeader.tsx b/src/components/moments/CaptionScreenHeader.tsx
index 4715b4ef..46dfddfe 100644
--- a/src/components/moments/CaptionScreenHeader.tsx
+++ b/src/components/moments/CaptionScreenHeader.tsx
@@ -20,7 +20,8 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'center',
-    height: 30,
+    alignItems: 'center',
+    height: '5%',
   },
   headerContainer: {
     position: 'absolute',
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
new file mode 100644
index 00000000..bd5b307f
--- /dev/null
+++ b/src/components/moments/IndividualMomentTitleBar.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+import {Text, View, StyleSheet, ViewProps} from 'react-native';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+
+interface IndividualMomentTitleBarProps extends ViewProps {
+  title: string;
+  close: () => void;
+}
+const IndividualMomentTitleBar: React.FC<IndividualMomentTitleBarProps> = ({
+  title,
+  close,
+  style,
+}) => {
+  return (
+    <View style={[styles.container, style]}>
+      <TouchableOpacity style={styles.closeButton} onPress={close}>
+        <CloseIcon height={'100%'} width={'100%'} color={'white'} />
+      </TouchableOpacity>
+      <Text style={styles.header}>{title}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '5%',
+  },
+  header: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  closeButton: {
+    position: 'absolute',
+    height: '50%',
+    aspectRatio: 1,
+    left: '3%',
+  },
+});
+
+export default IndividualMomentTitleBar;
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
new file mode 100644
index 00000000..93271fa1
--- /dev/null
+++ b/src/components/moments/MomentPostContent.tsx
@@ -0,0 +1,85 @@
+import React, {useEffect} from 'react';
+import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
+import {getMomentCommentsCount} from '../../services';
+import {ScreenType} from '../../types';
+import {getTimePosted, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {CommentsCount} from '../comments';
+
+interface MomentPostContentProps extends ViewProps {
+  screenType: ScreenType;
+  momentId: string;
+  caption: string;
+  pathHash: string;
+  dateTime: string;
+}
+const MomentPostContent: React.FC<MomentPostContentProps> = ({
+  screenType,
+  momentId,
+  caption,
+  pathHash,
+  dateTime,
+  style,
+}) => {
+  const [elapsedTime, setElapsedTime] = React.useState<string>();
+  const [comments_count, setCommentsCount] = React.useState('');
+
+  useEffect(() => {
+    setElapsedTime(getTimePosted(dateTime));
+    getMomentCommentsCount(momentId, setCommentsCount);
+  }, [dateTime, momentId]);
+  return (
+    <View style={[styles.container, style]}>
+      <Image
+        style={styles.image}
+        source={{uri: pathHash}}
+        resizeMode={'cover'}
+      />
+      <View style={styles.footerContainer}>
+        <CommentsCount
+          commentsCount={comments_count}
+          momentId={momentId}
+          screenType={screenType}
+        />
+        <Text style={styles.text}>{elapsedTime}</Text>
+      </View>
+      <Text style={styles.captionText}>{caption}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: SCREEN_HEIGHT,
+  },
+  image: {
+    width: SCREEN_WIDTH,
+    aspectRatio: 1,
+    marginBottom: '3%',
+  },
+  footerContainer: {
+    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',
+  },
+});
+export default MomentPostContent;
diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx
new file mode 100644
index 00000000..810ccea9
--- /dev/null
+++ b/src/components/moments/MomentPostHeader.tsx
@@ -0,0 +1,84 @@
+import React, {useState} from 'react';
+import {StyleSheet, Text, View, ViewProps} from 'react-native';
+import {MomentMoreInfoDrawer} from '..';
+import {loadUserMoments} from '../../store/actions';
+import {useDispatch, useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+import Avatar from '../profile/Avatar';
+import {useNavigation} from '@react-navigation/native';
+import {RootState} from '../../store/rootReducer';
+
+interface MomentPostHeaderProps extends ViewProps {
+  userXId?: string;
+  screenType: ScreenType;
+  username: string;
+  momentId: string;
+}
+
+const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
+  userXId,
+  screenType,
+  username,
+  momentId,
+  style,
+}) => {
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
+  const {userId: loggedInUserId, username: loggedInUserName} = useSelector(
+    (state: RootState) => state.user.user,
+  );
+  const isOwnProfile = loggedInUserName === username;
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.header}>
+        <Avatar
+          style={styles.avatar}
+          userXId={userXId}
+          screenType={screenType}
+        />
+        <Text style={styles.headerText}>{username}</Text>
+      </View>
+      <MomentMoreInfoDrawer
+        isOpen={drawerVisible}
+        setIsOpen={setDrawerVisible}
+        momentId={momentId}
+        isOwnProfile={isOwnProfile}
+        dismissScreenAndUpdate={() => {
+          dispatch(loadUserMoments(loggedInUserId));
+          navigation.pop();
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: '2%',
+  },
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flex: 1,
+  },
+  avatar: {
+    flex: 0.2,
+    aspectRatio: 1,
+    borderRadius: 999999,
+    marginLeft: '3%',
+  },
+  headerText: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: 'white',
+    paddingHorizontal: '3%',
+    flex: 1,
+  },
+});
+export default MomentPostHeader;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index 339e0e19..89fd689c 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -1,2 +1,5 @@
-export {default as CaptionScreenHeader} from '../moments/CaptionScreenHeader';
+export {default as IndividualMomentTitleBar} from './IndividualMomentTitleBar';
+export {default as CaptionScreenHeader} from './CaptionScreenHeader';
+export {default as MomentPostHeader} from './MomentPostHeader';
+export {default as MomentPostContent} from './MomentPostContent';
 export {default as Moment} from './Moment';
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;
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index cb45ead6..38a987f7 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -30,7 +30,7 @@ const Routes: React.FC = () => {
     } else {
       SplashScreen.hide();
     }
-  }, [userId, userLogin]);
+  }, [dispatch, userId]);
 
   return userId ? <NavigationBar /> : <Onboarding />;
 };
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>
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index ed868582..96643bc3 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -69,9 +69,9 @@ export const postMomentComment = async (
 export const getMomentCommentsCount = async (
   momentId: string,
   callback: Function,
-  token: string,
 ) => {
   try {
+    const token = await AsyncStorage.getItem('token');
     const response = await fetch(COMMENTS_ENDPOINT + `${momentId}/`, {
       method: 'GET',
       headers: {
diff --git a/src/services/ReportingService.ts b/src/services/ReportingService.ts
index 2650a703..1563d086 100644
--- a/src/services/ReportingService.ts
+++ b/src/services/ReportingService.ts
@@ -2,14 +2,15 @@
 
 import {REPORT_ISSUE_ENDPOINT} from '../constants';
 import {Alert} from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
 
 export const sendReport = async (
   moment_id: string,
   message: string,
-  token: string,
-  callback: Function,
+  callback?: Function,
 ) => {
   try {
+    let token = await AsyncStorage.getItem('token');
     let response = await fetch(REPORT_ISSUE_ENDPOINT, {
       method: 'POST',
       body: JSON.stringify({
@@ -28,7 +29,9 @@ export const sendReport = async (
     } else {
       Alert.alert('Something went wrong!', 'Please try again.');
     }
-    callback(false);
+    if (callback) {
+      callback();
+    }
   } catch (error) {
     Alert.alert('Something went wrong!', 'Please try again.');
     console.log(
diff --git a/src/types/types.ts b/src/types/types.ts
index bfd0cd93..e25d1ca7 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -73,11 +73,11 @@ export interface LinkerType {
 }
 
 export interface MomentType {
+  moment_id: string;
   caption: string;
   date_time: string;
   moment_category: string;
   path_hash: string;
-  moment_id: string;
 }
 
 export interface CommentType {