Merge pull request Expensify#35975 from Expensify/tgolen-refactor-com…

…posersideloading Refactor OptionRowLHNData to remove deprecated getLinkedTransaction() method
mollfpr · Feb 11, 2024 · 06c7dac · 06c7dac
2 parents bfae5b2 + f6f11fe
commit 06c7dac
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx
@@ -7,6 +7,7 @@ import withCurrentReportID from '@components/withCurrentReportID';
 import usePermissions from '@hooks/usePermissions';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -64,6 +65,16 @@ function LHNOptionsList({
             const itemComment = draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] ?? '';
             const participants = [...ReportUtils.getParticipantsIDs(itemFullReport), itemFullReport?.ownerAccountID, itemParentReportAction?.actorAccountID].filter(Boolean) as number[];
             const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);
+            const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(itemReportActions);
+            const lastReportAction = sortedReportActions[0];
+
+            // Get the transaction for the last report action
+            let lastReportActionTransactionID = '';
+
+            if (lastReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU) {
+                lastReportActionTransactionID = lastReportAction.originalMessage?.IOUTransactionID ?? '';
+            }
+            const lastReportActionTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${lastReportActionTransactionID}`] ?? {};
 
             return (
                 <OptionRowLHNData
@@ -74,6 +85,7 @@ function LHNOptionsList({
                     policy={itemPolicy}
                     personalDetails={participantsPersonalDetails}
                     transaction={itemTransaction}
+                    lastReportActionTransaction={lastReportActionTransaction}
                     receiptTransactions={transactions}
                     viewMode={optionMode}
                     isFocused={!shouldDisableFocusOptions && reportID === currentReportID}

diff --git a/src/components/LHNOptionsList/OptionRowLHNData.tsx b/src/components/LHNOptionsList/OptionRowLHNData.tsx
@@ -1,9 +1,7 @@
 import {deepEqual} from 'fast-equals';
 import React, {useEffect, useMemo, useRef} from 'react';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import SidebarUtils from '@libs/SidebarUtils';
-import * as TransactionUtils from '@libs/TransactionUtils';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
@@ -27,19 +25,14 @@ function OptionRowLHNData({
     receiptTransactions,
     parentReportAction,
     transaction,
+    lastReportActionTransaction = {},
     transactionViolations,
     canUseViolations,
     ...propsToForward
 }: OptionRowLHNDataProps) {
     const reportID = propsToForward.reportID;
 
     const optionItemRef = useRef<OptionData>();
-    const linkedTransaction = useMemo(() => {
-        const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(reportActions);
-        const lastReportAction = sortedReportActions[0];
-        return TransactionUtils.getLinkedTransaction(lastReportAction);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fullReport?.reportID, receiptTransactions, reportActions]);
 
     const hasViolations = canUseViolations && ReportUtils.doesTransactionThreadHaveViolations(fullReport, transactionViolations, parentReportAction ?? null);
 
@@ -64,7 +57,19 @@ function OptionRowLHNData({
         // Listen parentReportAction to update title of thread report when parentReportAction changed
         // Listen to transaction to update title of transaction report when transaction changed
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fullReport, linkedTransaction, reportActions, personalDetails, preferredLocale, policy, parentReportAction, transaction, transactionViolations, canUseViolations]);
+    }, [
+        fullReport,
+        lastReportActionTransaction,
+        reportActions,
+        personalDetails,
+        preferredLocale,
+        policy,
+        parentReportAction,
+        transaction,
+        transactionViolations,
+        canUseViolations,
+        receiptTransactions,
+    ]);
 
     useEffect(() => {
         if (!optionItem || !!optionItem.hasDraftComment || !comment || comment.length <= 0 || isFocused) {

diff --git a/src/components/LHNOptionsList/types.ts b/src/components/LHNOptionsList/types.ts
@@ -7,6 +7,7 @@ import type {CurrentReportIDContextValue} from '@components/withCurrentReportID'
 import type CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
 import type {Locale, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, Transaction, TransactionViolation} from '@src/types/onyx';
+import type {EmptyObject} from '@src/types/utils/EmptyObject';
 
 type OptionMode = ValueOf<typeof CONST.OPTION_MODE>;
 
@@ -83,6 +84,9 @@ type OptionRowLHNDataProps = {
     /** The transaction from the parent report action */
     transaction: OnyxEntry<Transaction>;
 
+    /** The transaction linked to the report's last action */
+    lastReportActionTransaction?: OnyxEntry<Transaction | EmptyObject>;
+
     /** Comment added to report */
     comment: string;