diff options
-rw-r--r-- | src/components/messages/ChatHeader.tsx | 81 | ||||
-rw-r--r-- | src/components/profile/ProfileBody.tsx | 16 | ||||
-rw-r--r-- | src/constants/strings.ts | 3 | ||||
-rw-r--r-- | src/screens/chat/ChatScreen.tsx | 3 | ||||
-rw-r--r-- | src/store/initialStates.ts | 1 |
5 files changed, 69 insertions, 35 deletions
diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx index 2bc096ec..67a7f1fe 100644 --- a/src/components/messages/ChatHeader.tsx +++ b/src/components/messages/ChatHeader.tsx @@ -1,39 +1,71 @@ +import {useNavigation} from '@react-navigation/native'; import React, {useContext} from 'react'; import {Image, StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; -import {useStore} from 'react-redux'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {useDispatch, useStore} from 'react-redux'; import {ChatContext} from '../../App'; -import {ChatHeaderHeight, normalize, StatusBarHeight} from '../../utils'; +import {ScreenType} from '../../types'; +import { + ChatHeaderHeight, + fetchUserX, + normalize, + StatusBarHeight, + userXInStore, +} from '../../utils'; import {formatLastSeenText, getMember, isOnline} from '../../utils/messages'; -type ChatHeaderProps = {}; +type ChatHeaderProps = { + screenType: ScreenType; +}; -const ChatHeader: React.FC<ChatHeaderProps> = () => { +const ChatHeader: React.FC<ChatHeaderProps> = (props) => { + const {screenType} = props; const {channel} = useContext(ChatContext); + const dispatch = useDispatch(); + const navigation = useNavigation(); const state = useStore().getState(); const member = getMember(channel, state); const online = isOnline(member?.user?.last_active); const lastSeen = formatLastSeenText(member?.user?.last_active); + const toProfile = async () => { + if (member && member.user && member.user.username) { + if (!userXInStore(state, screenType, member.user.id)) { + await fetchUserX( + dispatch, + {userId: member.user.id, username: member.user.username}, + screenType, + ); + } + navigation.navigate('Profile', { + userXId: member.user.id, + screenType, + }); + } + }; + return ( <View style={styles.container}> - <View> - <Image - style={styles.avatar} - source={ - member - ? {uri: member.user?.thumbnail_url} - : require('../../assets/images/avatar-placeholder.png') - } - /> - {online && <View style={styles.online} />} - </View> - <View style={styles.content}> - <Text style={styles.name} numberOfLines={1}> - {member?.user?.first_name} {member?.user?.last_name} - </Text> - <Text style={styles.lastSeen}>{lastSeen}</Text> - </View> + <TouchableOpacity style={styles.tappables} onPress={toProfile}> + <View> + <Image + style={styles.avatar} + source={ + member + ? {uri: member.user?.thumbnail_url} + : require('../../assets/images/avatar-placeholder.png') + } + /> + {online && <View style={styles.online} />} + </View> + <View style={styles.content}> + <Text style={styles.name} numberOfLines={1}> + {member?.user?.first_name} {member?.user?.last_name} + </Text> + <Text style={styles.lastSeen}>{lastSeen}</Text> + </View> + </TouchableOpacity> </View> ); }; @@ -41,10 +73,13 @@ const ChatHeader: React.FC<ChatHeaderProps> = () => { const styles = StyleSheet.create({ container: { height: ChatHeaderHeight - StatusBarHeight, - flexDirection: 'row', - alignItems: 'center', paddingLeft: '15%', }, + tappables: { + alignItems: 'center', + flexDirection: 'row', + width: '100%', + }, avatar: { width: normalize(40), height: normalize(40), diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 00532507..527036f6 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -22,6 +22,7 @@ import {RootState} from '../../store/rootReducer'; import {ScreenType} from '../../types'; import { connectChatAccount, + createChannel, getUserAsProfilePreviewType, SCREEN_HEIGHT, SCREEN_WIDTH, @@ -30,6 +31,8 @@ import {FriendsButton, BasicButton} from '../common'; import ToggleButton from './ToggleButton'; import {ChatContext} from '../../App'; import {useNavigation} from '@react-navigation/core'; +import {ChatListScreen} from '../../screens'; +import {ERROR_UNABLE_CONNECT_CHAT} from '../../constants/strings'; interface ProfileBodyProps { onLayout: (event: LayoutChangeEvent) => void; @@ -97,19 +100,12 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({ }; const onPressMessage = async () => { - let connected: boolean = await connectChatAccount( - loggedInUserId, - chatClient, - ); - if (connected) { - const channel = chatClient.channel('messaging', { - members: [loggedInUserId, String(userXId)], - }); - channel.create(); + if (chatClient.user && userXId) { + const channel = await createChannel(loggedInUserId, userXId, chatClient); setChannel(channel); navigation.navigate('Chat'); } else { - Alert.alert('Something wrong with chat'); + Alert.alert(ERROR_UNABLE_CONNECT_CHAT); } }; diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 94f5552f..bdb94fba 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -9,6 +9,7 @@ export const ERROR_AUTHENTICATION = 'An error occurred during authentication. Pl export const ERROR_BADGES_EXCEED_LIMIT = 'You can\'t have more than 5 badges!'; export const ERROR_CATEGORY_CREATION = 'There was a problem creating your categories. Please refresh and try again.'; export const ERROR_CATEGORY_UPDATE = 'There was a problem updating your categories. Please refresh and try again'; +export const ERROR_CHAT_CONNECTION = `Unable to establish chat connection`; export const ERROR_DELETE_CATEGORY = 'There was a problem while deleting category. Please try again'; export const ERROR_DELETE_MOMENT = 'Unable to delete moment, please try again later!'; export const ERROR_DELETED_OBJECT = 'Oh sad! Looks like the comment / moment was deleted by the user'; @@ -35,7 +36,6 @@ export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed π'; export const ERROR_PROFILE_UPDATE_SHORT = 'Profile update failed. π'; export const ERROR_PWD_ACCOUNT = (str: string) => `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${str}`; export const ERROR_REGISTRATION = (str: string) => `Registration failed π, ${str}`; -export const ERROR_CHAT_CONNECTION = `Unable to establish chat connection`; export const ERROR_SELECT_BIRTHDAY = 'Please select your birthday'; export const ERROR_SELECT_CLASS_YEAR = 'Please select your Class Year'; export const ERROR_SELECT_GENDER = 'Please select your gender'; @@ -45,6 +45,7 @@ export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, donβt worry someone will b export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again"; export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again"; export const ERROR_TWILIO_SERVER_ERROR = 'mhm, looks like that is an invalid phone number or our servers are down, please try again in a few mins'; +export const ERROR_UNABLE_CONNECT_CHAT = 'Unable to connect chat'; export const ERROR_UNABLE_TO_FIND_PROFILE = 'We were unable to find this profile. Please check username and try again'; export const ERROR_UNABLE_TO_VIEW_PROFILE = 'Unable to view this profile'; export const ERROR_UPLOAD = 'An error occurred while uploading. Please try again!'; 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/store/initialStates.ts b/src/store/initialStates.ts index 02331eb6..7fd3ac5a 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -117,6 +117,7 @@ export const EMPTY_SCREEN_TO_USERS_LIST: Record< [ScreenType.Search]: EMPTY_USERX_LIST, [ScreenType.Notifications]: EMPTY_USERX_LIST, [ScreenType.SuggestedPeople]: EMPTY_USERX_LIST, + [ScreenType.Chat]: EMPTY_USERX_LIST, }; export const INITIAL_CATEGORIES_STATE = { |