From 0050efac049d3b039b0cf3522a4ddb1e7e9816e2 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 6 Mar 2025 12:09:08 +0800 Subject: [PATCH 1/4] fix multiple navigation because of different backTo --- .../ReportActionItem/MoneyRequestView.tsx | 79 ++++--------------- src/hooks/useActiveRoute.ts | 18 +++++ 2 files changed, 34 insertions(+), 63 deletions(-) create mode 100644 src/hooks/useActiveRoute.ts diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index acb6b05e077d1..0d224e64636ad 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -12,6 +12,7 @@ import ReceiptEmptyState from '@components/ReceiptEmptyState'; import Switch from '@components/Switch'; import Text from '@components/Text'; import ViolationMessages from '@components/ViolationMessages'; +import useActiveRoute from '@hooks/useActiveRoute'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -106,6 +107,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals const session = useSession(); const {isOffline} = useNetwork(); const {translate, toLocaleDigit} = useLocalize(); + const {getReportRHPActiveRoute} = useActiveRoute(); const parentReportID = report?.parentReportID; const policyID = report?.policyID; const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID ?? CONST.DEFAULT_NUMBER_ID}`); @@ -370,7 +372,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, Navigation.getReportRHPActiveRoute()), + ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} /> @@ -387,13 +389,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DISTANCE_RATE.getRoute( - CONST.IOU.ACTION.EDIT, - iouType, - transaction.transactionID, - report.reportID, - Navigation.getReportRHPActiveRoute(), - ), + ROUTES.MONEY_REQUEST_STEP_DISTANCE_RATE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} brickRoadIndicator={getErrorForField('customUnitRateID') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} @@ -471,14 +467,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_TAG.getRoute( - CONST.IOU.ACTION.EDIT, - iouType, - orderWeight, - transaction.transactionID, - report.reportID, - Navigation.getReportRHPActiveRoute(), - ), + ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.EDIT, iouType, orderWeight, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} brickRoadIndicator={tagError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} @@ -564,7 +553,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, Navigation.getReportRHPActiveRoute()), + ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} /> @@ -586,14 +575,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_AMOUNT.getRoute( - CONST.IOU.ACTION.EDIT, - iouType, - transaction.transactionID, - report.reportID, - '', - Navigation.getReportRHPActiveRoute(), - ), + ROUTES.MONEY_REQUEST_STEP_AMOUNT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, '', getReportRHPActiveRoute()), ); }} brickRoadIndicator={getErrorForField('amount') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} @@ -612,14 +594,9 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals if (!transaction?.transactionID || !report?.reportID) { return; } + console.log('active route', getReportRHPActiveRoute()); Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute( - CONST.IOU.ACTION.EDIT, - iouType, - transaction.transactionID, - report.reportID, - Navigation.getReportRHPActiveRoute(), - ), + ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} @@ -643,13 +620,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute( - CONST.IOU.ACTION.EDIT, - iouType, - transaction.transactionID, - report.reportID, - Navigation.getReportRHPActiveRoute(), - ), + ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} wrapperStyle={[styles.taskDescriptionMenuItem]} @@ -671,7 +642,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, Navigation.getReportRHPActiveRoute()), + ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} brickRoadIndicator={getErrorForField('date') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} @@ -691,13 +662,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute( - CONST.IOU.ACTION.EDIT, - iouType, - transaction.transactionID, - report.reportID, - Navigation.getReportRHPActiveRoute(), - ), + ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} brickRoadIndicator={getErrorForField('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} @@ -729,13 +694,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_TAX_RATE.getRoute( - CONST.IOU.ACTION.EDIT, - iouType, - transaction.transactionID, - report.reportID, - Navigation.getReportRHPActiveRoute(), - ), + ROUTES.MONEY_REQUEST_STEP_TAX_RATE.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} brickRoadIndicator={getErrorForField('tax') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} @@ -756,13 +715,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals return; } Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_TAX_AMOUNT.getRoute( - CONST.IOU.ACTION.EDIT, - iouType, - transaction.transactionID, - report.reportID, - Navigation.getReportRHPActiveRoute(), - ), + ROUTES.MONEY_REQUEST_STEP_TAX_AMOUNT.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); }} /> @@ -778,9 +731,9 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals } const reservations = transaction?.receipt?.reservationList?.length ?? 0; if (reservations > 1) { - Navigation.navigate(ROUTES.TRAVEL_TRIP_SUMMARY.getRoute(report.reportID, transaction.transactionID, Navigation.getReportRHPActiveRoute())); + Navigation.navigate(ROUTES.TRAVEL_TRIP_SUMMARY.getRoute(report.reportID, transaction.transactionID, getReportRHPActiveRoute())); } - Navigation.navigate(ROUTES.TRAVEL_TRIP_DETAILS.getRoute(report.reportID, transaction.transactionID, 0, Navigation.getReportRHPActiveRoute())); + Navigation.navigate(ROUTES.TRAVEL_TRIP_DETAILS.getRoute(report.reportID, transaction.transactionID, 0, getReportRHPActiveRoute())); }} /> )} diff --git a/src/hooks/useActiveRoute.ts b/src/hooks/useActiveRoute.ts new file mode 100644 index 0000000000000..dfeb58a972716 --- /dev/null +++ b/src/hooks/useActiveRoute.ts @@ -0,0 +1,18 @@ +import {useCallback, useRef} from 'react'; +import Navigation from '@libs/Navigation/Navigation'; + +function useActiveRoute() { + const currentReportRHPActiveRoute = useRef(''); + + const getReportRHPActiveRoute = useCallback(() => { + if (!currentReportRHPActiveRoute.current) { + currentReportRHPActiveRoute.current = Navigation.getReportRHPActiveRoute(); + } + + return currentReportRHPActiveRoute.current; + }, []); + + return {getReportRHPActiveRoute}; +} + +export default useActiveRoute; From 13ad0554e476d8766238a1670cb6d16ddb430f9f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 6 Mar 2025 12:11:26 +0800 Subject: [PATCH 2/4] remove log --- src/components/ReportActionItem/MoneyRequestView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 0d224e64636ad..cf01dd83a3cf4 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -594,7 +594,6 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals if (!transaction?.transactionID || !report?.reportID) { return; } - console.log('active route', getReportRHPActiveRoute()); Navigation.navigate( ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()), ); From fb1f7d15f33bdf9ce0e19912ae1fe7c18109b357 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 6 Mar 2025 12:19:52 +0800 Subject: [PATCH 3/4] add test --- tests/unit/useActiveRouteTest.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 tests/unit/useActiveRouteTest.ts diff --git a/tests/unit/useActiveRouteTest.ts b/tests/unit/useActiveRouteTest.ts new file mode 100644 index 0000000000000..6e001deaff823 --- /dev/null +++ b/tests/unit/useActiveRouteTest.ts @@ -0,0 +1,25 @@ +import {renderHook} from '@testing-library/react-native'; +import CONST from '@src/CONST'; +import useActiveRoute from '@hooks/useActiveRoute'; +import Navigation from '@libs/Navigation/Navigation'; +import ROUTES from '@src/ROUTES'; + +describe('useActiveRoute', () => { + it('should return the same active route', () => { + // Given an active route + const navigation = jest.spyOn(Navigation, 'getReportRHPActiveRoute'); + const {result} = renderHook(() => useActiveRoute()); + const expectedActiveRoute = ROUTES.SEARCH_REPORT.getRoute({reportID: '1'}); + navigation.mockReturnValueOnce(expectedActiveRoute); + + const actualActiveRoute = result.current.getReportRHPActiveRoute(); + expect(actualActiveRoute).toBe(expectedActiveRoute); + + // When getting the active route multiple times + navigation.mockReturnValueOnce(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.CREATE, '1', '1')); + const actualActiveRoute2 = result.current.getReportRHPActiveRoute(); + + // Then it should return the first active route value + expect(actualActiveRoute2).toBe(expectedActiveRoute); + }); +}); From fdb45e7bd57d8715bd1ca14924cb43ef88e6b9c0 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 6 Mar 2025 12:21:12 +0800 Subject: [PATCH 4/4] prettier --- tests/unit/useActiveRouteTest.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/useActiveRouteTest.ts b/tests/unit/useActiveRouteTest.ts index 6e001deaff823..0e625c5d4759c 100644 --- a/tests/unit/useActiveRouteTest.ts +++ b/tests/unit/useActiveRouteTest.ts @@ -1,7 +1,7 @@ import {renderHook} from '@testing-library/react-native'; -import CONST from '@src/CONST'; import useActiveRoute from '@hooks/useActiveRoute'; import Navigation from '@libs/Navigation/Navigation'; +import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; describe('useActiveRoute', () => {