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

[TMA-769] Styling chat list screen

1 files changed, 131 insertions, 0 deletions

diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
new file mode 100644
index 00000000..312f879a
--- /dev/null
+++ b/src/components/messages/ChannelPreview.tsx
@@ -0,0 +1,131 @@
+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 {useStore} from 'react-redux';
+import {usernameRegex} from 'src/constants';
+import {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
+import {ChatContext} from '../../App';
+import {
+  LocalAttachmentType,
+  LocalChannelType,
+  LocalCommandType,
+  LocalEventType,
+  LocalMessageType,
+  LocalReactionType,
+  LocalUserType,
+} from '../../types';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {getMember, isOnline} from '../../utils/messages';
+
+const ChannelPreview: React.FC<ChannelPreviewMessengerProps<
+  LocalAttachmentType,
+  LocalChannelType,
+  LocalCommandType,
+  LocalEventType,
+  LocalMessageType,
+  LocalReactionType,
+  LocalUserType
+>> = (props) => {
+  const {setChannel} = useContext(ChatContext);
+  const state = useStore().getState();
+  const navigation = useNavigation();
+  const {channel} = props;
+  const member = getMember(channel, state);
+  const online = isOnline(member?.user?.last_active);
+  const unread = channel.state.unreadCount > 0;
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={() => {
+        setChannel(channel);
+        navigation.navigate('Chat');
+      }}>
+      <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, unread ? styles.unread : {}]}
+          numberOfLines={1}>
+          {member?.user?.first_name} {member?.user?.last_name}
+        </Text>
+        <Text
+          style={[styles.lastMessage, unread ? styles.unread : {}]}
+          numberOfLines={1}>
+          {channel.state.messages.length > 0
+            ? channel.state.messages[channel.state.messages.length - 1].text
+            : ''}
+        </Text>
+      </View>
+      {unread && <View style={styles.purpleDot} />}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    height: Math.round(SCREEN_HEIGHT / 9),
+    width: Math.round(SCREEN_WIDTH * 0.85),
+    alignSelf: 'center',
+    alignItems: 'center',
+  },
+  avatar: {
+    width: normalize(60),
+    height: normalize(60),
+    borderRadius: normalize(62) / 2,
+  },
+  online: {
+    position: 'absolute',
+    backgroundColor: '#6EE7E7',
+    width: normalize(18),
+    height: normalize(18),
+    borderRadius: normalize(18) / 2,
+    borderColor: 'white',
+    borderWidth: 2,
+    bottom: 0,
+    right: 0,
+  },
+  content: {
+    flex: 1,
+    height: '60%',
+    flexDirection: 'column',
+    marginLeft: '5%',
+  },
+  name: {
+    fontWeight: '500',
+    fontSize: normalize(14),
+    lineHeight: normalize(17),
+  },
+  lastMessage: {
+    color: '#828282',
+    fontWeight: '500',
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+    paddingTop: '5%',
+  },
+  unread: {
+    fontWeight: '700',
+    color: 'black',
+  },
+  purpleDot: {
+    backgroundColor: '#8F01FF',
+    width: normalize(10),
+    height: normalize(10),
+    borderRadius: normalize(10) / 2,
+    marginLeft: '5%',
+  },
+});
+
+export default ChannelPreview;