cleanup(ts/hooks/useDetour): replace state with snapshot from `cr…

…eateDetourMachine` (#2617)
mbta · May 29, 2024 · 2d565c8 · 2d565c8
1 parent a726a4c
commit 2d565c8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 16 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
@@ -22,11 +22,6 @@ const useDetourDirections = (shapePoints: ShapePoint[]) =>
     }, [shapePoints]),
   })
 
-export enum DetourState {
-  Edit,
-  Finished,
-}
-
 export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
   const [snapshot, send] = useMachine(createDetourMachine)
 
@@ -128,10 +123,8 @@ export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
   }))
 
   return {
-    /** The current state of the detour machine */
-    state: snapshot.matches({ "Detour Drawing": "Editing" })
-      ? DetourState.Edit
-      : DetourState.Finished,
+    /** The current state machine snapshot */
+    snapshot,
 
     /** Creates a new waypoint if all of the following criteria is met:
      * - {@link startPoint} is set