Merge pull request #355 from IvanIFChen/tma769-styling-channel-list-screen

[TMA-769] Styling chat list screen

1 files changed, 14 insertions, 6 deletions

diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
index d8445580..660da97d 100644
--- a/src/components/messages/MessagesHeader.tsx
+++ b/src/components/messages/MessagesHeader.tsx
@@ -1,23 +1,31 @@
-import * as React from 'react';
+import React, {Fragment, useContext} 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';
 
 type MessagesHeaderProps = {
   createChannel: () => void;
 };
 
 const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
+  const {chatClient} = useContext(ChatContext);
+  const unread = chatClient.user?.total_unread_count as number;
   return (
     <View style={styles.header}>
       <Text style={styles.headerText}>Messages</Text>
-      <Text style={styles.unreadText}>2 unread</Text>
+      {unread && unread !== 0 ? (
+        <Text style={styles.unreadText}>
+          {unread > 99 ? '99+' : unread} unread
+        </Text>
+      ) : (
+        <Fragment />
+      )}
       <View style={styles.flex} />
-      <TouchableOpacity
-        style={styles.compose}
-        onPress={createChannel}>
-        <Text>Compose</Text>
+      <TouchableOpacity style={styles.compose} onPress={createChannel}>
+        <ComposeIcon width={normalize(20)} height={normalize(20)} />
       </TouchableOpacity>
     </View>
   );