feat: Move detour text creation to state machine; allow edits

mbta · Oct 17, 2024 · 259cb9f · 259cb9f
1 parent b0d3ffa
commit 259cb9f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 58 deletions.
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -3,7 +3,6 @@ import React, {
   ComponentPropsWithoutRef,
   PropsWithChildren,
   useContext,
-  useEffect,
   useState,
 } from "react"
 import { DrawDetourPanel } from "./detourPanels/drawDetourPanel"
@@ -90,7 +89,6 @@ export const DiversionPage = ({
     detourShape,
     directions,
     routingError,
-    nearestIntersection,
 
     unfinishedRouteSegments,
 
@@ -113,16 +111,7 @@ export const DiversionPage = ({
       : { input: useDetourProps.originalRoute }
   )
 
-  const [textArea, setTextArea] = useState("")
-
-  const nearestIntersectionDirection = [
-    { instruction: "From " + nearestIntersection },
-  ]
-  const extendedDirections = directions
-    ? nearestIntersectionDirection.concat(directions)
-    : undefined
-
-  const { route, routePattern, routePatterns } = snapshot.context
+  const { route, routePattern, routePatterns, editedDetourText } = snapshot.context
   const routePatternsById = Object.fromEntries(
     routePatterns?.map((rp) => [rp.id, rp]) ?? []
   )
@@ -137,36 +126,6 @@ export const DiversionPage = ({
     ? displayFieldsFromRouteAndPattern(route, routePattern)
     : {}
 
-  useEffect(() => {
-    if (snapshot.matches({ "Detour Drawing": "Share Detour" })) {
-      setTextArea(
-        [
-          `Detour ${routeName} ${routeDirection}`,
-          routeOrigin,
-          ,
-          "Connection Points:",
-          connectionPoints?.start?.name ?? "N/A",
-          connectionPoints?.end?.name ?? "N/A",
-          ,
-          `Missed Stops (${missedStops?.length}):`,
-          ...(missedStops?.map(({ name }) => name) ?? ["no stops"]),
-          ,
-          "Turn-by-Turn Directions:",
-          ...(extendedDirections?.map((v) => v.instruction) ?? []),
-        ].join("\n")
-      )
-    }
-  }, [
-    snapshot,
-    routeName,
-    routeDirection,
-    routeOrigin,
-    extendedDirections,
-    missedStops,
-    connectionPoints?.start?.name,
-    connectionPoints?.end?.name,
-  ])
-
   const routes = useContext(RoutesContext)
   const epochNowInSeconds = useCurrentTimeSeconds()
 
@@ -236,7 +195,7 @@ export const DiversionPage = ({
     ) {
       return (
         <DrawDetourPanel
-          directions={extendedDirections}
+          directions={directions}
           missedStops={missedStops}
           routeName={routeName ?? "??"}
           routeDescription={routeDescription ?? "??"}
@@ -254,8 +213,8 @@ export const DiversionPage = ({
       return (
         <DetourFinishedPanel
           onNavigateBack={editDetour}
-          detourText={textArea}
-          onChangeDetourText={setTextArea}
+          detourText={editedDetourText || ""}
+          onChangeDetourText={(detourText: string) => send({type: "detour.share.edit-directions", detourText})}
           onActivateDetour={
             inTestGroup(TestGroups.DetoursList)
               ? () => {
@@ -339,8 +298,8 @@ export const DiversionPage = ({
     } else if (snapshot.matches({ "Detour Drawing": "Active" })) {
       return (
         <ActiveDetourPanel
-          detourText="Hello World"
-          directions={extendedDirections}
+          detourText={editedDetourText || ""}
+          directions={directions}
           connectionPoints={[
             connectionPoints?.start?.name ?? "N/A",
             connectionPoints?.end?.name ?? "N/A",
@@ -380,8 +339,8 @@ export const DiversionPage = ({
     } else if (snapshot.matches({ "Detour Drawing": "Past" })) {
       return (
         <PastDetourPanel
-          detourText="Hello World"
-          directions={extendedDirections}
+          detourText={editedDetourText || ""}
+          directions={directions}
           connectionPoints={[
             connectionPoints?.start?.name ?? "N/A",
             connectionPoints?.end?.name ?? "N/A",

diff --git a/assets/src/models/createDetourMachine.ts b/assets/src/models/createDetourMachine.ts
@@ -1,7 +1,7 @@
 import { setup, assign, fromPromise, ActorLogicFrom, InputFrom } from "xstate"
 import { RoutePatternId, ShapePoint } from "../schedule"
 import { Route, RouteId, RoutePattern } from "../schedule"
-import { Ok, Result } from "../util/result"
+import { isOk, Ok, Result } from "../util/result"
 import {
   FetchDetourDirectionsError,
   fetchDetourDirections,
@@ -30,6 +30,8 @@ export const createDetourMachine = setup({
 
       finishedDetour: FinishedDetour | undefined | null
 
+      editedDetourText?: string
+
       selectedDuration?: string
       selectedReason?: string
     },
@@ -66,6 +68,7 @@ export const createDetourMachine = setup({
       | { type: "detour.edit.place-waypoint-on-route"; location: ShapePoint }
       | { type: "detour.edit.place-waypoint"; location: ShapePoint }
       | { type: "detour.edit.undo" }
+      | { type: "detour.share.edit-directions"; detourText: string }
       | { type: "detour.share.copy-detour"; detourText: string }
       | { type: "detour.share.open-activate-modal" }
       | {
@@ -133,7 +136,7 @@ export const createDetourMachine = setup({
         throw "Missing detour direction inputs"
       }
       if (points.length < 2) {
-        return Ok({ coordinates: [], directions: undefined })
+        return Ok({ coordinates: [], directions: [] })
       }
       return fetchDetourDirections(points)
     }),
@@ -439,15 +442,15 @@ export const createDetourMachine = setup({
                 onDone: {
                   actions: assign({
                     finishedDetour: ({ event }) => event.output,
-                    detourShape: ({ event }) =>
+                    detourShape: ({ context, event }) =>
                       event.output?.detourShape &&
                       Ok({
                         ...event.output.detourShape,
-                        directions: event.output.detourShape.directions?.concat(
-                          {
-                            instruction: "Regular Route",
-                          }
-                        ),
+                        directions: [
+                          { instruction: "From " + context.nearestIntersection },
+                          ...event.output.detourShape.directions,
+                          { instruction: "Regular Route" }
+                        ]
                       }),
                   }),
                 },
@@ -472,6 +475,30 @@ export const createDetourMachine = setup({
 
           onDone: {
             target: "Share Detour",
+            actions: assign({
+              editedDetourText: ({context}) => {
+                const routeName = context.route?.name
+                const routeDirection = context.routePattern && context.route?.directionNames[context.routePattern.directionId]
+                const routeOrigin = context.routePattern?.name
+                const missedStops = context.finishedDetour?.missedStops
+
+                const detourShape = context.detourShape && isOk(context.detourShape) ? context.detourShape.ok : null
+
+                return [
+                  `Detour ${routeName} ${routeDirection}`,
+                  routeOrigin,
+                  ,
+                  "Connection Points:",
+                  context.finishedDetour?.connectionPoint?.start?.name ?? "N/A",
+                  context.finishedDetour?.connectionPoint?.end?.name ?? "N/A",
+                  ,
+                  `Missed Stops (${missedStops?.length}):`,
+                  ...(missedStops?.map(({ name }) => name) ?? ["no stops"]),
+                  ,
+                  "Turn-by-Turn Directions:",
+                  ...(detourShape?.directions.map((v) => v.instruction) ?? []),
+                ].join("\n")
+            }})
           },
         },
         "Share Detour": {
@@ -490,6 +517,12 @@ export const createDetourMachine = setup({
                 "detour.share.open-activate-modal": {
                   target: "Activating",
                 },
+                "detour.share.edit-directions": {
+                  target: "Reviewing",
+                  actions: assign({
+                    editedDetourText: ({ event }) => event.detourText,
+                  }),
+                }
               },
             },
             Activating: {

diff --git a/assets/src/models/detour.ts b/assets/src/models/detour.ts
@@ -27,7 +27,7 @@ export const detourStateFromData = (
 
 export interface DetourShape {
   coordinates: ShapePoint[]
-  directions?: DetourDirection[]
+  directions: DetourDirection[]
 }
 
 export type DetourDirection = {