Merge pull request #371 from shravyaramesh/chat-screen-styling-2

[TMA782/810] Inline dates and Read Receipts

8 files changed, 157 insertions, 0 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/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/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 656c1c47..57f2232e 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -16,7 +16,9 @@ import {ChatContext} from '../../App';
 import {
   ChatHeader,
   ChatInput,
+  DateHeader,
   MessageAvatar,
+  MessageFooter,
   TabsGradient,
   TypingIndicator,
 } from '../../components';
@@ -37,6 +39,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {setTopInset} = useAttachmentPickerContext();
   const insets = useSafeAreaInsets();
   const chatTheme: DeepPartial<Theme> = {
+    colors: {
+      accent_blue: '#6EE7E7',
+    },
     messageList: {
       container: {
         backgroundColor: 'white',
@@ -70,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,
         },
@@ -123,6 +146,10 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
             copyMessage,
             deleteMessage,
           ]}
+          InlineDateSeparator={DateHeader}
+          StickyHeader={() => null}
+          ScrollToBottomButton={() => null}
+          MessageFooter={MessageFooter}
           TypingIndicator={TypingIndicator}
           myMessageTheme={loggedInUsersMessageTheme}
           MessageAvatar={MessageAvatar}>
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
index f4215bf0..0e73f639 100644
--- a/src/utils/messages.ts
+++ b/src/utils/messages.ts
@@ -137,3 +137,28 @@ export const createChannel = async (
     throw error;
   }
 };
+
+export const getFormatedDate = (date: object) => {
+  const dateMoment = moment(date).startOf('day');
+  let dateToRender = '';
+
+  const TODAY = moment().startOf('day');
+  const YESTERDAY = moment().subtract(1, 'day').startOf('day');
+  const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day');
+
+  if (TODAY.isSame(dateMoment)) {
+    dateToRender = 'Today';
+  } else if (YESTERDAY.isSame(dateMoment)) {
+    dateToRender = 'Yesterday';
+  } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) {
+    dateToRender = dateMoment.format('dddd');
+  } else {
+    if (dateMoment.get('year') === TODAY.get('year')) {
+      dateToRender = dateMoment.format('MMMM D') + 'th';
+    } else {
+      dateToRender =
+        dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year');
+    }
+  }
+  return dateToRender;
+};