Merge branch 'master' into theming-v2

Author: szuperaz

docusaurus/docs/Angular/concepts/translation.mdx

@@ -24,6 +24,10 @@ imports: [TranslateModule.forRoot(), StreamChatModule];
 export class AppModule {}
 ```
 
+:::important
+You should import the `TranslateModule.forRoot()` in a non-lazy loaded module (even if the chat application is displayed from a lazy loaded module).
+:::
+
 ### Set up the translations
 
 Typically you will be doing it in your `AppComponent`:

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

@@ -785,6 +785,33 @@ describe('ChannelService', () => {
     expect(channel.on).toHaveBeenCalledWith(jasmine.any(Function));
   }));
 
+  it(`shouldn't add channels twice if two notification events were received for the same channel`, fakeAsync(async () => {
+    await init();
+    const channel = generateMockChannels()[0];
+    channel.cid = 'channel';
+    channel.id = 'channel';
+    channel.type = 'messaging';
+    mockChatClient.channel.and.returnValue(channel);
+    spyOn(channel, 'watch').and.callThrough();
+    spyOn(channel, 'on').and.callThrough();
+    const spy = jasmine.createSpy();
+    service.channels$.subscribe(spy);
+    events$.next({
+      eventType: 'notification.added_to_channel',
+      event: { channel: channel } as any as Event<DefaultStreamChatGenerics>,
+    });
+    events$.next({
+      eventType: 'notification.message_new',
+      event: { channel: channel } as any as Event<DefaultStreamChatGenerics>,
+    });
+    tick();
+
+    const channels = spy.calls.mostRecent().args[0] as Channel[];
+
+    expect(channels.filter((c) => c.cid === channel.cid).length).toBe(1);
+    expect(channel.on).toHaveBeenCalledOnceWith(jasmine.any(Function));
+  }));
+
   it('should remove channel form the list if user is removed from channel', async () => {
     await init();
     let channel!: Channel<DefaultStreamChatGenerics>;

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

@@ -274,11 +274,8 @@ export class ChannelService<
     const deletedChannels = currentChannels.filter(
       (c) => !channels?.find((channel) => channel.cid === c.cid)
     );
-    this.addChannelsFromNotification(newChannels as ChannelResponse<T>[]);
+    void this.addChannelsFromNotification(newChannels as ChannelResponse<T>[]);
     this.removeChannelsFromChannelList(deletedChannels.map((c) => c.cid));
-    if (!newChannels.length && !deletedChannels.length) {
-      this.channelsSubject.next(channels as Channel<T>[]);
-    }
   };
 
   private messageListSetter = (messages: StreamMessage<T>[]) => {
@@ -876,31 +873,38 @@ export class ChannelService<
 
   private handleNewMessageNotification(clientEvent: ClientEvent<T>) {
     if (clientEvent.event.channel) {
-      this.addChannelsFromNotification([clientEvent.event.channel]);
+      void this.addChannelsFromNotification([clientEvent.event.channel]);
     }
   }
 
   private handleAddedToChannelNotification(clientEvent: ClientEvent<T>) {
     if (clientEvent.event.channel) {
-      this.addChannelsFromNotification([clientEvent.event.channel]);
+      void this.addChannelsFromNotification([clientEvent.event.channel]);
     }
   }
 
-  private addChannelsFromNotification(channelResponses: ChannelResponse<T>[]) {
-    const newChannels: Channel<T>[] = [];
+  private async addChannelsFromNotification(
+    channelResponses: ChannelResponse<T>[]
+  ) {
+    let newChannels: Channel<T>[] = [];
+    const watchRequests: Promise<any>[] = [];
     channelResponses.forEach((channelResponse) => {
       const channel = this.chatClientService.chatClient.channel(
         channelResponse.type,
         channelResponse.id
       );
-      void channel.watch();
-      this.watchForChannelEvents(channel);
+      watchRequests.push(channel.watch());
       newChannels.push(channel);
     });
-    this.channelsSubject.next([
-      ...newChannels,
-      ...(this.channelsSubject.getValue() || []),
-    ]);
+    await Promise.all(watchRequests);
+    const currentChannels = this.channelsSubject.getValue() || [];
+    newChannels = newChannels.filter(
+      (newChannel) => !currentChannels.find((c) => c.cid === newChannel.cid)
+    );
+    if (newChannels.length > 0) {
+      newChannels.forEach((c) => this.watchForChannelEvents(c));
+      this.channelsSubject.next([...newChannels, ...currentChannels]);
+    }
   }
 
   private removeChannelsFromChannelList(cids: string[]) {

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

@@ -154,11 +154,23 @@ describe('ChatClientService', () => {
   });
 
   it('should set SDK information', () => {
-    const userAgent = `stream-chat-angular-${version}-${mockChatClient.getUserAgent()}`;
+    const userAgent = `stream-chat-angular-${version}-${
+      mockChatClient.getUserAgent() as string
+    }`;
 
     expect(mockChatClient.setUserAgent).toHaveBeenCalledWith(userAgent);
   });
 
+  it('should set SDK information only once', async () => {
+    mockChatClient.getUserAgent.and.returnValue(
+      'stream-chat-angular-stream-chat-javascript-client-browser-2.2.2'
+    );
+    mockChatClient.setUserAgent.calls.reset();
+    await service.init(apiKey, userId, userToken);
+
+    expect(mockChatClient.setUserAgent).not.toHaveBeenCalled();
+  });
+
   it('should watch for added to channel events', () => {
     const spy = jasmine.createSpy();
     service.events$.subscribe(spy);

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

@@ -108,10 +108,12 @@ export class ChatClientService<
         throw error;
       }
       this.userSubject.next(this.chatClient.user);
-      this.chatClient.setUserAgent(
-        `stream-chat-angular-${version}-${this.chatClient.getUserAgent()}`
-      );
-      this.userSubject.next(this.chatClient.user);
+      const sdkPrefix = 'stream-chat-angular';
+      if (!this.chatClient.getUserAgent().includes(sdkPrefix)) {
+        this.chatClient.setUserAgent(
+          `${sdkPrefix}-${version}-${this.chatClient.getUserAgent()}`
+        );
+      }
     });
     const channels = await this.chatClient.queryChannels(
       { invite: 'pending' } as any as ChannelFilters<T>, // TODO: find out why we need this typecast

projects/stream-chat-angular/src/lib/mocks/index.ts

@@ -281,7 +281,7 @@ export type MockStreamChatClient = {
   flagMessage: jasmine.Spy;
   setUserAgent: jasmine.Spy;
   queryUsers: jasmine.Spy;
-  getUserAgent: () => string;
+  getUserAgent: jasmine.Spy;
   getAppSettings: jasmine.Spy;
   disconnectUser: jasmine.Spy;
   queryChannels: jasmine.Spy;
@@ -313,6 +313,9 @@ export const mockStreamChatClient = (): MockStreamChatClient => {
     },
   });
   const disconnectUser = jasmine.createSpy();
+  const getUserAgent = jasmine
+    .createSpy()
+    .and.returnValue('stream-chat-javascript-client-browser-2.2.2');
   /* eslint-enable jasmine/no-unsafe-spy */
   const user = mockCurrentUser();
   const on = (name: EventTypes | Function, handler: () => {}) => {
@@ -333,7 +336,6 @@ export const mockStreamChatClient = (): MockStreamChatClient => {
       eventHandlers['all']({ ...event, type: name });
     }
   };
-  const getUserAgent = () => 'stream-chat-javascript-client-browser-2.2.2';
   const appSettings$ = new Subject<AppSettings>();
 
   return {