Merge pull request Expensify#89468 from callstack-internal/perf-purereportactionitem-cleanup

refactor: PureReportActionItem, shrink state and prop surface

Author: cristipaval

src/libs/ReportActionsUtils.ts

@@ -29,6 +29,7 @@ import type {
     VisibleReportActionsDerivedValue,
 } from '@src/types/onyx';
 import type {
+    DecisionName,
     JoinWorkspaceResolution,
     OriginalMessageChangeLog,
     OriginalMessageExportIntegration,
@@ -259,6 +260,23 @@ function isPendingRemove(reportAction: OnyxInputOrEntry<ReportAction>): boolean
     return getReportActionMessage(reportAction)?.moderationDecision?.decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_REMOVE;
 }
 
+/**
+ * Derives the moderation decision and whether the action is flagged from the action itself.
+ * Used by leaves that previously received the equivalent values as props from PureReportActionItem.
+ */
+function getModerationFlagState(reportAction: OnyxInputOrEntry<ReportAction>): {latestDecision: DecisionName | undefined; hasBeenFlagged: boolean} {
+    // Moderation only applies to ADD_COMMENT actions
+    if (reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT) {
+        return {latestDecision: undefined, hasBeenFlagged: false};
+    }
+    const latestDecision = getReportActionMessage(reportAction)?.moderationDecision?.decision;
+    const hasBeenFlagged =
+        !!latestDecision &&
+        ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === latestDecision) &&
+        !isPendingRemove(reportAction);
+    return {latestDecision, hasBeenFlagged};
+}
+
 function isMoneyRequestAction(reportAction: OnyxInputOrEntry<ReportAction>): reportAction is ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.IOU> {
     return isActionOfType(reportAction, CONST.REPORT.ACTIONS.TYPE.IOU);
 }
@@ -4634,6 +4652,7 @@ export {
     isOldDotReportAction,
     isPayAction,
     isPendingRemove,
+    getModerationFlagState,
     isPolicyChangeLogAction,
     isReimbursementDeQueuedOrCanceledAction,
     isReimbursementQueuedAction,

src/pages/inbox/report/DelegateOnBehalfOfText.tsx

@@ -0,0 +1,43 @@
+import {personalDetailsSelector} from '@selectors/PersonalDetails';
+import React from 'react';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import usePersonalDetailsByLogin from '@hooks/usePersonalDetailsByLogin';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type DelegateOnBehalfOfTextFallbackProps = {
+    /** Fallback login looked up in the personal-details map when the account ID is not yet hydrated. */
+    fallbackLogin: string | undefined;
+};
+
+function DelegateOnBehalfOfTextFallback({fallbackLogin}: DelegateOnBehalfOfTextFallbackProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const personalDetailsByLogin = usePersonalDetailsByLogin();
+    const detail = personalDetailsByLogin[fallbackLogin?.toLowerCase() ?? ''];
+    return <Text style={[styles.chatDelegateMessage]}>{translate('delegate.onBehalfOfMessage', detail?.displayName ?? '')}</Text>;
+}
+
+type DelegateOnBehalfOfTextProps = {
+    /** The account ID whose login drives the "on behalf of" name. */
+    mainAccountID: number | undefined;
+
+    /** Fallback login if the account is not yet present in personal details. */
+    fallbackLogin: string | undefined;
+};
+
+function DelegateOnBehalfOfText({mainAccountID, fallbackLogin}: DelegateOnBehalfOfTextProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [resolvedDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsSelector(mainAccountID ?? CONST.DEFAULT_NUMBER_ID)});
+
+    if (!resolvedDetail?.login) {
+        return <DelegateOnBehalfOfTextFallback fallbackLogin={fallbackLogin} />;
+    }
+    return <Text style={[styles.chatDelegateMessage]}>{translate('delegate.onBehalfOfMessage', resolvedDetail.displayName ?? '')}</Text>;
+}
+
+export default DelegateOnBehalfOfText;

