fix: unnecesary draft emission when channel is changed

Author: szuperaz

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

@@ -359,6 +359,9 @@ describe('ChannelService', () => {
     pinnedMessagesSpy.calls.reset();
     typingUsersSpy.calls.reset();
     typingUsersInThreadSpy.calls.reset();
+    const channelSwitchStateSpy = jasmine.createSpy();
+    service.channelSwitchState$.subscribe(channelSwitchStateSpy);
+    channelSwitchStateSpy.calls.reset();
     service.deselectActiveChannel();
 
     expect(messagesSpy).toHaveBeenCalledWith([]);
@@ -381,6 +384,10 @@ describe('ChannelService', () => {
 
     expect(messagesSpy).not.toHaveBeenCalled();
     expect(service.isMessageLoadingInProgress).toBeFalse();
+
+    expect(channelSwitchStateSpy.calls.count()).toBe(2);
+    expect(channelSwitchStateSpy.calls.first().args[0]).toBe('start');
+    expect(channelSwitchStateSpy.calls.mostRecent().args[0]).toBe('end');
   });
 
   it('should tell if user #hasMoreChannels$', async () => {
@@ -457,6 +464,9 @@ describe('ChannelService', () => {
     spyOn(newActiveChannel, 'markRead');
     const pinnedMessages = generateMockMessages();
     newActiveChannel.state.pinnedMessages = pinnedMessages;
+    const channelSwitchStateSpy = jasmine.createSpy();
+    service.channelSwitchState$.subscribe(channelSwitchStateSpy);
+    channelSwitchStateSpy.calls.reset();
     service.setAsActiveChannel(newActiveChannel);
     result = spy.calls.mostRecent().args[0] as Channel;
 
@@ -467,6 +477,9 @@ describe('ChannelService', () => {
     expect(pinnedMessagesSpy).toHaveBeenCalledWith(pinnedMessages);
     expect(typingUsersSpy).toHaveBeenCalledWith([]);
     expect(typingUsersInThreadSpy).toHaveBeenCalledWith([]);
+    expect(channelSwitchStateSpy.calls.count()).toBe(2);
+    expect(channelSwitchStateSpy.calls.first().args[0]).toBe('start');
+    expect(channelSwitchStateSpy.calls.mostRecent().args[0]).toBe('end');
   });
 
   it('should emit #activeChannelMessages$', async () => {

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

@@ -307,6 +307,12 @@ export class ChannelService {
   beforeUpdateMessage?: (
     message: StreamMessage
   ) => StreamMessage | Promise<StreamMessage>;
+  /**
+   * Since switching channels changes the state of multiple obserables, this observable can be used to check if all observables are updated.
+   * - `end` means all observables are in stable state
+   * - `start` means all observables are in unstable state
+   */
+  channelSwitchState$: Observable<'start' | 'end'>;
   /**
    * @internal
    */
@@ -357,6 +363,9 @@ export class ChannelService {
   private channelQueryStateSubject = new BehaviorSubject<
     ChannelQueryState | undefined
   >(undefined);
+  private channelSwitchStateSubject = new BehaviorSubject<'start' | 'end'>(
+    'end'
+  );
   private channelQuery?:
     | ChannelQuery
     | ((queryType: ChannelQueryType) => Promise<ChannelQueryResult>);
@@ -511,6 +520,9 @@ export class ChannelService {
     this.channelQueryState$ = this.channelQueryStateSubject
       .asObservable()
       .pipe(shareReplay(1));
+    this.channelSwitchState$ = this.channelSwitchStateSubject
+      .asObservable()
+      .pipe(shareReplay(1));
   }
 
   /**
@@ -557,6 +569,7 @@ export class ChannelService {
    * @param channel
    */
   setAsActiveChannel(channel: Channel) {
+    this.channelSwitchStateSubject.next('start');
     const prevActiveChannel = this.activeChannelSubject.getValue();
     if (prevActiveChannel?.cid === channel.cid) {
       return;
@@ -585,12 +598,14 @@ export class ChannelService {
       );
     }
     this.setChannelState(channel);
+    this.channelSwitchStateSubject.next('end');
   }
 
   /**
    * Deselects the currently active (if any) channel
    */
   deselectActiveChannel() {
+    this.channelSwitchStateSubject.next('start');
     const activeChannel = this.activeChannelSubject.getValue();
     if (!activeChannel) {
       return;
@@ -611,6 +626,7 @@ export class ChannelService {
     this.activeChannelUnreadCount = undefined;
     this.areReadEventsPaused = false;
     this.isMessageLoadingInProgress = false;
+    this.channelSwitchStateSubject.next('end');
   }
 
   /**

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

@@ -43,7 +43,7 @@ import { CustomTemplatesService } from '../custom-templates.service';
 import { MessageInputConfigService } from './message-input-config.service';
 import { MessageTextComponent } from '../message-text/message-text.component';
 
-fdescribe('MessageInputComponent', () => {
+describe('MessageInputComponent', () => {
   let nativeElement: HTMLElement;
   let component: MessageInputComponent;
   let fixture: ComponentFixture<MessageInputComponent>;
@@ -58,6 +58,7 @@ fdescribe('MessageInputComponent', () => {
   let mockActiveParentMessageId$: BehaviorSubject<string | undefined>;
   let sendMessageSpy: jasmine.Spy;
   let updateMessageSpy: jasmine.Spy;
+  let channelSwitchState$: BehaviorSubject<'start' | 'end'>;
   let channel: Channel;
   let user: UserResponse;
   let attachmentService: {
@@ -127,6 +128,7 @@ fdescribe('MessageInputComponent', () => {
         ],
       },
     });
+    channelSwitchState$ = new BehaviorSubject<'start' | 'end'>('end');
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), StreamAvatarModule],
       declarations: [
@@ -151,6 +153,7 @@ fdescribe('MessageInputComponent', () => {
             typingStarted: typingStartedSpy,
             typingStopped: typingStoppedSpy,
             latestMessageDateByUserByChannels$,
+            channelSwitchState$: channelSwitchState$,
           },
         },
         {
@@ -1152,7 +1155,7 @@ fdescribe('MessageInputComponent', () => {
     expect(queryVoiceRecorderButton()?.disabled).toBe(true);
   });
 
-  describe('message draft output', () => {
+  describe('message draft change', () => {
     it('should emit undefined when all message fields are cleared', () => {
       // Parent id doesn't count here
       component.mode = 'thread';
@@ -1325,14 +1328,21 @@ fdescribe('MessageInputComponent', () => {
     });
 
     it('should not emit if active channel changes', () => {
+      mockMessageToQuote$.next(mockMessage());
+
       const messageDraftSpy = jasmine.createSpy();
       component.messageDraftChange.subscribe(messageDraftSpy);
       queryTextarea()?.valueChange.next('Hello');
+      fixture.detectChanges();
+
       messageDraftSpy.calls.reset();
+      channelSwitchState$.next('start');
+      mockMessageToQuote$.next(undefined);
       mockActiveChannel$.next({
         ...mockActiveChannel$.getValue(),
         id: 'new-channel',
       } as any as Channel);
+      channelSwitchState$.next('end');
       fixture.detectChanges();
 
       expect(messageDraftSpy).not.toHaveBeenCalled();

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

@@ -228,14 +228,12 @@ export class MessageInputComponent
     this.subscriptions.push(
       this.channelService.activeChannel$.subscribe((channel) => {
         if (channel && this.channel && channel.id !== this.channel.id) {
-          this.isChannelChangeResetInProgress = true;
           this.textareaValue = '';
           this.attachmentService.resetAttachmentUploads();
           this.pollId = undefined;
           this.voiceRecorderService.isRecorderVisible$.next(false);
           // Preemptively deselect quoted message, to avoid unwanted draft emission
           this.channelService.selectMessageToQuote(undefined);
-          this.isChannelChangeResetInProgress = false;
         }
         const capabilities = channel?.data?.own_capabilities as string[];
         if (capabilities) {
@@ -248,14 +246,18 @@ export class MessageInputComponent
         }
       })
     );
+    this.subscriptions.push(
+      this.channelService.channelSwitchState$.subscribe((state) => {
+        this.isChannelChangeResetInProgress = state === 'start';
+      })
+    );
     this.subscriptions.push(
       this.channelService.messageToQuote$.subscribe((m) => {
         const isThreadReply = m && m.parent_id;
         if (
-          ((this.mode === 'thread' && isThreadReply) ||
-            (this.mode === 'thread' && this.quotedMessage && !m) ||
-            (this.mode === 'main' && !isThreadReply)) &&
-          (!!m || !!this.quotedMessage)
+          (this.mode === 'thread' && isThreadReply) ||
+          (this.mode === 'thread' && this.quotedMessage && !m) ||
+          (this.mode === 'main' && !isThreadReply)
         ) {
           this.quotedMessage = m;
           this.updateMessageDraft();