fix: fetch messages sent to active channel while user were offline

Author: szuperaz

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

@@ -1942,16 +1942,26 @@ describe('ChannelService', () => {
     await init();
     let channels!: Channel<DefaultStreamChatGenerics>[];
     service.channels$.subscribe((c) => (channels = c!));
+    const activeChannel = channels[0];
     const spy = jasmine.createSpy();
     service.activeChannel$.subscribe(spy);
     spy.calls.reset();
+    const messagesSpy = jasmine.createSpy();
+    service.activeChannelMessages$.subscribe(messagesSpy);
+    messagesSpy.calls.reset();
     mockChatClient.queryChannels.and.resolveTo(channels);
     spyOn(service, 'deselectActiveChannel').and.callThrough();
+    const newMessage = generateMockMessages()[0];
+    newMessage.text = 'new message received while offline';
+    activeChannel.state.messages.push(newMessage);
     events$.next({ eventType: 'connection.recovered' } as ClientEvent);
     tick();
 
     expect(spy).not.toHaveBeenCalled();
     expect(service.deselectActiveChannel).not.toHaveBeenCalled();
+    expect(messagesSpy).toHaveBeenCalledWith(
+      jasmine.arrayContaining([newMessage])
+    );
   }));
 
   it('should add new channel to channel list', () => {

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

@@ -412,33 +412,7 @@ export class ChannelService<
     this.watchForActiveChannelEvents(channel);
     this.addChannel(channel);
     this.activeChannelSubject.next(channel);
-    channel.state.messages.forEach((m) => {
-      m.readBy = getReadBy(m, channel);
-      m.translation = getMessageTranslation(
-        m,
-        channel,
-        this.chatClientService.chatClient.user
-      );
-      if (m.quoted_message) {
-        m.quoted_message.translation = getMessageTranslation(
-          m.quoted_message,
-          channel,
-          this.chatClientService.chatClient.user
-        );
-      }
-    });
-    if (this.canSendReadEvents && this.shouldMarkActiveChannelAsRead) {
-      void channel.markRead();
-    }
-    this.activeChannelMessagesSubject.next([...channel.state.messages]);
-    this.activeChannelPinnedMessagesSubject.next([
-      ...channel.state.pinnedMessages,
-    ]);
-    this.activeParentMessageIdSubject.next(undefined);
-    this.activeThreadMessagesSubject.next([]);
-    this.messageToQuoteSubject.next(undefined);
-    this.usersTypingInChannelSubject.next([]);
-    this.usersTypingInThreadSubject.next([]);
+    this.setChannelState(channel);
   }
 
   /**
@@ -1015,8 +989,23 @@ export class ChannelService<
               this.shouldSetActiveChannel &&
               !this.activeChannelSubject.getValue();
             await this.queryChannels(shoulSetActiveChannel || false, true);
-            // Thread messages are not refetched so active thread gets deselected to avoid displaying stale messages
-            void this.setAsActiveParentMessage(undefined);
+            if (this.activeChannelSubject.getValue()) {
+              // Thread messages are not refetched so active thread gets deselected to avoid displaying stale messages
+              void this.setAsActiveParentMessage(undefined);
+              // Update and reselect message to quote
+              const messageToQuote = this.messageToQuoteSubject.getValue();
+              this.setChannelState(this.activeChannelSubject.getValue()!);
+              let messages!: StreamMessage<T>[];
+              this.activeChannelMessages$
+                .pipe(take(1))
+                .subscribe((m) => (messages = m));
+              const updatedMessageToQuote = messages.find(
+                (m) => m.id === messageToQuote?.id
+              );
+              if (updatedMessageToQuote) {
+                this.selectMessageToQuote(updatedMessageToQuote);
+              }
+            }
             this.isStateRecoveryInProgress = false;
           } catch {
             this.isStateRecoveryInProgress = false;
@@ -1678,4 +1667,34 @@ export class ChannelService<
       });
     }
   }
+
+  private setChannelState(channel: Channel<T>) {
+    channel.state.messages.forEach((m) => {
+      m.readBy = getReadBy(m, channel);
+      m.translation = getMessageTranslation(
+        m,
+        channel,
+        this.chatClientService.chatClient.user
+      );
+      if (m.quoted_message) {
+        m.quoted_message.translation = getMessageTranslation(
+          m.quoted_message,
+          channel,
+          this.chatClientService.chatClient.user
+        );
+      }
+    });
+    if (this.canSendReadEvents && this.shouldMarkActiveChannelAsRead) {
+      void channel.markRead();
+    }
+    this.activeChannelMessagesSubject.next([...channel.state.messages]);
+    this.activeChannelPinnedMessagesSubject.next([
+      ...channel.state.pinnedMessages,
+    ]);
+    this.activeParentMessageIdSubject.next(undefined);
+    this.activeThreadMessagesSubject.next([]);
+    this.messageToQuoteSubject.next(undefined);
+    this.usersTypingInChannelSubject.next([]);
+    this.usersTypingInThreadSubject.next([]);
+  }
 }