2 files changed, 36 insertions, 45 deletions

diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index c11f4d1d..0cbc7592 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,8 +1,7 @@
-import AsyncStorage from '@react-native-community/async-storage';
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 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';
@@ -19,7 +18,7 @@ import {
   LocalReactionType,
   LocalUserType,
 } from '../../types';
-import {HeaderHeight} from '../../utils';
+import {connectChatAccount, HeaderHeight} from '../../utils';
 import NewChatModal from './NewChatModal';
 
 type ChatListScreenNavigationProp = StackNavigationProp<
@@ -35,8 +34,6 @@ interface ChatListScreenProps {
 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;
   const tabbarHeight = useBottomTabBarHeight();
@@ -59,21 +56,16 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
   };
 
   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 (
@@ -85,31 +77,29 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
             setChatModalVisible(true);
           }}
         />
-        {clientReady && (
-          <Chat client={chatClient} style={chatTheme}>
-            <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} style={chatTheme}>
+          <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 baf1e23d..3d791f3c 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -14,6 +14,7 @@ import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import ChatHeader from '../../components/messages/ChatHeader';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
+import {ScreenType} from '../../types';
 import {isIPhoneX} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
@@ -48,7 +49,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} style={chatTheme}>
         <Channel
           channel={channel}