use chat.getMessage to get normalized reactions

apps/meteor/client/components/message/content/Reactions.tsx

@@ -1,10 +1,9 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { MessageReactions, MessageReactionAction } from '@rocket.chat/fuselage';
-import { useUser } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useContext } from 'react';
 
-import { useOpenEmojiPicker, useUserHasReacted } from '../list/MessageListContext';
+import { MessageListContext, useOpenEmojiPicker, useUserHasReacted } from '../list/MessageListContext';
 import Reaction from './reactions/Reaction';
 import { useToggleReactionMutation } from './reactions/useToggleReactionMutation';
 
@@ -15,8 +14,7 @@ type ReactionsProps = {
 const Reactions = ({ message }: ReactionsProps): ReactElement => {
 	const hasReacted = useUserHasReacted(message);
 	const openEmojiPicker = useOpenEmojiPicker(message);
-	const username = useUser()?.username;
-
+	const { username } = useContext(MessageListContext);
 	const toggleReactionMutation = useToggleReactionMutation();
 
 	return (
@@ -28,7 +26,8 @@ const Reactions = ({ message }: ReactionsProps): ReactElement => {
 						counter={reactions.usernames.length}
 						hasReacted={hasReacted}
 						name={name}
-						names={reactions?.usernames.filter((user) => user !== username) || []}
+						names={reactions.usernames.filter((user) => user !== username)}
+						messageId={message._id}
 						onClick={() => toggleReactionMutation.mutate({ mid: message._id, reaction: name })}
 					/>
 				))}

apps/meteor/client/components/message/content/reactions/Reaction.tsx

@@ -1,11 +1,12 @@
 import { MessageReaction as MessageReactionTemplate, MessageReactionEmoji, MessageReactionCounter } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useEndpoint, useTooltipClose, useTooltipOpen, useTranslation } from '@rocket.chat/ui-contexts';
+import { useTooltipClose, useTooltipOpen, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { useContext, useRef } from 'react';
 
 import { getEmojiClassNameAndDataTitle } from '../../../../lib/utils/renderEmoji';
+import { useGetMessageByID } from '../../../../views/room/contextualBar/Threads/hooks/useGetMessageByID';
 import MarkdownText from '../../../MarkdownText';
 import { MessageListContext } from '../../list/MessageListContext';
 
@@ -35,40 +36,55 @@ type ReactionProps = {
 	counter: number;
 	name: string;
 	names: string[];
+	messageId: string;
 	onClick: () => void;
 };
 
-const Reaction = ({ hasReacted, counter, name, names, ...props }: ReactionProps): ReactElement => {
+const Reaction = ({ hasReacted, counter, name, names, messageId, ...props }: ReactionProps): ReactElement => {
 	const t = useTranslation();
 	const ref = useRef<HTMLDivElement>(null);
 	const openTooltip = useTooltipOpen();
 	const closeTooltip = useTooltipClose();
-	const { showRealName } = useContext(MessageListContext);
+	const { showRealName, username } = useContext(MessageListContext);
 
 	const mine = hasReacted(name);
 
 	const key = getTranslationKey(names, mine);
 
 	const emojiProps = getEmojiClassNameAndDataTitle(name);
 
-	const getNames = useEndpoint('GET', '/v1/users.getNames');
+	const getMessage = useGetMessageByID();
 
 	const { refetch } = useQuery(
-		['users.getNames', names],
+		['chat.getMessage', 'reactions', messageId],
 		async () => {
 			if (names.length === 0) {
-				return undefined;
+				return [];
 			}
 
-			const users: string[] = showRealName
-				? (await getNames({ usernames: names }))?.users?.map((user) => user.name || '') || names.map((name) => `@${name}`)
-				: names.map((name) => `@${name}`);
+			if (!showRealName) {
+				return names;
+			}
 
-			return users;
-		},
-		{
-			enabled: false,
+			const message = await getMessage(messageId);
+			const { reactions } = message;
+
+			if (!reactions) {
+				return [];
+			}
+
+			if (!username) {
+				return reactions[name].names || names;
+			}
+
+			const index = reactions[name].usernames.indexOf(username);
+			if (index === -1) {
+				return reactions[name].names || names;
+			}
+			reactions[name].names?.splice(index, 1);
+			return (reactions[name].names || names).filter(Boolean);
 		},
+		{ enabled: false },
 	);
 
 	return (

apps/meteor/client/components/message/list/MessageListContext.tsx

@@ -24,6 +24,7 @@ export type MessageListContextValue = {
 	autoTranslateLanguage?: string;
 	showColors: boolean;
 	jumpToMessageParam?: string;
+	username: string | undefined;
 	scrollMessageList?: (callback: (wrapper: HTMLDivElement | null) => ScrollToOptions | void) => void;
 };
 
@@ -42,6 +43,7 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	showUsername: false,
 	showColors: false,
 	scrollMessageList: () => undefined,
+	username: undefined,
 });
 
 export const useShowTranslated: MessageListContextValue['useShowTranslated'] = (...args) =>

apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx

@@ -102,6 +102,7 @@ const MessageListProvider: VFC<MessageListProviderProps> = ({ children, scrollMe
 							chat?.emojiPicker.open(e.currentTarget, (emoji: string) => reactToMessage({ messageId: message._id, reaction: emoji }));
 						}
 				: () => (): void => undefined,
+			username,
 		}),
 		[
 			username,