2 files changed, 82 insertions, 28 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/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
index 660da97d..1bd9b55a 100644
--- a/src/components/messages/MessagesHeader.tsx
+++ b/src/components/messages/MessagesHeader.tsx
@@ -1,10 +1,10 @@
-import React, {Fragment, useContext} from 'react';
+import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {normalize} from '../../utils';
-import ComposeIcon from '../../assets/icons/compose.svg';
 import {ChatContext} from '../../App';
+import ComposeIcon from '../../assets/icons/compose.svg';
+import {normalize} from '../../utils';
 
 type MessagesHeaderProps = {
   createChannel: () => void;
@@ -12,11 +12,30 @@ type MessagesHeaderProps = {
 
 const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
   const {chatClient} = useContext(ChatContext);
-  const unread = chatClient.user?.total_unread_count as number;
+  const [unread, setUnread] = useState(0);
+
+  useEffect(() => {
+    const newCount = chatClient.user?.total_unread_count as number;
+    if (newCount) {
+      setUnread(newCount);
+    }
+    const listener = chatClient?.on((e) => {
+      if (e.total_unread_count) {
+        setUnread(e.total_unread_count);
+      }
+    });
+
+    return () => {
+      if (listener) {
+        listener.unsubscribe();
+      }
+    };
+  }, [chatClient]);
+
   return (
     <View style={styles.header}>
       <Text style={styles.headerText}>Messages</Text>
-      {unread && unread !== 0 ? (
+      {unread !== 0 ? (
         <Text style={styles.unreadText}>
           {unread > 99 ? '99+' : unread} unread
         </Text>