From 3f76b9ee1b940e907ef9401b1bd85daf5728aff7 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 4 Jan 2023 20:27:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96reaction=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=90=8D=E6=98=BE=E7=A4=BA=EF=BC=8C=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=89=8D=E4=B8=A4=E4=B8=AA=E7=94=A8=E6=88=B7=E5=90=8D=E4=BB=A5?=
 =?UTF-8?q?=E5=BC=BA=E5=8C=96reaction=E4=BF=A1=E6=81=AF=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatMessageList/useMessageReactions.tsx      | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx b/client/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
index 7192f9b3..e264eea8 100644
--- a/client/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
+++ b/client/web/src/components/ChatBox/ChatMessageList/useMessageReactions.tsx
@@ -8,6 +8,7 @@ import {
 } from 'tailchat-shared';
 import _groupBy from 'lodash/groupBy';
 import _uniqBy from 'lodash/uniqBy';
+import _take from 'lodash/take';
 import { useCallback, useMemo } from 'react';
 import { Emoji } from '@/components/Emoji';
 import React from 'react';
@@ -27,16 +28,23 @@ const ReactionItem: React.FC<{
   onClick: () => void;
 }> = React.memo((props) => {
   const { reaction, onClick } = props;
+  const usernames = useUsernames(reaction.users);
 
   return (
     <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(', ')}>
+      <Tooltip title={usernames.join(', ')}>
         <div className="flex" onClick={onClick}>
           <Emoji emoji={reaction.name} />
 
-          {reaction.length > 1 && (
-            <span className="ml-0.5">{reaction.length}</span>
-          )}
+          <div className="ml-1">
+            {usernames.length < 3 ? (
+              <span>{_take(usernames, 2).join(',')}</span>
+            ) : (
+              <span>
+                {_take(usernames, 2).join(', ')}, ...+{usernames.length - 2}
+              </span>
+            )}
+          </div>
         </div>
       </Tooltip>
     </div>