From 22ef938385f9753c5034331321e032425975ebcd Mon Sep 17 00:00:00 2001
From: Alexander Kozlovskiy <zedwag@gmail.com>
Date: Mon, 14 Oct 2024 17:20:48 -0500
Subject: [PATCH] get rid of caching previous day header date

---
 .../js/__internal/ui/chat/messagelist.ts      | 53 ++++++++++++++++---
 .../chatParts/messageList.tests.js            | 39 ++++++++++++++
 2 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts
index e9c0b2eb10ce..761abc552a7e 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagelist.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagelist.ts
@@ -38,8 +38,6 @@ export interface Properties extends WidgetOptions<MessageList> {
 class MessageList extends Widget<Properties> {
   private _messageGroups?: MessageGroup[];
 
-  private _lastMessageDate?: null | string | number | Date;
-
   private _containerClientHeight!: number;
 
   private _scrollable!: Scrollable<unknown>;
@@ -57,7 +55,6 @@ class MessageList extends Widget<Properties> {
     super._init();
 
     this._messageGroups = [];
-    this._lastMessageDate = null;
   }
 
   _initMarkup(): void {
@@ -176,7 +173,10 @@ class MessageList extends Widget<Properties> {
     });
   }
 
-  _shouldAddDayHeader(timestamp: undefined | string | number | Date): boolean {
+  _shouldAddDayHeader(
+    timestamp: undefined | string | number | Date,
+    currentMessageGroupItems: Message[] = [],
+  ): boolean {
     const { showDayHeaders } = this.option();
 
     if (!showDayHeaders) {
@@ -189,14 +189,52 @@ class MessageList extends Widget<Properties> {
       return false;
     }
 
-    return !dateUtils.sameDate(this._lastMessageDate, deserializedDate);
+    const lastDayHeaderDate = this._getLastDayHeaderDate(currentMessageGroupItems);
+
+    return !dateUtils.sameDate(lastDayHeaderDate, deserializedDate);
+  }
+
+  _getLastDayHeaderDate(currentMessageGroupItems: Message[] = []): Date | null {
+    let lastDayHeaderDate = null;
+    const messageGroups = this._messageGroups ?? [];
+
+    let index = currentMessageGroupItems.length - 1;
+
+    while (index >= 0 && lastDayHeaderDate === null) {
+      const messageTimestamp = currentMessageGroupItems[index].timestamp;
+
+      if (messageTimestamp) {
+        lastDayHeaderDate = dateSerialization.deserializeDate(messageTimestamp);
+      }
+      index -= 1;
+    }
+
+    index = messageGroups.length - 1;
+
+    while (index >= 0 && lastDayHeaderDate === null) {
+      const { items } = messageGroups[index].option();
+
+      const messageGroupTimestampList: (Date | string | number)[] = [];
+      items.forEach((item: Message) => {
+        if (item.timestamp) {
+          messageGroupTimestampList.push(item.timestamp);
+        }
+      });
+
+      if (messageGroupTimestampList.length > 0) {
+        lastDayHeaderDate = dateSerialization.deserializeDate(messageGroupTimestampList.at(-1));
+      }
+
+      index -= 1;
+    }
+
+    return lastDayHeaderDate;
   }
 
   _createDayHeader(timestamp: string | number | Date | undefined): void {
     const deserializedDate = dateSerialization.deserializeDate(timestamp);
     const today = new Date();
     const yesterday = new Date(new Date().setDate(today.getDate() - 1));
-    this._lastMessageDate = deserializedDate;
 
     let headerDate = deserializedDate.toLocaleDateString(undefined, {
       day: '2-digit',
@@ -232,8 +270,9 @@ class MessageList extends Widget<Properties> {
 
     items.forEach((item, index) => {
       const newMessageGroupItem = item ?? {};
+      const { timestamp } = newMessageGroupItem;
       const id = newMessageGroupItem.author?.id;
-      const shouldCreateDayHeader = this._shouldAddDayHeader(newMessageGroupItem.timestamp);
+      const shouldCreateDayHeader = this._shouldAddDayHeader(timestamp, currentMessageGroupItems);
       const isTimeoutExceeded = this._isTimeoutExceeded(
         currentMessageGroupItems[currentMessageGroupItems.length - 1] ?? {},
         item,
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js
index 8d832d2145ce..721908b524a1 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js
@@ -307,6 +307,45 @@ QUnit.module('MessageList', moduleConfig, () => {
 
             assert.strictEqual($firstChild.hasClass(CHAT_MESSAGEGROUP_CLASS), true, 'first message group is added before day header');
         });
+
+        QUnit.test('Only one day header should be added when there are two messages with the same date and undefined date between them (last day header was added for message in current messageGroup)', function(assert) {
+            this.reinit({
+                items: [{
+                    timestamp: new Date('11.10.2024'),
+                    author: { id: 1 },
+                    text: 'ABC',
+                }, {
+                    author: { id: 2 },
+                    text: 'EFG',
+                }, {
+                    timestamp: new Date('11.10.2024'),
+                    author: { id: 1 },
+                    text: 'HIJ',
+                }],
+            });
+
+            const $dayHeaders = this.getDayHeaders();
+
+            assert.strictEqual($dayHeaders.length, 1, 'only one day header was added');
+        });
+
+        QUnit.test('Only one day header should be added when there are two messages with the same date and and undefined date between them (last day header was added for message in older messageGroup)', function(assert) {
+            this.reinit({
+                items: [{
+                    timestamp: new Date('11.10.2024'),
+                    text: 'ABC',
+                }, {
+                    text: 'EFG',
+                }, {
+                    timestamp: new Date('11.10.2024'),
+                    text: 'HIJ',
+                }],
+            });
+
+            const $dayHeaders = this.getDayHeaders();
+
+            assert.strictEqual($dayHeaders.length, 1, 'only one day header was added');
+        });
     });
 
     QUnit.module('MessageGroup integration', () => {