Merge branch 'master' into perf-message-list

Author: szuperaz

docusaurus/docs/Angular/components/MessageReactionsComponent.mdx

@@ -8,7 +8,7 @@ The `MessageReactions` component displays the reactions of a message, the curren
 
 <img src={MessageReactionsScreenshot} width="500" />
 
-**Example 2** - displaying the reacting users:
+**Example 2** - displaying the reacting users - only visible if a message has at maximum 1200 reactions:
 
 <img src={MessageReactionsDetailsScreenshot} width="500" />
 

projects/customizations-example/src/app/app.component.html

@@ -5,16 +5,7 @@
   </stream-channel-list>
   <stream-channel>
     <stream-channel-header></stream-channel-header>
-    <stream-message-list
-      [customMessageActions]="[
-        {
-          actionName: 'forward',
-          actionLabelOrTranslationKey: 'Forward',
-          isVisible: isVisible,
-          actionHandler: actionHandler
-        }
-      ]"
-    ></stream-message-list>
+    <stream-message-list></stream-message-list>
     <stream-notification-list></stream-notification-list>
     <stream-message-input></stream-message-input>
     <stream-thread name="thread">
@@ -175,20 +166,16 @@
 
 <ng-template
   #messageActionsBoxTemplate
-  let-isOpen="isOpen"
   let-isMine="isMine"
   let-enabledActions="enabledActions"
   let-messageInput="message"
-  let-displayedActionsCountChangeHandler="displayedActionsCountChangeHandler"
-  let-isEditingChangeHandler="isEditingChangeHandler"
+  let-customActions="customActions"
 >
   <stream-message-actions-box
-    [isOpen]="isOpen"
     [isMine]="isMine"
     [enabledActions]="enabledActions"
     [message]="messageInput"
-    (displayedActionsCount)="displayedActionsCountChangeHandler($event)"
-    (isEditing)="isEditingChangeHandler($event)"
+    [customActions]="customActions"
   ></stream-message-actions-box>
 </ng-template>
 

projects/customizations-example/src/app/app.component.ts

@@ -36,6 +36,7 @@ import {
   ThreadHeaderContext,
   CustomAttachmentUploadContext,
   DateSeparatorContext,
+  MessageActionsService,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 
@@ -100,8 +101,17 @@ export class AppComponent implements AfterViewInit {
     private chatService: ChatClientService,
     public channelService: ChannelService,
     private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService
+    private customTemplatesService: CustomTemplatesService,
+    private messageActionsService: MessageActionsService
   ) {
+    this.messageActionsService.customActions$.next([
+      {
+        actionName: 'forward',
+        actionLabelOrTranslationKey: 'Forward',
+        isVisible: this.isVisible,
+        actionHandler: this.actionHandler,
+      },
+    ]);
     void this.chatService.init(
       environment.apiKey,
       environment.userId,
@@ -210,5 +220,8 @@ export class AppComponent implements AfterViewInit {
     return true;
   }
 
-  actionHandler() {}
+  actionHandler() {
+    /* eslint-disable-next-line no-console */
+    console.log('forwarded');
+  }
 }

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

@@ -2327,6 +2327,22 @@ describe('ChannelService', () => {
     ]);
   });
 
