use useFetchRoute and use it in confirm page too

src/hooks/useFetchRoute.ts

@@ -0,0 +1,34 @@
+import {isEqual} from 'lodash';
+import {useEffect} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import * as IOUUtils from '@libs/IOUUtils';
+import * as TransactionUtils from '@libs/TransactionUtils';
+import * as TransactionAction from '@userActions/Transaction';
+import type {IOUAction} from '@src/CONST';
+import type {Transaction} from '@src/types/onyx';
+import type {WaypointCollection} from '@src/types/onyx/Transaction';
+import useNetwork from './useNetwork';
+import usePrevious from './usePrevious';
+
+export default function useFetchRoute(transaction: OnyxEntry<Transaction>, waypoints: WaypointCollection | undefined, action: IOUAction) {
+    const {isOffline} = useNetwork();
+    const hasRouteError = !!transaction?.errorFields?.route;
+    const hasRoute = TransactionUtils.hasRoute(transaction);
+    const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
+    const isLoadingRoute = transaction?.comment?.isLoading ?? false;
+    const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
+    const previousValidatedWaypoints = usePrevious(validatedWaypoints);
+    const haveValidatedWaypointsChanged = !isEqual(previousValidatedWaypoints, validatedWaypoints);
+    const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
+    const shouldFetchRoute = isDistanceRequest && (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && Object.keys(validatedWaypoints).length > 1;
+
+    useEffect(() => {
+        if (isOffline || !shouldFetchRoute || !transaction?.transactionID) {
+            return;
+        }
+
+        TransactionAction.getRoute(transaction.transactionID, validatedWaypoints, IOUUtils.shouldUseTransactionDraft(action));
+    }, [shouldFetchRoute, transaction?.transactionID, validatedWaypoints, isOffline, action]);
+
+    return {shouldFetchRoute, validatedWaypoints};
+}

src/pages/iou/request/step/IOURequestStepConfirmation.tsx

@@ -10,6 +10,7 @@ import MoneyRequestConfirmationList from '@components/MoneyRequestConfirmationLi
 import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useFetchRoute from '@hooks/useFetchRoute';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -159,6 +160,8 @@ function IOURequestStepConfirmation({
     const isPolicyExpenseChat = useMemo(() => participants?.some((participant) => participant.isPolicyExpenseChat), [participants]);
     const formHasBeenSubmitted = useRef(false);
 
+    useFetchRoute(transaction, transaction?.comment?.waypoints, action);
+
     useEffect(() => {
         const policyExpenseChat = participants?.find((participant) => participant.isPolicyExpenseChat);
         if (policyExpenseChat?.policyID && policy?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {

src/pages/iou/request/step/IOURequestStepDistance.tsx

@@ -13,6 +13,7 @@ import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import DraggableList from '@components/DraggableList';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import useFetchRoute from '@hooks/useFetchRoute';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
@@ -87,6 +88,7 @@ function IOURequestStepDistance({
             },
         [optimisticWaypoints, transaction],
     );
+    const {shouldFetchRoute, validatedWaypoints} = useFetchRoute(transaction, waypoints, action);
     const waypointsList = Object.keys(waypoints);
     const previousWaypoints = usePrevious(waypoints);
     const numberOfWaypoints = Object.keys(waypoints).length;
@@ -95,12 +97,6 @@ function IOURequestStepDistance({
     const isLoadingRoute = transaction?.comment?.isLoading ?? false;
     const isLoading = transaction?.isLoading ?? false;
     const hasRouteError = !!transaction?.errorFields?.route;
-    const hasRoute = TransactionUtils.hasRoute(transaction);
-    const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
-    const previousValidatedWaypoints = usePrevious(validatedWaypoints);
-    const haveValidatedWaypointsChanged = !isEqual(previousValidatedWaypoints, validatedWaypoints);
-    const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
-    const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && Object.keys(validatedWaypoints).length > 1;
     const [shouldShowAtLeastTwoDifferentWaypointsError, setShouldShowAtLeastTwoDifferentWaypointsError] = useState(false);
     const isWaypointEmpty = (waypoint?: Waypoint) => {
         if (!waypoint) {
@@ -159,13 +155,6 @@ function IOURequestStepDistance({
         return MapboxToken.stop;
     }, []);
 
-    useEffect(() => {
-        if (isOffline || !shouldFetchRoute) {
-            return;
-        }
-        TransactionAction.getRoute(transactionID, validatedWaypoints, action === CONST.IOU.ACTION.CREATE);
-    }, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline, action]);
-
     useEffect(() => {
         if (numberOfWaypoints <= numberOfPreviousWaypoints) {
             return;