From c03eba730ad99bbadc49601f5f9387c1ca4c0eac Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 2 Apr 2021 17:00:11 -0400
Subject: created navigation to chat

---
 src/screens/chat/ChatListScreen.tsx | 44 ++++++++++++++++++++++++++++---------
 src/screens/chat/ChatScreen.tsx     |  9 +++++++-
 2 files changed, 42 insertions(+), 11 deletions(-)

(limited to 'src/screens')

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<ChatListScreenProps> = ({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<ChatListScreenProps> = ({navigation}) => {
     <View style={styles.background}>
       <SafeAreaView>
         <StatusBar barStyle="dark-content" />
-        <MessagesHeader />
+        <MessagesHeader
+          createChannel={() => {
+            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}>
             <View style={styles.chatContainer}>
@@ -59,6 +79,10 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({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<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> = () => {
+const ChatScreen: React.FC<ChatScreenProps> = ({route}) => {
+  const {channel, chatClient} = route.params;
+  console.log(channel);
+  console.log(chatClient);
   return (
     <View style={styles.container}>
       <Text style={styles.placeholder}>I am a chat!</Text>
-- 
cgit v1.2.3-70-g09d2