diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 2b91ea9790bec..53db585ab67c9 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -124,11 +124,11 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const route = useRoute(); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID || CONST.DEFAULT_NUMBER_ID}`); + const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID}`, {canBeMissing: true}); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID || CONST.DEFAULT_NUMBER_ID}`); - const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`); - const [session] = useOnyx(ONYXKEYS.SESSION); + const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID}`, {canBeMissing: true}); + const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`, {canBeMissing: true}); + const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true}); const requestParentReportAction = useMemo(() => { if (!reportActions || !transactionThreadReport?.parentReportActionID) { return null; @@ -138,9 +138,12 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, { selector: (_transactions) => reportTransactionsSelector(_transactions, moneyRequestReport?.reportID), initialValue: [], + canBeMissing: true, }); - const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${isMoneyRequestAction(requestParentReportAction) && getOriginalMessage(requestParentReportAction)?.IOUTransactionID}`); - const [dismissedHoldUseExplanation, dismissedHoldUseExplanationResult] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, {initialValue: true}); + const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${isMoneyRequestAction(requestParentReportAction) && getOriginalMessage(requestParentReportAction)?.IOUTransactionID}`, { + canBeMissing: true, + }); + const [dismissedHoldUseExplanation, dismissedHoldUseExplanationResult] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, {initialValue: true, canBeMissing: true}); const isLoadingHoldUseExplained = isLoadingOnyxValue(dismissedHoldUseExplanationResult); const {isPaidAnimationRunning, isApprovedAnimationRunning, stopAnimation, startAnimation, startApprovedAnimation} = usePaymentAnimations(); @@ -170,7 +173,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea return !!transactions && transactions.length > 0 && transactions.every((t) => isExpensifyCardTransaction(t) && isPending(t)); }, [transactions]); const transactionIDs = useMemo(() => transactions?.map((t) => t.transactionID) ?? [], [transactions]); - const [allViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); + const [allViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {canBeMissing: true}); const violations = useMemo( () => Object.fromEntries(Object.entries(allViolations ?? {}).filter(([key]) => transactionIDs.includes(key.replace(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, '')))), [allViolations, transactionIDs], @@ -182,7 +185,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const hasOnlyHeldExpenses = hasOnlyHeldExpensesReportUtils(moneyRequestReport?.reportID); const isPayAtEndExpense = isPayAtEndExpenseTransactionUtils(transaction); const isArchivedReport = isArchivedReportWithID(moneyRequestReport?.reportID); - const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID}`, {selector: getArchiveReason}); + const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID}`, {selector: getArchiveReason, canBeMissing: true}); const getCanIOUBePaid = useCallback( (onlyShowPayElsewhere = false, shouldCheckApprovedState = true) => @@ -288,7 +291,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea return options; }, [moneyRequestReport, reportActions, selectedTransactionsID, session?.accountID, setSelectedTransactionsID, translate]); - const shouldShowSelectedTransactionsButton = !!selectedTransactionsOptions.length; + const shouldShowSelectedTransactionsButton = !!selectedTransactionsOptions.length && !transactionThreadReportID; const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]); const canIOUBePaidAndApproved = useMemo(() => getCanIOUBePaid(false, false), [getCanIOUBePaid]); @@ -353,7 +356,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const isMoreContentShown = shouldShowNextStep || shouldShowStatusBar || (shouldShowAnyButton && shouldUseNarrowLayout); const {isDelegateAccessRestricted} = useDelegateUserDetails(); const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false); - const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA); + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {canBeMissing: true}); const isReportInRHP = route.name === SCREENS.SEARCH.REPORT_RHP; const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; @@ -497,6 +500,16 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea setIsDeleteRequestModalVisible(false); }, [canDeleteRequest]); + useEffect(() => { + if (!transactionThreadReportID) { + return; + } + setSelectedTransactionsID([]); + // We don't need to run the effect on change of setSelectedTransactionsID since it can cause the infinite loop. + // eslint-disable-next-line react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [transactionThreadReportID]); + const shouldShowBackButton = shouldDisplayBackButton || shouldUseNarrowLayout; return ( diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx index a0c86e4024f85..086ddc71d639f 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx @@ -102,8 +102,8 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe const {activeWorkspaceID} = useActiveWorkspace(); const reportID = report?.reportID; - const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); - const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`, {initialValue: false}); + const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true}); + const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`, {initialValue: false, canBeMissing: true}); const {reportPendingAction, reportErrors} = getReportOfflinePendingActionAndErrors(report); const {reportActions, hasNewerActions, hasOlderActions} = usePaginatedReportActions(reportID); @@ -111,12 +111,14 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe const [transactions = []] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, { selector: (allTransactions): OnyxTypes.Transaction[] => selectTransactionsForReportID(allTransactions, reportID, reportActions), + canBeMissing: true, }); const shouldUseSingleTransactionView = transactions.length === 1; const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(report?.parentReportID)}`, { canEvict: false, selector: (parentReportActions) => getParentReportAction(parentReportActions, report?.parentReportActionID), + canBeMissing: true, }); const lastReportAction = [...reportActions, parentReportAction].find((action) => canEditReportAction(action) && !isMoneyRequestAction(action)); @@ -175,7 +177,7 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe report={report} policy={policy} reportActions={reportActions} - transactionThreadReportID={undefined} + transactionThreadReportID={transactionThreadReportID} shouldDisplayBackButton onBackButtonPress={() => { if (!backToRoute) {