wip! pull detour points up into variables

mbta · May 23, 2024 · 588dcc8 · 588dcc8
2 parents ea99671 + 2cb4dbe
commit 588dcc8
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 59 deletions.
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -7,7 +7,7 @@ import React, {
 } from "react"
 import { DiversionPanel } from "./diversionPanel"
 import { DetourMap } from "./detourMap"
-import { DetourState, useDetour } from "../../hooks/useDetour"
+import { useDetour } from "../../hooks/useDetour"
 import { Alert, Button, CloseButton, Modal } from "react-bootstrap"
 import * as BsIcons from "../../helpers/bsIcons"
 import { OriginalRoute } from "../../models/detour"
@@ -31,7 +31,7 @@ export const DiversionPage = ({
   showConfirmCloseModal,
 }: DiversionPageProps) => {
   const {
-    state,
+    snapshot,
 
     addConnectionPoint,
     addWaypoint,
@@ -99,7 +99,7 @@ export const DiversionPage = ({
         </header>
 
         <div className="l-diversion-page__panel bg-light">
-          {state === DetourState.Edit && (
+          {snapshot.matches({ "Detour Drawing": "Editing" }) ? (
             <DiversionPanel
               directions={extendedDirections}
               missedStops={missedStops}
@@ -110,17 +110,17 @@ export const DiversionPage = ({
               detourFinished={finishDetour !== undefined}
               onFinishDetour={finishDetour}
             />
-          )}
-          {state === DetourState.Finished && editDetour && (
+          ) : snapshot.matches({ "Detour Drawing": "Share Detour" }) &&
+            editDetour ? (
             <DetourFinishedPanel
               onNavigateBack={editDetour}
               detourText={textArea}
               onChangeDetourText={setTextArea}
             />
-          )}
+          ) : null}
         </div>
         <div className="l-diversion-page__map position-relative">
-          {state === DetourState.Finished && (
+          {snapshot.matches({ "Detour Drawing": "Share Detour" }) && (
             <Alert
               variant="info"
               className="position-absolute top-0 left-0 m-2 icon-link z-1"

diff --git 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({
@@ -22,13 +23,29 @@ const useDetourDirections = (shapePoints: ShapePoint[]) =>
     }, [shapePoints]),
   })
 
-export enum DetourState {
-  Edit,
-  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,48 +59,29 @@ 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
        *
        * > [Warning] XState Typegen does not fully support XState v5 yet. However,
        * > 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)
@@ -148,12 +146,8 @@ export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
   }))
 
   return {
-    /** The current state of the detour machine */
-    state: snapshot.matches({ "Detour Drawing": "Editing" })
-      ? DetourState.Edit
-      : snapshot.matches({ "Detour Drawing": "Share Detour" })
-      ? DetourState.Finished
-      : DetourState.Edit,
+    /** The current state machine snapshot */
+    snapshot,
 
     /** Creates a new waypoint if all of the following criteria is met:
      * - {@link startPoint} is set
@@ -169,26 +163,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.