Merge pull request #2529 from GetStream/develop

Next Release

Author: khushal87

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -28,6 +28,7 @@ import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 type MessageFooterComponentProps = {
   date?: string | Date;
+  formattedDate?: string | Date;
   isDeleted?: boolean;
 };
 
@@ -89,6 +90,7 @@ const MessageFooterWithContext = <
     alignment,
     date,
     deletedMessagesVisibilityType,
+    formattedDate,
     isDeleted,
     isEditedMessageOpen,
     lastGroupMessage,
@@ -116,7 +118,7 @@ const MessageFooterWithContext = <
         {deletedMessagesVisibilityType === 'sender' && (
           <OnlyVisibleToYouComponent alignment={alignment} />
         )}
-        <MessageTimestamp format='LT' timestamp={date} />
+        <MessageTimestamp format='LT' formattedDate={formattedDate} timestamp={date} />
       </View>
     );
   }
@@ -135,7 +137,7 @@ const MessageFooterWithContext = <
           <Text style={[styles.text, { color: grey }, messageUser]}>{message.user.name}</Text>
         ) : null}
         {showMessageStatus && <MessageStatus />}
-        <MessageTimestamp format='LT' timestamp={date} />
+        <MessageTimestamp format='LT' formattedDate={formattedDate} timestamp={date} />
 
         {isEditedMessage(message) && !isEditedMessageOpen && (
           <>
@@ -157,7 +159,9 @@ const MessageFooterWithContext = <
           </>
         )}
       </View>
-      {isEditedMessageOpen && <MessageEditedTimestamp format='LT' timestamp={date} />}
+      {isEditedMessageOpen && (
+        <MessageEditedTimestamp format='LT' formattedDate={formattedDate} timestamp={date} />
+      )}
     </>
   );
 };
@@ -169,6 +173,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     alignment: prevAlignment,
     date: prevDate,
+    formattedDate: prevFormattedDate,
     isEditedMessageOpen: prevIsEditedMessageOpen,
     lastGroupMessage: prevLastGroupMessage,
     members: prevMembers,
@@ -179,6 +184,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     alignment: nextAlignment,
     date: nextDate,
+    formattedDate: nextFormattedDate,
     isEditedMessageOpen: nextIsEditedMessageOpen,
     lastGroupMessage: nextLastGroupMessage,
     members: nextMembers,
@@ -226,6 +232,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const dateEqual = prevDate === nextDate;
   if (!dateEqual) return false;
 
+  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
+  if (!formattedDateEqual) return false;
+
   return true;
 };
 

package/src/components/Message/MessageSimple/MessageTimestamp.tsx

@@ -22,14 +22,26 @@ export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDate
    * A function to format the date.
    */
   formatDate?: (date: TDateTimeParserInput) => string;
+  /**
+   * Already Formatted date
+   */
+  formattedDate?: string | Date;
   /**
    * The timestamp of the message.
    */
   timestamp?: string | Date;
 };
 
 export const MessageTimestamp = (props: MessageTimestampProps) => {
-  const { calendar, format, formatDate, tDateTimeParser: propsTDateTimeParser, timestamp } = props;
+  const {
+    calendar,
+    format,
+    formatDate,
+    formattedDate,
+    tDateTimeParser: propsTDateTimeParser,
+    timestamp,
+  } = props;
+
   const {
     theme: {
       colors: { grey },
@@ -40,21 +52,25 @@ export const MessageTimestamp = (props: MessageTimestampProps) => {
   } = useTheme();
   const { tDateTimeParser: contextTDateTimeParser } = useTranslationContext();
 
+  if (formattedDate) {
+    return (
+      <Text style={[styles.text, { color: grey }, timestampText]}>{formattedDate.toString()}</Text>
+    );
+  }
+
   if (!timestamp) return null;
 
-  const formattedDate = getDateString({
+  const dateString = getDateString({
     calendar,
     date: timestamp,
     format,
     formatDate,
     tDateTimeParser: propsTDateTimeParser || contextTDateTimeParser,
   });
 
-  if (!formattedDate) return null;
+  if (!dateString) return null;
 
-  return (
-    <Text style={[styles.text, { color: grey }, timestampText]}>{formattedDate.toString()}</Text>
-  );
+  return <Text style={[styles.text, { color: grey }, timestampText]}>{dateString.toString()}</Text>;
 };
 
 const styles = StyleSheet.create({

package/src/utils/getDateString.ts

@@ -39,9 +39,9 @@ export function getDateString({
   format,
   formatDate,
   tDateTimeParser,
-}: DateFormatterOptions): string | number | null {
+}: DateFormatterOptions): string | number | undefined {
   if (!date || (typeof date === 'string' && !Date.parse(date))) {
-    return null;
+    return;
   }
 
   if (typeof formatDate === 'function') {
@@ -50,7 +50,7 @@ export function getDateString({
 
   if (!tDateTimeParser) {
     console.log(noParsingFunctionWarning);
-    return null;
+    return;
   }
 
   const parsedTime = tDateTimeParser(date);