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

[TMA-769] Styling chat list screen

1 files changed, 84 insertions, 0 deletions

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;