diff --git a/assets/src/hooks/useDetour.ts b/assets/src/hooks/useDetour.ts index b4f1cc62e..28b48b651 100644 --- a/assets/src/hooks/useDetour.ts +++ b/assets/src/hooks/useDetour.ts @@ -3,7 +3,6 @@ import { ShapePoint } from "../schedule" import { fetchUnfinishedDetour, putDetourUpdate } from "../api" import { useApiCall } from "./useApiCall" import { isErr, isOk } from "../util/result" -import { useNearestIntersection } from "./useNearestIntersection" import { useMachine } from "@xstate/react" import { CreateDetourMachineInput, @@ -64,6 +63,7 @@ export const useDetour = (input: UseDetourInput) => { waypoints, finishedDetour, detourShape, + nearestIntersection, } = snapshot.context const { result: unfinishedDetour } = useApiCall({ @@ -76,11 +76,6 @@ export const useDetour = (input: UseDetourInput) => { }, [startPoint, routePattern]), }) - const { result: nearestIntersection } = useNearestIntersection({ - latitude: startPoint?.lat, - longitude: startPoint?.lon, - }) - const coordinates = detourShape && isOk(detourShape) ? detourShape.ok.coordinates : [] diff --git a/assets/src/models/createDetourMachine.ts b/assets/src/models/createDetourMachine.ts index f19b1a5bb..b97779c00 100644 --- a/assets/src/models/createDetourMachine.ts +++ b/assets/src/models/createDetourMachine.ts @@ -6,6 +6,7 @@ import { FetchDetourDirectionsError, fetchDetourDirections, fetchFinishedDetour, + fetchNearestIntersection, fetchRoutePatterns, } from "../api" import { DetourShape, FinishedDetour } from "./detour" @@ -23,6 +24,8 @@ export const createDetourMachine = setup({ startPoint: ShapePoint | undefined endPoint: ShapePoint | undefined + nearestIntersection: string | null + detourShape: Result | undefined finishedDetour: FinishedDetour | undefined | null @@ -91,6 +94,18 @@ export const createDetourMachine = setup({ } }), + "fetch-nearest-intersection": fromPromise< + Awaited>, + { + startPoint?: ShapePoint + } + >(async ({ input: { startPoint } }) => { + if (!startPoint) { + throw "Missing nearest intersection inputs" + } + return fetchNearestIntersection(startPoint.lat, startPoint.lon) + }), + "fetch-detour-directions": fromPromise< Awaited>, { @@ -177,6 +192,7 @@ export const createDetourMachine = setup({ uuid: undefined, startPoint: undefined, endPoint: undefined, + nearestIntersection: null, finishedDetour: undefined, detourShape: undefined, }), @@ -325,22 +341,38 @@ export const createDetourMachine = setup({ }, }, "Place Waypoint": { - invoke: { - src: "fetch-detour-directions", - input: ({ context: { startPoint, waypoints } }) => ({ - points: (startPoint ? [startPoint] : []).concat( - waypoints || [] - ), - }), - - onDone: { - actions: assign({ - detourShape: ({ event }) => event.output, + invoke: [ + { + src: "fetch-nearest-intersection", + input: ({ context: { startPoint } }) => ({ + startPoint, }), + + onDone: { + actions: assign({ + nearestIntersection: ({ event }) => event.output, + }), + }, + + onError: {}, }, + { + src: "fetch-detour-directions", + input: ({ context: { startPoint, waypoints } }) => ({ + points: (startPoint ? [startPoint] : []).concat( + waypoints || [] + ), + }), - onError: {}, - }, + onDone: { + actions: assign({ + detourShape: ({ event }) => event.output, + }), + }, + + onError: {}, + }, + ], on: { "detour.edit.place-waypoint": { target: "Place Waypoint", diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx index 05738784c..c7558c1c4 100644 --- a/assets/tests/components/detours/diversionPage.test.tsx +++ b/assets/tests/components/detours/diversionPage.test.tsx @@ -1259,8 +1259,8 @@ describe("DiversionPage", () => { }) ) - const intersection = "Avenue 1 & Street 2" - jest.mocked(fetchNearestIntersection).mockResolvedValue(intersection) + const intersectionPromise = Promise.resolve("Avenue 1 & Street 2") + jest.mocked(fetchNearestIntersection).mockReturnValue(intersectionPromise) userEvent.setup() // Configure the clipboard API @@ -1290,6 +1290,10 @@ describe("DiversionPage", () => { fireEvent.click(originalRouteShape.get(container)) }) + await act(async () => { + await intersectionPromise + }) + act(() => { fireEvent.click(originalRouteShape.get(container)) })