feat: emit activeChannel$ on all WS events

Author: szuperaz

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

@@ -1318,12 +1318,7 @@ export class ChannelService {
       ),
     );
     this.activeChannelSubscriptions.push(
-      channel.on('capabilities.changed', (_) => {
-        this.activeChannelSubject.next(this.activeChannelSubject.getValue());
-      }),
-    );
-    this.activeChannelSubscriptions.push(
-      channel.on('channel.updated', (_) => {
+      channel.on(() => {
         this.activeChannelSubject.next(this.activeChannelSubject.getValue());
       }),
     );

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { combineLatest, Observable, Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { distinctUntilChanged, map } from 'rxjs/operators';
 import { ChannelService } from '../channel.service';
 import { ThemeService } from '../theme.service';
 import { CustomTemplatesService } from '../custom-templates.service';
@@ -49,6 +49,7 @@ export class ChannelComponent {
     this.theme$ = this.themeService.theme$;
     this.isActiveChannel$ = this.channelService.activeChannel$.pipe(
       map((c) => !!c),
+      distinctUntilChanged(),
     );
   }
 }

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

@@ -516,6 +516,7 @@ describe('MessageInputComponent', () => {
   });
 
   it('should not reset textarea and attachments if channel id remains the same', () => {
+    attachmentService.resetAttachmentUploads.calls.reset();
     attachmentService.attachmentUploads$.next([
       {
         file: { name: 'img.png' } as any as File,
@@ -676,15 +677,10 @@ describe('MessageInputComponent', () => {
     expect(component.canSendMessages).toBeFalse();
 
     mockActiveChannel$.next({
-      data: { own_capabilities: [] },
+      data: { own_capabilities: ['send-message'] },
       getConfig: () => ({ commands: [] }),
     } as any as Channel);
 
-    expect(component.canSendMessages).toBeFalse();
-
-    component.message = generateMockMessages()[0];
-    component.ngOnChanges({ message: {} as SimpleChange });
-
     expect(component.canSendMessages).toBeTrue();
   });
 

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

@@ -149,7 +149,8 @@ export class MessageInputComponent
   private subscriptions: Subscription[] = [];
   private hideNotification: (() => void) | undefined;
   private isViewInited = false;
-  private channel: Channel | undefined;
+  private channelId: string | undefined;
+  private channelCapabilities: string[] = [];
   private sendMessageSubcription: Subscription | undefined;
   private readonly defaultTextareaPlaceholder = 'streamChat.Type your message';
   private readonly slowModeTextareaPlaceholder = 'streamChat.Slow Mode ON';
@@ -186,21 +187,34 @@ export class MessageInputComponent
     );
     this.subscriptions.push(
       this.channelService.activeChannel$.subscribe((channel) => {
-        if (channel && this.channel && channel.id !== this.channel.id) {
+        const newChannelId = channel?.id;
+        const newCapabilities =
+          (channel?.data?.own_capabilities as string[]) || [];
+
+        const channelIdChanged = this.channelId !== newChannelId;
+
+        const capabilitiesChanged =
+          newCapabilities.join(',') !== this.channelCapabilities.join(',');
+
+        if (channelIdChanged) {
+          this.channelId = newChannelId;
           this.textareaValue = '';
           this.attachmentService.resetAttachmentUploads();
           this.voiceRecorderService.isRecorderVisible$.next(false);
         }
-        const capabilities = channel?.data?.own_capabilities as string[];
-        if (capabilities) {
+
+        if (capabilitiesChanged) {
+          this.channelCapabilities = newCapabilities;
           this.isFileUploadAuthorized =
-            capabilities.indexOf('upload-file') !== -1;
-          this.canSendLinks = capabilities.indexOf('send-links') !== -1;
-          this.channel = channel;
+            newCapabilities.indexOf('upload-file') !== -1;
+          this.canSendLinks = newCapabilities.indexOf('send-links') !== -1;
           this.setCanSendMessages();
         }
-        if (this.isViewInited) {
-          this.cdRef.markForCheck();
+
+        if (channelIdChanged || capabilitiesChanged) {
+          if (this.isViewInited) {
+            this.cdRef.markForCheck();
+          }
         }
       }),
     );
@@ -591,12 +605,11 @@ export class MessageInputComponent
   }
 
   private setCanSendMessages() {
-    const capabilities = this.channel?.data?.own_capabilities as string[];
-    if (!capabilities) {
+    if (!this.channelCapabilities || this.channelCapabilities.length === 0) {
       this.canSendMessages = false;
     } else {
       this.canSendMessages =
-        capabilities.indexOf(
+        this.channelCapabilities.indexOf(
           this.mode === 'main' ? 'send-message' : 'send-reply',
         ) !== -1 || this.isUpdate;
     }

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

@@ -220,6 +220,16 @@ export class MessageListComponent
           this.resetScrollState();
           this.setMessages$();
           this.channelId = channel?.id;
+          this.newMessageSubscription?.unsubscribe();
+          if (channel) {
+            this.newMessageSubscription = channel.on('message.new', (event) => {
+              if (!event.message) {
+                return;
+              } else {
+                this.newMessageReceived(event.message);
+              }
+            });
+          }
           if (this.isViewInited) {
             this.cdRef.markForCheck();
           }
@@ -289,16 +299,6 @@ export class MessageListComponent
             this.cdRef.markForCheck();
           }
         }
-        this.newMessageSubscription?.unsubscribe();
-        if (channel) {
-          this.newMessageSubscription = channel.on('message.new', (event) => {
-            if (!event.message) {
-              return;
-            } else {
-              this.newMessageReceived(event.message);
-            }
-          });
-        }
       }),
     );
     this.subscriptions.push(

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

@@ -511,6 +511,9 @@ export class MessageComponent
     this.readByText = this.message?.readBy
       ? listUsers(this.message.readBy, !hasMoreThan100Members, others)
       : '';
+    if (this.isViewInited) {
+      this.cdRef.markForCheck();
+    }
   }
 
   private setIsSentByCurrentUser() {