Merge pull request #641 from GetStream/channel-list-infinite-scroll

Channel list infinite scroll

Author: szuperaz

docusaurus/docs/Angular/code-examples/responsive-layout.mdx

@@ -204,20 +204,14 @@ Lastly, implement auto close behavior for the channel list:
 
 ```html
 <stream-channel-list
-  (click)="closeMenu()"
+  (click)="closeMenu($event)"
   class="channel-list menu-{{ isMenuOpen ? 'open' : 'close' }}"
 ></stream-channel-list>
 ```
 
 ```ts
-closeMenu() {
-  let isChannelQueryInProgress = false;
-  this.channelService.channelQueryState$.pipe(take(1)).subscribe((state) => {
-    if (state?.state === 'in-progress') {
-      isChannelQueryInProgress = true;
-    }
-  });
-  if (!isChannelQueryInProgress) {
+closeMenu(event: Event) {
+  if ((event.target as HTMLElement).closest('stream-channel-preview')) {
     this.isMenuOpen = false;
   }
 }

projects/sample-app/src/app/app.component.html

@@ -3,9 +3,9 @@
     class="channel-list menu-{{ isMenuOpen ? 'open' : 'close' }} thread-{{
       isThreadOpen ? 'open' : 'close'
     }}"
-    (click)="closeMenu()"
+    (click)="closeMenu($event)"
   ></stream-channel-list>
-  <stream-channel class="channel" (click)="closeMenu()">
+  <stream-channel class="channel" (click)="closeMenu($event)">
     <stream-channel-header>
       <button
         class="menu-button"

projects/sample-app/src/app/app.component.ts

@@ -5,7 +5,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map, take } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import {
   ChatClientService,
   ChannelService,
@@ -77,14 +77,8 @@ export class AppComponent implements AfterViewInit {
     );
   }
 
-  closeMenu() {
-    let isChannelQueryInProgress = false;
-    this.channelService.channelQueryState$.pipe(take(1)).subscribe((state) => {
-      if (state?.state === 'in-progress') {
-        isChannelQueryInProgress = true;
-      }
-    });
-    if (!isChannelQueryInProgress) {
+  closeMenu(event: Event) {
+    if ((event.target as HTMLElement).closest('stream-channel-preview')) {
       this.isMenuOpen = false;
     }
   }

projects/stream-chat-angular/src/lib/channel-list/channel-list.component.html

@@ -30,44 +30,29 @@
       >
         {{ "streamChat.You have no channels currently" | translate }}
       </p>
-      <ng-container
-        *ngFor="let channel of channels$ | async; trackBy: trackByChannelId"
+      <stream-paginated-list
+        [items]="(channels$ | async) ?? []"
+        [hasMore]="(hasMoreChannels$ | async) ?? false"
+        [isLoading]="isLoadingMoreChannels"
+        (loadMore)="loadMoreChannels()"
       >
-        <ng-template #defaultTemplate let-channelInput="channel">
-          <stream-channel-preview
-            data-testclass="channel-preview"
-            [channel]="channelInput"
-          ></stream-channel-preview>
+        <ng-template let-channel="item">
+          <ng-template #defaultTemplate let-channelInput="channel">
+            <stream-channel-preview
+              data-testclass="channel-preview"
+              [channel]="channelInput"
+            ></stream-channel-preview>
+          </ng-template>
+          <div>
+            <ng-container
+              *ngTemplateOutlet="
+                customChannelPreviewTemplate || defaultTemplate;
+                context: { channel: channel }
+              "
+            ></ng-container>
+          </div>
         </ng-template>
-        <div>
-          <ng-container
-            *ngTemplateOutlet="
-              customChannelPreviewTemplate || defaultTemplate;
-              context: { channel: channel }
-            "
-          ></ng-container>
-        </div>
-      </ng-container>
-      <div
-        *ngIf="hasMoreChannels$ | async"
-        class="str-chat__load-more-button"
-        data-testid="load-more"
-        (click)="loadMoreChannels()"
-        (keyup.enter)="loadMoreChannels()"
-      >
-        <button
-          class="str-chat__load-more-button__button str-chat__cta-button"
-          data-testid="load-more-button"
-          [disabled]="isLoadingMoreChannels"
-        >
-          <span *ngIf="!isLoadingMoreChannels; else loadingIndicator">{{
-            "Load more" | translate
-          }}</span>
-          <ng-template #loadingIndicator
-            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder
-          ></ng-template>
-        </button>
-      </div>
+      </stream-paginated-list>
       <ng-content select="[channel-list-bottom]"></ng-content>
     </div>
   </div>
@@ -89,7 +74,10 @@
 </ng-template>
 
 <ng-template #loadingChannels>
-  <div data-testid="loading-indicator" class="str-chat__loading-channels">
+  <div
+    data-testid="loading-indicator-full-size"
+    class="str-chat__loading-channels"
+  >
     <ng-container *ngTemplateOutlet="loadingChannel"></ng-container>
     <ng-container *ngTemplateOutlet="loadingChannel"></ng-container>
     <ng-container *ngTemplateOutlet="loadingChannel"></ng-container>

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

@@ -12,6 +12,8 @@ import {
 import { ThemeService } from '../theme.service';
 import { ChannelListComponent } from './channel-list.component';
 import { Subject, of } from 'rxjs';
+import { PaginatedListComponent } from '../paginated-list/paginated-list.component';
+import { Channel } from 'stream-chat';
 
 describe('ChannelListComponent', () => {
   let channelServiceMock: MockChannelService;
@@ -21,14 +23,17 @@ describe('ChannelListComponent', () => {
   let queryChannels: () => ChannelPreviewComponent[];
   let queryChatdownContainer: () => HTMLElement | null;
   let queryLoadingIndicator: () => HTMLElement | null;
-  let queryLoadMoreButton: () => HTMLElement | null;
   let queryEmptyIndicator: () => HTMLElement | null;
 
   beforeEach(() => {
     channelServiceMock = mockChannelService();
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
-      declarations: [ChannelListComponent, ChannelPreviewComponent],
+      declarations: [
+        ChannelListComponent,
+        ChannelPreviewComponent,
+        PaginatedListComponent,
+      ],
       providers: [
         { provide: ChannelService, useValue: channelServiceMock },
         {
@@ -51,9 +56,9 @@ describe('ChannelListComponent', () => {
     queryChatdownContainer = () =>
       nativeElement.querySelector('[data-testid="chatdown-container"]');
     queryLoadingIndicator = () =>
-      nativeElement.querySelector('[data-testid="loading-indicator"]');
-    queryLoadMoreButton = () =>
-      nativeElement.querySelector('[data-testid="load-more"]');
+      nativeElement.querySelector(
+        '[data-testid="loading-indicator-full-size"]'
+      );
     queryEmptyIndicator = () =>
       nativeElement.querySelector(
         '[data-testid="empty-channel-list-indicator"]'
@@ -121,30 +126,38 @@ describe('ChannelListComponent', () => {
     expect(queryEmptyIndicator()).not.toBeNull();
   });
 
-  it('should display load more button', () => {
+  it('should bind #hasMore', () => {
     const channels = generateMockChannels();
     channelServiceMock.channels$.next(channels);
+    fixture.detectChanges();
+    const paginatedListComponent = fixture.debugElement.query(
+      By.directive(PaginatedListComponent)
+    ).componentInstance as PaginatedListComponent<Channel>;
     channelServiceMock.hasMoreChannels$.next(false);
     fixture.detectChanges();
 
-    expect(queryLoadMoreButton()).toBeNull();
+    expect(paginatedListComponent.hasMore).toBeFalse();
 
     channelServiceMock.hasMoreChannels$.next(true);
     fixture.detectChanges();
 
-    expect(queryLoadMoreButton()).not.toBeNull();
+    expect(paginatedListComponent.hasMore).toBeTrue();
   });
 
-  it(`should load more channels, but shouldn't loading indicator`, () => {
+  it(`should load more channels, but shouldn't display full-size loading indicator`, () => {
     const channels = generateMockChannels();
     channelServiceMock.channels$.next(channels);
     channelServiceMock.hasMoreChannels$.next(true);
     spyOn(channelServiceMock, 'loadMoreChannels');
     fixture.detectChanges();
-    queryLoadMoreButton()?.click();
+    const paginatedListComponent = fixture.debugElement.query(
+      By.directive(PaginatedListComponent)
+    ).componentInstance as PaginatedListComponent<Channel>;
+    paginatedListComponent.loadMore.emit();
+    fixture.detectChanges();
 
-    expect(queryLoadingIndicator()).toBeNull();
     expect(channelServiceMock.loadMoreChannels).toHaveBeenCalledWith();
+    expect(queryLoadingIndicator()).toBeNull();
   });
 
   it('should apply dark/light theme', () => {