connecting user during login

7 files changed, 43 insertions, 32 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 05098d14..0d2a0331 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,4 +1,10 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {LayoutChangeEvent, RefreshControl, StyleSheet} from 'react-native';
 import Animated, {
   useSharedValue,
@@ -31,6 +37,7 @@ import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
 import PublicProfile from './PublicProfile';
 import {useScrollToTop} from '@react-navigation/native';
+import {ChatContext} from '../../App';
 
 interface ContentProps {
   userXId: string | undefined;
@@ -52,6 +59,8 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
   );
   const state: RootState = useStore().getState();
 
+  const {chatClient} = useContext(ChatContext);
+
   /*
    * Used to imperatively scroll to the top when presenting the moment tutorial.
    */
@@ -75,7 +84,7 @@ const Content: React.FC<ContentProps> = ({userXId, screenType}) => {
     const refrestState = async () => {
       setRefreshing(true);
       if (!userXId) {
-        await userLogin(dispatch, loggedInUser);
+        await userLogin(dispatch, loggedInUser, chatClient);
       } else {
         await fetchUserX(dispatch, user, screenType);
       }
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 3290116b..dbdb7994 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,8 +1,8 @@
 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 {useStore} from 'react-redux';
+import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
+import {useSelector, useStore} from 'react-redux';
 import {ChannelList, Chat} from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import {TabsGradient} from '../../components';
@@ -31,7 +31,9 @@ interface ChatListScreenProps {
  */
 const ChatListScreen: React.FC<ChatListScreenProps> = () => {
   const {chatClient} = useContext(ChatContext);
-  const [clientReady, setClientReady] = useState(false);
+  const chatClientReady = useSelector(
+    (state: RootState) => state.user.chatClientReady,
+  );
   const state: RootState = useStore().getState();
   const loggedInUserId = state.user.user.userId;
 
@@ -44,22 +46,10 @@ 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);
-      });
+    if (!chatClientReady) {
+      Alert.alert('Something wrong with chat');
     }
-  }, []);
+  }, [chatClientReady]);
 
   return (
     <View style={styles.background}>
@@ -75,7 +65,7 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
             channel.create();
           }}
         />
