4 files changed, 49 insertions, 16 deletions

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<MessagesHeaderProps> = () => {
+const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
   return (
     <View style={styles.header}>
       <Text style={styles.headerText}>Messages</Text>
@@ -15,7 +17,7 @@ const MessagesHeader: React.FC<MessagesHeaderProps> = () => {
       <TouchableOpacity
         style={styles.compose}
         onPress={() => {
-          Alert.alert('hi');
+          createChannel();
         }}>
         <Text>Compose</Text>
       </TouchableOpacity>
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<MainStackParams>();
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>