From fab86f9b874524a4beabb3c45a9e59e8b00ca495 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 8 Apr 2021 18:42:28 -0400
Subject: added chat header, created isMember util, fixed KB padding issue

---
 src/components/messages/ChannelPreview.tsx | 25 ++++-----
 src/components/messages/ChatHeader.tsx     | 84 ++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 15 deletions(-)
 create mode 100644 src/components/messages/ChatHeader.tsx

(limited to 'src/components/messages')

diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 867e0a38..8ec6060a 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -2,7 +2,7 @@ import {useNavigation} from '@react-navigation/core';
 import React, {useContext} from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useSelector} from 'react-redux';
+import {useSelector, useStore} from 'react-redux';
 import {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import {RootState} from '../../store/rootReducer';
@@ -16,7 +16,7 @@ import {
   LocalUserType,
 } from '../../types';
 import {normalize, SCREEN_HEIGHT} from '../../utils';
-import {isOnline} from '../../utils/messages';
+import {getMember, isOnline} from '../../utils/messages';
 
 const ChannelPreview: React.FC<
   ChannelPreviewMessengerProps<
@@ -29,18 +29,11 @@ const ChannelPreview: React.FC<
     LocalUserType
   >
 > = (props) => {
-  const navigation = useNavigation();
   const {setChannel} = useContext(ChatContext);
+  const state = useStore().getState();
+  const navigation = useNavigation();
   const {channel} = props;
-  const {userId: loggedInUserId} = useSelector(
-    (state: RootState) => state.user.user,
-  );
-  const otherMembers = channel
-    ? Object.values(channel.state.members).filter(
-        (member) => member.user?.id !== loggedInUserId,
-      )
-    : [];
-  const member = otherMembers.length === 1 ? otherMembers[0] : undefined;
+  const member = getMember(channel, state);
   const online = isOnline(member?.user?.last_active);
   const unread = channel.state.unreadCount > 0;
 
@@ -55,8 +48,8 @@ const ChannelPreview: React.FC<
         <Image
           style={styles.avatar}
           source={
-            otherMembers.length === 1
-              ? {uri: member?.user?.thumbnail_url}
+            member
+              ? {uri: member.user?.thumbnail_url}
               : require('../../assets/images/avatar-placeholder.png')
           }
         />
@@ -71,7 +64,9 @@ const ChannelPreview: React.FC<
         <Text
           style={[styles.lastMessage, unread ? styles.unread : {}]}
           numberOfLines={1}>
-          {channel.state.messages[channel.state.messages.length - 1].text}
+          {channel.state.messages.length > 0
+            ? channel.state.messages[channel.state.messages.length - 1].text
+            : ''}
         </Text>
       </View>
       {unread && <View style={styles.purpleDot} />}
diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx
new file mode 100644
index 00000000..2bc096ec
--- /dev/null
+++ b/src/components/messages/ChatHeader.tsx
@@ -0,0 +1,84 @@
+import React, {useContext} from 'react';
+import {Image, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {useStore} from 'react-redux';
+import {ChatContext} from '../../App';
+import {ChatHeaderHeight, normalize, StatusBarHeight} from '../../utils';
+import {formatLastSeenText, getMember, isOnline} from '../../utils/messages';
+
+type ChatHeaderProps = {};
+
+const ChatHeader: React.FC<ChatHeaderProps> = () => {
+  const {channel} = useContext(ChatContext);
+  const state = useStore().getState();
+  const member = getMember(channel, state);
+  const online = isOnline(member?.user?.last_active);
+  const lastSeen = formatLastSeenText(member?.user?.last_active);
+
+  return (
+    <View style={styles.container}>
+      <View>
+        <Image
+          style={styles.avatar}
+          source={
+            member
+              ? {uri: member.user?.thumbnail_url}
+              : require('../../assets/images/avatar-placeholder.png')
+          }
+        />
+        {online && <View style={styles.online} />}
+      </View>
+      <View style={styles.content}>
+        <Text style={styles.name} numberOfLines={1}>
+          {member?.user?.first_name} {member?.user?.last_name}
+        </Text>
+        <Text style={styles.lastSeen}>{lastSeen}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: ChatHeaderHeight - StatusBarHeight,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: '15%',
+  },
+  avatar: {
+    width: normalize(40),
+    height: normalize(40),
+    borderRadius: normalize(40) / 2,
+  },
+  online: {
+    position: 'absolute',
+    backgroundColor: '#6EE7E7',
+    width: normalize(16),
+    height: normalize(16),
+    borderRadius: normalize(16) / 2,
+    borderColor: 'white',
+    borderWidth: 3,
+    top: 0,
+    right: 0,
+  },
+  content: {
+    flex: 1,
+    height: '80%',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+    marginLeft: '5%',
+  },
+  name: {
+    fontWeight: '700',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+  },
+  lastSeen: {
+    color: '#828282',
+    fontWeight: '500',
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+  },
+});
+
+export default ChatHeader;
-- 
cgit v1.2.3-70-g09d2