update tooltipMap

RocketChat · Jan 11, 2025 · 719ed36 · 719ed36
1 parent 489f540
commit 719ed36
Showing 1 changed file with 65 additions and 52 deletions.
diff --git a/packages/react/src/views/Message/MessageReactions.js b/packages/react/src/views/Message/MessageReactions.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   Box,
   useComponentOverrides,
@@ -25,31 +25,42 @@ export const MessageReactions = ({
   const { theme } = useTheme();
   const styles = getMessageReactionsStyles(theme);
   const [hoveredReaction, setHoveredReaction] = useState(null);
-  const tooltipMap = {};
-  const getTooltipContent = (reaction) => {
-    const usernames = [...(reaction.usernames || [])];
-    const userIndex = usernames.indexOf(authenticatedUserUsername);
-    if (userIndex !== -1) {
-      usernames.splice(userIndex, 1);
-      usernames.unshift('You');
-    }
-    const visibleNames = usernames.slice(0, 9);
-    const remainingCount = usernames.length - visibleNames.length;
-    let tooltipContent = visibleNames.join(', ');
-    if (remainingCount > 0) {
-      tooltipContent += `, and ${remainingCount} ${
-        remainingCount === 1 ? 'other' : 'others'
-      }`;
+
+  const tooltipMap = useMemo(() => {
+    const map = {};
+    if (message.reactions) {
+      serializeReactions(message.reactions).forEach((reaction) => {
+        const usernames = reaction.usernames || [];
+        const updatedUsernames = [];
+        let isUserIncluded = false;
+
+        usernames.forEach((username) => {
+          if (username === authenticatedUserUsername) {
+            isUserIncluded = true;
+          } else {
+            updatedUsernames.push(username);
+          }
+        });
+
+        if (isUserIncluded) {
+          updatedUsernames.unshift('You');
+        }
+
+        const visibleNames = updatedUsernames.slice(0, 9);
+        const remainingCount = updatedUsernames.length - visibleNames.length;
+
+        let tooltipContent = visibleNames.join(', ');
+        if (remainingCount > 0) {
+          tooltipContent += `, and ${remainingCount} ${
+            remainingCount === 1 ? 'other' : 'others'
+          }`;
+        }
+
+        map[reaction.name] = `${tooltipContent} reacted with ${reaction.name}`;
+      });
     }
-    tooltipMap[
-      reaction.name
-    ] = `${tooltipContent} reacted with ${reaction.name}`;
-    return tooltipMap[reaction.name];
-  };
-  message.reactions &&
-    serializeReactions(message.reactions).forEach((reaction) => {
-      getTooltipContent(reaction);
-    });
+    return map;
+  }, [message.reactions, authenticatedUserUsername]);
 
   return (
     <Box
@@ -59,33 +70,35 @@ export const MessageReactions = ({
       {...props}
     >
       {message.reactions &&
-        serializeReactions(message.reactions).map((reaction) => (
-          <Box
-            key={reaction.name}
-            css={
-              isSameUser(reaction, authenticatedUserUsername)
-                ? [styles.reaction, styles.reactionMine]
-                : [styles.reaction]
-            }
-            mine={isSameUser(reaction, authenticatedUserUsername)}
-            onClick={() =>
-              handleEmojiClick(
-                reaction,
-                message,
-                !isSameUser(reaction, authenticatedUserUsername)
-              )
-            }
-            onMouseEnter={() => setHoveredReaction(reaction.name)}
-            onMouseLeave={() => setHoveredReaction(null)}
-            style={{ position: 'relative' }}
-          >
-            <Markdown body={reaction.name} isReaction />
-            <p>{reaction.count}</p>
-            {hoveredReaction === reaction.name && (
-              <Box css={styles.emojiTooltip}>{tooltipMap[reaction.name]}</Box>
-            )}
-          </Box>
-        ))}
+        serializeReactions(message.reactions).map((reaction) => {
+          const isUserReaction = isSameUser(
+            reaction,
+            authenticatedUserUsername
+          );
+          return (
+            <Box
+              key={reaction.name}
+              css={
+                isUserReaction
+                  ? [styles.reaction, styles.reactionMine]
+                  : [styles.reaction]
+              }
+              mine={isUserReaction}
+              onClick={() =>
+                handleEmojiClick(reaction, message, !isUserReaction)
+              }
+              onMouseEnter={() => setHoveredReaction(reaction.name)}
+              onMouseLeave={() => setHoveredReaction(null)}
+              style={{ position: 'relative' }}
+            >
+              <Markdown body={reaction.name} isReaction />
+              <p>{reaction.count}</p>
+              {hoveredReaction === reaction.name && (
+                <Box css={styles.emojiTooltip}>{tooltipMap[reaction.name]}</Box>
+              )}
+            </Box>
+          );
+        })}
     </Box>
   );
 };