refactor: Move fetchNearestIntersection to the state machine (#2745)

mbta · Aug 28, 2024 · 49a640a · 49a640a
1 parent 445884d
commit 49a640a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 21 deletions.
diff --git 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
@@ -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<DetourShape, FetchDetourDirectionsError> | undefined
 
       finishedDetour: FinishedDetour | undefined | null
@@ -91,6 +94,18 @@ export const createDetourMachine = setup({
       }
     }),
 
+    "fetch-nearest-intersection": fromPromise<
+      Awaited<ReturnType<typeof fetchNearestIntersection>>,
+      {
+        startPoint?: ShapePoint
+      }
+    >(async ({ input: { startPoint } }) => {
+      if (!startPoint) {
+        throw "Missing nearest intersection inputs"
+      }
+      return fetchNearestIntersection(startPoint.lat, startPoint.lon)
+    }),
+
     "fetch-detour-directions": fromPromise<
       Awaited<ReturnType<typeof fetchDetourDirections>>,
       {
@@ -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
@@ -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))
     })