From 0adc22176147310e6fb75483d4edaade2b85fa70 Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Thu, 14 Sep 2023 10:29:22 +0200 Subject: [PATCH] fix: jumpt to last read message edge-case, rename input --- .../message-list.component.spec.ts | 18 +++++++++--------- .../lib/message-list/message-list.component.ts | 16 ++++++++++++---- 2 files changed, 21 insertions(+), 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 index d026f31f..abb89b8a 100644 --- 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 index 157e81d5..4ca7be67 100644 --- 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);