-        {clientReady && (
+        {chatClientReady && (
           <Chat client={chatClient}>
             <View style={styles.chatContainer}>
               <ChannelList<
diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx
index 9d5fbe4d..1407575c 100644
--- a/src/screens/onboarding/CategorySelection.tsx
+++ b/src/screens/onboarding/CategorySelection.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {
   Alert,
   Platform,
@@ -12,6 +12,7 @@ import {
 } from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useDispatch, useSelector} from 'react-redux';
+import {ChatContext} from '../../App';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import {Background, MomentCategory} from '../../components';
 import {MOMENT_CATEGORIES} from '../../constants';
@@ -49,6 +50,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
    * Same component to be used for category selection while onboarding and while on profile
    */
   const {screenType, user} = route.params;
+  const {chatClient} = useContext(ChatContext);
   const isOnBoarding: boolean =
     screenType === CategorySelectionScreenType.Onboarding;
   const {userId, username} = user;
@@ -168,7 +170,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
         dispatch(updateIsOnboardedUser(true));
         const token = await getTokenOrLogout(dispatch);
         await postMomentCategories(selectedCategories, token);
-        userLogin(dispatch, {userId: userId, username: username});
+        userLogin(dispatch, {userId: userId, username: username}, chatClient);
       } else {
         dispatch(
           updateMomentCategories(
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index e160b4b7..774a7a11 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React from 'react';
+import React, {useContext} from 'react';
 import {Alert, KeyboardAvoidingView, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {
@@ -27,6 +27,7 @@ import {
 import {OnboardingStackParams} from '../../routes';
 import {BackgroundGradientType} from '../../types';
 import {SCREEN_WIDTH, userLogin} from '../../utils';
+import {ChatContext} from '../../App';
 
 type InvitationCodeVerificationRouteProp = RouteProp<
   OnboardingStackParams,
@@ -58,6 +59,7 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     setValue,
   });
   const dispatch = useDispatch();
+  const {chatClient} = useContext(ChatContext);
 
   const handleInvitationCodeVerification = async () => {
     if (value.length === 6) {
@@ -77,7 +79,7 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
           const username = route.params.username;
           await AsyncStorage.setItem('userId', userId);
           await AsyncStorage.setItem('username', username);
-          userLogin(dispatch, {userId, username});
+          userLogin(dispatch, {userId, username}, chatClient);
         } else {
           Alert.alert(ERROR_INVALID_INVITATION_CODE);
         }
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index dd2bb2e4..4f2b6a64 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useEffect, useRef} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
   Alert,
   Image,
@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import SplashScreen from 'react-native-splash-screen';
 import {useDispatch, useSelector} from 'react-redux';
+import {ChatContext} from '../../App';
 import {Background, TaggInput, TaggSquareButton} from '../../components';
 import {LOGIN_ENDPOINT, usernameRegex} from '../../constants';
 import {
@@ -47,6 +48,7 @@ interface LoginProps {
 const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   // ref for focusing on input fields
   const inputRef = useRef();
+  const {chatClient} = useContext(ChatContext);
 
   // login form state
   const [form, setForm] = React.useState({
@@ -166,7 +168,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
         if (statusCode === 200 && data.isOnboarded) {
           //Stores token received in the response into client's AsynStorage
           try {
-            userLogin(dispatch, {userId: data.UserID, username});
+            userLogin(dispatch, {userId: data.UserID, username}, chatClient);
             fcmService.sendFcmTokenToServer();
           } catch (err) {
             Alert.alert(ERROR_INVALID_LOGIN);
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
index 0ef56edb..b2162d34 100644
--- a/src/utils/messages.ts
+++ b/src/utils/messages.ts
@@ -92,7 +92,7 @@ export const connectChatAccount = async (
 ) => {
   try {
     const chatToken = await AsyncStorage.getItem('chatToken');
-    chatClient.connectUser(
+    await chatClient.connectUser(
       {
         id: loggedInUserId,
       },
@@ -100,7 +100,7 @@ export const connectChatAccount = async (
     );
     dispatch(updateChatClientReady(true));
   } catch (err) {
-    dispatch(updateChatClientReady(true));
+    dispatch(updateChatClientReady(false));
     console.log('Error while connecting user to Stream: ', err);
   }
 };
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 22c1c1f0..ec09198d 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -12,18 +12,17 @@ import {
   logout,
 } from '../store/actions';
 import {NO_SOCIAL_ACCOUNTS} from '../store/initialStates';
-import {userLoggedIn} from '../store/reducers';
 import {loadUserMomentCategories} from './../store/actions/momentCategories';
 import {loadUserX} from './../store/actions/userX';
 import {AppDispatch} from './../store/configureStore';
 import {RootState} from './../store/rootReducer';
 import {
   ProfilePreviewType,
-  CategoryPreviewType,
   ProfileInfoType,
   ScreenType,
   UserType,
 } from './../types/types';
+import {connectChatAccount} from './messages';
 
 const loadData = async (dispatch: AppDispatch, user: UserType) => {
   await Promise.all([
@@ -44,7 +43,11 @@ const loadData = async (dispatch: AppDispatch, user: UserType) => {
  * @param dispatch This is the dispatch object from the redux store
  * @param user The user if at all any
  */
-export const userLogin = async (dispatch: AppDispatch, user: UserType) => {
+export const userLogin = async (
+  dispatch: AppDispatch,
+  user: UserType,
+  chatClient?,
+) => {
   try {
     let localUser = {...user};
     if (!user.userId) {
@@ -64,6 +67,9 @@ export const userLogin = async (dispatch: AppDispatch, user: UserType) => {
         AsyncStorage.setItem('username', user.username),
       ]);
     }
+    if (chatClient) {
+      connectChatAccount(localUser.userId, chatClient, dispatch);
+    }
     await loadData(dispatch, localUser);
   } catch (error) {
     console.log(error);