Read receipts and timestamps

4 files changed, 80 insertions, 2 deletions

diff --git a/src/assets/icons/messages/delivered_icon.png b/src/assets/icons/messages/delivered_icon.png
new file mode 100644
index 00000000..0afa7e90
--- /dev/null
+++ b/src/assets/icons/messages/delivered_icon.png
diff --git a/src/assets/icons/messages/read_icon.png b/src/assets/icons/messages/read_icon.png
new file mode 100644
index 00000000..a82b705d
--- /dev/null
+++ b/src/assets/icons/messages/read_icon.png
diff --git a/src/assets/icons/messages/sent_icon.png b/src/assets/icons/messages/sent_icon.png
new file mode 100644
index 00000000..55988c78
--- /dev/null
+++ b/src/assets/icons/messages/sent_icon.png
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 6a25797e..cafcada8 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,7 +1,7 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useContext, useEffect, useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import React, {useContext, useEffect} from 'react';
+import {StyleSheet, Text, View, Image} from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
   Channel,
@@ -11,6 +11,7 @@ import {
   MessageList,
   useAttachmentPickerContext,
   Theme,
+  useMessageContext,
 } from 'stream-chat-react-native';
 import moment from 'moment';
 import {ChatContext} from '../../App';
@@ -74,6 +75,24 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         flexDirection: 'row',
       },
       content: {
+        deletedContainer: {},
+        deletedContainerInner: {
+          borderColor: 'transparent',
+          borderBottomLeftRadius: 10,
+          borderTopLeftRadius: 10,
+          borderBottomRightRadius: 10,
+          borderTopRightRadius: 10,
+        },
+        deletedMetaText: {
+          paddingHorizontal: 10,
+        },
+        deletedText: {
+          em: {
+            fontSize: 15,
+            fontStyle: 'italic',
+            fontWeight: '400',
+          },
+        },
         metaContainer: {
           marginLeft: 5,
         },
@@ -138,6 +157,64 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     );
   };
 
+  const MessageFooter = () => {
+    const message = useMessageContext();
+    if (message.message.type === 'deleted') {
+      return <></>;
+    } else {
+      const printTime = moment(message.message.created_at).format('h:mmA');
+      const styles = message.isMyMessage ? {marginRight: 5} : {marginLeft: 5};
+
+      if (message.lastGroupMessage) {
+        return (
+          <View style={[styles, {marginTop: 4, flexDirection: 'row'}]}>
+            {readReceipts(message)}
+            <Text
+              style={{
+                fontSize: normalize(11),
+                color: '#7A7A7A',
+                lineHeight: normalize(13),
+              }}>
+              {printTime}
+            </Text>
+          </View>
+        );
+      } else {
+        return <></>;
+      }
+    }
+  };
+
+  const readReceipts = (message) => {
+    const readByLocal = message.message.readBy;
+    if (message.isMyMessage) {
+      if (readByLocal) {
+        return (
+          <Image
+            source={require('../../assets/icons/messages/read_icon.png')}
+            style={{width: 15, height: 15}}
+          />
+        );
+      } else if (message.message.status === 'received') {
+        return (
+          <Image
+            source={require('../../assets/icons/messages/delivered_icon.png')}
+            style={{width: 15, height: 15}}
+          />
+        );
+      } else if (message.message.status === 'sending') {
+        return (
+          <Image
+            source={require('../../assets/icons/messages/sent_icon.png')}
+            style={{width: 15, height: 15}}
+          />
+        );
+      } else {
+        return <></>;
+      }
+    }
+  };
+
   return (
     <SafeAreaView
       style={[
@@ -155,6 +232,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
             copyMessage,
             deleteMessage,
           ]}
+          MessageFooter={MessageFooter}
           DateHeader={DateHeader}
           TypingIndicator={TypingIndicator}
           myMessageTheme={loggedInUsersMessageTheme}