added figma styling

3 files changed, 141 insertions, 2 deletions

diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
new file mode 100644
index 00000000..11408dc1
--- /dev/null
+++ b/src/components/messages/ChannelPreview.tsx
@@ -0,0 +1,136 @@
+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 {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
+import {ChatContext} from '../../App';
+import {RootState} from '../../store/rootReducer';
+import {
+  LocalAttachmentType,
+  LocalChannelType,
+  LocalCommandType,
+  LocalEventType,
+  LocalMessageType,
+  LocalReactionType,
+  LocalUserType,
+} from '../../types';
+import {normalize, SCREEN_HEIGHT} from '../../utils';
+
+const ChannelPreview: React.FC<
+  ChannelPreviewMessengerProps<
+    LocalAttachmentType,
+    LocalChannelType,
+    LocalCommandType,
+    LocalEventType,
+    LocalMessageType,
+    LocalReactionType,
+    LocalUserType
+  >
+> = (props) => {
+  const navigation = useNavigation();
+  const {setChannel} = useContext(ChatContext);
+  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 online = member?.user?.online;
+  const unread = channel.state.unreadCount > 0;
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={() => {
+        setChannel(channel);
+        navigation.navigate('Chat');
+      }}>
+      <View>
+        <Image
+          style={styles.avatar}
+          source={
+            otherMembers.length === 1
+              ? {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[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 / 10),
+    alignItems: 'center',
+    paddingHorizontal: '8%',
+    paddingVertical: '5%',
+  },
+  avatar: {
+    width: normalize(62),
+    height: normalize(62),
+    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: '100%',
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+    marginLeft: '5%',
+  },
+  name: {
+    fontWeight: '500',
+    fontSize: normalize(14),
+    lineHeight: normalize(17),
+  },
+  lastMessage: {
+    color: '#828282',
+    fontWeight: '500',
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+  },
+  unread: {
+    fontWeight: '700',
+    color: 'black',
+  },
+  purpleDot: {
+    backgroundColor: '#8F01FF',
+    width: normalize(10),
+    height: normalize(10),
+    borderRadius: normalize(10) / 2,
+  },
+});
+
+export default ChannelPreview;
diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
index 18c89de3..660da97d 100644
--- a/src/components/messages/MessagesHeader.tsx
+++ b/src/components/messages/MessagesHeader.tsx
@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {Fragment, useContext} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
@@ -16,10 +16,12 @@ const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
   return (
     <View style={styles.header}>
       <Text style={styles.headerText}>Messages</Text>
-      {unread && unread !== 0 && (
+      {unread && unread !== 0 ? (
         <Text style={styles.unreadText}>
           {unread > 99 ? '99+' : unread} unread
         </Text>
+      ) : (
+        <Fragment />
       )}
       <View style={styles.flex} />
       <TouchableOpacity style={styles.compose} onPress={createChannel}>
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index 2d6bb581..e194093c 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -1 +1,2 @@
 export {default as MessagesHeader} from './MessagesHeader';
+export {default as ChannelPreview} from './ChannelPreview';