+  it('should load message reactions - but no more than 1200', async () => {
+    await init();
+    const activeChannel = service.activeChannel!;
+    const message = service.activeChannelMessages[0]!;
+    const mockReactionsPage = new Array(300)
+      .fill(null)
+      .map(() => ({ type: 'wow', user: { id: 'jack' } })) as ReactionResponse[];
+    spyOn(activeChannel, 'getReactions').and.resolveTo({
+      reactions: mockReactionsPage,
+      duration: '',
+    });
+    const reactions = await service.getMessageReactions(message.id);
+
+    expect(reactions.length).toEqual(1200);
+  });
+
   it('should load message reactions - error', async () => {
     await init();
     const activeChannel = service.activeChannel!;

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

@@ -304,6 +304,10 @@ export class ChannelService<
    * You can return either an offset, or a filter using the [`$lte`/`$gte` operator](https://getstream.io/chat/docs/javascript/query_syntax_operators/). If you return a filter, it will be merged with the filter provided for the `init` method.
    */
   customPaginator?: (channelQueryResult: Channel<T>[]) => NextPageConfiguration;
+  /**
+   * internal
+   */
+  static readonly MAX_MESSAGE_REACTIONS_TO_FETCH = 1200;
   private channelsSubject = new BehaviorSubject<Channel<T>[] | undefined>(
     undefined
   );
@@ -1440,17 +1444,18 @@ export class ChannelService<
   }
 
   /**
-   * Get all reactions of a message in the current active channel
+   * Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions).
    * @param messageId
    * @returns all reactions of a message
    */
   async getMessageReactions(messageId: string) {
     const reactions: ReactionResponse<T>[] = [];
     const limit = 300;
-    const offset = 0;
+    let offset = 0;
+    const reactionsLimit = ChannelService.MAX_MESSAGE_REACTIONS_TO_FETCH;
     let lastPageSize = limit;
 
-    while (lastPageSize === limit) {
+    while (lastPageSize === limit && reactions.length < reactionsLimit) {
       try {
         const response = await this.activeChannel?.getReactions(messageId, {
           offset,
@@ -1460,6 +1465,7 @@ export class ChannelService<
         if (lastPageSize > 0) {
           reactions.push(...response!.reactions);
         }
+        offset += lastPageSize;
       } catch (e) {
         this.notificationService.addTemporaryNotification(
           'Error loading reactions'

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

@@ -26,6 +26,7 @@ import { NotificationService } from '../notification.service';
 import { DefaultStreamChatGenerics, StreamMessage } from '../types';
 
 import { MessageActionsBoxComponent } from './message-actions-box.component';
+import { MessageActionsService } from '../message-actions.service';
 
 describe('MessageActionsBoxComponent', () => {
   let component: MessageActionsBoxComponent;
@@ -86,6 +87,7 @@ describe('MessageActionsBoxComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(MessageActionsBoxComponent);
     component = fixture.componentInstance;
+    component.ngOnInit();
     message = mockMessage();
     component.message = message;
     component.isOpen = true;
@@ -272,42 +274,6 @@ describe('MessageActionsBoxComponent', () => {
     );
   });
 
-  it('should emit the number of displayed actions', () => {
-    component.enabledActions = [
-      'pin-message',
-      'update-own-message',
-      'delete-own-message',
-      'flag-message',
-    ];
-    component.isMine = true;
-    const spy = jasmine.createSpy();
-    component.displayedActionsCount.subscribe(spy);
-    component.ngOnChanges({
-      isMine: {} as any as SimpleChange,
-      enabledActions: {} as any as SimpleChange,
-    });
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalledWith(3);
-
-    spy.calls.reset();
-    component.enabledActions = [
-      'pin-message',
-      'update-any-message',
-      'delete',
-      'flag-message',
-      'quote-message',
-    ];
-    component.isMine = false;
-    component.ngOnChanges({
-      isMine: {} as any as SimpleChange,
-      enabledActions: {} as any as SimpleChange,
-    });
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalledWith(4);
-  });
-
   describe('should display edit action', () => {
     it('if #enabledActions contains "edit" and #isMine', () => {
       component.enabledActions = ['update-own-message'];
@@ -376,7 +342,9 @@ describe('MessageActionsBoxComponent', () => {
 
   it('should emit #isEditing if user starts to edit', () => {
     const spy = jasmine.createSpy();
-    component.isEditing.subscribe(spy);
+    const actionsService = TestBed.inject(MessageActionsService);
+    actionsService.messageToEdit$.subscribe(spy);
+    spy.calls.reset();
     component.enabledActions = [
       'pin-message',
       'update-any-message',
@@ -390,7 +358,7 @@ describe('MessageActionsBoxComponent', () => {
     queryEditAction()?.click();
     fixture.detectChanges();
 
-    expect(spy).toHaveBeenCalledWith(true);
+    expect(spy).toHaveBeenCalledWith(component.message);
   });
 
   it('should open modal if user starts to edit', () => {
@@ -440,14 +408,16 @@ describe('MessageActionsBoxComponent', () => {
     });
     fixture.detectChanges();
     const spy = jasmine.createSpy();
-    component.isEditing.subscribe(spy);
+    const actionsService = TestBed.inject(MessageActionsService);
+    actionsService.messageToEdit$.subscribe(spy);
     queryEditAction()?.click();
     fixture.detectChanges();
+    spy.calls.reset();
     queryModalCancelButton()?.click();
     fixture.detectChanges();
 
     expect(queryEditModal()).toBeUndefined();
-    expect(spy).toHaveBeenCalledWith(false);
+    expect(spy).toHaveBeenCalledWith(undefined);
   });
 
   it('should update #isEditModalOpen if modal is closed', () => {
@@ -460,14 +430,16 @@ describe('MessageActionsBoxComponent', () => {
     });
     fixture.detectChanges();
     const spy = jasmine.createSpy();
-    component.isEditing.subscribe(spy);
+    const actionsService = TestBed.inject(MessageActionsService);
+    actionsService.messageToEdit$.subscribe(spy);
     queryEditAction()?.click();
     fixture.detectChanges();
     queryEditModal()?.close();
+    spy.calls.reset();
     fixture.detectChanges();
 
     expect(component.isEditModalOpen).toBeFalse();
-    expect(spy).toHaveBeenCalledWith(false);
+    expect(spy).toHaveBeenCalledWith(undefined);
   });
 
   it('should close modal if message was updated successfully', () => {
@@ -481,14 +453,16 @@ describe('MessageActionsBoxComponent', () => {
     queryEditAction()?.click();
     fixture.detectChanges();
     const spy = jasmine.createSpy();
-    component.isEditing.subscribe(spy);
+    const actionsService = TestBed.inject(MessageActionsService);
+    actionsService.messageToEdit$.subscribe(spy);
+    spy.calls.reset();
     const messageInputComponent = queryMessageInputComponent();
 
     messageInputComponent.messageUpdate.emit();
     fixture.detectChanges();
 
     expect(queryEditModal()).toBeUndefined();
-    expect(spy).toHaveBeenCalledWith(false);
+    expect(spy).toHaveBeenCalledWith(undefined);
   });
 
   it('should delete message', () => {