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

1 files changed, 84 insertions, 0 deletions

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;