4 files changed, 147 insertions, 27 deletions
diff --git a/src/components/messages/DateHeader.tsx b/src/components/messages/DateHeader.tsx
new file mode 100644
index 00000000..cc7dce2c
--- /dev/null
+++ b/src/components/messages/DateHeader.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {getFormatedDate, normalize} from '../../utils';
+
+interface DateHeaderProps {
+  date: object;
+}
+
+const DateHeader: React.FC<DateHeaderProps> = ({date}) => {
+  return (
+    <View style={styles.dateContainer}>
+      <Text style={styles.dateHeader}>{getFormatedDate(date)}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  dateHeader: {
+    color: '#7A7A7A',
+    fontWeight: '600',
+    fontSize: normalize(11),
+    textAlign: 'center',
+    marginVertical: '5%',
+  },
+  dateContainer: {backgroundColor: 'transparent'},
+});
+
+export default DateHeader;
diff --git a/src/components/messages/MessageFooter.tsx b/src/components/messages/MessageFooter.tsx
new file mode 100644
index 00000000..2ed8c6ed
--- /dev/null
+++ b/src/components/messages/MessageFooter.tsx
@@ -0,0 +1,75 @@
+import moment from 'moment';
+import React from 'react';
+import {normalize} from '../../utils';
+import {useMessageContext} from 'stream-chat-react-native-core';
+import {View, Text, Image, StyleSheet} from 'react-native';
+
+const MessageFooter: React.FC = () => {
+  const message = useMessageContext();
+
+  if (message.message.type === 'deleted') {
+    return <></>;
+  } else {
+    const printTime = moment(message.message.created_at).format('h:mmA');
+    if (message.lastGroupMessage) {
+      return (
+        <View
+          style={[
+            message.isMyMessage ? styles.userMessage : styles.userXMessage,
+            styles.generalMessage,
+          ]}>
+          {readReceipts(message)}
+          <Text style={styles.time}>{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={styles.icon}
+        />
+      );
+    } else if (message.message.status === 'received') {
+      return (
+        <Image
+          source={require('../../assets/icons/messages/delivered_icon.png')}
+          style={styles.icon}
+        />
+      );
+    } else if (message.message.status === 'sending') {
+      return (
+        <Image
+          source={require('../../assets/icons/messages/sent_icon.png')}
+          style={styles.icon}
+        />
+      );
+    } else {
+      return <></>;
+    }
+  }
+};
+
+export const styles = StyleSheet.create({
+  time: {
+    fontSize: normalize(11),
+    color: '#7A7A7A',
+    lineHeight: normalize(13),
+  },
+  userMessage: {
+    marginRight: 5,
+  },
+  userXMessage: {marginLeft: 5},
+  generalMessage: {marginTop: 4, flexDirection: 'row'},
+  icon: {width: 15, height: 15},
+});
+
+export default MessageFooter;
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index d08e9454..b19067ca 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -5,3 +5,5 @@ export {default as ChatHeader} from './ChatHeader';
 export {default as ChatInputSubmit} from './ChatInputSubmit';
 export {default as MessageAvatar} from './MessageAvatar';
 export {default as TypingIndicator} from './TypingIndicator';
+export {default as MessageFooter} from './MessageFooter';
+export {default as DateHeader} from './DateHeader';
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 8e008cf9..3cc1c7f1 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -208,6 +208,9 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   const isOwnProfile = id === loggedInUser.userId;
   const navigateToProfile = async () => {
+    if (notification_type === 'SYSTEM_MSG') {
+      return;
+    }
     if (!userXInStore(state, screenType, id)) {
       await fetchUserX(dispatch, {userId: id, username: username}, screenType);
     }
@@ -231,35 +234,47 @@ const Notification: React.FC<NotificationProps> = (props) => {
           }
         />
       </TouchableWithoutFeedback>
-      <View style={styles.contentContainer}>
-        <TouchableWithoutFeedback onPress={navigateToProfile}>
-          <Text style={styles.actorName}>
-            {first_name} {last_name}
-          </Text>
-        </TouchableWithoutFeedback>
-        <TouchableWithoutFeedback onPress={onNotificationTap}>
-          <Text>{verbage}</Text>
-        </TouchableWithoutFeedback>
-      </View>
-      {notification_type === 'FRD_REQ' && (
-        <View style={styles.buttonsContainer}>
-          <AcceptDeclineButtons
-            requester={{id, username, first_name, last_name}}
-            onAccept={handleAcceptRequest}
-            onReject={handleDeclineFriendRequest}
-          />
+      {notification_type === 'SYSTEM_MSG' ? (
+        // Only verbage
+        <View style={styles.contentContainer}>
+          <Text style={styles.actorName}>{verbage}</Text>
         </View>
+      ) : (
+        <>
+          {/* Text content: Actor name and verbage*/}
+          <View style={styles.contentContainer}>
+            <TouchableWithoutFeedback onPress={navigateToProfile}>
+              <Text style={styles.actorName}>
+                {first_name} {last_name}
+              </Text>
+            </TouchableWithoutFeedback>
+            <TouchableWithoutFeedback onPress={onNotificationTap}>
+              <Text>{verbage}</Text>
+            </TouchableWithoutFeedback>
+          </View>
+          {/* Friend request accept/decline button */}
+          {notification_type === 'FRD_REQ' && (
+            <View style={styles.buttonsContainer}>
+              <AcceptDeclineButtons
+                requester={{id, username, first_name, last_name}}
+                onAccept={handleAcceptRequest}
+                onReject={handleDeclineFriendRequest}
+              />
+            </View>
+          )}
+          {/* Moment Image Preview */}
+          {(notification_type === 'CMT' ||
+            notification_type === 'MOM_3+' ||
+            notification_type === 'MOM_FRIEND') &&
+            notification_object && (
+              <TouchableWithoutFeedback
+                style={styles.moment}
+                onPress={onNotificationTap}>
+                <Image style={styles.imageFlex} source={{uri: momentURI}} />
+              </TouchableWithoutFeedback>
+            )}
+        </>
       )}
-      {(notification_type === 'CMT' ||
-        notification_type === 'MOM_3+' ||
-        notification_type === 'MOM_FRIEND') &&
-        notification_object && (
-          <TouchableWithoutFeedback
-            style={styles.moment}
-            onPress={onNotificationTap}>
-            <Image style={styles.imageFlex} source={{uri: momentURI}} />
-          </TouchableWithoutFeedback>
-        )}
     </View>
   );