Merge branch 'master' into tma728-select-school-onboarding

# Conflicts:
#	src/services/UserProfileService.ts
#	src/types/types.ts

2 files changed, 29 insertions, 9 deletions

diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
index 88e0c308..79453ade 100644
--- a/src/components/moments/IndividualMomentTitleBar.tsx
+++ b/src/components/moments/IndividualMomentTitleBar.tsx
@@ -29,14 +29,14 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     height: '5%',
   },
   headerContainer: {
-    flexShrink: 1,
-    marginLeft: '11%',
+    width: '80%',
   },
   header: {
+    textAlign: 'center',
     color: 'white',
     fontSize: normalize(18),
     fontWeight: '700',
@@ -44,10 +44,9 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(1.3),
   },
   closeButton: {
-    position: 'absolute',
     height: '50%',
     aspectRatio: 1,
-    left: '3%',
+    left: '8%',
   },
 });
 
diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx
index aad776e8..ff324c4a 100644
--- a/src/components/moments/MomentPostHeader.tsx
+++ b/src/components/moments/MomentPostHeader.tsx
@@ -1,12 +1,19 @@
 import React, {useState} from 'react';
-import {StyleSheet, Text, View, ViewProps} from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from 'react-native';
 import {MomentMoreInfoDrawer} from '../profile';
 import {loadUserMoments} from '../../store/actions';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch, useSelector, useStore} from 'react-redux';
 import {ScreenType} from '../../types';
 import Avatar from '../profile/Avatar';
 import {useNavigation} from '@react-navigation/native';
 import {RootState} from '../../store/rootReducer';
+import {fetchUserX, userXInStore} from '../../utils';
 
 interface MomentPostHeaderProps extends ViewProps {
   userXId?: string;
@@ -24,22 +31,36 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
 }) => {
   const [drawerVisible, setDrawerVisible] = useState(false);
   const dispatch = useDispatch();
+  const state: RootState = useStore().getState();
   const navigation = useNavigation();
   const {userId: loggedInUserId, username: loggedInUserName} = useSelector(
     (state: RootState) => state.user.user,
   );
   const isOwnProfile = loggedInUserName === username;
+  const navigateToProfile = async () => {
+    if (userXId && !userXInStore(state, screenType, userXId)) {
+      await fetchUserX(
+        dispatch,
+        {userId: userXId, username: username},
+        screenType,
+      );
+    }
+    navigation.navigate('Profile', {
+      userXId: isOwnProfile ? undefined : userXId,
+      screenType,
+    });
+  };
 
   return (
     <View style={[styles.container, style]}>
-      <View style={styles.header}>
+      <TouchableOpacity onPress={navigateToProfile} style={styles.header}>
         <Avatar
           style={styles.avatar}
           userXId={userXId}
           screenType={screenType}
         />
         <Text style={styles.headerText}>{username}</Text>
-      </View>
+      </TouchableOpacity>
       <MomentMoreInfoDrawer
         isOpen={drawerVisible}
         setIsOpen={setDrawerVisible}