1 files changed, 3 insertions, 115 deletions

diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index bac1683f..af731d8e 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -11,16 +11,15 @@ import {
   MessageList,
   useAttachmentPickerContext,
   Theme,
-  useMessageContext,
-  isDayOrMoment,
-  useTranslationContext,
 } from 'stream-chat-react-native';
 import moment from 'moment';
 import {ChatContext} from '../../App';
 import {
   ChatHeader,
   ChatInput,
+  DateHeader,
   MessageAvatar,
+  MessageFooter,
   TabsGradient,
   TypingIndicator,
 } from '../../components';
@@ -131,105 +130,6 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     setTopInset(insets.top + HeaderHeight);
   });
 
-  const DateHeader = ({date}) => {
-    const {tDateTimeParser} = useTranslationContext();
-
-    if (!date) {
-      return null;
-    }
-
-    const dateFormat =
-      date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-    const tDate = tDateTimeParser(date);
-    const dateString = isDayOrMoment(tDate)
-      ? tDate.format(dateFormat)
-      : new Date(tDate).toDateString();
-
-    var dateMoment = moment(dateString);
-    var printDate = '';
-
-    const TODAY = moment();
-    const YESTERDAY = moment().subtract(1, 'day');
-    const LAST_6_DAYS = moment().subtract(6, 'day');
-
-    if (TODAY === dateMoment) {
-      printDate = 'Today';
-    } else if (YESTERDAY === dateMoment) {
-      printDate = 'Yesterday';
-    } else if (dateMoment.isBetween(LAST_6_DAYS, YESTERDAY)) {
-      printDate = dateMoment.format('dddd');
-    } else {
-      if (dateMoment.get('year') === 2000) {
-        printDate = dateMoment.format('MMMM D') + 'th';
-      } else {
-        printDate = dateMoment.format('MMMM D, YYYY') + 'th';
-      }
-    }
-    return (
-      <View style={{backgroundColor: 'transparent'}}>
-        <Text style={styles.dateHeader}>{printDate}</Text>
-      </View>
-    );
-  };
-
-  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={[
@@ -245,12 +145,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
           OverlayReactionList={() => null}
           messageActions={({copyMessage, deleteMessage}) => [
             copyMessage,
-            {
-              action: () => deleteMessage?.action,
-              title: 'Unsend Message',
-              icon: deleteMessage?.icon, // Use some SVG icon here | Optional
-              titleStyle: deleteMessage?.titleStyle, // StyleProp<TextStyle> | Optional
-            },
+            deleteMessage,
           ]}
           InlineDateSeparator={DateHeader}
           StickyHeader={() => null}
@@ -274,13 +169,6 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flex: 1,
   },
-  dateHeader: {
-    color: '#7A7A7A',
-    fontWeight: '600',
-    fontSize: normalize(11),
-    textAlign: 'center',
-    marginVertical: '5%',
-  },
 });
 
 export default ChatScreen;