From a5e822682145f7e69e3fb714142a3e18cc39b825 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 12 Oct 2021 19:40:42 -0400
Subject: [PATCH] Shows message status timestamps if available

---
 stylesheets/components/MessageDetail.scss    | 4 ++++
 ts/components/conversation/MessageDetail.tsx | 9 +++++++++
 ts/models/messages.ts                        | 5 ++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/stylesheets/components/MessageDetail.scss b/stylesheets/components/MessageDetail.scss
index c33e5e4feb5..74534ece98e 100644
--- a/stylesheets/components/MessageDetail.scss
+++ b/stylesheets/components/MessageDetail.scss
@@ -198,3 +198,7 @@
   color: $color-white;
   background-color: $color-accent-red;
 }
+
+.module-message-detail__status-timestamp {
+  margin-left: 6px;
+}
diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
index b7b9994ed61..3dc44248ca1 100644
--- a/ts/components/conversation/MessageDetail.tsx
+++ b/ts/components/conversation/MessageDetail.tsx
@@ -19,6 +19,7 @@ import { groupBy } from '../../util/mapUtil';
 import { ContactNameColorType } from '../../types/Colors';
 import { SendStatus } from '../../messages/MessageSendState';
 import * as log from '../../logging/log';
+import { Timestamp } from './Timestamp';
 
 export type Contact = Pick<
   ConversationType,
@@ -35,6 +36,7 @@ export type Contact = Pick<
   | 'unblurredAvatarPath'
 > & {
   status?: SendStatus;
+  statusTimestamp?: number;
 
   isOutgoingKeyError: boolean;
   isUnidentifiedDelivery: boolean;
@@ -182,6 +184,13 @@ export class MessageDetail extends React.Component<Props> {
         </div>
         {errorComponent}
         {unidentifiedDeliveryComponent}
+        {contact.statusTimestamp && (
+          <Timestamp
+            i18n={i18n}
+            module="module-message-detail__status-timestamp"
+            timestamp={contact.statusTimestamp}
+          />
+        )}
       </div>
     );
   }
diff --git a/ts/models/messages.ts b/ts/models/messages.ts
index 4cef2a95351..2e6c1f12f44 100644
--- a/ts/models/messages.ts
+++ b/ts/models/messages.ts
@@ -351,7 +351,9 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
           window.storage.get('unidentifiedDeliveryIndicators', false) &&
           this.isUnidentifiedDelivery(id, unidentifiedDeliveriesSet);
 
-        let status = getOwn(sendStateByConversationId, id)?.status;
+        const sendState = getOwn(sendStateByConversationId, id);
+
+        let status = sendState?.status;
 
         // If a message was only sent to yourself (Note to Self or a lonely group), it
         //   is shown read.
@@ -362,6 +364,7 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
         return {
           ...findAndFormatContact(id),
           status,
+          statusTimestamp: sendState?.updatedAt,
           errors: errorsForContact,
           isOutgoingKeyError,
           isUnidentifiedDelivery,