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/ChatHeader.tsx | 84 ++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 src/components/messages/ChatHeader.tsx

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

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