From 501720f042aa48b65112931c3b234044d20766e9 Mon Sep 17 00:00:00 2001
From: Kayla Firestack <kfirestack@mbta.com>
Date: Wed, 22 May 2024 17:43:05 -0400
Subject: [PATCH] wip! pull detour points up into variables

---
 assets/src/hooks/useDetour.ts | 76 ++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 42 deletions(-)

diff --git a/assets/src/hooks/useDetour.ts b/assets/src/hooks/useDetour.ts
index 3e5fadd41..2363b6573 100644
--- a/assets/src/hooks/useDetour.ts
+++ b/assets/src/hooks/useDetour.ts
@@ -6,8 +6,9 @@ import { OriginalRoute } from "../models/detour"
 import { useApiCall } from "./useApiCall"
 import { Ok, isErr, isOk } from "../util/result"
 import { useNearestIntersection } from "./useNearestIntersection"
-import { useMachine } from "@xstate/react"
+import { useMachine, useSelector } from "@xstate/react"
 import { createDetourMachine } from "../models/createDetourMachine"
+import { SnapshotFrom } from "xstate"
 
 const useDetourDirections = (shapePoints: ShapePoint[]) =>
   useApiCall({
@@ -27,8 +28,29 @@ export enum DetourState {
   Finished,
 }
 
+const selectWaypoints = (snapshot: SnapshotFrom<typeof createDetourMachine>) =>
+  snapshot.matches({
+    "Detour Drawing": { Editing: "Finished Drawing" },
+  })
+    ? snapshot.context.waypoints.slice(1, -1)
+    : snapshot.matches({ "Detour Drawing": { Editing: "Place Waypoint" } })
+    ? snapshot.context.waypoints.slice(1)
+    : []
+
+const selectStartPoint = (snapshot: SnapshotFrom<typeof createDetourMachine>) =>
+  snapshot.context.waypoints.at(0)
+
+const selectEndPoint = (snapshot: SnapshotFrom<typeof createDetourMachine>) =>
+  (snapshot.hasTag("is-finished-drawing") &&
+    snapshot.context.waypoints.at(-1)) ||
+  undefined
+
 export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
-  const [snapshot, send] = useMachine(createDetourMachine)
+  const [snapshot, send, createDetourActor] = useMachine(createDetourMachine)
+  const startPoint = useSelector(createDetourActor, selectStartPoint)
+  const endPoint = useSelector(createDetourActor, selectEndPoint)
+  const waypoints = useSelector(createDetourActor, selectWaypoints)
+  const allPoints = snapshot.context.waypoints
 
   /*
    * There's probably a better way to do this? Tags or maybe context?
@@ -42,17 +64,8 @@ export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
   const isSharingDetour = snapshot.matches({ "Detour Drawing": "Share Detour" })
   const isInFinishedDetourState = isFinishedDrawing || isSharingDetour
 
-  const firstWaypoint = snapshot.context.waypoints.at(0)
-  const lastWaypoint = snapshot.context.waypoints.at(-1)
-  // Lets also just assert that we're not operating on the same array element
-  const has2Waypoints = snapshot.context.waypoints.length >= 2
-
   const { result: finishedDetour } = useApiCall({
     apiCall: useCallback(async () => {
-      if (!isInFinishedDetourState) {
-        return null
-      }
-
       /* Until we have "typegen" in XState,
        * we need to validate these exist for typescript
        *
@@ -60,30 +73,20 @@ export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
        * > strongly-typed machines can still be achieved without Typegen.
        * > -- https://stately.ai/docs/migration#use-typestypegen-instead-of-tstypes
        */
-      if (
-        !has2Waypoints ||
-        firstWaypoint === undefined ||
-        lastWaypoint === undefined
-      ) {
-        return null
+      if (isInFinishedDetourState && startPoint && endPoint) {
+        return fetchFinishedDetour(routePatternId, startPoint, endPoint)
       }
 
-      return fetchFinishedDetour(routePatternId, firstWaypoint, lastWaypoint)
-    }, [
-      isInFinishedDetourState,
-      firstWaypoint,
-      lastWaypoint,
-      has2Waypoints,
-      routePatternId,
-    ]),
+      return null
+    }, [isInFinishedDetourState, startPoint, endPoint, routePatternId]),
   })
 
   const { result: nearestIntersection } = useNearestIntersection({
-    latitude: snapshot.context.waypoints.at(0)?.lat,
-    longitude: snapshot.context.waypoints.at(0)?.lon,
+    latitude: startPoint?.lat,
+    longitude: startPoint?.lon,
   })
 
-  const detourShape = useDetourDirections(snapshot.context.waypoints)
+  const detourShape = useDetourDirections(allPoints)
 
   const coordinates =
     detourShape.result && isOk(detourShape.result)
@@ -169,26 +172,15 @@ export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
     /**
      * The starting connection point of the detour.
      */
-    startPoint: snapshot.context.waypoints.at(0),
+    startPoint,
     /**
      * The ending connection point of the detour.
      */
-    endPoint:
-      (snapshot.matches({
-        "Detour Drawing": { Editing: "Finished Drawing" },
-      }) &&
-        snapshot.context.waypoints.at(-1)) ||
-      undefined,
+    endPoint,
     /**
      * The waypoints that connect {@link startPoint} and {@link endPoint}.
      */
-    waypoints: snapshot.matches({
-      "Detour Drawing": { Editing: "Finished Drawing" },
-    })
-      ? snapshot.context.waypoints.slice(1, -1)
-      : snapshot.matches({ "Detour Drawing": { Editing: "Place Waypoint" } })
-      ? snapshot.context.waypoints.slice(1)
-      : [],
+    waypoints,
 
     /**
      * The routing API generated detour shape.