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

[TMA767] Message button

5 files changed, 50 insertions, 52 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={() => {}} />
diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx
index 9d5fbe4d..ab5ff3be 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;
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index e160b4b7..6bc0ac9d 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) {
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index dd2bb2e4..6d9abf82 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 {
@@ -28,7 +29,7 @@ import {OnboardingStackParams} from '../../routes/onboarding';
 import {fcmService} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {BackgroundGradientType, UniversityType} from '../../types';
-import {normalize, userLogin} from '../../utils';
+import {connectChatAccount, normalize, userLogin} from '../../utils';
 import UpdateRequired from './UpdateRequired';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
@@ -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({
@@ -160,7 +162,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           await AsyncStorage.setItem('token', data.token);
           await AsyncStorage.setItem('userId', data.UserID);
           await AsyncStorage.setItem('username', username);
-          await AsyncStorage.setItem('chatToken', data.chatToken);
         }
 
         if (statusCode === 200 && data.isOnboarded) {
@@ -168,6 +169,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           try {
             userLogin(dispatch, {userId: data.UserID, username});
             fcmService.sendFcmTokenToServer();
+            connectChatAccount(data.UserID, chatClient);
           } catch (err) {
             Alert.alert(ERROR_INVALID_LOGIN);
           }