From 4fa3e3ebcae9bc94fc03748a6a5993b235b10a3b Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Tue, 25 Jun 2024 14:06:51 +0700 Subject: [PATCH 1/2] Fix back navigation after delete expense request in seach transaction RHP Signed-off-by: Tsaqif --- src/components/MoneyReportHeader.tsx | 8 +------- src/components/MoneyRequestHeader.tsx | 7 +------ src/libs/Navigation/Navigation.ts | 8 +++++++- src/libs/ReportUtils.ts | 14 ++++++++++++++ src/pages/ReportDetailsPage.tsx | 7 +------ src/pages/home/ReportScreen.tsx | 3 ++- 6 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index a077ebb88d58..5a2076e113d7 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -9,7 +9,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as HeaderUtils from '@libs/HeaderUtils'; -import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; @@ -378,12 +377,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea isVisible={isDeleteRequestModalVisible} onConfirm={deleteTransaction} onCancel={() => setIsDeleteRequestModalVisible(false)} - onModalHide={() => { - if (!navigateBackToAfterDelete.current) { - return; - } - Navigation.goBack(navigateBackToAfterDelete.current); - }} + onModalHide={() => ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current)} prompt={translate('iou.deleteConfirmation')} confirmText={translate('common.delete')} cancelText={translate('common.cancel')} diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 82b33a674b18..eaf6e7f51006 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -288,12 +288,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow isVisible={isDeleteModalVisible} onConfirm={deleteTransaction} onCancel={() => setIsDeleteModalVisible(false)} - onModalHide={() => { - if (!navigateBackToAfterDelete.current) { - return; - } - Navigation.goBack(navigateBackToAfterDelete.current); - }} + onModalHide={() => ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current)} prompt={translate('iou.deleteConfirmation')} confirmText={translate('common.delete')} cancelText={translate('common.cancel')} diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 6389876a1858..4d06f53d0f3f 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -16,6 +16,7 @@ import type {EmptyObject} from '@src/types/utils/EmptyObject'; import originalCloseRHPFlow from './closeRHPFlow'; import originalDismissModal from './dismissModal'; import originalDismissModalWithReport from './dismissModalWithReport'; +import getTopmostCentralPaneRoute from './getTopmostCentralPaneRoute'; import originalGetTopmostReportActionId from './getTopmostReportActionID'; import originalGetTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; @@ -23,7 +24,7 @@ import linkTo from './linkTo'; import navigationRef from './navigationRef'; import setNavigationActionToMicrotaskQueue from './setNavigationActionToMicrotaskQueue'; import switchPolicyID from './switchPolicyID'; -import type {NavigationStateRoute, State, StateOrRoute, SwitchPolicyIDParams} from './types'; +import type {NavigationStateRoute, RootStackParamList, State, StateOrRoute, SwitchPolicyIDParams} from './types'; let resolveNavigationIsReadyPromise: () => void; const navigationIsReadyPromise = new Promise((resolve) => { @@ -365,6 +366,10 @@ function navigateWithSwitchPolicyID(params: SwitchPolicyIDParams) { return switchPolicyID(navigationRef.current, params); } +function getTopMostCentralPaneRouteFromRootState() { + return getTopmostCentralPaneRoute(navigationRef.getRootState() as State); +} + export default { setShouldPopAllStateOnUP, navigate, @@ -386,6 +391,7 @@ export default { resetToHome, closeRHPFlow, setNavigationActionToMicrotaskQueue, + getTopMostCentralPaneRouteFromRootState, }; export {navigationRef}; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 4d83b2b82445..900fa5c84336 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -20,6 +20,7 @@ import type {ParentNavigationSummaryParams, TranslationPaths} from '@src/languag import ONYXKEYS from '@src/ONYXKEYS'; import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; import type { Beta, OnyxInputOrEntry, @@ -3527,6 +3528,18 @@ function goBackToDetailsPage(report: OnyxEntry) { Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report?.reportID ?? '-1')); } +function navigateBackAfterDeleteTransaction(backRoute: Route | undefined) { + if (!backRoute) { + return; + } + const topmostCentralPaneRoute = Navigation.getTopMostCentralPaneRouteFromRootState(); + if (topmostCentralPaneRoute?.name === SCREENS.SEARCH.CENTRAL_PANE) { + Navigation.dismissModal(); + return; + } + Navigation.goBack(backRoute); +} + /** * Go back to the previous page from the edit private page of a given report */ @@ -7263,6 +7276,7 @@ export { canWriteInReport, navigateToDetailsPage, navigateToPrivateNotes, + navigateBackAfterDeleteTransaction, parseReportRouteParams, parseReportActionHtmlToText, reportFieldsEnabled, diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 7850098cfdb2..fd4a91c50ebb 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -629,12 +629,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD isVisible={isDeleteModalVisible} onConfirm={deleteTransaction} onCancel={() => setIsDeleteModalVisible(false)} - onModalHide={() => { - if (!navigateBackToAfterDelete.current) { - return; - } - Navigation.goBack(navigateBackToAfterDelete.current); - }} + onModalHide={() => ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current)} prompt={caseID === CASES.DEFAULT ? translate('task.deleteConfirmation') : translate('iou.deleteConfirmation')} confirmText={translate('common.delete')} cancelText={translate('common.cancel')} diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index a4841106440f..977f5223b6af 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -550,7 +550,8 @@ function ReportScreen({ isClosedTopLevelPolicyRoom ) { // Early return if the report we're passing isn't in a focused state. We only want to navigate to Concierge if the user leaves the room from another device or gets removed from the room while the report is in a focused state. - if (!isFocused) { + // Prevent auto navigation for report in RHP + if (!isFocused || isReportOpenInRHP) { return; } Navigation.dismissModal(); From 8dc04179eca38faf3e7cabc4e5e2408a6d658dfc Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Tue, 25 Jun 2024 16:08:31 +0700 Subject: [PATCH 2/2] Fix lint error Signed-off-by: Tsaqif --- src/pages/home/ReportScreen.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 977f5223b6af..31314f6e56fe 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -582,6 +582,7 @@ function ReportScreen({ fetchReportIfNeeded(); ComposerActions.setShouldShowComposeInput(true); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ route, report,