From 2a2b33578aa5ff7d8ad4251c845530bfdb47d905 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 7 Jan 2022 17:49:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E8=A1=A8=E6=83=85=E5=A2=9E=E5=8A=A0=E5=8F=8D=E5=BA=94=E7=9A=84?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

并修复了多个相同反应的显示样式问题
---
 .../ChatMessageList/useMessageReactions.tsx   | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx b/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
index 95a771c2..01d4e383 100644
--- a/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
@@ -1,4 +1,11 @@
-import { ChatMessage, removeReaction, useUsernames } from 'tailchat-shared';
+import {
+  addReaction,
+  ChatMessage,
+  isValidStr,
+  removeReaction,
+  useUserId,
+  useUsernames,
+} from 'tailchat-shared';
 import _groupBy from 'lodash/groupBy';
 import _uniqBy from 'lodash/uniqBy';
 import { useCallback, useMemo } from 'react';
@@ -22,12 +29,14 @@ const ReactionItem: React.FC<{
   const { reaction, onClick } = props;
 
   return (
-    <div className="py-0.5 px-1 bg-black bg-opacity-20 hover:bg-opacity-40 rounded flex cursor-pointer">
-      <Tooltip title={useUsernames(reaction.users)}>
-        <div onClick={onClick}>
+    <div className="py-0.5 px-1 bg-black bg-opacity-20 hover:bg-opacity-40 rounded cursor-pointer">
+      <Tooltip title={useUsernames(reaction.users).join(', ')}>
+        <div className="flex" onClick={onClick}>
           <Emoji emoji={reaction.name} />
 
-          {reaction.length > 1 && <span>{reaction.length}</span>}
+          {reaction.length > 1 && (
+            <span className="ml-0.5">{reaction.length}</span>
+          )}
         </div>
       </Tooltip>
     </div>
@@ -41,6 +50,7 @@ ReactionItem.displayName = 'ReactionItem';
 export function useMessageReactions(payload: ChatMessage) {
   const messageId = payload._id;
   const reactions = payload.reactions ?? [];
+  const userId = useUserId();
 
   const groupedReactions: GroupedReaction[] = useMemo(() => {
     const groups = _groupBy(reactions, 'name');
@@ -56,10 +66,18 @@ export function useMessageReactions(payload: ChatMessage) {
   }, [reactions]);
 
   const handleClick = useCallback(
-    (reactionName: string) => {
-      removeReaction(messageId, reactionName);
+    (reaction: GroupedReaction) => {
+      if (!isValidStr(userId)) {
+        return;
+      }
+
+      if (reaction.users.includes(userId)) {
+        removeReaction(messageId, reaction.name);
+      } else {
+        addReaction(messageId, reaction.name);
+      }
     },
-    [messageId]
+    [messageId, userId]
   );
 
   return (
@@ -68,7 +86,7 @@ export function useMessageReactions(payload: ChatMessage) {
         <ReactionItem
           key={reaction.name}
           reaction={reaction}
-          onClick={() => handleClick(reaction.name)}
+          onClick={() => handleClick(reaction)}
         />
       ))}
     </div>