2 files changed, 64 insertions, 33 deletions

diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx
index 2bc096ec..67a7f1fe 100644
--- a/src/components/messages/ChatHeader.tsx
+++ b/src/components/messages/ChatHeader.tsx
@@ -1,39 +1,71 @@
+import {useNavigation} from '@react-navigation/native';
 import React, {useContext} from 'react';
 import {Image, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
-import {useStore} from 'react-redux';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useDispatch, useStore} from 'react-redux';
 import {ChatContext} from '../../App';
-import {ChatHeaderHeight, normalize, StatusBarHeight} from '../../utils';
+import {ScreenType} from '../../types';
+import {
+  ChatHeaderHeight,
+  fetchUserX,
+  normalize,
+  StatusBarHeight,
+  userXInStore,
+} from '../../utils';
 import {formatLastSeenText, getMember, isOnline} from '../../utils/messages';
 
-type ChatHeaderProps = {};
+type ChatHeaderProps = {
+  screenType: ScreenType;
+};
 
-const ChatHeader: React.FC<ChatHeaderProps> = () => {
+const ChatHeader: React.FC<ChatHeaderProps> = (props) => {
+  const {screenType} = props;
   const {channel} = useContext(ChatContext);
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
   const state = useStore().getState();
   const member = getMember(channel, state);
   const online = isOnline(member?.user?.last_active);
   const lastSeen = formatLastSeenText(member?.user?.last_active);
 
+  const toProfile = async () => {
+    if (member && member.user && member.user.username) {
+      if (!userXInStore(state, screenType, member.user.id)) {
+        await fetchUserX(
+          dispatch,
+          {userId: member.user.id, username: member.user.username},
+          screenType,
+        );
+      }
+      navigation.navigate('Profile', {
+        userXId: member.user.id,
+        screenType,
+      });
+    }
+  };
+
   return (
     <View style={styles.container}>
-      <View>
-        <Image
-          style={styles.avatar}
-          source={
-            member
-              ? {uri: member.user?.thumbnail_url}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
-        />
-        {online && <View style={styles.online} />}
-      </View>
-      <View style={styles.content}>
-        <Text style={styles.name} numberOfLines={1}>
-          {member?.user?.first_name} {member?.user?.last_name}
-        </Text>
-        <Text style={styles.lastSeen}>{lastSeen}</Text>
-      </View>
+      <TouchableOpacity style={styles.tappables} onPress={toProfile}>
+        <View>
+          <Image
+            style={styles.avatar}
+            source={
+              member
+                ? {uri: member.user?.thumbnail_url}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+          {online && <View style={styles.online} />}
+        </View>
+        <View style={styles.content}>
+          <Text style={styles.name} numberOfLines={1}>
+            {member?.user?.first_name} {member?.user?.last_name}
+          </Text>
+          <Text style={styles.lastSeen}>{lastSeen}</Text>
+        </View>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -41,10 +73,13 @@ const ChatHeader: React.FC<ChatHeaderProps> = () => {
 const styles = StyleSheet.create({
   container: {
     height: ChatHeaderHeight - StatusBarHeight,
-    flexDirection: 'row',
-    alignItems: 'center',
     paddingLeft: '15%',
   },
+  tappables: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: '100%',
+  },
   avatar: {
     width: normalize(40),
     height: normalize(40),
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 00532507..527036f6 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -22,6 +22,7 @@ import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
 import {
   connectChatAccount,
+  createChannel,
   getUserAsProfilePreviewType,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
@@ -30,6 +31,8 @@ import {FriendsButton, BasicButton} from '../common';
 import ToggleButton from './ToggleButton';
 import {ChatContext} from '../../App';
 import {useNavigation} from '@react-navigation/core';
+import {ChatListScreen} from '../../screens';
+import {ERROR_UNABLE_CONNECT_CHAT} from '../../constants/strings';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
@@ -97,19 +100,12 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
   };
 
   const onPressMessage = async () => {
-    let connected: boolean = await connectChatAccount(
-      loggedInUserId,
-      chatClient,
-    );
-    if (connected) {
-      const channel = chatClient.channel('messaging', {
-        members: [loggedInUserId, String(userXId)],
-      });
-      channel.create();
+    if (chatClient.user && userXId) {
+      const channel = await createChannel(loggedInUserId, userXId, chatClient);
       setChannel(channel);
       navigation.navigate('Chat');
     } else {
-      Alert.alert('Something wrong with chat');
+      Alert.alert(ERROR_UNABLE_CONNECT_CHAT);
     }
   };