Skip to content

Commit

Permalink
feat: allow customizing the message details modal
Browse files Browse the repository at this point in the history
  • Loading branch information
szuperaz committed Jan 15, 2024
1 parent 18795eb commit 746312c
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 10 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 10 additions & 3 deletions docusaurus/docs/Angular/components/MessageReactionsComponent.mdx
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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" />

Expand Down Expand Up @@ -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"
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import { MessageReactionType } from './types';
import { MessageReactionClickDetails, MessageReactionType } from './types';
import { BehaviorSubject } from 'rxjs';

/**
Expand All @@ -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() {}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { AvatarPlaceholderComponent } from '../avatar-placeholder/avatar-placeho
import { MessageReactionType } from '../types';
import { MessageReactionsService } from '../message-reactions.service';
import { ThemeService } from '../theme.service';
import { Message } from '@angular/compiler/src/i18n/i18n_ast';

Check failure on line 18 in projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.spec.ts

View workflow job for this annotation

GitHub Actions / workflow (16.x)

'Message' is defined but never used

Check failure on line 18 in projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.spec.ts

View workflow job for this annotation

GitHub Actions / workflow (16.x)

'Message' is defined but never used

describe('MessageReactionsComponent', () => {
let component: MessageReactionsComponent;
Expand Down Expand Up @@ -279,6 +280,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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
5 changes: 5 additions & 0 deletions projects/stream-chat-angular/src/lib/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -384,3 +384,8 @@ export type FiltertNextPageConfiguration<
export type NextPageConfiguration =
| OffsetNextPageConfiguration
| FiltertNextPageConfiguration;

export type MessageReactionClickDetails = {
messageId: string;
reactionType: string;
};

0 comments on commit 746312c

Please sign in to comment.