Merge pull request #438 from GetStream/custom-reactions

feat: allow reactions customization #437

Author: szuperaz

docusaurus/docs/Angular/components/MessageReactionsComponent.mdx

@@ -37,6 +37,8 @@ export class CustomMessageComponent {
 
 ## Customization
 
+You can override the default reactions using the [`MessageReactionsService`](../services/MessageReactionsService.mdx)
+
 You can provide your own message reactions component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
 
 [//]: # "Start of generated content"

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MessageReactionsService } from './message-reactions.service';
+
+describe('MessageReactionsService', () => {
+  let service: MessageReactionsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MessageReactionsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { MessageReactionType } from './types';
+import { BehaviorSubject } from 'rxjs';
+
+/**
+ * The `MessageReactionsService` allows you to set which [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) are enabled and their associated emoji.
+ *
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class MessageReactionsService {
+  /**
+   * The enabled [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) and the associated emoji
+   *
+   * You can provide any string as a reaction. The emoji can be provided as a string, if you want to use custom images for reactions you have to provide a [custom reactions UI](../../services/CustomTemplatesService/#messagereactionstemplate)
+   */
+  reactions$ = new BehaviorSubject<{ [key in MessageReactionType]: string }>({
+    like: '👍',
+    angry: '😠',
+    love: '❤️',
+    haha: '😂',
+    wow: '😮',
+    sad: '😞',
+  });
+
+  constructor() {}
+
+  /**
+   * Sets the enabled reactions
+   */
+  set reactions(reactions: { [key in MessageReactionType]: string }) {
+    this.reactions$.next(reactions);
+  }
+
+  /**
+   * Get the currently enabled reactions
+   */
+  get reactions() {
+    return this.reactions$.getValue();
+  }
+}

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

@@ -13,6 +13,7 @@ import { ChannelService } from '../channel.service';
 import { SimpleChange } from '@angular/core';
 import { AvatarPlaceholderComponent } from '../avatar-placeholder/avatar-placeholder.component';
 import { MessageReactionType } from '../types';
+import { MessageReactionsService } from '../message-reactions.service';
 
 describe('MessageReactionsComponent', () => {
   let component: MessageReactionsComponent;
@@ -38,15 +39,29 @@ describe('MessageReactionsComponent', () => {
     // eslint-disable-next-line no-unused-vars
     removeReaction: (id: string, type: MessageReactionType) => {},
   };
+  const reactionsServiceMock = {
+    reactions: {},
+  };
 
   beforeEach(async () => {
+    reactionsServiceMock.reactions = {
+      like: '👍',
+      angry: '😠',
+      love: '❤️',
+      haha: '😂',
+      wow: '😮',
+      sad: '😞',
+    };
     await TestBed.configureTestingModule({
       declarations: [
         MessageReactionsComponent,
         AvatarComponent,
         AvatarPlaceholderComponent,
       ],
-      providers: [{ provide: ChannelService, useValue: channelServiceMock }],
+      providers: [
+        { provide: ChannelService, useValue: channelServiceMock },
+        { provide: MessageReactionsService, useValue: reactionsServiceMock },
+      ],
     }).compileComponents();
   });
 
@@ -350,4 +365,22 @@ describe('MessageReactionsComponent', () => {
     );
     /* eslint-disable jasmine/new-line-before-expect */
   });
+
+  it('should filter not supported reactions', () => {
+    reactionsServiceMock.reactions = {
+      angry: '😠',
+      haha: '😂',
+    };
+    component.messageReactionCounts = {
+      angry: 1,
+      haha: 2,
+      like: 1,
+    };
+    fixture.detectChanges();
+    const reactionCounts = queryReactionCountsFromReactionList();
+
+    expect(queryEmojis().length).toBe(2);
+    expect(reactionCounts[0].textContent).toContain('1');
+    expect(reactionCounts[1].textContent).toContain('2');
+  });
 });

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

@@ -14,15 +14,7 @@ import { ReactionResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { MessageReactionType, DefaultStreamChatGenerics } from '../types';
 import { NgxPopperjsTriggers, NgxPopperjsPlacements } from 'ngx-popperjs';
-
-const emojiReactionsMapping: { [key in MessageReactionType]: string } = {
-  like: '👍',
-  angry: '😠',
-  love: '❤️',
-  haha: '😂',
-  wow: '😮',
-  sad: '😞',
-};
+import { MessageReactionsService } from '../message-reactions.service';
 
 /**
  * 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.
@@ -72,7 +64,8 @@ export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
 
   constructor(
     private cdRef: ChangeDetectorRef,
-    private channelService: ChannelService
+    private channelService: ChannelService,
+    private messageReactionsService: MessageReactionsService
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -91,20 +84,20 @@ export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
   }
 
   get existingReactions(): MessageReactionType[] {
-    return Object.keys(this.messageReactionCounts).filter(
-      (k) => this.messageReactionCounts[k as MessageReactionType]! > 0
-    ) as MessageReactionType[];
+    return Object.keys(this.messageReactionCounts)
+      .filter((k) => this.reactionOptions.indexOf(k) !== -1)
+      .filter((k) => this.messageReactionCounts[k]! > 0);
   }
 
   get reactionsCount() {
-    return Object.values(this.messageReactionCounts).reduce(
-      (total, count) => total + count,
+    return this.existingReactions.reduce(
+      (total, reaction) => total + this.messageReactionCounts[reaction]!,
       0
     );
   }
 
   get reactionOptions(): MessageReactionType[] {
-    return ['like', 'love', 'haha', 'wow', 'sad', 'angry'];
+    return Object.keys(this.messageReactionsService.reactions);
   }
 
   getLatestUserByReaction(reactionType: MessageReactionType) {
@@ -113,7 +106,7 @@ export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
   }
 
   getEmojiByReaction(reactionType: MessageReactionType) {
-    return emojiReactionsMapping[reactionType];
+    return this.messageReactionsService.reactions[reactionType];
   }
 
   getUsersByReaction(reactionType: MessageReactionType) {

projects/stream-chat-angular/src/lib/types.ts

@@ -289,7 +289,8 @@ export type MessageReactionType =
   | 'like'
   | 'love'
   | 'sad'
-  | 'wow';
+  | 'wow'
+  | string;
 
 export type AttachmentConfigration = {
   url: string;

projects/stream-chat-angular/src/public-api.ts

@@ -54,4 +54,5 @@ export * from './lib/stream-autocomplete-textarea.module';
 export * from './lib/stream-textarea.module';
 export * from './lib/injection-tokens';
 export * from './lib/custom-templates.service';
+export * from './lib/message-reactions.service';
 export * from './lib/types';