feat: recoverState method to allow SDK components to initiate state recovery

Author: szuperaz

projects/stream-chat-angular/src/assets/i18n/en.ts

@@ -131,5 +131,6 @@ export const en = {
     'You currently have {{count}} attachments, the maximum is {{max}}':
       'You currently have {{count}} attachments, the maximum is {{max}}',
     'and others': 'and others',
+    'Reload channels': 'Reload channels',
   },
 };

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

@@ -46,8 +46,13 @@
     </div>
   } @else {
     @if (isError$ | async) {
-      <div data-testid="chatdown-container" class="str-chat__down">
-        <ng-container *ngTemplateOutlet="loadingChannels" />
+      <div
+        data-testid="chatdown-container"
+        class="str-chat__dow str-chat__channel-list-empty"
+      >
+        <button (click)="recoverState()" class="str-chat__cta-button">
+          {{ "streamChat.Reload channels" | translate }}
+        </button>
       </div>
     }
     @if (isInitializing$ | async) {

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

@@ -84,10 +84,7 @@ describe('ChannelListComponent', () => {
   it('should display error indicator, if error happened', () => {
     expect(queryChatdownContainer()).toBeNull();
 
-    channelServiceMock.channelQueryState$.next({
-      state: 'error',
-      error: new Error('error'),
-    });
+    channelServiceMock.shouldRecoverState$.next(true);
     fixture.detectChanges();
 
     expect(queryChatdownContainer()).not.toBeNull();

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

@@ -33,9 +33,7 @@ export class ChannelListComponent implements OnDestroy {
     this.theme$ = this.themeService.theme$;
     this.channels$ = this.channelService.channels$;
     this.hasMoreChannels$ = this.channelService.hasMoreChannels$;
-    this.isError$ = this.channelService.channelQueryState$.pipe(
-      map((s) => !this.isLoadingMoreChannels && s?.state === 'error'),
-    );
+    this.isError$ = this.channelService.shouldRecoverState$;
     this.isInitializing$ = this.channelService.channelQueryState$.pipe(
       map((s) => !this.isLoadingMoreChannels && s?.state === 'in-progress'),
     );
@@ -56,6 +54,10 @@ export class ChannelListComponent implements OnDestroy {
     this.isLoadingMoreChannels = false;
   }
 
+  recoverState() {
+    void this.channelService.recoverState();
+  }
+
   trackByChannelId(_: number, item: Channel<DefaultStreamChatGenerics>) {
     return item.cid;
   }

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

@@ -1,4 +1,4 @@
-import { Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { Channel, Event, FormatMessageResponse } from 'stream-chat';
@@ -41,7 +41,6 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
 
   constructor(
     private channelService: ChannelService,
-    private ngZone: NgZone,
     private chatClientService: ChatClientService,
     messageService: MessageService,
     public customTemplatesService: CustomTemplatesService,

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

@@ -1841,6 +1841,9 @@ describe('ChannelService', () => {
   });
 
   it('should reset state after connection recovered', async () => {
+    const spy = jasmine.createSpy();
+    service.shouldRecoverState$.subscribe(spy);
+    spy.calls.reset();
     await init();
     mockChatClient.queryChannels.calls.reset();
     events$.next({ eventType: 'connection.recovered' } as ClientEvent);
@@ -1851,6 +1854,8 @@ describe('ChannelService', () => {
       jasmine.any(Object),
       jasmine.any(Object),
     );
+
+    expect(spy).not.toHaveBeenCalled();
   });
 
   it(`shouldn't do duplicate state reset after connection recovered`, async () => {
@@ -2414,4 +2419,52 @@ describe('ChannelService', () => {
 
     expect(activeChannel.markRead).toHaveBeenCalledTimes(2);
   });
+
+  it('should signal if state recovery is needed - initial load', async () => {
+    const spy = jasmine.createSpy();
+    service.shouldRecoverState$.subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(false);
+    spy.calls.reset();
+    const error = 'there was an error';
+
+    await expectAsync(
+      init(undefined, undefined, undefined, () =>
+        mockChatClient.queryChannels.and.rejectWith(error),
+      ),
+    ).toBeRejectedWith(error);
+
+    expect(spy).toHaveBeenCalledWith(true);
+
+    spy.calls.reset();
+    mockChatClient.queryChannels.and.resolveTo([]);
+    await service.recoverState();
+
+    expect(spy).toHaveBeenCalledWith(false);
+  });
+
+  it('should signal if state recovery is needed - failed state recover after connection.recovered', fakeAsync(() => {
+    void init();
+    tick();
+    const spy = jasmine.createSpy();
+    service.shouldRecoverState$.subscribe(spy);
+    spy.calls.reset();
+    mockChatClient.queryChannels.and.rejectWith(
+      new Error('there was an error'),
+    );
+    events$.next({ eventType: 'connection.recovered' } as ClientEvent);
+
+    tick();
+    flush();
+
+    expect(spy).toHaveBeenCalledWith(true);
+
+    spy.calls.reset();
+    mockChatClient.queryChannels.and.resolveTo([]);
+    void service.recoverState();
+    tick();
+    flush();
+
+    expect(spy).toHaveBeenCalledWith(false);
+  }));
 });