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

5 files changed, 220 insertions, 2 deletions

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';