thundr: changes to day and added today, yesterday, and day label for …

…old messages functionality

package.json

@@ -68,6 +68,7 @@
   "dependencies": {
     "@expo/react-native-action-sheet": "4.0.1",
     "dayjs": "1.8.26",
+    "moment": "^2.30.1",
     "prop-types": "15.7.2",
     "react-native-communications": "2.2.1",
     "react-native-iphone-x-helper": "1.3.1",

src/Day.tsx

@@ -9,14 +9,15 @@ import {
   TextStyle,
   TextProps,
 } from 'react-native'
-import dayjs from 'dayjs'
+// import dayjs from 'dayjs'
 
 import Color from './Color'
 import { StylePropType, isSameDay } from './utils'
-import { DATE_FORMAT } from './Constant'
+// import { DATE_FORMAT } from './Constant'
 import { IMessage } from './Models'
 
-import { useChatContext } from './GiftedChatContext'
+// import { useChatContext } from './GiftedChatContext'
+import moment from 'moment'
 
 const styles = StyleSheet.create({
   container: {
@@ -46,30 +47,39 @@ export interface DayProps<TMessage extends IMessage = IMessage> {
 }
 
 export function Day<TMessage extends IMessage = IMessage>({
-  dateFormat = DATE_FORMAT,
+  // dateFormat = DATE_FORMAT,
   currentMessage,
   previousMessage,
   containerStyle,
   wrapperStyle,
   textStyle,
 }: DayProps<TMessage>) {
-  const { getLocale } = useChatContext()
+  // const { getLocale } = useChatContext()
 
   if (currentMessage == null || isSameDay(currentMessage, previousMessage)) {
     return null
   }
 
+  const messageDate = moment(currentMessage.createdAt);
+  const today = moment();
+  const yesterday = moment().subtract(1, 'day');
+
+  let dayLabel;
+  if (messageDate.isSame(today, 'day')) {
+    dayLabel = 'Today';
+  } else if (messageDate.isSame(yesterday, 'day')) {
+    dayLabel = 'Yesterday';
+  } else {
+    dayLabel = messageDate.format('MMMM DD, dddd');
+  }
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={wrapperStyle}>
-        <Text style={[styles.text, textStyle]}>
-          {dayjs(currentMessage.createdAt)
-            .locale(getLocale())
-            .format(dateFormat)}
-        </Text>
+        <Text style={[styles.text, textStyle]}>{dayLabel}</Text>
       </View>
     </View>
-  )
+  );
 }
 
 Day.propTypes = {

yarn.lock

@@ -6046,6 +6046,11 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"