fix: jumpt to last read message edge-case, rename input

GetStream · Sep 14, 2023 · 0adc221 · 0adc221
1 parent 34213c1
commit 0adc221
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.spec.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.spec.ts
@@ -907,7 +907,7 @@ describe('MessageListComponent', () => {
     });
 
     it('should ignore openMessageListAt input', () => {
-      component.openMessageListAt = 'last-unread-message';
+      component.openMessageListAt = 'last-read-message';
 
       const channel = generateMockChannels()[0];
       const messages = generateMockMessages();
@@ -1055,7 +1055,7 @@ describe('MessageListComponent', () => {
   });
 
   it('should jump to latest unread message if openMessageListAt specifies', () => {
-    component.openMessageListAt = 'last-unread-message';
+    component.openMessageListAt = 'last-read-message';
 
     const channel = generateMockChannels()[0];
     const messages = generateMockMessages();
@@ -1075,7 +1075,7 @@ describe('MessageListComponent', () => {
   });
 
   it('should display new message indicator - new mesage is the first on the given day, date separator visible', () => {
-    component.openMessageListAt = 'last-unread-message';
+    component.openMessageListAt = 'last-read-message';
     component.displayDateSeparator = true;
 
     const channel = generateMockChannels()[0];
@@ -1101,7 +1101,7 @@ describe('MessageListComponent', () => {
   });
 
   it('should display new message indicator - new mesage is the first on the given day, date separator not visible', () => {
-    component.openMessageListAt = 'last-unread-message';
+    component.openMessageListAt = 'last-read-message';
     component.displayDateSeparator = false;
 
     const channel = generateMockChannels()[0];
@@ -1127,7 +1127,7 @@ describe('MessageListComponent', () => {
   });
 
   it('should display new message indicator - new mesage is not the first on the given day', () => {
-    component.openMessageListAt = 'last-unread-message';
+    component.openMessageListAt = 'last-read-message';
     component.displayDateSeparator = false;
 
     const channel = generateMockChannels()[0];
@@ -1150,7 +1150,7 @@ describe('MessageListComponent', () => {
   });
 
   it(`shouldn't highlight latest unread message`, () => {
-    component.openMessageListAt = 'last-unread-message';
+    component.openMessageListAt = 'last-read-message';
 
     const channel = generateMockChannels()[0];
     const messages = generateMockMessages();
@@ -1169,7 +1169,7 @@ describe('MessageListComponent', () => {
   });
 
   it('should display new message indicator - new mesage is not the first on the given day, direction top-to-bottom', () => {
-    component.openMessageListAt = 'last-unread-message';
+    component.openMessageListAt = 'last-read-message';
     component.displayDateSeparator = false;
     component.direction = 'top-to-bottom';
 
@@ -1194,7 +1194,7 @@ describe('MessageListComponent', () => {
   });
 
   it('should display new message indicator - new mesage is the first on the given day, date separator visible, direction top-to-bottom', () => {
-    component.openMessageListAt = 'last-unread-message';
+    component.openMessageListAt = 'last-read-message';
     component.displayDateSeparator = true;
     component.direction = 'top-to-bottom';
 
@@ -1221,7 +1221,7 @@ describe('MessageListComponent', () => {
   });
 
   it('should display new message indicator - new mesage is the first on the given day, date separator not visible, direction top-to-bottom', () => {
-    component.openMessageListAt = 'last-unread-message';
+    component.openMessageListAt = 'last-read-message';
     component.displayDateSeparator = false;
     component.direction = 'top-to-bottom';
 

diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts
@@ -69,13 +69,13 @@ export class MessageListComponent
   @Input() displayDateSeparator = true;
   /**
    * If date separators are displayed, you can set the horizontal position of the date text.
-   * If `openMessageListAt` is `last-unread-message` it will also set the text position of the new messages indicator.
+   * If `openMessageListAt` is `last-read-message` it will also set the text position of the new messages indicator.
    */
   @Input() dateSeparatorTextPos: 'center' | 'right' | 'left' = 'center';
   /**
-   * `last-message` option will open the message list at the last message, `last-unread-message` will open the list at the last unread message. This option only works if mode is `main`.
+   * `last-message` option will open the message list at the last message, `last-read-message` will open the list at the last unread message. This option only works if mode is `main`.
    */
-  @Input() openMessageListAt: 'last-message' | 'last-unread-message' =
+  @Input() openMessageListAt: 'last-message' | 'last-read-message' =
     'last-message';
   /**
    * You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list
@@ -143,13 +143,21 @@ export class MessageListComponent
           this.resetScrollState();
           this.channelId = channel?.id;
           if (
-            this.openMessageListAt === 'last-unread-message' &&
+            this.openMessageListAt === 'last-read-message' &&
             this.mode === 'main'
           ) {
             this.lastReadMessageId =
               channel?.state.read[
                 this.chatClientService.chatClient.user?.id || ''
               ]?.last_read_message_id;
+            if (
+              channel &&
+              channel.state.latestMessages[
+                channel.state.latestMessages.length - 1
+              ].id === this.lastReadMessageId
+            ) {
+              this.lastReadMessageId = undefined;
+            }
             if (this.lastReadMessageId) {
               this.isJumpingToLatestUnreadMessage = true;
               void this.channelService.jumpToMessage(this.lastReadMessageId);