cleanup(ts/hooks/useDetour): convert complex match to tags

mbta · May 20, 2024 · 38deea4 · 38deea4
1 parent cd015ef
commit 38deea4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/assets/src/hooks/useDetour.ts b/assets/src/hooks/useDetour.ts
@@ -31,16 +31,16 @@ export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
   const [snapshot, send] = useMachine(createDetourMachine)
 
   /*
-   * There's probably a better way to do this? Tags or maybe context?
-   * Tags seem more appropriate, but weird to manage Out-Of-Bounds state via tags.
+   * There's probably a better way to do this? maybe context or sub-machines?
+   * It seems okay to manage this state via tags if we can keep things document,
+   * but it feels slightly leaky to have the concern for this API call to be
+   * distinguished as a tag within the machine, I think it works temporarily
+   * and while the machine is small though
+   *
    * Maybe this entire API call could be moved to and managed by an actor
    * combined with parallel child states within the state machine?
    * -- https://stately.ai/docs/promise-actors */
-  const isFinishedDrawing = snapshot.matches({
-    "Detour Drawing": { Editing: "Finished Drawing" },
-  })
-  const isSharingDetour = snapshot.matches({ "Detour Drawing": "Share Detour" })
-  const isInFinishedDetourState = isFinishedDrawing || isSharingDetour
+  const isInFinishedDetourState = snapshot.hasTag("is-finished-drawing")
 
   const firstWaypoint = snapshot.context.waypoints.at(0)
   const lastWaypoint = snapshot.context.waypoints.at(-1)

diff --git a/assets/src/models/createDetourMachine.ts b/assets/src/models/createDetourMachine.ts
@@ -6,6 +6,7 @@ export const createDetourMachine = setup({
     context: {
       waypoints: ShapePoint[]
     }
+
     events:
       | { type: "detour.share" }
       | { type: "detour.resume-editing" }
@@ -15,6 +16,11 @@ export const createDetourMachine = setup({
       | { type: "detour.edit.undo" }
       | { type: "detour.edit.done" }
       | { type: "detour.share.copy-detour"; detourText: string }
+
+    tags:
+      | "" // Placeholder for the formatter
+      // When we should fetch finished detour details
+      | "is-finished-drawing"
   },
   actions: {
     "detour.add-waypoint": assign({
@@ -103,6 +109,7 @@ export const createDetourMachine = setup({
               },
             },
             "Finished Drawing": {
+              tags: ["is-finished-drawing"],
               on: {
                 "detour.edit.undo": {
                   actions: "detour.undo",
@@ -123,6 +130,7 @@ export const createDetourMachine = setup({
           },
         },
         "Share Detour": {
+          tags: ["is-finished-drawing"],
           on: {
             "detour.resume-editing": {
               target: "Editing.Finished Drawing",