From a98147d9783da605a155aac5846cdfd8389fc9d6 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 2 Apr 2021 15:42:04 -0400 Subject: added stream-chat, working sample --- src/screens/chat/ChatListScreen.tsx | 68 ++++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) (limited to 'src/screens/chat') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index c49c790d..416e7936 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,6 +1,20 @@ -import React from 'react'; +import {StreamChat} from 'stream-chat'; +import React, {useEffect, useMemo, useState} from 'react'; import {View, StyleSheet, Text, TouchableOpacity} from 'react-native'; import {StackNavigationProp} from '@react-navigation/stack'; +import { + Channel, + ChannelList, + Chat, + MessageInput, + MessageList, + OverlayProvider, + Streami18n, + Thread, + ThreadContextValue, + useAttachmentPickerContext, + useOverlayContext, +} from 'stream-chat-react-native'; import {MainStackParams} from '../../routes'; @@ -15,6 +29,36 @@ interface ChatListScreenProps { * Screen that displays all of the user's active conversations. */ const ChatListScreen: React.FC = ({navigation}) => { + const filters = { + example: 'example-apps', + members: {$in: ['ron']}, + type: 'messaging', + }; + const [clientReady, setClientReady] = useState(false); + + const chatClient = StreamChat.getInstance('q95x9hkbyd6p'); + const userToken = + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c'; + const user = { + id: 'ron', + }; + + useEffect(() => { + const setupClient = async () => { + await chatClient.connectUser(user, userToken); + + return setClientReady(true); + }; + + setupClient(); + }, []); + + const streami18n = new Streami18n({ + language: 'en', + }); + + const memoizedFilters = useMemo(() => filters, []); + return ( I am the chat list. @@ -23,6 +67,28 @@ const ChatListScreen: React.FC = ({navigation}) => { onPress={() => navigation.navigate('Chat')}> Let's go to a conversation! + {clientReady && ( + <> + Fooooo + + + { + // setChannel(channel); + // navigation.navigate('Channel'); + }} + options={{ + presence: true, + state: true, + watch: true, + }} + sort={{last_message_at: -1}} + /> + + + + )} ); }; -- cgit v1.2.3-70-g09d2 From 4edcaf03ae6e41ba9eb11a381540db4692375463 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 2 Apr 2021 16:06:20 -0400 Subject: added initial styling --- src/components/index.ts | 1 + src/components/messages/MessagesHeader.tsx | 51 ++++++++++++++++++++++++++++ src/components/messages/index.ts | 1 + src/screens/chat/ChatListScreen.tsx | 54 ++++++++++++------------------ 4 files changed, 75 insertions(+), 32 deletions(-) create mode 100644 src/components/messages/MessagesHeader.tsx create mode 100644 src/components/messages/index.ts (limited to 'src/screens/chat') diff --git a/src/components/index.ts b/src/components/index.ts index d5649323..47dc583b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,3 +6,4 @@ export * from './taggs'; export * from './comments'; export * from './moments'; export * from './suggestedPeople'; +export * from './messages'; diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx new file mode 100644 index 00000000..47a84bf3 --- /dev/null +++ b/src/components/messages/MessagesHeader.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import {Alert, StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {normalize} from '../../utils'; + +type MessagesHeaderProps = {}; + +const MessagesHeader: React.FC = () => { + return ( + + Messages + 2 unread + + { + Alert.alert('hi'); + }}> + Compose + + + ); +}; + +const styles = StyleSheet.create({ + flex: { + flex: 1, + }, + header: { + marginHorizontal: '8%', + marginTop: '5%', + alignItems: 'center', + flexDirection: 'row', + }, + headerText: { + fontWeight: '700', + fontSize: normalize(18), + lineHeight: normalize(21), + }, + unreadText: { + color: '#8F01FF', + marginLeft: 10, + fontWeight: '700', + lineHeight: normalize(17), + fontSize: normalize(14), + }, + compose: {}, +}); + +export default MessagesHeader; diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts new file mode 100644 index 00000000..2d6bb581 --- /dev/null +++ b/src/components/messages/index.ts @@ -0,0 +1 @@ +export {default as MessagesHeader} from './MessagesHeader'; diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 416e7936..56493cf7 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,21 +1,9 @@ -import {StreamChat} from 'stream-chat'; -import React, {useEffect, useMemo, useState} from 'react'; -import {View, StyleSheet, Text, TouchableOpacity} from 'react-native'; import {StackNavigationProp} from '@react-navigation/stack'; -import { - Channel, - ChannelList, - Chat, - MessageInput, - MessageList, - OverlayProvider, - Streami18n, - Thread, - ThreadContextValue, - useAttachmentPickerContext, - useOverlayContext, -} from 'stream-chat-react-native'; - +import React, {useEffect, useMemo, useState} from 'react'; +import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; +import {StreamChat} from 'stream-chat'; +import {ChannelList, Chat, Streami18n} from 'stream-chat-react-native'; +import {MessagesHeader} from '../../components/messages'; import {MainStackParams} from '../../routes'; type ChatListScreenNavigationProp = StackNavigationProp< @@ -60,23 +48,17 @@ const ChatListScreen: React.FC = ({navigation}) => { const memoizedFilters = useMemo(() => filters, []); return ( - - I am the chat list. - navigation.navigate('Chat')}> - Let's go to a conversation! - - {clientReady && ( - <> - Fooooo + + + + + {clientReady && ( - + { - // setChannel(channel); - // navigation.navigate('Channel'); + console.log('Navigate to chat screen here'); }} options={{ presence: true, @@ -87,13 +69,17 @@ const ChatListScreen: React.FC = ({navigation}) => { /> - - )} + )} + ); }; const styles = StyleSheet.create({ + background: { + flex: 1, + backgroundColor: 'white', + }, container: { flex: 1, justifyContent: 'center', @@ -109,6 +95,10 @@ const styles = StyleSheet.create({ padding: 15, borderRadius: 5, }, + chatContainer: { + height: '100%', + marginTop: 10, + }, }); export default ChatListScreen; -- cgit v1.2.3-70-g09d2 From c03eba730ad99bbadc49601f5f9387c1ca4c0eac Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 2 Apr 2021 17:00:11 -0400 Subject: created navigation to chat --- src/components/messages/MessagesHeader.tsx | 10 ++++--- src/routes/main/MainStackNavigator.tsx | 2 +- src/screens/chat/ChatListScreen.tsx | 44 +++++++++++++++++++++++------- src/screens/chat/ChatScreen.tsx | 9 +++++- 4 files changed, 49 insertions(+), 16 deletions(-) (limited to 'src/screens/chat') diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index 47a84bf3..3b8144f7 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; -import {Alert, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {normalize} from '../../utils'; -type MessagesHeaderProps = {}; +type MessagesHeaderProps = { + createChannel: () => void; +}; -const MessagesHeader: React.FC = () => { +const MessagesHeader: React.FC = ({createChannel}) => { return ( Messages @@ -15,7 +17,7 @@ const MessagesHeader: React.FC = () => { { - Alert.alert('hi'); + createChannel(); }}> Compose diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 021c0688..36c6fb57 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -93,7 +93,7 @@ export type MainStackParams = { }; SPWelcomeScreen: {}; ChatList: undefined; - Chat: undefined; + Chat: {channel: any; chatClient: any}; }; export const MainStack = createStackNavigator(); diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 56493cf7..106995e0 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -19,26 +19,37 @@ interface ChatListScreenProps { const ChatListScreen: React.FC = ({navigation}) => { const filters = { example: 'example-apps', - members: {$in: ['ron']}, + members: {$in: ['john']}, type: 'messaging', }; const [clientReady, setClientReady] = useState(false); - const chatClient = StreamChat.getInstance('q95x9hkbyd6p'); - const userToken = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c'; - const user = { - id: 'ron', - }; + const chatClient = StreamChat.getInstance('t823wwqn2wuk'); + // const chatClient = StreamChat.getInstance('q95x9hkbyd6p'); useEffect(() => { const setupClient = async () => { - await chatClient.connectUser(user, userToken); + // await chatClient.connectUser( + // { + // id: 'ron', + // }, + // 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c', + // ); + await chatClient.connectUser( + { + id: 'john', + name: 'John Doe', + image: 'https://getstream.io/random_svg/?name=John', + }, + chatClient.devToken('john'), + ); return setClientReady(true); }; - setupClient(); + setupClient().catch((err) => { + console.error(err); + }); }, []); const streami18n = new Streami18n({ @@ -51,7 +62,16 @@ const ChatListScreen: React.FC = ({navigation}) => { - + { + const channel = chatClient.channel('messaging', 'travel2', { + name: 'Awesome channel about traveling', + members: ['john'], + }); + // console.log(JSON.stringify(channel)); + channel.create(); + }} + /> {clientReady && ( @@ -59,6 +79,10 @@ const ChatListScreen: React.FC = ({navigation}) => { filters={memoizedFilters} onSelect={(channel) => { console.log('Navigate to chat screen here'); + navigation.navigate('Chat', { + channel, + chatClient, + }); }} options={{ presence: true, diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index af83f504..08145b89 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -3,15 +3,22 @@ import {View, StyleSheet, Text} from 'react-native'; import {StackNavigationProp} from '@react-navigation/stack'; import {MainStackParams} from '../../routes'; +import {navigationRef} from '../../RootNavigation'; +import {RouteProp} from '@react-navigation/native'; type ChatScreenNavigationProp = StackNavigationProp; +type ChatScreenRouteProp = RouteProp; interface ChatScreenProps { navigation: ChatScreenNavigationProp; + route: ChatScreenRouteProp; } /* * Screen that displays all of the user's active conversations. */ -const ChatScreen: React.FC = () => { +const ChatScreen: React.FC = ({route}) => { + const {channel, chatClient} = route.params; + console.log(channel); + console.log(chatClient); return ( I am a chat! -- cgit v1.2.3-70-g09d2 From 69613af86a9364f72dc2ce5f24722a3eb4b94ed2 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 2 Apr 2021 18:59:00 -0400 Subject: finished chat poc --- src/App.tsx | 43 ++++++++++++++++++++++++++++-- src/routes/main/MainStackNavigator.tsx | 2 +- src/screens/chat/ChatListScreen.tsx | 48 +++++++++++++--------------------- src/screens/chat/ChatScreen.tsx | 45 ++++++++++++++++--------------- src/types/types.ts | 39 +++++++++++++++++++++++++++ 5 files changed, 123 insertions(+), 54 deletions(-) (limited to 'src/screens/chat') diff --git a/src/App.tsx b/src/App.tsx index ea3617dc..d0276dd2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,57 @@ import {NavigationContainer} from '@react-navigation/native'; -import React from 'react'; +import React, {useState} from 'react'; import {Provider} from 'react-redux'; +import {Channel as ChannelType, StreamChat} from 'stream-chat'; +import {OverlayProvider} from 'stream-chat-react-native'; import {navigationRef} from './RootNavigation'; import Routes from './routes'; import store from './store/configureStore'; +import { + ChatContextType, + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalResponseType, + LocalUserType, +} from './types'; + +export const ChatContext = React.createContext({} as ChatContextType); const App = () => { + const [channel, setChannel] = useState< + ChannelType< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalResponseType, + LocalUserType + > + >(); + // TODO: (CHAT) change me + const chatClient = StreamChat.getInstance< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalResponseType, + LocalUserType + >('t823wwqn2wuk'); return ( /** * This is the provider from the redux store, it acts as the root provider for our application */ - + + + + + ); diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 36c6fb57..021c0688 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -93,7 +93,7 @@ export type MainStackParams = { }; SPWelcomeScreen: {}; ChatList: undefined; - Chat: {channel: any; chatClient: any}; + Chat: undefined; }; export const MainStack = createStackNavigator(); diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 106995e0..8bced236 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,8 +1,8 @@ import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useEffect, useMemo, useState} from 'react'; +import React, {useContext, useEffect, useMemo, useState} from 'react'; import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native'; -import {StreamChat} from 'stream-chat'; -import {ChannelList, Chat, Streami18n} from 'stream-chat-react-native'; +import {ChannelList, Chat} from 'stream-chat-react-native'; +import {ChatContext} from '../../App'; import {MessagesHeader} from '../../components/messages'; import {MainStackParams} from '../../routes'; @@ -17,24 +17,21 @@ interface ChatListScreenProps { * Screen that displays all of the user's active conversations. */ const ChatListScreen: React.FC = ({navigation}) => { - const filters = { - example: 'example-apps', - members: {$in: ['john']}, - type: 'messaging', - }; + const {chatClient, setChannel} = useContext(ChatContext); const [clientReady, setClientReady] = useState(false); - const chatClient = StreamChat.getInstance('t823wwqn2wuk'); - // const chatClient = StreamChat.getInstance('q95x9hkbyd6p'); + // TODO: (CHAT) change this filter to filter for user-ids, or usernames?! + const memoizedFilters = useMemo( + () => ({ + members: {$in: ['john']}, + type: 'messaging', + }), + [], + ); useEffect(() => { const setupClient = async () => { - // await chatClient.connectUser( - // { - // id: 'ron', - // }, - // 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c', - // ); + // TODO: (CHAT) change me await chatClient.connectUser( { id: 'john', @@ -43,7 +40,6 @@ const ChatListScreen: React.FC = ({navigation}) => { }, chatClient.devToken('john'), ); - return setClientReady(true); }; @@ -52,37 +48,29 @@ const ChatListScreen: React.FC = ({navigation}) => { }); }, []); - const streami18n = new Streami18n({ - language: 'en', - }); - - const memoizedFilters = useMemo(() => filters, []); - return ( { + // TODO: (CHAT) change me const channel = chatClient.channel('messaging', 'travel2', { name: 'Awesome channel about traveling', members: ['john'], }); - // console.log(JSON.stringify(channel)); channel.create(); }} /> {clientReady && ( - + { - console.log('Navigate to chat screen here'); - navigation.navigate('Chat', { - channel, - chatClient, - }); + // TODO: (CHAT) fix type issue + setChannel(channel); + navigation.navigate('Chat'); }} options={{ presence: true, diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 08145b89..eeb1a7d6 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,40 +1,43 @@ -import React from 'react'; -import {View, StyleSheet, Text} from 'react-native'; -import {StackNavigationProp} from '@react-navigation/stack'; - +import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; +import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack'; +import React, {useContext} from 'react'; +import {StyleSheet, View} from 'react-native'; +import { + Channel, + Chat, + MessageInput, + MessageList, +} from 'stream-chat-react-native'; +import {ChatContext} from '../../App'; import {MainStackParams} from '../../routes'; -import {navigationRef} from '../../RootNavigation'; -import {RouteProp} from '@react-navigation/native'; type ChatScreenNavigationProp = StackNavigationProp; -type ChatScreenRouteProp = RouteProp; interface ChatScreenProps { navigation: ChatScreenNavigationProp; - route: ChatScreenRouteProp; } /* * Screen that displays all of the user's active conversations. */ -const ChatScreen: React.FC = ({route}) => { - const {channel, chatClient} = route.params; - console.log(channel); - console.log(chatClient); +const ChatScreen: React.FC = () => { + const {channel, chatClient} = useContext(ChatContext); + const headerHeight = useHeaderHeight(); + const tabbarHeight = useBottomTabBarHeight(); + return ( - - I am a chat! + + + + {}} /> + + + ); }; const styles = StyleSheet.create({ container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - placeholder: { - fontSize: 14, - fontWeight: 'bold', + backgroundColor: 'white', }, }); diff --git a/src/types/types.ts b/src/types/types.ts index e7acd6e0..b5dc6373 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,4 +1,5 @@ import Animated from 'react-native-reanimated'; +import {Channel as ChannelType, StreamChat} from 'stream-chat'; export interface UserType { userId: string; @@ -288,3 +289,41 @@ export type ContactType = { export type UniversityBadgeType = 'Search' | 'Crest'; export type BadgeDataType = Record; + +// Stream Chat Types +export type LocalAttachmentType = Record; +export type LocalChannelType = Record; +export type LocalCommandType = string; +export type LocalEventType = Record; +export type LocalMessageType = Record; +export type LocalResponseType = Record; +export type LocalUserType = Record; + +export type ChatContextType = { + channel: + | ChannelType< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalResponseType, + LocalUserType + > + | undefined; + setChannel: React.Dispatch< + React.SetStateAction< + | ChannelType< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalResponseType, + LocalUserType + > + | undefined + > + >; + chatClient: StreamChat; +}; -- cgit v1.2.3-70-g09d2 From 88d1ec9dff5674e8759ca33e4255af16b4bf51a5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 5 Apr 2021 15:29:11 -0400 Subject: code cleanup --- src/components/messages/MessagesHeader.tsx | 4 +--- src/screens/chat/ChatListScreen.tsx | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) (limited to 'src/screens/chat') diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx index 3b8144f7..d8445580 100644 --- a/src/components/messages/MessagesHeader.tsx +++ b/src/components/messages/MessagesHeader.tsx @@ -16,9 +16,7 @@ const MessagesHeader: React.FC = ({createChannel}) => { { - createChannel(); - }}> + onPress={createChannel}> Compose diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 8bced236..8fa6998c 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -68,7 +68,6 @@ const ChatListScreen: React.FC = ({navigation}) => { { - // TODO: (CHAT) fix type issue setChannel(channel); navigation.navigate('Chat'); }} -- cgit v1.2.3-70-g09d2 From 28218a67a6630863d57f1699e8453155ee5f2aa3 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 6 Apr 2021 15:23:14 -0400 Subject: using tagg user id --- src/screens/chat/ChatListScreen.tsx | 21 ++++++++++++--------- src/store/actions/user.ts | 2 +- 2 files changed, 13 insertions(+), 10 deletions(-) (limited to 'src/screens/chat') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 8fa6998c..0d180b98 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -1,10 +1,13 @@ +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 {ChannelList, Chat} from 'stream-chat-react-native'; import {ChatContext} from '../../App'; import {MessagesHeader} from '../../components/messages'; import {MainStackParams} from '../../routes'; +import {RootState} from '../../store/rootReducer'; type ChatListScreenNavigationProp = StackNavigationProp< MainStackParams, @@ -19,11 +22,13 @@ interface ChatListScreenProps { const ChatListScreen: React.FC = ({navigation}) => { const {chatClient, setChannel} = useContext(ChatContext); const [clientReady, setClientReady] = useState(false); + const state: RootState = useStore().getState(); + const loggedInUserId = state.user.user.userId; // TODO: (CHAT) change this filter to filter for user-ids, or usernames?! const memoizedFilters = useMemo( () => ({ - members: {$in: ['john']}, + members: {$in: [loggedInUserId]}, type: 'messaging', }), [], @@ -31,14 +36,12 @@ const ChatListScreen: React.FC = ({navigation}) => { useEffect(() => { const setupClient = async () => { - // TODO: (CHAT) change me + const chatToken = await AsyncStorage.getItem('chatToken'); await chatClient.connectUser( { - id: 'john', - name: 'John Doe', - image: 'https://getstream.io/random_svg/?name=John', + id: loggedInUserId, }, - chatClient.devToken('john'), + chatToken, ); return setClientReady(true); }; @@ -55,9 +58,9 @@ const ChatListScreen: React.FC = ({navigation}) => { { // TODO: (CHAT) change me - const channel = chatClient.channel('messaging', 'travel2', { - name: 'Awesome channel about traveling', - members: ['john'], + const channel = chatClient.channel('messaging', 'test1', { + name: 'Awesome channel about test1', + members: [loggedInUserId], }); channel.create(); }} diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 4faa2206..3ebd4190 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -173,7 +173,7 @@ export const logout = ( try { // do our best effort here to gracefully disconnect the user if (client) { - await client.disconnectUser(); + client.disconnectUser(); } await AsyncStorage.clear(); dispatch({type: userLoggedIn.type, payload: {userId: '', username: ''}}); -- cgit v1.2.3-70-g09d2 From 4b0e55cd751bd77e05b8158177a74bd190974218 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 6 Apr 2021 15:35:22 -0400 Subject: added check for client ready --- src/screens/chat/ChatListScreen.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'src/screens/chat') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 0d180b98..801a9d19 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -45,10 +45,11 @@ const ChatListScreen: React.FC = ({navigation}) => { ); return setClientReady(true); }; - - setupClient().catch((err) => { - console.error(err); - }); + if (!clientReady) { + setupClient().catch((err) => { + console.error(err); + }); + } }, []); return ( -- cgit v1.2.3-70-g09d2 From 6db092b4b88a71c53088a14e330ec73e208ad958 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Apr 2021 14:56:42 -0400 Subject: cleaned up TODO, updated sample --- src/screens/chat/ChatListScreen.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'src/screens/chat') diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 801a9d19..9011ed4a 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -25,7 +25,6 @@ const ChatListScreen: React.FC = ({navigation}) => { const state: RootState = useStore().getState(); const loggedInUserId = state.user.user.userId; - // TODO: (CHAT) change this filter to filter for user-ids, or usernames?! const memoizedFilters = useMemo( () => ({ members: {$in: [loggedInUserId]}, @@ -59,9 +58,9 @@ const ChatListScreen: React.FC = ({navigation}) => { { // TODO: (CHAT) change me - const channel = chatClient.channel('messaging', 'test1', { - name: 'Awesome channel about test1', - members: [loggedInUserId], + const channel = chatClient.channel('messaging', { + name: 'Awesome channel with foobar', + members: [loggedInUserId, 'd5295557-59ce-49fc-aa8a-442874dbffc3'], }); channel.create(); }} -- cgit v1.2.3-70-g09d2