Merge pull request #356 from shravyaramesh/tma767-message-button

[TMA767] Message button

2 files changed, 39 insertions, 47 deletions

diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index daea9984..f9db0c77 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,7 +1,6 @@
-import AsyncStorage from '@react-native-community/async-storage';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext, useEffect, useMemo, useState} from 'react';
-import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
+import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
 import {useStore} from 'react-redux';
 import {ChannelList, Chat} from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
@@ -18,8 +17,9 @@ import {
   LocalReactionType,
   LocalUserType,
 } from '../../types';
-
+import {connectChatAccount} from '../../utils';
 import NewChatModal from './NewChatModal';
+
 type ChatListScreenNavigationProp = StackNavigationProp<
   MainStackParams,
   'ChatList'
@@ -30,11 +30,9 @@ interface ChatListScreenProps {
 /*
  * Screen that displays all of the user's active conversations.
  */
-const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
-  const {chatClient, setChannel} = useContext(ChatContext);
+const ChatListScreen: React.FC<ChatListScreenProps> = () => {
+  const {chatClient} = useContext(ChatContext);
   const [modalVisible, setChatModalVisible] = useState(false);
-
-  const [clientReady, setClientReady] = useState(false);
   const state: RootState = useStore().getState();
   const loggedInUserId = state.user.user.userId;
 
@@ -47,21 +45,16 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
   );
 
   useEffect(() => {
-    const setupClient = async () => {
-      const chatToken = await AsyncStorage.getItem('chatToken');
-      await chatClient.connectUser(
-        {
-          id: loggedInUserId,
-        },
-        chatToken,
-      );
-      return setClientReady(true);
-    };
-    if (!clientReady) {
-      setupClient().catch((err) => {
-        console.error(err);
+    connectChatAccount(loggedInUserId, chatClient)
+      .then((success) => {
+        if (!success) {
+          Alert.alert('Something wrong with chat');
+        }
+      })
+      .catch((err) => {
+        console.log('Error connecting to chat: ', err);
+        Alert.alert('Something wrong with chat');
       });
-    }
   }, []);
 
   return (
@@ -73,31 +66,29 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
             setChatModalVisible(true);
           }}
         />
-        {clientReady && (
-          <Chat client={chatClient}>
-            <View style={styles.chatContainer}>
-              <ChannelList<
-                LocalAttachmentType,
-                LocalChannelType,
-                LocalCommandType,
-                LocalEventType,
-                LocalMessageType,
-                LocalReactionType,
-                LocalUserType
-              >
-                filters={memoizedFilters}
-                options={{
-                  presence: true,
-                  state: true,
-                  watch: true,
-                }}
-                sort={{last_message_at: -1}}
-                maxUnreadCount={99}
-                Preview={ChannelPreview}
-              />
-            </View>
-          </Chat>
-        )}
+        <Chat client={chatClient}>
+          <View style={styles.chatContainer}>
+            <ChannelList<
+              LocalAttachmentType,
+              LocalChannelType,
+              LocalCommandType,
+              LocalEventType,
+              LocalMessageType,
+              LocalReactionType,
+              LocalUserType
+            >
+              filters={memoizedFilters}
+              options={{
+                presence: true,
+                state: true,
+                watch: true,
+              }}
+              sort={{last_message_at: -1}}
+              maxUnreadCount={99}
+              Preview={ChannelPreview}
+            />
+          </View>
+        </Chat>
         <NewChatModal {...{modalVisible, setChatModalVisible}} />
       </SafeAreaView>
       <TabsGradient />
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 59c53c99..1554274d 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -12,6 +12,7 @@ import {
 import {ChatContext} from '../../App';
 import ChatHeader from '../../components/messages/ChatHeader';
 import {MainStackParams} from '../../routes';
+import {ScreenType} from '../../types';
 import {isIPhoneX} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
@@ -32,7 +33,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         // unable to figure out the padding issue, a hacky solution
         {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
       ]}>
-      <ChatHeader />
+      <ChatHeader screenType={ScreenType.Chat} />
       <Chat client={chatClient}>
         <Channel channel={channel} keyboardVerticalOffset={0}>
           <MessageList onThreadSelect={() => {}} />