From f66e64cc9cd50533f905d0cf9ef914e26de069a5 Mon Sep 17 00:00:00 2001
From: Andrei Smirnov <andrei.smirnov@toptal.com>
Date: Thu, 15 Jul 2021 17:59:30 +0300
Subject: [PATCH] fix(@desktop/timeline): auto-update messages age

---
 ui/app/AppLayouts/Chat/ChatColumn/Message.qml          |  2 ++
 .../Chat/ChatColumn/MessageComponents/ChatTime.qml     |  3 +--
 .../Chat/ChatColumn/MessageComponents/StatusUpdate.qml |  5 ++++-
 ui/app/AppLayouts/Timeline/TimelineLayout.qml          | 10 ++++++++++
 ui/imports/Utils.qml                                   |  3 ++-
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
index 7bbf47cd93..75c7302e39 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
@@ -86,6 +86,7 @@ Item {
 
     property bool isExpired: (outgoingStatus === "sending" && (Math.floor(timestamp) + 180000) < Date.now())
     property bool isStatusUpdate: false
+    property int statusAgeEpoch: 0
 
     property int replyMessageIndex: chatsModel.messageView.messageList.getMessageIndex(responseTo);
     property string repliedMessageAuthor: replyMessageIndex > -1 ? chatsModel.messageView.messageList.getMessageData(replyMessageIndex, "userName") : "";
@@ -428,6 +429,7 @@ Item {
     Component {
         id: statusUpdateComponent
         StatusUpdate {
+            statusAgeEpoch: root.statusAgeEpoch
             clickMessage: root.clickMessage
             container: root
         }
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatTime.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatTime.qml
index c65ecc1d9a..187bc62daa 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatTime.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatTime.qml
@@ -4,11 +4,10 @@ import "../../../../../shared/status"
 import "../../../../../imports"
 
 StyledText {
-    property bool formatAge: false
     id: chatTime
     visible: isMessage
     color: Style.current.secondaryText
-    text: formatAge ? Utils.formatAgeFromTime(timestamp) : Utils.formatTime(timestamp)
+    text: Utils.formatTime(timestamp)
     font.pixelSize: Style.current.asideTextFontSize
     
     StatusToolTip {
diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml
index d23019b9f7..504194931b 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml
@@ -10,6 +10,7 @@ MouseArea {
     property var clickMessage: function () {}
     property bool hovered: containsMouse
     property var container
+    property int statusAgeEpoch: 0
 
     anchors.top: parent.top
     anchors.topMargin: 0
@@ -49,7 +50,9 @@ MouseArea {
 
         ChatTime {
             id: chatTime
-            formatAge: true
+            // statusAgeEpoch is used to trigger Qt property update
+            // since the returned string will be the same in 99% cases, this should not trigger ChatTime re-rendering
+            text: Utils.formatAgeFromTime(timestamp, statusAgeEpoch)
             visible: chatName.visible
             anchors.verticalCenter: chatName.verticalCenter
             anchors.left: chatName.right
diff --git a/ui/app/AppLayouts/Timeline/TimelineLayout.qml b/ui/app/AppLayouts/Timeline/TimelineLayout.qml
index b158eb391a..0c08c6e709 100644
--- a/ui/app/AppLayouts/Timeline/TimelineLayout.qml
+++ b/ui/app/AppLayouts/Timeline/TimelineLayout.qml
@@ -122,6 +122,15 @@ ScrollView {
             }
         }
 
+        Timer {
+            id: ageUpdateTimer
+            property int epoch: 0
+            running: true
+            repeat: true
+            interval: 60000 // 1 min
+            onTriggered: epoch = epoch + 1
+        }
+
         DelegateModelGeneralized {
             id: messageListDelegate
             lessThan: [
@@ -151,6 +160,7 @@ ScrollView {
                 messageId: model.messageId
                 emojiReactions: model.emojiReactions
                 isStatusUpdate: true
+                statusAgeEpoch: ageUpdateTimer.epoch
                 // This is used in order to have access to the previous message and determine the timestamp
                 // we can't rely on the index because the sequence of messages is not ordered on the nim side
                 prevMessageIndex: {
diff --git a/ui/imports/Utils.qml b/ui/imports/Utils.qml
index e47b77c098..edadfd9e9d 100644
--- a/ui/imports/Utils.qml
+++ b/ui/imports/Utils.qml
@@ -244,7 +244,8 @@ QtObject {
         return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes)
     }
 
-    function formatAgeFromTime(timestamp) {
+    function formatAgeFromTime(timestamp, epoch) {
+        epoch++ // pretending the parameter is not unused
         const now = new Date()
         const messageDate = new Date(Math.floor(timestamp))
         const diffMs = now - messageDate