From f9578ae07bbbc86745bb0d02d9bd7922c4f6b06c Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 1 Dec 2021 19:37:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0reaction=E7=9A=84?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=98=B5=E7=A7=B0=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/hooks/model/useUsernames.ts            | 15 +++++++
 shared/index.tsx                              |  3 +-
 .../ChatMessageList/useMessageReactions.tsx   | 41 ++++++++++++++-----
 3 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 shared/hooks/model/useUsernames.ts

diff --git a/shared/hooks/model/useUsernames.ts b/shared/hooks/model/useUsernames.ts
new file mode 100644
index 00000000..815d5778
--- /dev/null
+++ b/shared/hooks/model/useUsernames.ts
@@ -0,0 +1,15 @@
+import { getCachedUserInfo } from '../../cache/cache';
+import { useAsync } from '../useAsync';
+
+/**
+ * 用户名列表
+ */
+export function useUsernames(userIds: string[]): string[] {
+  const { value: names = [] } = useAsync(async () => {
+    const users = await Promise.all(userIds.map((id) => getCachedUserInfo(id)));
+
+    return users.map((user) => user.nickname);
+  }, [userIds.join(',')]);
+
+  return names;
+}
diff --git a/shared/index.tsx b/shared/index.tsx
index c1a83a56..31e82c0a 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -56,6 +56,7 @@ export { Trans } from './i18n/Trans';
 export { useLanguage } from './i18n/language';
 
 // hooks
+export { useUsernames } from './hooks/model/useUsernames';
 export { useAsync } from './hooks/useAsync';
 export { useAsyncFn } from './hooks/useAsyncFn';
 export { useAsyncRequest } from './hooks/useAsyncRequest';
@@ -112,7 +113,7 @@ export {
 } from './model/group';
 export type { GroupPanel, GroupInfo, GroupBasicInfo } from './model/group';
 export { recallMessage, deleteMessage, addReaction } from './model/message';
-export type { ChatMessage } from './model/message';
+export type { ChatMessageReaction, ChatMessage } from './model/message';
 export type { PluginManifest } from './model/plugin';
 export type { UserBaseInfo, UserLoginInfo } from './model/user';
 export {
diff --git a/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx b/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
index 5267a2f6..338f2ea1 100644
--- a/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
@@ -1,4 +1,4 @@
-import type { ChatMessage } from 'tailchat-shared';
+import { ChatMessage, useUsernames } from 'tailchat-shared';
 import _groupBy from 'lodash/groupBy';
 import _uniqBy from 'lodash/uniqBy';
 import { useMemo } from 'react';
@@ -6,13 +6,41 @@ import { Emoji } from '@/components/Emoji';
 import React from 'react';
 import { Tooltip } from 'antd';
 
+interface GroupedReaction {
+  name: string;
+  length: number;
+  users: string[];
+}
+
+/**
+ * 消息反应的用户名
+ */
+const ReactionItem: React.FC<{ reaction: GroupedReaction }> = React.memo(
+  (props) => {
+    const { reaction } = props;
+
+    return (
+      <div className="py-0.5 px-1 bg-black bg-opacity-20 rounded flex">
+        <Tooltip title={useUsernames(reaction.users)}>
+          <div>
+            <Emoji emoji={reaction.name} />
+
+            {reaction.length > 1 && <span>{reaction.length}</span>}
+          </div>
+        </Tooltip>
+      </div>
+    );
+  }
+);
+ReactionItem.displayName = 'ReactionItem';
+
 /**
  * 消息反应表情渲染
  */
 export function useMessageReactions(payload: ChatMessage) {
   const reactions = payload.reactions ?? [];
 
-  const groupedReactions = useMemo(() => {
+  const groupedReactions: GroupedReaction[] = useMemo(() => {
     const groups = _groupBy(reactions, 'name');
 
     return Object.keys(groups).map((name) => {
@@ -28,14 +56,7 @@ export function useMessageReactions(payload: ChatMessage) {
   return (
     <div className="flex chat-message-reactions gap-1">
       {groupedReactions.map((reaction) => (
-        <div
-          key={reaction.name}
-          className="py-0.5 px-1 bg-black bg-opacity-20 rounded flex"
-        >
-          <Emoji emoji={reaction.name} />
-
-          {reaction.length > 1 && <span>{reaction.length}</span>}
-        </div>
+        <ReactionItem key={reaction.name} reaction={reaction} />
       ))}
     </div>
   );