Merge pull request #530 from GetStream/limit-reactions

Limit reactions

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/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-reactions/message-reactions.component.html

@@ -12,6 +12,7 @@
         let reactionType of existingReactions;
         trackBy: trackByMessageReaction
       "
+      [ngStyle]="{ cursor: shouldHandleReactionClick ? 'pointer' : 'default' }"
       [class.str-chat__message-reaction-own]="isOwnReaction(reactionType)"
       data-testclass="emoji"
       (click)="reactionSelected(reactionType)"
@@ -155,6 +156,9 @@
             let reactionType of existingReactions;
             trackBy: trackByMessageReaction
           "
+          [ngStyle]="{
+            cursor: shouldHandleReactionClick ? 'pointer' : 'default'
+          }"
           attr.data-testid="reaction-details-selector-{{ reactionType }}"
           [class.str-chat__message-reactions-details-reaction-type--selected]="
             reactionType === selectedReactionType

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

@@ -279,17 +279,44 @@ describe('MessageReactionsComponent', () => {
     expect(users.length).toBe(2);
   }));
 
-  it(`should call custom reaction details handler if that's provided`, () => {
+  it(`shouldn't display reaction details if there are more than 1200 reactions`, () => {
     component.messageReactionCounts = {
       wow: 3,
-      sad: 2,
+      sad: 1198,
     };
     component.messageId = 'id';
     component.latestReactions = [];
+    component.ngOnChanges({ messageReactionCounts: {} as SimpleChange });
     fixture.detectChanges();
+
+    const reactions = [
+      { type: 'wow', user: { id: 'saraid', name: 'Sara' } },
+      { type: 'wow', user: { id: 'benid', name: 'Ben' } },
+      { type: 'wow', user: { id: 'jackid' } },
+      { type: 'wow' },
+      { type: 'sad', user: { id: 'jim' } },
+      { type: 'sad', user: { id: 'ben', name: 'Ben' } },
+    ] as ReactionResponse[];
+    spyOn(channelServiceMock, 'getMessageReactions').and.resolveTo(reactions);
+
+    const wowEmoji = queryEmojis()[0];
+    wowEmoji.click();
+
+    expect(component.selectedReactionType).toBe(undefined);
+  });
+
+  it(`should call custom reaction details handler if that's provided`, () => {
     const messageReactionsService = TestBed.inject(MessageReactionsService);
     const spy = jasmine.createSpy();
     messageReactionsService.customReactionClickHandler = spy;
+    component.messageReactionCounts = {
+      wow: 1500,
+      sad: 2,
+    };
+    component.messageId = 'id';
+    component.latestReactions = [];
+    component.ngOnChanges({ messageReactionCounts: {} as SimpleChange });
+    fixture.detectChanges();
 
     const wowEmoji = queryEmojis()[0];
     wowEmoji.click();

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

@@ -66,6 +66,7 @@ export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
   selectedReactionType: string | undefined;
   isLoading = true;
   reactions: ReactionResponse[] = [];
+  shouldHandleReactionClick = true;
 
   constructor(
     private cdRef: ChangeDetectorRef,
@@ -81,6 +82,15 @@ export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
         ? setTimeout(() => this.watchForOutsideClicks()) // setTimeout: wait for current click to bubble up, and only watch for clicks after that
         : this.stopWatchForOutsideClicks();
     }
+    if (changes.messageReactionCounts && this.messageReactionCounts) {
+      const reactionsCount = Object.keys(this.messageReactionCounts).reduce(
+        (acc, key) => acc + (this.messageReactionCounts[key] || 0),
+        0
+      );
+      this.shouldHandleReactionClick =
+        reactionsCount <= ChannelService.MAX_MESSAGE_REACTIONS_TO_FETCH ||
+        !!this.messageReactionsService.customReactionClickHandler;
+    }
   }
 
   ngAfterViewChecked(): void {
@@ -117,6 +127,9 @@ export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
   }
 
   reactionSelected(reactionType: string) {
+    if (!this.shouldHandleReactionClick) {
+      return;
+    }
     if (this.themeService.themeVersion === '1') {
       return;
     }