finished chat poc

5 files changed, 123 insertions, 54 deletions

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
      */
     <Provider store={store}>
       <NavigationContainer ref={navigationRef}>
-        <Routes />
+        <ChatContext.Provider value={{channel, setChannel, chatClient}}>
+          <OverlayProvider>
+            <Routes />
+          </OverlayProvider>
+        </ChatContext.Provider>
       </NavigationContainer>
     </Provider>
   );
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<MainStackParams>();
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<ChatListScreenProps> = ({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<ChatListScreenProps> = ({navigation}) => {
         },
         chatClient.devToken('john'),
       );
-
       return setClientReady(true);
     };
 
@@ -52,37 +48,29 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
     });
   }, []);
 
-  const streami18n = new Streami18n({
-    language: 'en',
-  });
-
-  const memoizedFilters = useMemo(() => filters, []);
-
   return (
     <View style={styles.background}>
       <SafeAreaView>
         <StatusBar barStyle="dark-content" />
         <MessagesHeader
           createChannel={() => {
+            // 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 && (
-          <Chat client={chatClient} i18nInstance={streami18n}>
+          <Chat client={chatClient}>
             <View style={styles.chatContainer}>
               <ChannelList
                 filters={memoizedFilters}
                 onSelect={(channel) => {
-                  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<MainStackParams, 'Chat'>;
-type ChatScreenRouteProp = RouteProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
   navigation: ChatScreenNavigationProp;
-  route: ChatScreenRouteProp;
 }
 /*
  * Screen that displays all of the user's active conversations.
  */
-const ChatScreen: React.FC<ChatScreenProps> = ({route}) => {
-  const {channel, chatClient} = route.params;
-  console.log(channel);
-  console.log(chatClient);
+const ChatScreen: React.FC<ChatScreenProps> = () => {
+  const {channel, chatClient} = useContext(ChatContext);
+  const headerHeight = useHeaderHeight();
+  const tabbarHeight = useBottomTabBarHeight();
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.placeholder}>I am a chat!</Text>
+    <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
+      <Chat client={chatClient}>
+        <Channel channel={channel} keyboardVerticalOffset={headerHeight}>
+          <MessageList onThreadSelect={() => {}} />
+          <MessageInput />
+        </Channel>
+      </Chat>
     </View>
   );
 };
 
 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<UniversityType, any[]>;
+
+// Stream Chat Types
+export type LocalAttachmentType = Record<string, unknown>;
+export type LocalChannelType = Record<string, unknown>;
+export type LocalCommandType = string;
+export type LocalEventType = Record<string, unknown>;
+export type LocalMessageType = Record<string, unknown>;
+export type LocalResponseType = Record<string, unknown>;
+export type LocalUserType = Record<string, unknown>;
+
+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;
+};