From 4edcaf03ae6e41ba9eb11a381540db4692375463 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 2 Apr 2021 16:06:20 -0400
Subject: added initial styling

---
 src/components/messages/MessagesHeader.tsx | 51 ++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/components/messages/MessagesHeader.tsx

(limited to 'src/components/messages/MessagesHeader.tsx')

diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
new file mode 100644
index 00000000..47a84bf3
--- /dev/null
+++ b/src/components/messages/MessagesHeader.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+
+type MessagesHeaderProps = {};
+
+const MessagesHeader: React.FC<MessagesHeaderProps> = () => {
+  return (
+    <View style={styles.header}>
+      <Text style={styles.headerText}>Messages</Text>
+      <Text style={styles.unreadText}>2 unread</Text>
+      <View style={styles.flex} />
+      <TouchableOpacity
+        style={styles.compose}
+        onPress={() => {
+          Alert.alert('hi');
+        }}>
+        <Text>Compose</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  header: {
+    marginHorizontal: '8%',
+    marginTop: '5%',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  headerText: {
+    fontWeight: '700',
+    fontSize: normalize(18),
+    lineHeight: normalize(21),
+  },
+  unreadText: {
+    color: '#8F01FF',
+    marginLeft: 10,
+    fontWeight: '700',
+    lineHeight: normalize(17),
+    fontSize: normalize(14),
+  },
+  compose: {},
+});
+
+export default MessagesHeader;
-- 
cgit v1.2.3-70-g09d2


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/components/messages/MessagesHeader.tsx | 10 ++++---
 src/routes/main/MainStackNavigator.tsx     |  2 +-
 src/screens/chat/ChatListScreen.tsx        | 44 +++++++++++++++++++++++-------
 src/screens/chat/ChatScreen.tsx            |  9 +++++-
 4 files changed, 49 insertions(+), 16 deletions(-)

(limited to 'src/components/messages/MessagesHeader.tsx')

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>
-- 
cgit v1.2.3-70-g09d2


From 88d1ec9dff5674e8759ca33e4255af16b4bf51a5 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Mon, 5 Apr 2021 15:29:11 -0400
Subject: code cleanup

---
 src/components/messages/MessagesHeader.tsx | 4 +---
 src/screens/chat/ChatListScreen.tsx        | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

(limited to 'src/components/messages/MessagesHeader.tsx')

diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
index 3b8144f7..d8445580 100644
--- a/src/components/messages/MessagesHeader.tsx
+++ b/src/components/messages/MessagesHeader.tsx
@@ -16,9 +16,7 @@ const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
       <View style={styles.flex} />
       <TouchableOpacity
         style={styles.compose}
-        onPress={() => {
-          createChannel();
-        }}>
+        onPress={createChannel}>
         <Text>Compose</Text>
       </TouchableOpacity>
     </View>
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 8bced236..8fa6998c 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -68,7 +68,6 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
               <ChannelList
                 filters={memoizedFilters}
                 onSelect={(channel) => {
-                  // TODO: (CHAT) fix type issue
                   setChannel(channel);
                   navigation.navigate('Chat');
                 }}
-- 
cgit v1.2.3-70-g09d2

