Merge pull request #445 from GetStream/fix-message-list-reset

fix: Don't reset scroll stat on channel update

Author: szuperaz

projects/stream-chat-angular/src/lib/date-parser.service.ts

@@ -22,7 +22,7 @@ export class DateParserService {
   /**
    * Return a user-friendly string representation of the date (year, month and date)
    * @param date
-   * @returns
+   * @returns The parsed date
    */
   parseDate(date: Date) {
     if (this.customDateParser) {
@@ -34,7 +34,7 @@ export class DateParserService {
   /**
    * Return a user-friendly string representation of the date and time
    * @param date
-   * @returns
+   * @returns The parsed date
    */
   parseDateTime(date: Date) {
     if (this.customDateTimeParser) {

projects/stream-chat-angular/src/lib/message-list/message-list.component.spec.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
-import { of } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
 import { Channel } from 'stream-chat';
 import { AvatarPlaceholderComponent } from '../avatar-placeholder/avatar-placeholder.component';
 import { AvatarComponent } from '../avatar/avatar.component';
@@ -26,6 +26,7 @@ import { StreamI18nService } from '../stream-i18n.service';
 import { DefaultStreamChatGenerics } from '../types';
 import { ImageLoadService } from './image-load.service';
 import { MessageListComponent } from './message-list.component';
+import { take } from 'rxjs/operators';
 
 describe('MessageListComponent', () => {
   let component: MessageListComponent;
@@ -489,7 +490,9 @@ describe('MessageListComponent', () => {
 
   it('should get unread message information from "message.new" event if an older message list is displayed', () => {
     let channel!: Channel<DefaultStreamChatGenerics>;
-    channelServiceMock.activeChannel$.subscribe((c) => (channel = c!));
+    channelServiceMock.activeChannel$
+      .pipe(take(1))
+      .subscribe((c) => (channel = c!));
     // Simulate message set change
     channel.state.latestMessages = [];
     channelServiceMock.activeChannelMessages$.next(
@@ -1011,4 +1014,15 @@ describe('MessageListComponent', () => {
 
     expect(queryDateSeparators().length).toBe(0);
   });
+
+  it(`shouldn't reset the scroll state if active channel is updated`, () => {
+    spyOn<any>(component, 'resetScrollState');
+    channelServiceMock.activeChannel$.next(
+      (
+        channelServiceMock.activeChannel$ as any as BehaviorSubject<any>
+      ).getValue()
+    );
+
+    expect(component['resetScrollState']).not.toHaveBeenCalled();
+  });
 });

projects/stream-chat-angular/src/lib/message-list/message-list.component.ts

@@ -106,6 +106,7 @@ export class MessageListComponent
     UserResponse<DefaultStreamChatGenerics>[]
   >;
   private isLatestMessageInList = true;
+  private channelId?: string;
 
   constructor(
     private channelService: ChannelService,
@@ -115,7 +116,10 @@ export class MessageListComponent
   ) {
     this.subscriptions.push(
       this.channelService.activeChannel$.subscribe((channel) => {
-        this.resetScrollState();
+        if (this.channelId !== channel?.id) {
+          this.resetScrollState();
+          this.channelId = channel?.id;
+        }
         const capabilites = channel?.data?.own_capabilities as string[];
         if (capabilites) {
           this.enabledMessageActions = capabilites;
@@ -400,6 +404,7 @@ export class MessageListComponent
       tap((messages) => {
         this.isLoading = false;
         if (messages.length === 0) {
+          this.resetScrollState();
           return;
         }
         const currentLatestMessage = messages[messages.length - 1];