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') 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