refactor: ReactionTooltipContent, move localization and account subscription inside

Author: LukasMod

src/components/Reactions/ReactionTooltipContent.tsx

@@ -1,12 +1,12 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
-import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getLocalizedEmojiName} from '@libs/EmojiUtils';
 import {getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
 
-type ReactionTooltipContentProps = Pick<WithCurrentUserPersonalDetailsProps, 'currentUserPersonalDetails'> & {
+type ReactionTooltipContentProps = {
     /**
      * A list of emoji codes to display in the tooltip.
      */
@@ -21,15 +21,18 @@ type ReactionTooltipContentProps = Pick<WithCurrentUserPersonalDetailsProps, 'cu
      * A list of account IDs to display in the tooltip.
      */
     accountIDs: number[];
+
+    /**
+     * The account ID of the current user.
+     */
+    currentUserAccountID: number;
 };
 
-function ReactionTooltipContent({accountIDs, currentUserPersonalDetails, emojiCodes, emojiName}: ReactionTooltipContentProps) {
+function ReactionTooltipContent({accountIDs, emojiCodes, emojiName, currentUserAccountID}: ReactionTooltipContentProps) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const users = useMemo(
-        () => getPersonalDetailsByIDs({accountIDs, currentUserAccountID: currentUserPersonalDetails.accountID, shouldChangeUserDisplayName: true}),
-        [currentUserPersonalDetails.accountID, accountIDs],
-    );
+    const {translate, preferredLocale} = useLocalize();
+    const users = getPersonalDetailsByIDs({accountIDs, currentUserAccountID, shouldChangeUserDisplayName: true});
+    const localizedEmojiName = getLocalizedEmojiName(emojiName, preferredLocale);
 
     const namesString = users
         .map((user) => user?.displayName)
@@ -51,7 +54,7 @@ function ReactionTooltipContent({accountIDs, currentUserPersonalDetails, emojiCo
 
             <Text style={[styles.mt1, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{namesString}</Text>
 
-            <Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{`${translate('emojiReactions.reactedWith')} :${emojiName}:`}</Text>
+            <Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{`${translate('emojiReactions.reactedWith')} :${localizedEmojiName}:`}</Text>
         </View>
     );
 }

src/components/Reactions/ReportActionItemEmojiReactions.tsx

@@ -5,10 +5,9 @@ import type {Emoji} from '@assets/emojis/types';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
-import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getEmojiReactionDetails, getLocalizedEmojiName} from '@libs/EmojiUtils';
+import {getEmojiReactionDetails} from '@libs/EmojiUtils';
 import {hideContextMenu} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
 import {ReactionListContext} from '@pages/inbox/ReportScreenContext';
 import type {ReactionListAnchor, ReactionListEvent} from '@pages/inbox/ReportScreenContext';
@@ -72,8 +71,7 @@ type FormattedReaction = {
 
 function ReportActionItemEmojiReactions({reportAction, reportID, shouldBlockReactions = false, setIsEmojiPickerActive}: ReportActionItemEmojiReactionsProps) {
     const styles = useThemeStyles();
-    const {preferredLocale} = useLocalize();
-    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const reactionListRef = useContext(ReactionListContext);
     const popoverReactionListAnchors = useRef<PopoverReactionListAnchors>({});
     const [preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE);
@@ -89,17 +87,13 @@ function ReportActionItemEmojiReactions({reportAction, reportID, shouldBlockReac
             });
             return;
         }
-        toggleEmojiReaction(reportID, reportAction, emoji, emojiReactions, skinTone, currentUserPersonalDetails.accountID, ignoreSkinToneOnCompare);
+        toggleEmojiReaction(reportID, reportAction, emoji, emojiReactions, skinTone, currentUserAccountID, ignoreSkinToneOnCompare);
     };
 
     // Each emoji is sorted by the oldest timestamp of user reactions so that they will always appear in the same order for everyone
     const formattedReactions: Array<FormattedReaction | null> = sortBy(
         Object.entries(emojiReactions ?? {}).map(([emojiName, emojiReaction]) => {
-            const {emoji, emojiCodes, reactionCount, hasUserReacted, userAccountIDs, oldestTimestamp} = getEmojiReactionDetails(
-                emojiName,
-                emojiReaction,
-                currentUserPersonalDetails.accountID,
-            );
+            const {emoji, emojiCodes, reactionCount, hasUserReacted, userAccountIDs, oldestTimestamp} = getEmojiReactionDetails(emojiName, emojiReaction, currentUserAccountID);
 
             if (reactionCount === 0) {
                 return null;
@@ -137,14 +131,15 @@ function ReportActionItemEmojiReactions({reportAction, reportID, shouldBlockReac
                     if (reaction === null) {
                         return;
                     }
+
                     return (
                         <Tooltip
                             renderTooltipContent={() => (
                                 <ReactionTooltipContent
-                                    emojiName={getLocalizedEmojiName(reaction.reactionEmojiName, preferredLocale)}
+                                    emojiName={reaction.reactionEmojiName}
                                     emojiCodes={reaction.emojiCodes}
                                     accountIDs={reaction.userAccountIDs}
-                                    currentUserPersonalDetails={currentUserPersonalDetails}
+                                    currentUserAccountID={currentUserAccountID}
                                 />
                             )}
                             renderTooltipContentKey={[...reaction.userAccountIDs.map(String), ...reaction.emojiCodes]}