fix: update UI when channel frozen state changes

in progress

integrate capabilitied.changed event

update stream-chat

Author: szuperaz

package-lock.json

@@ -126,7 +126,7 @@
     "ngx-popperjs": "^12.2.2",
     "pretty-bytes": "^5.6.0",
     "rxjs": "^7.1.0",
-    "stream-chat": "^8.14.0",
+    "stream-chat": "^8.14.2",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12",

package.json

@@ -800,6 +800,25 @@ describe('ChannelService', () => {
     expect(updatedChannel!.data!.hidden).toBeDefined();
   });
 
+  it('should emit changed channel if `capabilities.changed` dispatched', async () => {
+    await init();
+    let channel!: Channel<DefaultStreamChatGenerics>;
+    service.activeChannel$.pipe(first()).subscribe((c) => (channel = c!));
+    const spy = jasmine.createSpy();
+    service.channels$.subscribe(spy);
+    channel.data!.own_capabilities = ['send-message'];
+    (channel as MockChannel).handleEvent('capabilities.changed', {
+      type: 'capabilities.changed',
+      cid: channel.cid,
+    });
+
+    const channels = spy.calls.mostRecent().args[0] as Channel[];
+
+    const updatedChannel = channels.find((c) => c.cid === channel.cid);
+
+    expect(updatedChannel!.data!.own_capabilities).toEqual(['send-message']);
+  });
+
   it('should call #customChannelUpdatedHandler, if updated and handler is provided', async () => {
     await init();
     let channel!: Channel<DefaultStreamChatGenerics>;

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

@@ -15,6 +15,7 @@ import {
   ChannelResponse,
   ChannelSort,
   Event,
+  EventTypes,
   FormatMessageResponse,
   Message,
   MessageResponse,
@@ -1521,7 +1522,9 @@ export class ChannelService<
 
   private watchForChannelEvents(channel: Channel<T>) {
     const unsubscribe = channel.on((event: Event<T>) => {
-      switch (event.type) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      const type = event.type as EventTypes | 'capabilities.changed';
+      switch (type) {
         case 'message.new': {
           this.ngZone.run(() => {
             if (this.customNewMessageHandler) {
@@ -1624,6 +1627,24 @@ export class ChannelService<
           });
           break;
         }
+        case 'capabilities.changed': {
+          this.ngZone.run(() => {
+            const cid = event.cid;
+            if (cid) {
+              const currentChannels = this.channelsSubject.getValue();
+              const index = currentChannels?.findIndex((c) => c.cid === cid);
+              if (index !== -1 && index !== undefined) {
+                this.channelsSubject.next([...currentChannels!]);
+                if (cid === this.activeChannelSubject.getValue()?.cid) {
+                  this.activeChannelSubject.next(
+                    this.activeChannelSubject.getValue()
+                  );
+                }
+              }
+            }
+          });
+          break;
+        }
       }
     });
     this.channelSubscriptions[channel.cid] = unsubscribe.unsubscribe;

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

@@ -49,7 +49,10 @@ export const generateMockMessages = (offset = 0, isOlder = false) => {
 };
 
 export type MockChannel = Channel<DefaultStreamChatGenerics> & {
-  handleEvent: (name: EventTypes, payload?: any) => void;
+  handleEvent: (
+    name: EventTypes | 'capabilities.changed',
+    payload?: any
+  ) => void;
 };
 
 export const generateMockChannels = (length = 25) => {