Show dates in edit history modal

ts/components/EditHistoryMessagesModal.tsx

@@ -13,6 +13,8 @@ import { Modal } from './Modal';
 import { WidthBreakpoint } from './_util';
 import { shouldNeverBeCalled } from '../util/shouldNeverBeCalled';
 import { useTheme } from '../hooks/useTheme';
+import { isSameDay } from '../util/timestamp';
+import { TimelineDateHeader } from './conversation/TimelineDateHeader';
 
 export type PropsType = {
   closeEditHistoryModal: () => unknown;
@@ -55,7 +57,7 @@ const MESSAGE_DEFAULT_PROPS = {
   scrollToQuotedMessage: shouldNeverBeCalled,
   shouldCollapseAbove: false,
   shouldCollapseBelow: false,
-  shouldHideMetadata: true,
+  shouldHideMetadata: false,
   showContactModal: shouldNeverBeCalled,
   showConversation: noop,
   showEditHistoryModal: shouldNeverBeCalled,
@@ -144,10 +146,27 @@ export function EditHistoryMessagesModal({
           {i18n('icu:EditHistoryMessagesModal__title')}
         </h3>
 
-        {pastEdits.map(messageAttributes => {
+        {pastEdits.map((messageAttributes, index) => {
           const syntheticId = `${messageAttributes.id}.${messageAttributes.timestamp}`;
 
+          const previousItem = pastEdits[index - 1];
+
+          const shouldShowDateHeader = Boolean(
+            !previousItem ||
+              // This comparison avoids strange header behavior for out-of-order messages.
+              (messageAttributes.timestamp > previousItem.timestamp &&
+                !isSameDay(previousItem.timestamp, messageAttributes.timestamp))
+          );
+          const dateHeaderElement = shouldShowDateHeader ? (
+            <TimelineDateHeader
+              i18n={i18n}
+              timestamp={messageAttributes.timestamp}
+            />
+          ) : null;
+
           return (
+            <React.Fragment key={messageAttributes.timestamp}>
+              {dateHeaderElement}
               <Message
                 {...MESSAGE_DEFAULT_PROPS}
                 {...messageAttributes}
@@ -157,7 +176,6 @@ export function EditHistoryMessagesModal({
                 getPreferredBadge={getPreferredBadge}
                 i18n={i18n}
                 isSpoilerExpanded={revealedSpoilersById[syntheticId] || {}}
-              key={messageAttributes.timestamp}
                 kickOffAttachmentDownload={kickOffAttachmentDownload}
                 messageExpanded={(messageId, displayLimit) => {
                   const update = {
@@ -177,6 +195,7 @@ export function EditHistoryMessagesModal({
                 }}
                 theme={theme}
               />
+            </React.Fragment>
           );
         })}
       </div>

ts/components/conversation/MessageMetadata.tsx

@@ -142,14 +142,14 @@ export function MessageMetadata({
     } else {
       timestampNode = (
         <MessageTimestamp
-          i18n={i18n}
-          timestamp={timestamp}
-          direction={metadataDirection}
           deletedForEveryone={deletedForEveryone}
+          direction={metadataDirection}
+          i18n={i18n}
+          module="module-message__metadata__date"
+          timestamp={timestamp}
           withImageNoCaption={withImageNoCaption}
           withSticker={isSticker}
           withTapToViewExpired={isTapToViewExpired}
-          module="module-message__metadata__date"
         />
       );
     }

ts/state/smart/EditHistoryMessagesModal.tsx

@@ -39,7 +39,7 @@ export function SmartEditHistoryMessagesModal(): JSX.Element {
     return messagesAttributes.map(messageAttributes => ({
       ...messagePropsSelector(messageAttributes as MessageAttributesType),
       // Make sure the messages don't get an "edited" badge
-      editHistory: undefined,
+      isEditedMessage: false,
       // Do not show the same reactions in the message history UI
       reactions: undefined,
     }));