Reactive channel list

package.json

@@ -118,7 +118,7 @@
     "pretty-bytes": "^6.1.1",
     "rxjs": "~7.4.0",
     "starwars-names": "^1.6.0",
-    "stream-chat": "^8.44.0",
+    "stream-chat": "^8.57.2",
     "ts-node": "^10.9.2",
     "tslib": "^2.3.0",
     "uuid": "^11.1.0",

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

@@ -59,14 +59,13 @@ export class AppComponent implements AfterViewInit {
         : environment.userToken,
       { timeout: 10000 },
     );
-    void this.channelService.init(
-      environment.channelsFilter || {
+    void this.channelService.init({
+      filters: environment.channelsFilter || {
         type: 'messaging',
         members: { $in: [environment.userId] },
       },
-      undefined,
-      { limit: 10 },
-    );
+      options: { limit: 10 },
+    });
     this.streamI18nService.setTranslation();
     this.channelService.activeParentMessage$
       .pipe(map((m) => !!m))

projects/stream-chat-angular/karma.conf.js

@@ -18,6 +18,7 @@ module.exports = function (config) {
         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
+        random: false,
       },
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
@@ -27,7 +28,7 @@ module.exports = function (config) {
     coverageReporter: {
       dir: require("path").join(
         __dirname,
-        "../../coverage/stream-chat-angular"
+        "../../coverage/stream-chat-angular",
       ),
       subdir: ".",
       reporters: [{ type: "html" }, { type: "text-summary" }],

projects/stream-chat-angular/package.json

@@ -22,7 +22,7 @@
     "@breezystack/lamejs": "^1.2.7",
     "@ngx-translate/core": "^16.0.0",
     "rxjs": "^7.4.0",
-    "stream-chat": "^8.44.0"
+    "stream-chat": "^8.57.2"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {

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,