From 945e6305d9fcdad9fe9c012dadea6ac627124d5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Wed, 8 Jul 2026 16:36:28 +0100 Subject: [PATCH 1/2] [Split #94595] Batch D - Remove useOnyx deps from MR headers and preview Co-Authored-By: Claude Opus 4.8 (1M context) --- .../MoneyReportHeaderSecondaryActions.tsx | 13 ++++++------- .../MoneyReportHeaderSelectionDropdown.tsx | 7 ++++++- .../SubmitPrimaryAction.tsx | 2 +- .../MoneyRequestReportPreviewProvider.tsx | 2 +- .../ReportPreviewActionButton.tsx | 7 +++++-- .../SubmitActionButton.tsx | 2 +- .../DataCells/ChatBubbleCell.tsx | 17 ++++------------- src/hooks/useLifecycleActions.tsx | 10 +++------- src/pages/ReportSubmitToContent.tsx | 2 +- 9 files changed, 28 insertions(+), 34 deletions(-) diff --git a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx index e36bdff3e179..8315c08f800a 100644 --- a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx +++ b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx @@ -69,8 +69,10 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type {Route} from '@src/ROUTES'; import {DYNAMIC_ROUTES} from '@src/ROUTES'; import {personalDetailsLoginSelector} from '@src/selectors/PersonalDetails'; +import type {PersonalDetailsList} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; +import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import {delegateEmailSelector, isUserValidatedSelector} from '@selectors/Account'; @@ -102,13 +104,10 @@ function MoneyReportHeaderSecondaryActionsInner({reportID, primaryAction, isRepo const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(moneyRequestReport?.policyID)}`); const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`); - const [submitterLogin] = useOnyx( - ONYXKEYS.PERSONAL_DETAILS_LIST, - { - selector: personalDetailsLoginSelector(moneyRequestReport?.ownerAccountID), - }, - [moneyRequestReport?.ownerAccountID], - ); + const ownerAccountID = moneyRequestReport?.ownerAccountID; + const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: (personalDetailsList: OnyxEntry) => personalDetailsLoginSelector(ownerAccountID)(personalDetailsList), + }); const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID}`); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${moneyRequestReport?.reportID}`); diff --git a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx index fbedd461c262..5bc57a1ad422 100644 --- a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx +++ b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx @@ -39,8 +39,10 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Route} from '@src/ROUTES'; import {personalDetailsLoginSelector} from '@src/selectors/PersonalDetails'; +import type {PersonalDetailsList} from '@src/types/onyx'; import type {StyleProp, ViewStyle} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import {useRoute} from '@react-navigation/native'; @@ -72,7 +74,10 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportID)}`); const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`); const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(moneyRequestReport?.policyID)}`); - const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(moneyRequestReport?.ownerAccountID)}, [moneyRequestReport?.ownerAccountID]); + const ownerAccountID = moneyRequestReport?.ownerAccountID; + const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: (personalDetailsList: OnyxEntry) => personalDetailsLoginSelector(ownerAccountID)(personalDetailsList), + }); const [session] = useOnyx(ONYXKEYS.SESSION); const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); diff --git a/src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx b/src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx index 7f3017db533b..c10497dde8e7 100644 --- a/src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx +++ b/src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx @@ -67,7 +67,7 @@ function SubmitPrimaryActionContent({reportID}: SubmitPrimaryActionProps) { const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(moneyRequestReport?.policyID)}`); - const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(moneyRequestReport?.ownerAccountID)}, [moneyRequestReport?.ownerAccountID]); + const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(moneyRequestReport?.ownerAccountID)}); const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${reportID}`); const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END); const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED); diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewProvider.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewProvider.tsx index ad1385b855ca..f2edb2001b1d 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewProvider.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewProvider.tsx @@ -134,7 +134,7 @@ function MoneyRequestReportPreviewProvider({ ); // Pass `transactionIDs` as a dependency so the selector re-runs once the transactions hydrate (otherwise // it stays closed over the initial empty list and violations would never be selected on first load). - const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {selector: selectTransactionViolations}, [transactionIDs]); + const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {selector: selectTransactionViolations}); // `hasOnceLoadedReportActions` becomes true before transactions populate fully, // so we defer the loading state update to ensure transactions are loaded const shouldShowLoadingDeferred = useDeferredValue(shouldShowLoading); diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx index a8b5ae67cc2d..7160272b211e 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx @@ -25,7 +25,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {personalDetailsLoginSelector} from '@src/selectors/PersonalDetails'; import {validTransactionDraftIDsSelector} from '@src/selectors/TransactionDraft'; -import type {Report, Transaction} from '@src/types/onyx'; +import type {PersonalDetailsList, Report, Transaction} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import type {OnyxEntry} from 'react-native-onyx'; @@ -96,7 +96,10 @@ function ReportPreviewActionButton({ const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); const [iouReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${iouReportID}`); - const [ownerLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(iouReport?.ownerAccountID)}, [iouReport?.ownerAccountID]); + const ownerAccountID = iouReport?.ownerAccountID; + const [ownerLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: (personalDetailsList: OnyxEntry) => personalDetailsLoginSelector(ownerAccountID)(personalDetailsList), + }); const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReportID}`); const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END); const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END); diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx index 65f94b3d8db6..9696751c4974 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx @@ -66,7 +66,7 @@ function SubmitActionButtonContent({iouReportID, isSubmittingAnimationRunning, s const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`); const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${iouReport?.policyID}`); - const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(iouReport?.ownerAccountID)}, [iouReport?.ownerAccountID]); + const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(iouReport?.ownerAccountID)}); const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END); const [iouReportNextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReportID}`); const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED); diff --git a/src/components/TransactionItemRow/DataCells/ChatBubbleCell.tsx b/src/components/TransactionItemRow/DataCells/ChatBubbleCell.tsx index 8e5f2349734b..ebfbf5129ed6 100644 --- a/src/components/TransactionItemRow/DataCells/ChatBubbleCell.tsx +++ b/src/components/TransactionItemRow/DataCells/ChatBubbleCell.tsx @@ -21,7 +21,7 @@ import type Transaction from '@src/types/onyx/Transaction'; import type {ViewStyle} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import React, {useCallback, useMemo} from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; const isReportUnread = ({lastReadTime = '', lastVisibleActionCreated = '', lastMentionedTime = ''}: Report): boolean => @@ -33,20 +33,11 @@ function ChatBubbleCell({transaction, containerStyles, isInSingleTransactionRepo const {shouldUseNarrowLayout} = useResponsiveLayout(); const nonEmptyStringTransactionReportID = getNonEmptyStringOnyxID(transaction.reportID); - const getIOUActionForTransactionIDSelector = useCallback( - (reportActions: OnyxEntry): OnyxEntry => { + const [iouReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${nonEmptyStringTransactionReportID}`, { + selector: (reportActions: OnyxEntry): OnyxEntry => { return getIOUActionForTransactionID(Object.values(reportActions ?? {}), transaction.transactionID); }, - [transaction.transactionID], - ); - - const [iouReportAction] = useOnyx( - `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${nonEmptyStringTransactionReportID}`, - { - selector: getIOUActionForTransactionIDSelector, - }, - [getIOUActionForTransactionIDSelector], - ); + }); const [childReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportAction?.childReportID}`); diff --git a/src/hooks/useLifecycleActions.tsx b/src/hooks/useLifecycleActions.tsx index b65e83654565..0c0dda750a1a 100644 --- a/src/hooks/useLifecycleActions.tsx +++ b/src/hooks/useLifecycleActions.tsx @@ -77,13 +77,9 @@ function useLifecycleActions({reportID, startApprovedAnimation, startAnimation, const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(moneyRequestReport?.policyID)}`); const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`); const [chatReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`); - const [submitterLogin] = useOnyx( - ONYXKEYS.PERSONAL_DETAILS_LIST, - { - selector: personalDetailsLoginSelector(moneyRequestReport?.ownerAccountID), - }, - [moneyRequestReport?.ownerAccountID], - ); + const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: personalDetailsLoginSelector(moneyRequestReport?.ownerAccountID), + }); const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID}`); const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); const [betas] = useOnyx(ONYXKEYS.BETAS); diff --git a/src/pages/ReportSubmitToContent.tsx b/src/pages/ReportSubmitToContent.tsx index 00e362de2752..cec36509b692 100644 --- a/src/pages/ReportSubmitToContent.tsx +++ b/src/pages/ReportSubmitToContent.tsx @@ -90,7 +90,7 @@ function ReportSubmitToContent({ const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED); const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END); const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, {selector: delegateEmailSelector}); - const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(report?.ownerAccountID)}, [report?.ownerAccountID]); + const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(report?.ownerAccountID)}); const [loginList] = useOnyx(ONYXKEYS.LOGINS, {selector: expensifyLoginsSelector}); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE); From aed4ef2680062e199cc768ffea86f8a2a2166dbc Mon Sep 17 00:00:00 2001 From: VickyStash Date: Fri, 17 Jul 2026 12:10:50 +0200 Subject: [PATCH 2/2] Clean up --- .../MoneyReportHeaderSecondaryActions.tsx | 6 +----- .../MoneyReportHeaderSelectionDropdown.tsx | 6 +----- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx index 58741fa4ebcd..17735ece5168 100644 --- a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx +++ b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx @@ -70,10 +70,8 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type {Route} from '@src/ROUTES'; import {DYNAMIC_ROUTES} from '@src/ROUTES'; import {personalDetailsLoginSelector} from '@src/selectors/PersonalDetails'; -import type {PersonalDetailsList} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import {delegateEmailSelector, isUserValidatedSelector} from '@selectors/Account'; @@ -106,9 +104,7 @@ function MoneyReportHeaderSecondaryActionsInner({reportID, primaryAction, isRepo const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(moneyRequestReport?.policyID)}`); const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`); const ownerAccountID = moneyRequestReport?.ownerAccountID; - const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { - selector: (personalDetailsList: OnyxEntry) => personalDetailsLoginSelector(ownerAccountID)(personalDetailsList), - }); + const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(ownerAccountID)}); const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID}`); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${moneyRequestReport?.reportID}`); diff --git a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx index 3644cc98c5ac..ac1143809533 100644 --- a/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx +++ b/src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx @@ -39,10 +39,8 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Route} from '@src/ROUTES'; import {personalDetailsLoginSelector} from '@src/selectors/PersonalDetails'; -import type {PersonalDetailsList} from '@src/types/onyx'; import type {StyleProp, ViewStyle} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import {useRoute} from '@react-navigation/native'; @@ -75,9 +73,7 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`); const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(moneyRequestReport?.policyID)}`); const ownerAccountID = moneyRequestReport?.ownerAccountID; - const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { - selector: (personalDetailsList: OnyxEntry) => personalDetailsLoginSelector(ownerAccountID)(personalDetailsList), - }); + const [submitterLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(ownerAccountID)}); const [session] = useOnyx(ONYXKEYS.SESSION); const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);