From 69613af86a9364f72dc2ce5f24722a3eb4b94ed2 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 2 Apr 2021 18:59:00 -0400
Subject: finished chat poc

---
 src/screens/chat/ChatListScreen.tsx | 48 ++++++++++++++-----------------------
 src/screens/chat/ChatScreen.tsx     | 45 ++++++++++++++++++----------------
 2 files changed, 42 insertions(+), 51 deletions(-)

(limited to 'src/screens/chat')

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',
   },
 });
 
-- 
cgit v1.2.3-70-g09d2