Merge pull request #355 from IvanIFChen/tma769-styling-channel-list-screen

[TMA-769] Styling chat list screen

3 files changed, 41 insertions, 15 deletions

diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 9011ed4a..3290116b 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -5,9 +5,19 @@ 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 {TabsGradient} from '../../components';
+import {ChannelPreview, MessagesHeader} from '../../components/messages';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootReducer';
+import {
+  LocalAttachmentType,
+  LocalChannelType,
+  LocalCommandType,
+  LocalEventType,
+  LocalMessageType,
+  LocalReactionType,
+  LocalUserType,
+} from '../../types';
 
 type ChatListScreenNavigationProp = StackNavigationProp<
   MainStackParams,
@@ -19,8 +29,8 @@ interface ChatListScreenProps {
 /*
  * Screen that displays all of the user's active conversations.
  */
-const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
-  const {chatClient, setChannel} = useContext(ChatContext);
+const ChatListScreen: React.FC<ChatListScreenProps> = () => {
+  const {chatClient} = useContext(ChatContext);
   const [clientReady, setClientReady] = useState(false);
   const state: RootState = useStore().getState();
   const loggedInUserId = state.user.user.userId;
@@ -68,23 +78,30 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
         {clientReady && (
           <Chat client={chatClient}>
             <View style={styles.chatContainer}>
-              <ChannelList
+              <ChannelList<
+                LocalAttachmentType,
+                LocalChannelType,
+                LocalCommandType,
+                LocalEventType,
+                LocalMessageType,
+                LocalReactionType,
+                LocalUserType
+              >
                 filters={memoizedFilters}
-                onSelect={(channel) => {
-                  setChannel(channel);
-                  navigation.navigate('Chat');
-                }}
                 options={{
                   presence: true,
                   state: true,
                   watch: true,
                 }}
                 sort={{last_message_at: -1}}
+                maxUnreadCount={99}
+                Preview={ChannelPreview}
               />
             </View>
           </Chat>
         )}
       </SafeAreaView>
+      <TabsGradient />
     </View>
   );
 };
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index eeb1a7d6..59c53c99 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,7 +1,8 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
-import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack';
+import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import {
   Channel,
   Chat,
@@ -9,7 +10,9 @@ import {
   MessageList,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
+import ChatHeader from '../../components/messages/ChatHeader';
 import {MainStackParams} from '../../routes';
+import {isIPhoneX} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -20,24 +23,30 @@ interface ChatScreenProps {
  */
 const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {channel, chatClient} = useContext(ChatContext);
-  const headerHeight = useHeaderHeight();
   const tabbarHeight = useBottomTabBarHeight();
 
   return (
-    <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
+    <SafeAreaView
+      style={[
+        styles.container,
+        // unable to figure out the padding issue, a hacky solution
+        {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
+      ]}>
+      <ChatHeader />
       <Chat client={chatClient}>
-        <Channel channel={channel} keyboardVerticalOffset={headerHeight}>
+        <Channel channel={channel} keyboardVerticalOffset={0}>
           <MessageList onThreadSelect={() => {}} />
           <MessageInput />
         </Channel>
       </Chat>
-    </View>
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
+    flex: 1,
   },
 });
 
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 48e89f7a..71199c9b 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -330,7 +330,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'stretch',
     justifyContent: 'space-between',
-    width: SCREEN_WIDTH * 0.85,
+    width: SCREEN_WIDTH * 0.9,
   },
   headerText: {
     fontWeight: '700',