From 49a1412401e99912569748b6f3898f56ee38bf9d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 31 Mar 2021 16:49:08 -0400 Subject: fixed unable to press --- src/components/taggs/Tagg.tsx | 18 ++++++++++-------- src/components/taggs/TaggsBar.tsx | 12 ++++-------- 2 files changed, 14 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 4e4987fb..ddb9c264 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -17,13 +17,15 @@ import { registerNonIntegratedSocialLink, } from '../../services'; import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common'; -import {UserType} from '../../types'; +import {ScreenType, UserType} from '../../types'; import { ERROR_LINK, ERROR_UNABLE_TO_FIND_PROFILE, SUCCESS_LINK, } from '../../constants/strings'; -import {normalize} from '../../utils'; +import {canViewProfile, normalize} from '../../utils'; +import {RootState} from '../../store/rootReducer'; +import {useStore} from 'react-redux'; interface TaggProps { social: string; @@ -34,7 +36,7 @@ interface TaggProps { userXId: string | undefined; user: UserType; whiteRing: boolean | undefined; - allowNavigation?: boolean; + screenType: ScreenType; } const Tagg: React.FC = ({ @@ -44,11 +46,12 @@ const Tagg: React.FC = ({ setTaggsNeedUpdate, setSocialDataNeedUpdate, userXId, + screenType, user, whiteRing, - allowNavigation = true, }) => { const navigation = useNavigation(); + const state: RootState = useStore().getState(); const [modalVisible, setModalVisible] = useState(false); const youMayPass = isLinked || userXId; @@ -71,9 +74,9 @@ const Tagg: React.FC = ({ */ const modalOrAuthBrowserOrPass = async () => { - if (youMayPass) { + if (youMayPass && canViewProfile(state, userXId, screenType)) { if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) { - navigation.push('SocialMediaTaggs', { + navigation.navigate('SocialMediaTaggs', { socialMediaType: social, userXId, }); @@ -147,8 +150,7 @@ const Tagg: React.FC = ({ + onPress={modalOrAuthBrowserOrPass}> {pickTheRightRingHere()} diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index 567b58de..06acadc1 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -2,7 +2,7 @@ import React, {Fragment, useEffect, useState} from 'react'; import {StyleSheet} from 'react-native'; import Animated from 'react-native-reanimated'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; -import {useDispatch, useSelector, useStore} from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import { INTEGRATED_SOCIAL_LIST, PROFILE_CUTOUT_BOTTOM_Y, @@ -12,7 +12,6 @@ import {getLinkedSocials} from '../../services'; import {loadIndividualSocial, updateSocial} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ScreenType} from '../../types'; -import {canViewProfile} from '../../utils'; import Tagg from './Tagg'; const {View, ScrollView, interpolate, Extrapolate} = Animated; @@ -32,15 +31,12 @@ const TaggsBar: React.FC = ({ whiteRing, linkedSocials, }) => { + const dispatch = useDispatch(); let [taggs, setTaggs] = useState([]); let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true); const {user} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); - const state: RootState = useStore().getState(); - const allowTaggsNavigation = canViewProfile(state, userXId, screenType); - - const dispatch = useDispatch(); /** * Updates the individual social that needs update @@ -75,13 +71,13 @@ const TaggsBar: React.FC = ({ key={i} social={social} userXId={userXId} + screenType={screenType} user={user} isLinked={true} isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1} setTaggsNeedUpdate={setTaggsNeedUpdate} setSocialDataNeedUpdate={handleSocialUpdate} whiteRing={whiteRing ? whiteRing : undefined} - allowNavigation={allowTaggsNavigation} />, ); i++; @@ -97,9 +93,9 @@ const TaggsBar: React.FC = ({ setTaggsNeedUpdate={setTaggsNeedUpdate} setSocialDataNeedUpdate={handleSocialUpdate} userXId={userXId} + screenType={screenType} user={user} whiteRing={whiteRing ? whiteRing : undefined} - allowNavigation={allowTaggsNavigation} />, ); i++; -- cgit v1.2.3-70-g09d2 From 097b515066f1a0c38cb7fb69cf78b16b945594e5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 31 Mar 2021 18:29:33 -0400 Subject: fixed bug --- src/components/taggs/Tagg.tsx | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index ddb9c264..5d26539b 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -74,20 +74,22 @@ const Tagg: React.FC = ({ */ const modalOrAuthBrowserOrPass = async () => { - if (youMayPass && canViewProfile(state, userXId, screenType)) { - if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) { - navigation.navigate('SocialMediaTaggs', { - socialMediaType: social, - userXId, - }); - } else { - getNonIntegratedURL(social, user.userId).then((socialURL) => { - if (socialURL) { - Linking.openURL(socialURL); - } else { - Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE); - } - }); + if (youMayPass) { + if (canViewProfile(state, userXId, screenType)) { + if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) { + navigation.navigate('SocialMediaTaggs', { + socialMediaType: social, + userXId, + }); + } else { + getNonIntegratedURL(social, user.userId).then((socialURL) => { + if (socialURL) { + Linking.openURL(socialURL); + } else { + Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE); + } + }); + } } } else { if (isIntegrated) { -- cgit v1.2.3-70-g09d2 From 123a728707f7cbc527c486a8b306716962e4bd47 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 8 Apr 2021 12:30:23 -0700 Subject: Added new button and resytles existing buttons --- src/components/common/BasicButton.tsx | 77 +++++++++++++++++++++++++++++++++ src/components/common/FriendsButton.tsx | 4 +- src/components/common/index.ts | 1 + src/components/profile/ProfileBody.tsx | 64 +++++++++++++++++++++------ src/components/profile/ToggleButton.tsx | 12 ++--- 5 files changed, 138 insertions(+), 20 deletions(-) create mode 100644 src/components/common/BasicButton.tsx (limited to 'src') diff --git a/src/components/common/BasicButton.tsx b/src/components/common/BasicButton.tsx new file mode 100644 index 00000000..0822c66e --- /dev/null +++ b/src/components/common/BasicButton.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {normalize} from '../../utils'; + +interface BasicButtonProps { + title: string; + onPress: () => void; + solid?: boolean; + externalStyles?: Record>; +} +const BasicButton: React.FC = ({ + title, + onPress, + solid, + externalStyles, +}) => { + return ( + + + + {title} + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + height: '100%', + flexDirection: 'column', + justifyContent: 'space-around', + }, + genericButtonStyle: { + justifyContent: 'center', + alignItems: 'center', + borderRadius: 2, + padding: 0, + width: '100%', + height: '100%', + }, + solidButton: { + padding: 0, + backgroundColor: TAGG_LIGHT_BLUE, + }, + outlineButton: { + borderWidth: 1, + backgroundColor: 'white', + borderColor: TAGG_LIGHT_BLUE, + }, + solidButtonTitleColor: { + color: 'white', + }, + outlineButtonTitleColor: { + color: TAGG_LIGHT_BLUE, + }, + buttonTitle: { + fontSize: normalize(15), + fontWeight: '700', + letterSpacing: 1, + }, +}); + +export default BasicButton; diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx index 46421bd1..1bb39e57 100644 --- a/src/components/common/FriendsButton.tsx +++ b/src/components/common/FriendsButton.tsx @@ -100,11 +100,11 @@ const styles = StyleSheet.create({ button: { justifyContent: 'center', alignItems: 'center', - width: SCREEN_WIDTH * 0.4, + width: SCREEN_WIDTH * 0.42, aspectRatio: 154 / 33, borderWidth: 2, borderColor: TAGG_LIGHT_BLUE, - borderRadius: 3, + borderRadius: 2, marginRight: '2%', marginLeft: '1%', }, diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 8499dbfa..b5fd0542 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -23,3 +23,4 @@ export {default as AcceptDeclineButtons} from './AcceptDeclineButtons'; export {default as FriendsButton} from './FriendsButton'; export {default as TaggSquareButton} from './TaggSquareButton'; export {default as GradientBorderButton} from './GradientBorderButton'; +export {default as BasicButton} from './BasicButton'; diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index b49e71a3..3785cb16 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -9,11 +9,16 @@ import { updateUserXFriends, updateUserXProfileAllScreens, } from '../../store/actions'; +import {canViewProfile} from '../../utils/users'; import {NO_PROFILE} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; import {ScreenType} from '../../types'; -import {getUserAsProfilePreviewType} from '../../utils'; -import {FriendsButton} from '../common'; +import { + getUserAsProfilePreviewType, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; +import {FriendsButton, BasicButton} from '../common'; import ToggleButton from './ToggleButton'; interface ProfileBodyProps { @@ -60,6 +65,19 @@ const ProfileBody: React.FC = ({ dispatch(updateUserXProfileAllScreens(id, state)); }; + const canMessage = () => { + if ( + userXId && + !isBlocked && + (friendship_status === 'no_record' || friendship_status === 'friends') && + canViewProfile(state, userXId, screenType) + ) { + return true; + } else { + return false; + } + }; + return ( {`@${username}`} @@ -85,17 +103,33 @@ const ProfileBody: React.FC = ({ /> )} - {userXId && !isBlocked && ( - - - - )} + + {userXId && !isBlocked && ( + + + {canMessage() && ( + { + console.log('Navigate to the individual chat screen'); + }} + externalStyles={{ + container: { + width: SCREEN_WIDTH * 0.42, + aspectRatio: 154 / 33, + }, + }} + /> + )} + + )} + ); }; @@ -107,11 +141,15 @@ const styles = StyleSheet.create({ paddingTop: '3.5%', paddingBottom: '2%', }, + simpleRowContainer: {flexDirection: 'row'}, buttonsContainer: { flex: 1, paddingTop: '3.5%', paddingBottom: '2%', width: '50%', + height: SCREEN_HEIGHT * 0.1, + flexDirection: 'row', + justifyContent: 'space-between', }, container: { paddingVertical: '1%', diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx index 236d811c..ad05c1c4 100644 --- a/src/components/profile/ToggleButton.tsx +++ b/src/components/profile/ToggleButton.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import {StyleSheet, Text} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {TAGG_LIGHT_BLUE} from '../../constants'; -import {getToggleButtonText, SCREEN_WIDTH} from '../../utils'; +import {getToggleButtonText, normalize, SCREEN_WIDTH} from '../../utils'; type ToggleButtonProps = { toggleState: boolean; @@ -34,15 +34,17 @@ const styles = StyleSheet.create({ button: { justifyContent: 'center', alignItems: 'center', - width: SCREEN_WIDTH * 0.4, + width: SCREEN_WIDTH * 0.42, height: SCREEN_WIDTH * 0.08, borderColor: TAGG_LIGHT_BLUE, - borderWidth: 3, - borderRadius: 5, + borderWidth: 1, + borderRadius: 2, marginRight: '2%', }, text: { - fontWeight: 'bold', + fontWeight: '700', + fontSize: normalize(15), + letterSpacing: 1, }, buttonColor: { backgroundColor: TAGG_LIGHT_BLUE, -- cgit v1.2.3-70-g09d2 From 5972aeb33d8a37895e4af8890b99514c9ec0e51c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 8 Apr 2021 12:32:54 -0700 Subject: better --- src/components/profile/ProfileBody.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 3785cb16..9b19b866 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -78,6 +78,11 @@ const ProfileBody: React.FC = ({ } }; + const onPressMessage = () => { + // TODO: Add navigation to ChatScreen + console.log('Navigate to the individual chat screen'); + }; + return ( {`@${username}`} @@ -116,9 +121,7 @@ const ProfileBody: React.FC = ({ {canMessage() && ( { - console.log('Navigate to the individual chat screen'); - }} + onPress={onPressMessage} externalStyles={{ container: { width: SCREEN_WIDTH * 0.42, -- cgit v1.2.3-70-g09d2 From 45327a57f0a1c81df581aba4278416015f0ddc7e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 8 Apr 2021 12:59:02 -0700 Subject: radius and border width changed --- src/components/common/AcceptDeclineButtons.tsx | 2 +- src/components/common/BasicButton.tsx | 4 ++-- src/components/common/FriendsButton.tsx | 2 +- src/components/profile/Friends.tsx | 4 ++-- src/components/profile/ToggleButton.tsx | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx index 167148f0..7bb62fd4 100644 --- a/src/components/common/AcceptDeclineButtons.tsx +++ b/src/components/common/AcceptDeclineButtons.tsx @@ -58,7 +58,7 @@ const styles = StyleSheet.create({ backgroundColor: TAGG_LIGHT_BLUE, }, rejectButton: { - borderWidth: 1, + borderWidth: 2, backgroundColor: 'white', borderColor: TAGG_LIGHT_BLUE, }, diff --git a/src/components/common/BasicButton.tsx b/src/components/common/BasicButton.tsx index 0822c66e..1fe29cd9 100644 --- a/src/components/common/BasicButton.tsx +++ b/src/components/common/BasicButton.tsx @@ -47,7 +47,7 @@ const styles = StyleSheet.create({ genericButtonStyle: { justifyContent: 'center', alignItems: 'center', - borderRadius: 2, + borderRadius: 3, padding: 0, width: '100%', height: '100%', @@ -57,7 +57,7 @@ const styles = StyleSheet.create({ backgroundColor: TAGG_LIGHT_BLUE, }, outlineButton: { - borderWidth: 1, + borderWidth: 2, backgroundColor: 'white', borderColor: TAGG_LIGHT_BLUE, }, diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx index 1bb39e57..6ddad93f 100644 --- a/src/components/common/FriendsButton.tsx +++ b/src/components/common/FriendsButton.tsx @@ -104,7 +104,7 @@ const styles = StyleSheet.create({ aspectRatio: 154 / 33, borderWidth: 2, borderColor: TAGG_LIGHT_BLUE, - borderRadius: 2, + borderRadius: 3, marginRight: '2%', marginLeft: '1%', }, diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx index c1dca755..b754b71a 100644 --- a/src/components/profile/Friends.tsx +++ b/src/components/profile/Friends.tsx @@ -191,7 +191,7 @@ const styles = StyleSheet.create({ height: '55%', borderColor: TAGG_LIGHT_BLUE, borderWidth: 2, - borderRadius: 2, + borderRadius: 3, padding: 0, backgroundColor: TAGG_LIGHT_BLUE, }, @@ -212,7 +212,7 @@ const styles = StyleSheet.create({ height: '55%', borderColor: TAGG_LIGHT_BLUE, borderWidth: 2, - borderRadius: 2, + borderRadius: 3, padding: 0, }, unfriendButtonTitle: { diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx index ad05c1c4..4697d744 100644 --- a/src/components/profile/ToggleButton.tsx +++ b/src/components/profile/ToggleButton.tsx @@ -37,8 +37,8 @@ const styles = StyleSheet.create({ width: SCREEN_WIDTH * 0.42, height: SCREEN_WIDTH * 0.08, borderColor: TAGG_LIGHT_BLUE, - borderWidth: 1, - borderRadius: 2, + borderWidth: 2, + borderRadius: 3, marginRight: '2%', }, text: { -- cgit v1.2.3-70-g09d2 From 4378df9cc0343e9869a74f6db2eaea67d103bfdf Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 8 Apr 2021 13:18:56 -0700 Subject: To test nav [wip after merging utils for chat] --- src/components/profile/ProfileBody.tsx | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 9b19b866..1a8d1e1a 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useContext} from 'react'; import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native'; import {normalize} from 'react-native-elements'; import {useDispatch, useSelector, useStore} from 'react-redux'; @@ -20,6 +20,9 @@ import { } from '../../utils'; import {FriendsButton, BasicButton} from '../common'; import ToggleButton from './ToggleButton'; +// import {ChatContext} from '../../App'; +// import {useNavigation} from '@react-navigation/core'; +// import AsyncStorage from '@react-native-community/async-storage'; interface ProfileBodyProps { onLayout: (event: LayoutChangeEvent) => void; @@ -53,6 +56,9 @@ const ProfileBody: React.FC = ({ const state: RootState = useStore().getState(); const dispatch = useDispatch(); + // const navigation = useNavigation(); + // const {chatClient, setChannel} = useContext(ChatContext); + const loggedInUserId = state.user.user.userId; const handleAcceptRequest = async () => { await dispatch(acceptFriendRequest({id, username, first_name, last_name})); @@ -69,7 +75,10 @@ const ProfileBody: React.FC = ({ if ( userXId && !isBlocked && - (friendship_status === 'no_record' || friendship_status === 'friends') && + (friendship_status === 'no_record' || + friendship_status === 'friends' || + (friendship_status === 'requested' && + friendship_requester_id === loggedInUserId)) && canViewProfile(state, userXId, screenType) ) { return true; @@ -78,9 +87,23 @@ const ProfileBody: React.FC = ({ } }; - const onPressMessage = () => { - // TODO: Add navigation to ChatScreen - console.log('Navigate to the individual chat screen'); + const onPressMessage = async () => { + // TODO: Use function from util to create the channel and then navigate to screen + // const channelName = username + ' and ' + state.user.user.username; + // const chatToken = await AsyncStorage.getItem('chatToken'); + // await chatClient.connectUser( + // { + // id: loggedInUserId, + // }, + // chatToken, + // ); + // const channel = chatClient.channel('messaging', { + // name: channelName, + // members: [loggedInUserId, String(userXId)], + // }); + // channel.create(); + // navigation.navigate('Chat'); + console.log('Navigate to ChatScreen'); }; return ( -- cgit v1.2.3-70-g09d2 From 593240c03984000c1e7ddc632d4a248267a62966 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 14:13:52 -0400 Subject: added two badges --- src/assets/badges/brown/iff.png | Bin 0 -> 8364 bytes src/assets/badges/brown/sailing.png | Bin 0 -> 17152 bytes src/constants/badges.ts | 10 ++++++++++ 3 files changed, 10 insertions(+) create mode 100644 src/assets/badges/brown/iff.png create mode 100644 src/assets/badges/brown/sailing.png (limited to 'src') diff --git a/src/assets/badges/brown/iff.png b/src/assets/badges/brown/iff.png new file mode 100644 index 00000000..02f9a1c8 Binary files /dev/null and b/src/assets/badges/brown/iff.png differ diff --git a/src/assets/badges/brown/sailing.png b/src/assets/badges/brown/sailing.png new file mode 100644 index 00000000..1fde1c39 Binary files /dev/null and b/src/assets/badges/brown/sailing.png differ diff --git a/src/constants/badges.ts b/src/constants/badges.ts index b4cecefb..d7e9357b 100644 --- a/src/constants/badges.ts +++ b/src/constants/badges.ts @@ -23,10 +23,12 @@ export const _brownBadgeImages = { football: require('../assets/badges/brown/football.png'), gymnastics: require('../assets/badges/brown/gymnastics.png'), hockey: require('../assets/badges/brown/hockey.png'), + iff: require('../assets/badges/brown/iff.png'), impulse: require('../assets/badges/brown/impulse.png'), kappa_delta: require('../assets/badges/brown/kappa_delta.png'), lacrosse: require('../assets/badges/brown/lacrosse.png'), latin_at_brown: require('../assets/badges/brown/latin_at_brown.png'), + sailing: require('../assets/badges/brown/sailing.png'), soccer: require('../assets/badges/brown/soccer.png'), softball: require('../assets/badges/brown/softball.png'), tap: require('../assets/badges/brown/tap.png'), @@ -167,6 +169,10 @@ const _brownBadges = [ badgeName: 'Brown Baseball', badgeImage: _brownBadgeImages.baseball, }, + { + badgeName: 'Brown Sailing', + badgeImage: _brownBadgeImages.sailing, + }, ], }, @@ -266,6 +272,10 @@ const _brownBadges = [ badgeName: 'Impulse', badgeImage: _brownBadgeImages.impulse, }, + { + badgeName: 'Ivy Film Festival', + badgeImage: _brownBadgeImages.iff, + }, ], }, { -- cgit v1.2.3-70-g09d2 From 0a09c73cabc656b85465102b8e266e1a0cc1fdf2 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 11:28:36 -0700 Subject: Added a function to utils to connect a chat user --- src/utils/index.ts | 1 + src/utils/messages.ts | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+) (limited to 'src') diff --git a/src/utils/index.ts b/src/utils/index.ts index 739e6fb8..4ff9afac 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -4,3 +4,4 @@ export * from './common'; export * from './users'; export * from './friends'; export * from './search'; +export * from './messages'; diff --git a/src/utils/messages.ts b/src/utils/messages.ts index d63f2b7a..0ef56edb 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -1,4 +1,7 @@ +import AsyncStorage from '@react-native-community/async-storage'; import moment from 'moment'; +import {updateChatClientReady} from '../store/actions'; +import {AppDispatch} from '../store/configureStore'; import {RootState} from '../store/rootReducer'; import {ChannelGroupedType} from '../types'; @@ -81,3 +84,23 @@ export const getMember = ( : []; return otherMembers.length === 1 ? otherMembers[0] : undefined; }; + +export const connectChatAccount = async ( + loggedInUserId: string, + chatClient, + dispatch: AppDispatch, +) => { + try { + const chatToken = await AsyncStorage.getItem('chatToken'); + chatClient.connectUser( + { + id: loggedInUserId, + }, + chatToken, + ); + dispatch(updateChatClientReady(true)); + } catch (err) { + dispatch(updateChatClientReady(true)); + console.log('Error while connecting user to Stream: ', err); + } +}; -- cgit v1.2.3-70-g09d2 From 9fef149f9c2185c191d1b856d7939449ccc4f1d0 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 11:30:20 -0700 Subject: Added boolean for user connection status --- src/store/actions/user.ts | 16 ++++++++++++++++ src/store/initialStates.ts | 1 + src/store/reducers/userReducer.ts | 4 ++++ 3 files changed, 21 insertions(+) (limited to 'src') diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 3ebd4190..0ed57fe6 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -11,6 +11,7 @@ import {getTokenOrLogout} from '../../utils'; import { clearHeaderAndProfileImages, profileCompletionStageUpdated, + setChatClientReady, setIsOnboardedUser, setNewNotificationReceived, setNewVersionAvailable, @@ -233,3 +234,18 @@ export const suggestedPeopleAnimatedTutorialFinished = ( console.log('Error while updating suggested people linked state: ', error); } }; + +export const updateChatClientReady = ( + chatClientReady: boolean, +): ThunkAction, RootState, unknown, Action> => async ( + dispatch, +) => { + try { + dispatch({ + type: setChatClientReady.type, + payload: {chatClientReady}, + }); + } catch (error) { + console.log(error); + } +}; diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index 02331eb6..546c57a9 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -41,6 +41,7 @@ export const EMPTY_PROFILE_PREVIEW_LIST = []; export const NO_USER_DATA = { user: NO_USER, + chatClientReady: false, profile: NO_PROFILE, avatar: undefined, cover: undefined, diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts index 9ff9ba01..0b958cac 100644 --- a/src/store/reducers/userReducer.ts +++ b/src/store/reducers/userReducer.ts @@ -75,6 +75,9 @@ const userDataSlice = createSlice({ state.avatar = ''; state.cover = ''; }, + setChatClientReady: (state, action) => { + state.chatClientReady = action.payload.chatClientReady; + }, }, }); @@ -90,5 +93,6 @@ export const { setReplyPosted, setSuggestedPeopleImage, clearHeaderAndProfileImages, + setChatClientReady, } = userDataSlice.actions; export const userDataReducer = userDataSlice.reducer; -- cgit v1.2.3-70-g09d2 From bc56de68eb8fc69be6c5c105236d0b6ecfac4b26 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 11:30:45 -0700 Subject: Connecting user to streamo on Routes --- src/routes/Routes.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 819ca785..173a6a6c 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -1,15 +1,17 @@ +import AsyncStorage from '@react-native-community/async-storage'; import messaging from '@react-native-firebase/messaging'; -import React, {useEffect, useState} from 'react'; +import React, {useContext, useEffect, useState} from 'react'; import DeviceInfo from 'react-native-device-info'; import SplashScreen from 'react-native-splash-screen'; -import {useDispatch, useSelector} from 'react-redux'; +import {useDispatch, useSelector, useStore} from 'react-redux'; +import {ChatContext} from '../App'; import {fcmService, getCurrentLiveVersions} from '../services'; import { updateNewNotificationReceived, updateNewVersionAvailable, } from '../store/actions'; import {RootState} from '../store/rootReducer'; -import {userLogin} from '../utils'; +import {userLogin, connectChatAccount} from '../utils'; import Onboarding from './onboarding'; import NavigationBar from './tabs'; @@ -17,6 +19,9 @@ const Routes: React.FC = () => { const { user: {userId}, } = useSelector((state: RootState) => state.user); + const state: RootState = useStore().getState(); + const loggedInUserId = state.user.user.userId; + const {chatClient} = useContext(ChatContext); const [newVersionAvailable, setNewVersionAvailable] = useState(false); const dispatch = useDispatch(); @@ -49,6 +54,7 @@ const Routes: React.FC = () => { if (userId) { fcmService.setUpPushNotifications(); fcmService.sendFcmTokenToServer(); + connectChatAccount(loggedInUserId, chatClient, dispatch); } }, []); -- cgit v1.2.3-70-g09d2 From d601b6dcf93dc1e326a9e79c5b19db6bcdaedbdf Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 11:31:34 -0700 Subject: Navigating to chat from profile body msg btn --- src/components/profile/ProfileBody.tsx | 48 ++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 1a8d1e1a..dc68446b 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -1,5 +1,12 @@ import React, {useContext} from 'react'; -import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native'; +import { + Alert, + LayoutChangeEvent, + Linking, + StyleSheet, + Text, + View, +} from 'react-native'; import {normalize} from 'react-native-elements'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants'; @@ -20,9 +27,8 @@ import { } from '../../utils'; import {FriendsButton, BasicButton} from '../common'; import ToggleButton from './ToggleButton'; -// import {ChatContext} from '../../App'; -// import {useNavigation} from '@react-navigation/core'; -// import AsyncStorage from '@react-native-community/async-storage'; +import {ChatContext} from '../../App'; +import {useNavigation} from '@react-navigation/core'; interface ProfileBodyProps { onLayout: (event: LayoutChangeEvent) => void; @@ -38,6 +44,9 @@ const ProfileBody: React.FC = ({ userXId, screenType, }) => { + const dispatch = useDispatch(); + const navigation = useNavigation(); + const {profile = NO_PROFILE, user} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); @@ -54,10 +63,10 @@ const ProfileBody: React.FC = ({ profile, ); + const {chatClientReady} = useSelector((state: RootState) => state.user); + const {chatClient, setChannel} = useContext(ChatContext); + const state: RootState = useStore().getState(); - const dispatch = useDispatch(); - // const navigation = useNavigation(); - // const {chatClient, setChannel} = useContext(ChatContext); const loggedInUserId = state.user.user.userId; const handleAcceptRequest = async () => { @@ -88,22 +97,15 @@ const ProfileBody: React.FC = ({ }; const onPressMessage = async () => { - // TODO: Use function from util to create the channel and then navigate to screen - // const channelName = username + ' and ' + state.user.user.username; - // const chatToken = await AsyncStorage.getItem('chatToken'); - // await chatClient.connectUser( - // { - // id: loggedInUserId, - // }, - // chatToken, - // ); - // const channel = chatClient.channel('messaging', { - // name: channelName, - // members: [loggedInUserId, String(userXId)], - // }); - // channel.create(); - // navigation.navigate('Chat'); - console.log('Navigate to ChatScreen'); + if (!chatClientReady) { + Alert.alert('Something wrong with chat'); + } + const channel = chatClient.channel('messaging', { + members: [loggedInUserId, String(userXId)], + }); + channel.create(); + setChannel(channel); + navigation.navigate('Chat'); }; return ( -- cgit v1.2.3-70-g09d2 From b967bd77710bce7b92ae0863df52cce345abd4e4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 12:20:25 -0700 Subject: connecting user during login --- src/components/profile/Content.tsx | 13 ++++++++-- src/screens/chat/ChatListScreen.tsx | 28 +++++++--------------- src/screens/onboarding/CategorySelection.tsx | 6 +++-- .../onboarding/InvitationCodeVerification.tsx | 6 +++-- src/screens/onboarding/Login.tsx | 6 +++-- src/utils/messages.ts | 4 ++-- src/utils/users.ts | 12 +++++++--- 7 files changed, 43 insertions(+), 32 deletions(-) (limited to 'src') 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 = ({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 = ({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 = () => { 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 = () => { ); 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 ( @@ -75,7 +65,7 @@ const ChatListScreen: React.FC = () => { channel.create(); }} /> - {clientReady && ( + {chatClientReady && ( = ({ * 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 = ({ 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 = ({ setValue, }); const dispatch = useDispatch(); + const {chatClient} = useContext(ChatContext); const handleInvitationCodeVerification = async () => { if (value.length === 6) { @@ -77,7 +79,7 @@ const InvitationCodeVerification: React.FC = ({ 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 = ({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 = ({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); -- cgit v1.2.3-70-g09d2 From bdd1ed17600da7b766e2b0fa97ad4cbf01234819 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 13:46:42 -0700 Subject: removed client ready from redux --- src/components/profile/ProfileBody.tsx | 6 ++-- src/routes/Routes.tsx | 2 +- src/screens/chat/ChatListScreen.tsx | 51 +++++++++++++++------------------- src/store/actions/user.ts | 15 ---------- src/store/initialStates.ts | 1 - src/utils/messages.ts | 4 +-- 6 files changed, 28 insertions(+), 51 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index dc68446b..e23249fa 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -63,7 +63,6 @@ const ProfileBody: React.FC = ({ profile, ); - const {chatClientReady} = useSelector((state: RootState) => state.user); const {chatClient, setChannel} = useContext(ChatContext); const state: RootState = useStore().getState(); @@ -97,8 +96,9 @@ const ProfileBody: React.FC = ({ }; const onPressMessage = async () => { - if (!chatClientReady) { - Alert.alert('Something wrong with chat'); + if (!chatClient.user) { + // TODO: Add refresh control to retry establishing chat connection + Alert.alert('Unable to connect chat'); } const channel = chatClient.channel('messaging', { members: [loggedInUserId, String(userXId)], diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 173a6a6c..adc6253b 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -54,7 +54,7 @@ const Routes: React.FC = () => { if (userId) { fcmService.setUpPushNotifications(); fcmService.sendFcmTokenToServer(); - connectChatAccount(loggedInUserId, chatClient, dispatch); + connectChatAccount(loggedInUserId, chatClient); } }, []); diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index dbdb7994..eb886232 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -31,9 +31,6 @@ interface ChatListScreenProps { */ const ChatListScreen: React.FC = () => { const {chatClient} = useContext(ChatContext); - const chatClientReady = useSelector( - (state: RootState) => state.user.chatClientReady, - ); const state: RootState = useStore().getState(); const loggedInUserId = state.user.user.userId; @@ -65,31 +62,29 @@ const ChatListScreen: React.FC = () => { channel.create(); }} /> - {chatClientReady && ( - - - - filters={memoizedFilters} - options={{ - presence: true, - state: true, - watch: true, - }} - sort={{last_message_at: -1}} - maxUnreadCount={99} - Preview={ChannelPreview} - /> - - - )} + + + + filters={memoizedFilters} + options={{ + presence: true, + state: true, + watch: true, + }} + sort={{last_message_at: -1}} + maxUnreadCount={99} + Preview={ChannelPreview} + /> + + diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 0ed57fe6..c7d0d5a7 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -11,7 +11,6 @@ import {getTokenOrLogout} from '../../utils'; import { clearHeaderAndProfileImages, profileCompletionStageUpdated, - setChatClientReady, setIsOnboardedUser, setNewNotificationReceived, setNewVersionAvailable, @@ -235,17 +234,3 @@ export const suggestedPeopleAnimatedTutorialFinished = ( } }; -export const updateChatClientReady = ( - chatClientReady: boolean, -): ThunkAction, RootState, unknown, Action> => async ( - dispatch, -) => { - try { - dispatch({ - type: setChatClientReady.type, - payload: {chatClientReady}, - }); - } catch (error) { - console.log(error); - } -}; diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index 546c57a9..02331eb6 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -41,7 +41,6 @@ export const EMPTY_PROFILE_PREVIEW_LIST = []; export const NO_USER_DATA = { user: NO_USER, - chatClientReady: false, profile: NO_PROFILE, avatar: undefined, cover: undefined, diff --git a/src/utils/messages.ts b/src/utils/messages.ts index b2162d34..1c83ca9f 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -1,6 +1,6 @@ import AsyncStorage from '@react-native-community/async-storage'; import moment from 'moment'; -import {updateChatClientReady} from '../store/actions'; +// import {updateChatClientReady} from '../store/actions'; import {AppDispatch} from '../store/configureStore'; import {RootState} from '../store/rootReducer'; import {ChannelGroupedType} from '../types'; @@ -98,9 +98,7 @@ export const connectChatAccount = async ( }, chatToken, ); - dispatch(updateChatClientReady(true)); } catch (err) { - dispatch(updateChatClientReady(false)); console.log('Error while connecting user to Stream: ', err); } }; -- cgit v1.2.3-70-g09d2 From 9e3e66575243b11f896a79717be5ab64162a4719 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 17:36:15 -0400 Subject: fixed taggs --- src/components/suggestedPeople/SPTaggsBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/SPTaggsBar.tsx b/src/components/suggestedPeople/SPTaggsBar.tsx index adac6dcf..29c58cce 100644 --- a/src/components/suggestedPeople/SPTaggsBar.tsx +++ b/src/components/suggestedPeople/SPTaggsBar.tsx @@ -70,7 +70,7 @@ const TaggsBar: React.FC = ({ setTaggsNeedUpdate={setTaggsNeedUpdate} setSocialDataNeedUpdate={handleSocialUpdate} whiteRing={true} - allowNavigation={allowTaggsNavigation} + screenType={screenType} />, ); i++; @@ -88,7 +88,7 @@ const TaggsBar: React.FC = ({ userXId={userXId} user={user} whiteRing={true} - allowNavigation={allowTaggsNavigation} + screenType={screenType} />, ); i++; -- cgit v1.2.3-70-g09d2 From 45041863a432ed5ba02f896f0c4f3c23ae7830ed Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 14:37:06 -0700 Subject: removed chat client inside userlogin --- src/components/profile/Content.tsx | 2 +- src/screens/onboarding/CategorySelection.tsx | 2 +- src/screens/onboarding/InvitationCodeVerification.tsx | 2 +- src/store/reducers/userReducer.ts | 5 +---- src/utils/users.ts | 10 +--------- 5 files changed, 5 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 0d2a0331..0052b61d 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -84,7 +84,7 @@ const Content: React.FC = ({userXId, screenType}) => { const refrestState = async () => { setRefreshing(true); if (!userXId) { - await userLogin(dispatch, loggedInUser, chatClient); + await userLogin(dispatch, loggedInUser); } else { await fetchUserX(dispatch, user, screenType); } diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx index 1407575c..ab5ff3be 100644 --- a/src/screens/onboarding/CategorySelection.tsx +++ b/src/screens/onboarding/CategorySelection.tsx @@ -170,7 +170,7 @@ const CategorySelection: React.FC = ({ dispatch(updateIsOnboardedUser(true)); const token = await getTokenOrLogout(dispatch); await postMomentCategories(selectedCategories, token); - userLogin(dispatch, {userId: userId, username: username}, chatClient); + userLogin(dispatch, {userId: userId, username: username}); } else { dispatch( updateMomentCategories( diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx index 774a7a11..6bc0ac9d 100644 --- a/src/screens/onboarding/InvitationCodeVerification.tsx +++ b/src/screens/onboarding/InvitationCodeVerification.tsx @@ -79,7 +79,7 @@ const InvitationCodeVerification: React.FC = ({ const username = route.params.username; await AsyncStorage.setItem('userId', userId); await AsyncStorage.setItem('username', username); - userLogin(dispatch, {userId, username}, chatClient); + userLogin(dispatch, {userId, username}); } else { Alert.alert(ERROR_INVALID_INVITATION_CODE); } diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts index 0b958cac..a8789c1d 100644 --- a/src/store/reducers/userReducer.ts +++ b/src/store/reducers/userReducer.ts @@ -75,9 +75,6 @@ const userDataSlice = createSlice({ state.avatar = ''; state.cover = ''; }, - setChatClientReady: (state, action) => { - state.chatClientReady = action.payload.chatClientReady; - }, }, }); @@ -93,6 +90,6 @@ export const { setReplyPosted, setSuggestedPeopleImage, clearHeaderAndProfileImages, - setChatClientReady, + // setChatClientReady, } = userDataSlice.actions; export const userDataReducer = userDataSlice.reducer; diff --git a/src/utils/users.ts b/src/utils/users.ts index ec09198d..7148eb79 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -22,7 +22,6 @@ import { ScreenType, UserType, } from './../types/types'; -import {connectChatAccount} from './messages'; const loadData = async (dispatch: AppDispatch, user: UserType) => { await Promise.all([ @@ -43,11 +42,7 @@ 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, - chatClient?, -) => { +export const userLogin = async (dispatch: AppDispatch, user: UserType) => { try { let localUser = {...user}; if (!user.userId) { @@ -67,9 +62,6 @@ export const userLogin = async ( AsyncStorage.setItem('username', user.username), ]); } - if (chatClient) { - connectChatAccount(localUser.userId, chatClient, dispatch); - } await loadData(dispatch, localUser); } catch (error) { console.log(error); -- cgit v1.2.3-70-g09d2 From b1d6f9392385a679ff283954170c27abef946c7b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 14:38:05 -0700 Subject: new service funtion to get chat token --- src/services/ChatService.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/services/ChatService.ts (limited to 'src') diff --git a/src/services/ChatService.ts b/src/services/ChatService.ts new file mode 100644 index 00000000..da65641c --- /dev/null +++ b/src/services/ChatService.ts @@ -0,0 +1,22 @@ +import AsyncStorage from '@react-native-community/async-storage'; +import {CHAT_TOKEN_ENDPOINT} from '../constants/api'; + +export const loadChatTokenService = async () => { + try { + const token = await AsyncStorage.getItem('chatToken'); + const response = await fetch(CHAT_TOKEN_ENDPOINT, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + const status = response.status; + if (status === 200) { + const {chatToken} = await response.json(); + return chatToken; + } + return ''; + } catch (error) { + console.log('Error loading chat token in service'); + } +}; -- cgit v1.2.3-70-g09d2 From fbfb36b381216e0b50324064c79b0c0f5efc6a6c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 14:38:44 -0700 Subject: new funtion to get chat token and make connection --- src/utils/messages.ts | 35 ++++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/utils/messages.ts b/src/utils/messages.ts index 1c83ca9f..6b972b83 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -1,7 +1,6 @@ import AsyncStorage from '@react-native-community/async-storage'; import moment from 'moment'; -// import {updateChatClientReady} from '../store/actions'; -import {AppDispatch} from '../store/configureStore'; +import {loadChatTokenService} from '../services/ChatService'; import {RootState} from '../store/rootReducer'; import {ChannelGroupedType} from '../types'; @@ -88,17 +87,35 @@ export const getMember = ( export const connectChatAccount = async ( loggedInUserId: string, chatClient, - dispatch: AppDispatch, ) => { try { + await getChatToken(); const chatToken = await AsyncStorage.getItem('chatToken'); - await chatClient.connectUser( - { - id: loggedInUserId, - }, - chatToken, - ); + if (chatToken) { + await chatClient.connectUser( + { + id: loggedInUserId, + }, + chatToken, + ); + return true; + } else { + console.log('Unable to connect to stream. Empty chat token'); + return false; + } } catch (err) { console.log('Error while connecting user to Stream: ', err); + return false; + } +}; + +export const getChatToken = async () => { + try { + if (await AsyncStorage.getItem('chatToken')) { + const chatToken = await loadChatTokenService(); + AsyncStorage.setItem('chatToken', chatToken); + } + } catch (err) { + console.log(err); } }; -- cgit v1.2.3-70-g09d2 From 3d26676ea1e818b585b4b224f643524994a0e893 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 14:40:03 -0700 Subject: Connecting during login, app entry, msg btn tap --- src/components/profile/ProfileBody.tsx | 23 ++++++++++++++--------- src/routes/Routes.tsx | 5 ++++- src/screens/onboarding/Login.tsx | 6 +++--- 3 files changed, 21 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index e23249fa..eebdb167 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -21,6 +21,7 @@ import {NO_PROFILE} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; import {ScreenType} from '../../types'; import { + connectChatAccount, getUserAsProfilePreviewType, SCREEN_HEIGHT, SCREEN_WIDTH, @@ -96,16 +97,20 @@ const ProfileBody: React.FC = ({ }; const onPressMessage = async () => { - if (!chatClient.user) { - // TODO: Add refresh control to retry establishing chat connection - Alert.alert('Unable to connect chat'); + let connected: boolean = !chatClient.user; + if (!connected) { + connected = await connectChatAccount(loggedInUserId, chatClient); + if (!connected) { + Alert.alert('Unable to connect chat'); + } + } else { + const channel = chatClient.channel('messaging', { + members: [loggedInUserId, String(userXId)], + }); + channel.create(); + setChannel(channel); + navigation.navigate('Chat'); } - const channel = chatClient.channel('messaging', { - members: [loggedInUserId, String(userXId)], - }); - channel.create(); - setChannel(channel); - navigation.navigate('Chat'); }; return ( diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index adc6253b..5ce0c771 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -54,10 +54,13 @@ const Routes: React.FC = () => { if (userId) { fcmService.setUpPushNotifications(); fcmService.sendFcmTokenToServer(); - connectChatAccount(loggedInUserId, chatClient); } }, []); + useEffect(() => { + connectChatAccount(loggedInUserId, chatClient); + }, [loggedInUserId]); + useEffect(() => { const checkVersion = async () => { const liveVersions = await getCurrentLiveVersions(); diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 4f2b6a64..6d9abf82 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -29,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; @@ -162,14 +162,14 @@ const Login: React.FC = ({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) { //Stores token received in the response into client's AsynStorage try { - userLogin(dispatch, {userId: data.UserID, username}, chatClient); + userLogin(dispatch, {userId: data.UserID, username}); fcmService.sendFcmTokenToServer(); + connectChatAccount(data.UserID, chatClient); } catch (err) { Alert.alert(ERROR_INVALID_LOGIN); } -- cgit v1.2.3-70-g09d2 From 444dc434b63c7a24d3447e23eb9b4a9b469566a7 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 14:40:21 -0700 Subject: endpoint and error message --- src/constants/api.ts | 4 ++++ src/constants/strings.ts | 1 + 2 files changed, 5 insertions(+) (limited to 'src') diff --git a/src/constants/api.ts b/src/constants/api.ts index ffe47687..15ca6abc 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -55,6 +55,10 @@ export const UPDATE_BADGES_ENDPOINT: string = SP_USERS_ENDPOINT + 'update_badges // Register as FCM device export const FCM_ENDPOINT: string = API_URL + 'fcm/'; +// Retrieve Stream Chat token +export const CHAT_ENDPOINT: string = API_URL + 'chat/'; +export const CHAT_TOKEN_ENDPOINT: string = CHAT_ENDPOINT + 'get_token/'; + // Register Social Link (Non-integrated) export const LINK_SNAPCHAT_ENDPOINT: string = API_URL + 'link-sc/'; export const LINK_TIKTOK_ENDPOINT: string = API_URL + 'link-tt/'; diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 4f792dcc..106032b0 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -34,6 +34,7 @@ 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'; -- cgit v1.2.3-70-g09d2 From 6527289eb6249cfd057c47d0f797133ab8052339 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 15:19:49 -0700 Subject: major issue fixed --- src/screens/chat/ChatListScreen.tsx | 17 ++++++++++++++--- src/services/ChatService.ts | 6 +++--- src/utils/messages.ts | 5 +++-- 3 files changed, 20 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index eb886232..f2395f0a 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -3,6 +3,7 @@ import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect, useMemo, useState} from 'react'; import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; import {useSelector, useStore} from 'react-redux'; +import {connectChatAccount} from '../../utils'; import {ChannelList, Chat} from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import {TabsGradient} from '../../components'; @@ -43,10 +44,20 @@ const ChatListScreen: React.FC = () => { ); useEffect(() => { - if (!chatClientReady) { - Alert.alert('Something wrong with chat'); + let connected: boolean = !chatClient.user; + if (!connected) { + 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'); + }); } - }, [chatClientReady]); + }, []); return ( diff --git a/src/services/ChatService.ts b/src/services/ChatService.ts index da65641c..e9b1c284 100644 --- a/src/services/ChatService.ts +++ b/src/services/ChatService.ts @@ -3,7 +3,7 @@ import {CHAT_TOKEN_ENDPOINT} from '../constants/api'; export const loadChatTokenService = async () => { try { - const token = await AsyncStorage.getItem('chatToken'); + const token = await AsyncStorage.getItem('token'); const response = await fetch(CHAT_TOKEN_ENDPOINT, { method: 'GET', headers: { @@ -12,8 +12,8 @@ export const loadChatTokenService = async () => { }); const status = response.status; if (status === 200) { - const {chatToken} = await response.json(); - return chatToken; + const data = await response.json(); + return data.chatToken; } return ''; } catch (error) { diff --git a/src/utils/messages.ts b/src/utils/messages.ts index 6b972b83..dc01d579 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -111,9 +111,10 @@ export const connectChatAccount = async ( export const getChatToken = async () => { try { - if (await AsyncStorage.getItem('chatToken')) { + const currentChatToken = await AsyncStorage.getItem('chatToken'); + if (currentChatToken === null) { const chatToken = await loadChatTokenService(); - AsyncStorage.setItem('chatToken', chatToken); + await AsyncStorage.setItem('chatToken', chatToken); } } catch (err) { console.log(err); -- cgit v1.2.3-70-g09d2 From fc569d73a1b776e9a662fc27e5e6c4e45d7f5d15 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 18:34:07 -0400 Subject: resolved merge issues --- src/utils/messages.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/utils/messages.ts b/src/utils/messages.ts index dc01d579..a0bbdb46 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -3,6 +3,7 @@ import moment from 'moment'; import {loadChatTokenService} from '../services/ChatService'; import {RootState} from '../store/rootReducer'; import {ChannelGroupedType} from '../types'; +import {StreamChat} from 'stream-chat'; /** * Finds the difference in time in minutes @@ -86,7 +87,7 @@ export const getMember = ( export const connectChatAccount = async ( loggedInUserId: string, - chatClient, + chatClient: StreamChat, ) => { try { await getChatToken(); -- cgit v1.2.3-70-g09d2 From d595c4354b0a0a6892844457f3713538c75367b0 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 15:43:17 -0700 Subject: duplicate connect User calls --- src/utils/messages.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/utils/messages.ts b/src/utils/messages.ts index a0bbdb46..49033226 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -92,7 +92,7 @@ export const connectChatAccount = async ( try { await getChatToken(); const chatToken = await AsyncStorage.getItem('chatToken'); - if (chatToken) { + if (!chatClient.user && chatToken) { await chatClient.connectUser( { id: loggedInUserId, @@ -100,6 +100,8 @@ export const connectChatAccount = async ( chatToken, ); return true; + } else if (chatClient.user) { + return true; } else { console.log('Unable to connect to stream. Empty chat token'); return false; -- cgit v1.2.3-70-g09d2 From 5e9c0bcff40f0fa743f1c579c1ed135b3e1833b6 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 15:48:50 -0700 Subject: fix --- src/components/profile/ProfileBody.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index eebdb167..00532507 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -97,19 +97,19 @@ const ProfileBody: React.FC = ({ }; const onPressMessage = async () => { - let connected: boolean = !chatClient.user; - if (!connected) { - connected = await connectChatAccount(loggedInUserId, chatClient); - if (!connected) { - Alert.alert('Unable to connect chat'); - } - } else { + let connected: boolean = await connectChatAccount( + loggedInUserId, + chatClient, + ); + if (connected) { const channel = chatClient.channel('messaging', { members: [loggedInUserId, String(userXId)], }); channel.create(); setChannel(channel); navigation.navigate('Chat'); + } else { + Alert.alert('Something wrong with chat'); } }; -- cgit v1.2.3-70-g09d2 From 61034f314712750225ba21f1763014f26953479a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 9 Apr 2021 16:16:36 -0700 Subject: remove redundant if --- src/screens/chat/ChatListScreen.tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index a019891a..f9db0c77 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -45,19 +45,16 @@ const ChatListScreen: React.FC = () => { ); useEffect(() => { - let connected: boolean = !chatClient.user; - if (!connected) { - connectChatAccount(loggedInUserId, chatClient) - .then((success) => { - if (!success) { - Alert.alert('Something wrong with chat'); - } - }) - .catch((err) => { - console.log('Error connecting to chat: ', 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 ( -- cgit v1.2.3-70-g09d2 From 4d87b32fce89bfd08561d85a3f5440a98131336c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 19:05:57 -0400 Subject: fixed unread --- src/components/messages/MessagesHeader.tsx | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index 660da97d..1bd9b55a 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -1,10 +1,10 @@ -import React, {Fragment, useContext} from 'react'; +import React, {Fragment, useContext, useEffect, useState} from 'react'; import {StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import {normalize} from '../../utils'; -import ComposeIcon from '../../assets/icons/compose.svg'; import {ChatContext} from '../../App'; +import ComposeIcon from '../../assets/icons/compose.svg'; +import {normalize} from '../../utils'; type MessagesHeaderProps = { createChannel: () => void; @@ -12,11 +12,30 @@ type MessagesHeaderProps = { const MessagesHeader: React.FC = ({createChannel}) => { const {chatClient} = useContext(ChatContext); - const unread = chatClient.user?.total_unread_count as number; + const [unread, setUnread] = useState(0); + + useEffect(() => { + const newCount = chatClient.user?.total_unread_count as number; + if (newCount) { + setUnread(newCount); + } + const listener = chatClient?.on((e) => { + if (e.total_unread_count) { + setUnread(e.total_unread_count); + } + }); + + return () => { + if (listener) { + listener.unsubscribe(); + } + }; + }, [chatClient]); + return ( Messages - {unread && unread !== 0 ? ( + {unread !== 0 ? ( {unread > 99 ? '99+' : unread} unread -- cgit v1.2.3-70-g09d2 From 2a9b090ad62c2d157e06c978ba4cbc663f7c550f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 19:06:12 -0400 Subject: moved createChannel to messages util --- src/utils/common.ts | 18 ------------------ src/utils/messages.ts | 17 +++++++++++++++++ 2 files changed, 17 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/utils/common.ts b/src/utils/common.ts index 0900a084..7ae36dc6 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -173,21 +173,3 @@ const _crestIcon = (university: UniversityType) => { return require('../assets/images/bwbadges.png'); } }; - -export const createChannel = async ( - loggedInUser: string, - id: string, - chatClient: any, -) => { - console.log(loggedInUser, id, chatClient); - try { - const channel = chatClient.channel('messaging', { - members: [loggedInUser, id], - }); - await channel.watch(); - return channel; - } catch (error) { - console.log(error); - throw error; - } -}; diff --git a/src/utils/messages.ts b/src/utils/messages.ts index 49033226..dd29f317 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -123,3 +123,20 @@ export const getChatToken = async () => { console.log(err); } }; + +export const createChannel = async ( + loggedInUser: string, + id: string, + chatClient: any, +) => { + try { + const channel = chatClient.channel('messaging', { + members: [loggedInUser, id], + }); + await channel.watch(); + return channel; + } catch (error) { + console.log(error); + throw error; + } +}; -- cgit v1.2.3-70-g09d2 From ad9db5ffd0b2fb6334fd8237e0600a76d25c7053 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Apr 2021 19:22:30 -0400 Subject: added navigation to profile --- src/components/messages/ChatHeader.tsx | 81 ++++++++++++++++++++++++---------- src/components/profile/ProfileBody.tsx | 16 +++---- src/constants/strings.ts | 3 +- src/screens/chat/ChatScreen.tsx | 3 +- src/store/initialStates.ts | 1 + 5 files changed, 69 insertions(+), 35 deletions(-) (limited to 'src') 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 = () => { +const ChatHeader: React.FC = (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 ( - - - {online && } - - - - {member?.user?.first_name} {member?.user?.last_name} - - {lastSeen} - + + + + {online && } + + + + {member?.user?.first_name} {member?.user?.last_name} + + {lastSeen} + + ); }; @@ -41,10 +73,13 @@ const ChatHeader: React.FC = () => { 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 = ({ }; 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; @@ -32,7 +33,7 @@ const ChatScreen: React.FC = () => { // unable to figure out the padding issue, a hacky solution {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50}, ]}> - + {}} /> 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 = { -- cgit v1.2.3-70-g09d2