Merge pull request Expensify#88324 from callstack-internal/perf-send-message-phase-12

refactor: PureReportActionItem, ReportActionItemEmojiReactions

Author: cristipaval

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

@@ -1,41 +1,36 @@
 import sortBy from 'lodash/sortBy';
 import React, {useContext, useRef} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
+import {InteractionManager, View} from 'react-native';
+import {importEmojiLocale} from '@assets/emojis';
 import type {Emoji} from '@assets/emojis/types';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
-import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
-import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+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';
+import {toggleEmojiReaction} from '@userActions/Report';
+import {isAnonymousUser, signOutAndRedirectToSignIn} from '@userActions/Session';
 import CONST from '@src/CONST';
+import {isFullySupportedLocale} from '@src/CONST/LOCALES';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Locale, ReportAction, ReportActionReactions} from '@src/types/onyx';
+import type {ReportAction, ReportActionReactions} from '@src/types/onyx';
 import type {PendingAction} from '@src/types/onyx/OnyxCommon';
+import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import AddReactionBubble from './AddReactionBubble';
 import EmojiReactionBubble from './EmojiReactionBubble';
 import ReactionTooltipContent from './ReactionTooltipContent';
 
-type ReportActionItemEmojiReactionsProps = WithCurrentUserPersonalDetailsProps & {
-    /** All the emoji reactions for the report action. */
-    emojiReactions: OnyxEntry<ReportActionReactions>;
-
-    /** The user's preferred locale. */
-    preferredLocale?: OnyxEntry<Locale>;
-
+type ReportActionItemEmojiReactionsProps = {
     /** The report action that these reactions are for */
     reportAction: ReportAction;
 
-    /**
-     * Function to call when the user presses on an emoji.
-     * This can also be an emoji the user already reacted with,
-     * hence this function asks to toggle the reaction by emoji.
-     */
-    toggleReaction: (emoji: Emoji, preferredSkinTone: number, ignoreSkinToneOnCompare?: boolean) => void;
+    /** The ID of the chat report this action belongs to */
+    reportID: string | undefined;
 
     /** We disable reacting with emojis on report actions that have errors */
     shouldBlockReactions?: boolean;
@@ -77,30 +72,40 @@ type FormattedReaction = {
     setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
-function ReportActionItemEmojiReactions({
-    reportAction,
-    currentUserPersonalDetails,
-    toggleReaction,
-    emojiReactions = {},
-    shouldBlockReactions = false,
-    preferredLocale = CONST.LOCALES.DEFAULT,
-    setIsEmojiPickerActive,
-}: ReportActionItemEmojiReactionsProps) {
+function ReportActionItemEmojiReactions({reportAction, reportID, shouldBlockReactions = false, setIsEmojiPickerActive}: ReportActionItemEmojiReactionsProps) {
     const styles = useThemeStyles();
+    const {preferredLocale} = useLocalize();
+    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);
 
     const reportActionID = reportAction.reportActionID;
+    const [emojiReactions = getEmptyObject<ReportActionReactions>()] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`);
+
+    // Prime the locale emoji table when this action has reactions.
+    // Skip the default locale since getLocalizedEmojiName never reads localeEmojis for it.
+    if (preferredLocale && preferredLocale !== CONST.LOCALES.DEFAULT && emojiReactions !== CONST.EMPTY_OBJECT && isFullySupportedLocale(preferredLocale)) {
+        importEmojiLocale(preferredLocale);
+    }
+
+    const toggleReaction = (emoji: Emoji, skinTone: number, ignoreSkinToneOnCompare?: boolean) => {
+        if (isAnonymousUser()) {
+            hideContextMenu(false);
+
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            InteractionManager.runAfterInteractions(() => {
+                signOutAndRedirectToSignIn();
+            });
+            return;
+        }
+        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;
@@ -138,14 +143,15 @@ function ReportActionItemEmojiReactions({
                     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]}
@@ -184,4 +190,4 @@ function ReportActionItemEmojiReactions({
     );
 }
 
-export default withCurrentUserPersonalDetails(ReportActionItemEmojiReactions);
+export default ReportActionItemEmojiReactions;

src/pages/TransactionDuplicate/DuplicateTransactionItem.tsx

@@ -45,8 +45,6 @@ function DuplicateTransactionItem({transaction, index, onPreviewPressed}: Duplic
 
     const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`);
 
-    const [emojiReactions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action?.reportActionID}`);
-
     const [linkedTransactionRouteError] = useOnyx(
         `${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(isMoneyRequestAction(action) ? getOriginalMessage(action)?.IOUTransactionID : undefined)}`,
         {
@@ -81,7 +79,6 @@ function DuplicateTransactionItem({transaction, index, onPreviewPressed}: Duplic
                         isUserValidated={isUserValidated}
                         personalDetails={personalDetails}
                         draftMessage={matchingDraftMessage}
-                        emojiReactions={emojiReactions}
                         linkedTransactionRouteError={linkedTransactionRouteError}
                         userBillingFundID={userBillingFundID}
                         isTryNewDotNVPDismissed={isTryNewDotNVPDismissed}

src/pages/inbox/report/PureReportActionItem.tsx

@@ -4,10 +4,9 @@ import {deepEqual} from 'fast-equals';
 import mapValues from 'lodash/mapValues';
 import React, {memo, use, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, TextInput} from 'react-native';
-import {InteractionManager, Keyboard, View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
-import type {Emoji} from '@assets/emojis/types';
 import * as ActionSheetAwareScrollView from '@components/ActionSheetAwareScrollView';
 import Button from '@components/Button';
 import DisplayNames from '@components/DisplayNames';
@@ -128,7 +127,6 @@ import {openPersonalBankAccountSetupView} from '@userActions/BankAccounts';
 import type {IgnoreDirection} from '@userActions/ClearReportActionErrors';
 import {hideEmojiPicker, isActive} from '@userActions/EmojiPickerAction';
 import {createTransactionThreadReport, expandURLPreview} from '@userActions/Report';
-import {isAnonymousUser, signOutAndRedirectToSignIn} from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -239,9 +237,6 @@ type PureReportActionItemProps = {
     /** The iou report associated with the linked report, if any */
     iouReportOfLinkedReport: OnyxEntry<OnyxTypes.Report>;
 
-    /** All the emoji reactions for the report action. */
-    emojiReactions?: OnyxTypes.ReportActionReactions;
-
     /** Linked transaction route error */
     linkedTransactionRouteError?: Errors;
 
@@ -269,17 +264,6 @@ type PureReportActionItemProps = {
     /** Whether the room is a chronos report */
     isChronosReport?: boolean;
 
-    /** Function to toggle emoji reaction */
-    toggleEmojiReaction?: (
-        reportID: string | undefined,
-        reportAction: OnyxTypes.ReportAction,
-        reactionObject: Emoji,
-        existingReactions: OnyxEntry<OnyxTypes.ReportActionReactions>,
-        paramSkinTone: number,
-        currentUserAccountID: number,
-        ignoreSkinToneOnCompare: boolean | undefined,
-    ) => void;
-
     /** Function to resolve actionable report mention whisper */
     resolveActionableReportMentionWhisper?: (
         report: OnyxEntry<OnyxTypes.Report>,
@@ -332,9 +316,6 @@ type PureReportActionItemProps = {
     /** Did the user dismiss trying out NewDot? If true, it means they prefer using OldDot */
     isTryNewDotNVPDismissed?: boolean;
 
-    /** Current user's account id */
-    currentUserAccountID: number;
-
     /** The bank account list */
     bankAccountList?: OnyxTypes.BankAccountList | undefined;
 
@@ -379,7 +360,6 @@ function PureReportActionItem({
     taskReport,
     linkedReport,
     iouReportOfLinkedReport,
-    emojiReactions,
     linkedTransactionRouteError,
     isUserValidated,
     parentReport,
@@ -389,7 +369,6 @@ function PureReportActionItem({
     deleteReportActionDraft = () => {},
     isArchivedRoom,
     isChronosReport,
-    toggleEmojiReaction = () => {},
     resolveActionableReportMentionWhisper = () => {},
     resolveActionableMentionWhisper = () => {},
     isClosedExpenseReportWithNoExpenses,
@@ -402,7 +381,6 @@ function PureReportActionItem({
     shouldShowBorder,
     shouldHighlight = false,
     isTryNewDotNVPDismissed = false,
-    currentUserAccountID,
     bankAccountList,
     reportNameValuePairsOrigin,
     reportNameValuePairsOriginalID,
@@ -684,13 +662,6 @@ function PureReportActionItem({
         ],
     );
 
-    const toggleReaction = useCallback(
-        (emoji: Emoji, preferredSkinTone: number, ignoreSkinToneOnCompare?: boolean) => {
-            toggleEmojiReaction(reportID, action, emoji, emojiReactions, preferredSkinTone, currentUserAccountID, ignoreSkinToneOnCompare);
-        },
-        [reportID, action, emojiReactions, toggleEmojiReaction, currentUserAccountID],
-    );
-
     const contextMenuStateValue = useMemo(
         () => ({
             anchor: popoverAnchorRef.current,
@@ -1140,24 +1111,12 @@ function PureReportActionItem({
                         <LinkPreviewer linkMetadata={action.linkMetadata?.filter((item) => !isEmptyObject(item))} />
                     </View>
                 )}
-                {!isMessageDeleted(action) && (
+                {!isOnSearch && !isMessageDeleted(action) && (
                     <View style={draftMessageRightAlign}>
                         <ReportActionItemEmojiReactions
                             reportAction={action}
-                            emojiReactions={isOnSearch ? {} : emojiReactions}
+                            reportID={reportID}
                             shouldBlockReactions={hasErrors}
-                            toggleReaction={(emoji, preferredSkinTone, ignoreSkinToneOnCompare) => {
-                                if (isAnonymousUser()) {
-                                    hideContextMenu(false);
-
-                                    // eslint-disable-next-line @typescript-eslint/no-deprecated
-                                    InteractionManager.runAfterInteractions(() => {
-                                        signOutAndRedirectToSignIn();
-                                    });
-                                } else {
-                                    toggleReaction(emoji, preferredSkinTone, ignoreSkinToneOnCompare);
-                                }
-                            }}
                             setIsEmojiPickerActive={setIsEmojiPickerActive}
                         />
                     </View>
@@ -1473,7 +1432,6 @@ export default memo(PureReportActionItem, (prevProps, nextProps) => {
         deepEqual(prevParentReportAction, nextParentReportAction) &&
         prevProps.draftMessage === nextProps.draftMessage &&
         prevProps.iouReport?.reportID === nextProps.iouReport?.reportID &&
-        deepEqual(prevProps.emojiReactions, nextProps.emojiReactions) &&
         deepEqual(prevProps.linkedTransactionRouteError, nextProps.linkedTransactionRouteError) &&
         prevProps.isUserValidated === nextProps.isUserValidated &&
         prevProps.parentReport?.reportID === nextProps.parentReport?.reportID &&