Merge pull request #354 from TaggiD-Inc/chat-poc

[POC] Chat

2 files changed, 103 insertions, 23 deletions

diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index c49c790d..9011ed4a 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
-import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
 import {StackNavigationProp} from '@react-navigation/stack';
-
+import React, {useContext, useEffect, useMemo, useState} from 'react';
+import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
+import {useStore} from 'react-redux';
+import {ChannelList, Chat} from 'stream-chat-react-native';
+import {ChatContext} from '../../App';
+import {MessagesHeader} from '../../components/messages';
 import {MainStackParams} from '../../routes';
+import {RootState} from '../../store/rootReducer';
 
 type ChatListScreenNavigationProp = StackNavigationProp<
   MainStackParams,
@@ -15,19 +20,80 @@ interface ChatListScreenProps {
  * Screen that displays all of the user's active conversations.
  */
 const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
+  const {chatClient, setChannel} = useContext(ChatContext);
+  const [clientReady, setClientReady] = useState(false);
+  const state: RootState = useStore().getState();
+  const loggedInUserId = state.user.user.userId;
+
+  const memoizedFilters = useMemo(
+    () => ({
+      members: {$in: [loggedInUserId]},
+      type: 'messaging',
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    const setupClient = async () => {
+      const chatToken = await AsyncStorage.getItem('chatToken');
+      await chatClient.connectUser(
+        {
+          id: loggedInUserId,
+        },
+        chatToken,
+      );
+      return setClientReady(true);
+    };
+    if (!clientReady) {
+      setupClient().catch((err) => {
+        console.error(err);
+      });
+    }
+  }, []);
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.placeholder}>I am the chat list.</Text>
-      <TouchableOpacity
-        style={styles.button}
-        onPress={() => navigation.navigate('Chat')}>
-        <Text>Let's go to a conversation!</Text>
-      </TouchableOpacity>
+    <View style={styles.background}>
+      <SafeAreaView>
+        <StatusBar barStyle="dark-content" />
+        <MessagesHeader
+          createChannel={() => {
+            // TODO: (CHAT) change me
+            const channel = chatClient.channel('messaging', {
+              name: 'Awesome channel with foobar',
+              members: [loggedInUserId, 'd5295557-59ce-49fc-aa8a-442874dbffc3'],
+            });
+            channel.create();
+          }}
+        />
+        {clientReady && (
+          <Chat client={chatClient}>
+            <View style={styles.chatContainer}>
+              <ChannelList
+                filters={memoizedFilters}
+                onSelect={(channel) => {
+                  setChannel(channel);
+                  navigation.navigate('Chat');
+                }}
+                options={{
+                  presence: true,
+                  state: true,
+                  watch: true,
+                }}
+                sort={{last_message_at: -1}}
+              />
+            </View>
+          </Chat>
+        )}
+      </SafeAreaView>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -43,6 +109,10 @@ const styles = StyleSheet.create({
     padding: 15,
     borderRadius: 5,
   },
+  chatContainer: {
+    height: '100%',
+    marginTop: 10,
+  },
 });
 
 export default ChatListScreen;
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index af83f504..eeb1a7d6 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,7 +1,14 @@
-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';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
@@ -12,22 +19,25 @@ interface ChatScreenProps {
  * Screen that displays all of the user's active conversations.
  */
 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',
   },
 });