Merge pull request #529 from GetStream/custom-message-reactions-ui

feat: allow customizing the message details modal

Author: szuperaz

docusaurus/docs/Angular/assets/reaction-details.png

@@ -1,4 +1,5 @@
 import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png";
+import MessageReactionsDetailsScreenshot from "../assets/reaction-details.png";
 import MessageReactionsSelectorScreenshot from "../assets/message-reactions-selector-screenshot.png";
 
 The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
@@ -7,7 +8,11 @@ The `MessageReactions` component displays the reactions of a message, the curren
 
 <img src={MessageReactionsScreenshot} width="500" />
 
-**Example 2** - adding/removing a reaction:
+**Example 2** - displaying the reacting users:
+
+<img src={MessageReactionsDetailsScreenshot} width="500" />
+
+**Example 3** - adding/removing a reaction:
 
 <img src={MessageReactionsSelectorScreenshot} width="500" />
 
@@ -37,9 +42,11 @@ export class CustomMessageComponent {
 
 ## Customization
 
-You can override the default reactions using the [`MessageReactionsService`](../services/MessageReactionsService.mdx)
+You can override the default reactions using the [`MessageReactionsService`](../services/MessageReactionsService.mdx).
+
+You can provide your own UI for the reaction details using the [`MessageReactionsService`](../services/MessageReactionsService.mdx).
 
-You can provide your own message reactions component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
+You can provide your own message reactions component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx).
 
 [//]: # "Start of generated content"
 [//]: # "End of generated content"

docusaurus/docs/Angular/components/MessageReactionsComponent.mdx

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MessageReactionType } from './types';
+import { MessageReactionClickDetails, MessageReactionType } from './types';
 import { BehaviorSubject } from 'rxjs';
 
 /**
@@ -23,6 +23,12 @@ export class MessageReactionsService {
     wow: '😮',
     sad: '😞',
   });
+  /**
+   * By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler.
+   *
+   * The event handler can retrieve all reactions of a message inside the active channel using the [`channelService.getMessageReactions` method](../../services/ChannelService/#getmessagereactions)
+   */
+  customReactionClickHandler?: (details: MessageReactionClickDetails) => void;
 
   constructor() {}
 

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

@@ -14,8 +14,8 @@
       "
       [class.str-chat__message-reaction-own]="isOwnReaction(reactionType)"
       data-testclass="emoji"
-      (click)="reactionSelected($event, reactionType)"
-      (keyup.enter)="reactionSelected($event, reactionType)"
+      (click)="reactionSelected(reactionType)"
+      (keyup.enter)="reactionSelected(reactionType)"
     >
       <span class="emoji str-chat__message-reaction-emoji">
         {{ getEmojiByReaction(reactionType) }}&nbsp;

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

@@ -279,6 +279,27 @@ describe('MessageReactionsComponent', () => {
     expect(users.length).toBe(2);
   }));
 
+  it(`should call custom reaction details handler if that's provided`, () => {
+    component.messageReactionCounts = {
+      wow: 3,
+      sad: 2,
+    };
+    component.messageId = 'id';
+    component.latestReactions = [];
+    fixture.detectChanges();
+    const messageReactionsService = TestBed.inject(MessageReactionsService);
+    const spy = jasmine.createSpy();
+    messageReactionsService.customReactionClickHandler = spy;
+
+    const wowEmoji = queryEmojis()[0];
+    wowEmoji.click();
+
+    expect(spy).toHaveBeenCalledWith({ messageId: 'id', reactionType: 'wow' });
+    expect(component.selectedReactionType).toBeUndefined();
+
+    messageReactionsService.customReactionClickHandler = undefined;
+  });
+
   it('should handle if message reaction details not loaded', fakeAsync(() => {
     component.messageReactionCounts = {
       wow: 3,

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

@@ -116,13 +116,22 @@ export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
     return this.messageReactionsService.reactions[reactionType];
   }
 
-  reactionSelected(event: Event, reactionType: string) {
-    event.stopPropagation();
+  reactionSelected(reactionType: string) {
     if (this.themeService.themeVersion === '1') {
       return;
     }
-    this.selectedReactionType = reactionType;
-    void this.fetchAllReactions();
+    if (!this.messageId) {
+      return;
+    }
+    if (this.messageReactionsService.customReactionClickHandler) {
+      this.messageReactionsService.customReactionClickHandler({
+        messageId: this.messageId,
+        reactionType: reactionType,
+      });
+    } else {
+      this.selectedReactionType = reactionType;
+      void this.fetchAllReactions();
+    }
   }
 
   getUsersByReaction(reactionType: MessageReactionType) {

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

@@ -384,3 +384,8 @@ export type FiltertNextPageConfiguration<
 export type NextPageConfiguration =
   | OffsetNextPageConfiguration
   | FiltertNextPageConfiguration;
+
+export type MessageReactionClickDetails = {
+  messageId: string;
+  reactionType: string;
+};