src/pages/inbox/report/HumanAgentAssistedByText.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {getHumanAgentFirstName} from '@libs/ReportActionsUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type * as OnyxTypes from '@src/types/onyx';
+
+type HumanAgentAssistedByTextProps = {
+    /** The action whose human agent's first name drives the "assisted by" label. */
+    action: OnyxEntry<OnyxTypes.ReportAction>;
+};
+
+function HumanAgentAssistedByText({action}: HumanAgentAssistedByTextProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [humanAgentName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: (list: OnyxEntry<OnyxTypes.PersonalDetailsList>) => getHumanAgentFirstName(action, list),
+    });
+    return <Text style={[styles.chatDelegateMessage]}>{translate('reportAction.assistedBy', humanAgentName ?? translate('reportAction.humanSupportAgent'))}</Text>;
+}
+
+export default HumanAgentAssistedByText;

src/pages/inbox/report/PureReportActionItem.tsx

@@ -2,11 +2,10 @@
 import {useNavigation} from '@react-navigation/native';
 import {deepEqual} from 'fast-equals';
 import mapValues from 'lodash/mapValues';
-import React, {memo, use, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, TextInput} from 'react-native';
 import {Keyboard, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import type {ValueOf} from 'type-fest';
 import * as ActionSheetAwareScrollView from '@components/ActionSheetAwareScrollView';
 import Hoverable from '@components/Hoverable';
 import InlineSystemMessage from '@components/InlineSystemMessage';
@@ -27,7 +26,6 @@ import TaskAction from '@components/ReportActionItem/TaskAction';
 import TaskPreview from '@components/ReportActionItem/TaskPreview';
 import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview';
 import UnreportedTransactionAction from '@components/ReportActionItem/UnreportedTransactionAction';
-import {SearchStateContext} from '@components/Search/SearchContext';
 import {useIsOnSearch} from '@components/Search/SearchScopeProvider';
 import {ShowContextMenuActionsContext, ShowContextMenuStateContext} from '@components/ShowContextMenuContext';
 import UnreadActionIndicator from '@components/UnreadActionIndicator';
@@ -94,6 +92,7 @@ import {
 import {
     canWriteInReport,
     getMovedActionMessage,
+    getTransactionsWithReceipts,
     isCompletedTaskReport,
     isExpenseReport,
     isHarvestCreatedExpenseReport as isHarvestCreatedExpenseReportUtils,
@@ -103,9 +102,10 @@ import {
 import SelectionScraper from '@libs/SelectionScraper';
 import {ReactionListContext} from '@pages/inbox/ReportScreenContext';
 import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
-import type {IgnoreDirection} from '@userActions/ClearReportActionErrors';
+import {clearAllRelatedReportActionErrors} from '@userActions/ClearReportActionErrors';
 import {hideEmojiPicker, isActive} from '@userActions/EmojiPickerAction';
 import {expandURLPreview} from '@userActions/Report';
+import {clearError} from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
@@ -219,41 +219,9 @@ type PureReportActionItemProps = {
     /** Whether the room is a chronos report */
     isChronosReport?: boolean;
 
-    /** Function to resolve actionable report mention whisper */
-    resolveActionableReportMentionWhisper?: (
-        report: OnyxEntry<OnyxTypes.Report>,
-        reportAction: OnyxEntry<OnyxTypes.ReportAction>,
-        resolution: ValueOf<typeof CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION>,
-        isReportArchived?: boolean,
-    ) => void;
-
-    /** Function to resolve actionable mention whisper */
-    resolveActionableMentionWhisper?: (
-        report: OnyxEntry<OnyxTypes.Report>,
-        reportAction: OnyxEntry<OnyxTypes.ReportAction>,
-        resolution: ValueOf<typeof CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION>,
-        isReportArchived: boolean,
-        parentReport?: OnyxEntry<OnyxTypes.Report>,
-    ) => void;
-
     /** Whether the provided report is a closed expense report with no expenses */
     isClosedExpenseReportWithNoExpenses?: boolean;
 
-    /** Gets all transactions on an IOU report with a receipt */
-    getTransactionsWithReceipts?: (iouReportID: string | undefined) => OnyxTypes.Transaction[];
-
-    /** Function to clear an error from a transaction */
-    clearError?: (transactionID: string) => void;
-
-    /** Function to clear all errors from a report action */
-    clearAllRelatedReportActionErrors?: (
-        reportID: string | undefined,
-        reportAction: OnyxTypes.ReportAction | null | undefined,
-        originalReportID: string | undefined,
-        ignore?: IgnoreDirection,
-        keys?: string[],
-    ) => void;
-
     /** User payment card ID */
     userBillingFundID?: number;
 
@@ -304,12 +272,7 @@ function PureReportActionItem({
     deleteReportActionDraft = () => {},
     isArchivedRoom,
     isChronosReport,
-    resolveActionableReportMentionWhisper = () => {},
-    resolveActionableMentionWhisper = () => {},
     isClosedExpenseReportWithNoExpenses,
-    getTransactionsWithReceipts = () => [],
-    clearError = () => {},
-    clearAllRelatedReportActionErrors = () => {},
     userBillingFundID,
     shouldShowBorder,
     shouldHighlight = false,
@@ -333,7 +296,6 @@ function PureReportActionItem({
     const [isPaymentMethodPopoverActive, setIsPaymentMethodPopoverActive] = useState<boolean | undefined>();
     const shouldRenderViewBasedOnAction = useTableReportViewActionRenderConditionals(action);
     const [isHidden, setIsHidden] = useState(false);
-    const [moderationDecision, setModerationDecision] = useState<OnyxTypes.DecisionName>(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
     const {isActiveReportAction: isActiveReactionListReportAction, hideReactionList} = useContext(ReactionListContext);
     const {updateHiddenAttachments} = useContext(AttachmentModalContext);
     const composerTextInputRef = useRef<TextInput | HTMLTextAreaElement>(null);
@@ -372,11 +334,6 @@ function PureReportActionItem({
     );
 
     const isOnSearch = useIsOnSearch();
-    let currentSearchHash: number | undefined;
-    if (isOnSearch) {
-        const {currentSearchHash: searchContextCurrentSearchHash} = use(SearchStateContext);
-        currentSearchHash = searchContextCurrentSearchHash;
-    }
 
     const navigation = useNavigation<PlatformStackNavigationProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>>();
     const dismissError = useCallback(() => {
@@ -392,7 +349,7 @@ function PureReportActionItem({
             clearError(transactionID);
         }
         clearAllRelatedReportActionErrors(reportID, action, originalReportID);
-    }, [action, isSendingMoney, reportID, clearAllRelatedReportActionErrors, originalReportID, isReportActionLinked, report, chatReport, clearError, navigation]);
+    }, [action, isSendingMoney, reportID, originalReportID, isReportActionLinked, report, chatReport, navigation]);
 
     const showDismissReceiptErrorModal = useCallback(async () => {
         const result = await showConfirmModal({
@@ -487,12 +444,10 @@ function PureReportActionItem({
 
         // Hide reveal message button and show the message if latestDecision is changed to empty
         if (!latestDecision) {
-            setModerationDecision(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
             setIsHidden(false);
             return;
         }
 
-        setModerationDecision(latestDecision);
         if (![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === latestDecision) && !isPendingRemove(action)) {
             setIsHidden(true);
             return;
@@ -841,7 +796,6 @@ function PureReportActionItem({
                     report={report}
                     originalReport={originalReport}
                     originalReportID={originalReportID}
-                    resolveActionableMentionWhisper={resolveActionableMentionWhisper}
                 />
             );
         } else if (isActionableReportMentionWhisper(action)) {
@@ -852,7 +806,6 @@ function PureReportActionItem({
                     report={report}
                     originalReport={originalReport}
                     isReportArchived={isReportArchived}
-                    resolveActionableReportMentionWhisper={resolveActionableReportMentionWhisper}
                 />
             );
         } else if (isActionableMentionInviteToSubmitExpenseConfirmWhisper(action)) {
@@ -931,12 +884,10 @@ function PureReportActionItem({
                     draftMessage={draftMessage}
                     index={index}
                     isHidden={isHidden}
-                    moderationDecision={moderationDecision}
                     updateHiddenState={updateHiddenState}
                     isArchivedRoom={isArchivedRoom}
                     composerTextInputRef={composerTextInputRef}
                     isOnSearch={isOnSearch}
-                    currentSearchHash={currentSearchHash}
                     contextMenuStateValue={contextMenuStateValue}
                     contextMenuActionsValue={contextMenuActionsValue}
                     userBillingFundID={userBillingFundID}
@@ -1024,9 +975,6 @@ function PureReportActionItem({
                     iouReport={iouReport}
                     isHovered={hovered || isContextMenuActive}
                     isActive={isReportActionActive && !isContextMenuActive}
-                    hasBeenFlagged={
-                        ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) && !isPendingRemove(action)
-                    }
                 >
                     {content}
                 </ReportActionItemSingle>
@@ -1089,8 +1037,7 @@ function PureReportActionItem({
     const whisperedTo = getWhisperedTo(action);
 
     const iouReportID = isMoneyRequestAction(action) && getOriginalMessage(action)?.IOUReportID ? getOriginalMessage(action)?.IOUReportID?.toString() : undefined;
-    const transactionsWithReceipts = getTransactionsWithReceipts(iouReportID);
-    const isWhisper = whisperedTo.length > 0 && transactionsWithReceipts.length === 0;
+    const isWhisper = whisperedTo.length > 0 && getTransactionsWithReceipts(iouReportID).length === 0;
 
     // Calculating accessibilityLabel for chat message with sender, date and time and the message content.
     const displayName = getDisplayNameOrDefault(personalDetails?.[action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID]);

src/pages/inbox/report/ReportActionItem.tsx

@@ -5,10 +5,8 @@ import useOriginalReportID from '@hooks/useOriginalReportID';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useReportTransactions from '@hooks/useReportTransactions';
 import {getIOUReportIDFromReportActionPreview, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
-import {chatIncludesChronosWithID, getTransactionsWithReceipts, isArchivedNonExpenseReport, isClosedExpenseReportWithNoExpenses} from '@libs/ReportUtils';
-import {clearAllRelatedReportActionErrors} from '@userActions/ClearReportActionErrors';
-import {deleteReportActionDraft, resolveActionableMentionWhisper, resolveActionableReportMentionWhisper} from '@userActions/Report';
-import {clearError} from '@userActions/Transaction';
+import {chatIncludesChronosWithID, isArchivedNonExpenseReport, isClosedExpenseReportWithNoExpenses} from '@libs/ReportUtils';
+import {deleteReportActionDraft} from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsList, Transaction} from '@src/types/onyx';
 import type {PureReportActionItemProps} from './PureReportActionItem';
@@ -74,12 +72,7 @@ function ReportActionItem({
             deleteReportActionDraft={deleteReportActionDraft}
             isArchivedRoom={isArchivedNonExpenseReport(originalReport, isOriginalReportArchived)}
             isChronosReport={chatIncludesChronosWithID(originalReportID)}
-            resolveActionableReportMentionWhisper={resolveActionableReportMentionWhisper}
-            resolveActionableMentionWhisper={resolveActionableMentionWhisper}
             isClosedExpenseReportWithNoExpenses={isClosedExpenseReportWithNoExpenses(iouReport, transactionsOnIOUReport)}
-            getTransactionsWithReceipts={getTransactionsWithReceipts}
-            clearError={clearError}
-            clearAllRelatedReportActionErrors={clearAllRelatedReportActionErrors}
             userBillingFundID={userBillingFundID}
             isTryNewDotNVPDismissed={isTryNewDotNVPDismissed}
         />