aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/chat/ChatListScreen.tsx61
-rw-r--r--src/screens/chat/ChatScreen.tsx21
-rw-r--r--src/screens/main/NotificationsScreen.tsx2
-rw-r--r--src/screens/onboarding/CategorySelection.tsx6
-rw-r--r--src/screens/onboarding/InvitationCodeVerification.tsx6
-rw-r--r--src/screens/onboarding/Login.tsx6
6 files changed, 62 insertions, 40 deletions
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 9011ed4a..dbdb7994 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,13 +1,23 @@
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 {MessagesHeader} from '../../components/messages';
+import {TabsGradient} from '../../components';
+import {ChannelPreview, MessagesHeader} from '../../components/messages';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootReducer';
+import {
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType,
+} from '../../types';
type ChatListScreenNavigationProp = StackNavigationProp<
MainStackParams,
@@ -19,9 +29,11 @@ interface ChatListScreenProps {
/*
* Screen that displays all of the user's active conversations.
*/
-const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
- const {chatClient, setChannel} = useContext(ChatContext);
- const [clientReady, setClientReady] = useState(false);
+const ChatListScreen: React.FC<ChatListScreenProps> = () => {
+ const {chatClient} = useContext(ChatContext);
+ const chatClientReady = useSelector(
+ (state: RootState) => state.user.chatClientReady,
+ );
const state: RootState = useStore().getState();
const loggedInUserId = state.user.user.userId;
@@ -34,22 +46,10 @@ 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);
- });
+ if (!chatClientReady) {
+ Alert.alert('Something wrong with chat');
}
- }, []);
+ }, [chatClientReady]);
return (
<View style={styles.background}>
@@ -65,26 +65,33 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
channel.create();
}}
/>
- {clientReady && (
+ {chatClientReady && (
<Chat client={chatClient}>
<View style={styles.chatContainer}>
- <ChannelList
+ <ChannelList<
+ LocalAttachmentType,
+ LocalChannelType,
+ LocalCommandType,
+ LocalEventType,
+ LocalMessageType,
+ LocalReactionType,
+ LocalUserType
+ >
filters={memoizedFilters}
- onSelect={(channel) => {
- setChannel(channel);
- navigation.navigate('Chat');
- }}
options={{
presence: true,
state: true,
watch: true,
}}
sort={{last_message_at: -1}}
+ maxUnreadCount={99}
+ Preview={ChannelPreview}
/>
</View>
</Chat>
)}
</SafeAreaView>
+ <TabsGradient />
</View>
);
};
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index eeb1a7d6..59c53c99 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,7 +1,8 @@
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
-import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack';
+import {StackNavigationProp} from '@react-navigation/stack';
import React, {useContext} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
import {
Channel,
Chat,
@@ -9,7 +10,9 @@ import {
MessageList,
} from 'stream-chat-react-native';
import {ChatContext} from '../../App';
+import ChatHeader from '../../components/messages/ChatHeader';
import {MainStackParams} from '../../routes';
+import {isIPhoneX} from '../../utils';
type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
interface ChatScreenProps {
@@ -20,24 +23,30 @@ interface ChatScreenProps {
*/
const ChatScreen: React.FC<ChatScreenProps> = () => {
const {channel, chatClient} = useContext(ChatContext);
- const headerHeight = useHeaderHeight();
const tabbarHeight = useBottomTabBarHeight();
return (
- <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
+ <SafeAreaView
+ style={[
+ styles.container,
+ // unable to figure out the padding issue, a hacky solution
+ {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
+ ]}>
+ <ChatHeader />
<Chat client={chatClient}>
- <Channel channel={channel} keyboardVerticalOffset={headerHeight}>
+ <Channel channel={channel} keyboardVerticalOffset={0}>
<MessageList onThreadSelect={() => {}} />
<MessageInput />
</Channel>
</Chat>
- </View>
+ </SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
+ flex: 1,
},
});
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 48e89f7a..71199c9b 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -330,7 +330,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'stretch',
justifyContent: 'space-between',
- width: SCREEN_WIDTH * 0.85,
+ width: SCREEN_WIDTH * 0.9,
},
headerText: {
fontWeight: '700',
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);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-30 18:26:30 +0000