feat: Save detour creation snapshot to db

assets/src/api.ts

@@ -28,6 +28,8 @@ import {
   enums,
   Infer,
   is,
+  never,
+  number,
   object,
   Struct,
   StructError,
@@ -62,6 +64,7 @@ import {
   UnfinishedDetourData,
   unfinishedDetourFromData,
 } from "./models/unfinishedDetour"
+import { Snapshot } from "xstate"
 
 export interface RouteData {
   id: string
@@ -441,6 +444,18 @@ export const putRouteTabs = (routeTabs: RouteTab[]): Promise<Response> =>
     body: JSON.stringify({ route_tabs: routeTabs }),
   })
 
+export const putDetourUpdate = (
+  snapshot: Snapshot<unknown>
+): Promise<Result<number, never>> =>
+  apiCallResult(`/api/detours/update_snapshot`, number(), never(), {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      "x-csrf-token": getCsrfToken(),
+    },
+    body: JSON.stringify({ snapshot: snapshot }),
+  })
+
 const getCsrfToken = (): string => appData()?.csrfToken || ""
 
 export const nullableParser =

assets/src/hooks/useDetour.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react"
 import { ShapePoint } from "../schedule"
-import { fetchUnfinishedDetour } from "../api"
+import { fetchUnfinishedDetour, putDetourUpdate } from "../api"
 import { useApiCall } from "./useApiCall"
 import { isErr, isOk } from "../util/result"
 import { useNearestIntersection } from "./useNearestIntersection"
@@ -27,9 +27,29 @@ export const useDetour = (input: UseDetourInput) => {
 
   // Record snapshots when changed
   useEffect(() => {
-    const snapshotSubscription = actorRef.subscribe(() => {
-      const serializedSnapshot = JSON.stringify(actorRef.getPersistedSnapshot())
+    const snapshotSubscription = actorRef.subscribe((snap) => {
+      const persistedSnapshot = actorRef.getPersistedSnapshot()
+      const serializedSnapshot = JSON.stringify(persistedSnapshot)
       localStorage.setItem("snapshot", serializedSnapshot)
+
+      // check for no-save tag before
+      if (snap.hasTag("no-save")) {
+        return
+      }
+
+      actorRef.getSnapshot().can({ type: "detour.save.begin-save" }) &&
+        actorRef.send({ type: "detour.save.begin-save" })
+
+      putDetourUpdate(persistedSnapshot).then((uuid) => {
+        if (
+          isOk(uuid) &&
+          actorRef
+            .getSnapshot()
+            .can({ type: "detour.save.set-uuid", uuid: uuid.ok })
+        ) {
+          actorRef.send({ type: "detour.save.set-uuid", uuid: uuid.ok })
+        }
+      })
     })
 
     return () => {

assets/src/models/createDetourMachine.ts

@@ -13,6 +13,7 @@ import { DetourShape, FinishedDetour } from "./detour"
 export const createDetourMachine = setup({
   types: {
     context: {} as {
+      uuid: number | undefined
       route?: Route
       routePattern?: RoutePattern
 
@@ -61,7 +62,19 @@ export const createDetourMachine = setup({
       | { type: "detour.edit.undo" }
       | { type: "detour.share.copy-detour"; detourText: string }
       | { type: "detour.share.activate" }
-      | { type: "detour.active.deactivate" },
+      | { type: "detour.active.deactivate" }
+      | { type: "detour.save.begin-save" }
+      | { type: "detour.save.set-uuid"; uuid: number },
+
+    // We're making an assumption that we'll never want to save detour edits to the database when in particular stages
+    // of detour drafting:
+    // -- when starting a detour, before any user input
+    // -- when the route id / route pattern is getting selected
+    // -- right after the route pattern is finalized, before any waypoints are added
+    // That leads to the following interface: if the user begins drafting a detour, adds waypoints, and then changes the route,
+    // the database will reflect the old route and old waypoints up until the point where a new waypoint is added.
+    // If that UX assumption isn't the right one, we can iterate in the future!
+    tags: "no-save",
   },
   actors: {
     "fetch-route-patterns": fromPromise<
@@ -161,18 +174,20 @@ export const createDetourMachine = setup({
   context: ({ input }) => ({
     ...input,
     waypoints: [],
+    uuid: undefined,
     startPoint: undefined,
     endPoint: undefined,
     finishedDetour: undefined,
     detourShape: undefined,
   }),
-
+  type: "parallel",
   initial: "Detour Drawing",
   states: {
     "Detour Drawing": {
       initial: "Begin",
       states: {
         Begin: {
+          tags: "no-save",
           always: [
             {
               guard: ({ context }) =>
@@ -185,6 +200,7 @@ export const createDetourMachine = setup({
         },
         "Pick Route Pattern": {
           initial: "Pick Route ID",
+          tags: "no-save",
           on: {
             "detour.route-pattern.select-route": {
               target: ".Pick Route ID",
@@ -295,6 +311,7 @@ export const createDetourMachine = setup({
           },
           states: {
             "Pick Start Point": {
+              tags: "no-save",
               on: {
                 "detour.edit.place-waypoint-on-route": {
                   target: "Place Waypoint",
@@ -428,6 +445,30 @@ export const createDetourMachine = setup({
         Past: {},
       },
     },
+    SaveState: {
+      initial: "Unsaved",
+      states: {
+        Unsaved: {
+          on: {
+            "detour.save.begin-save": {
+              target: "Saving",
+            },
+          },
+        },
+        Saving: {
+          tags: "no-save",
+          on: {
+            "detour.save.set-uuid": {
+              target: "Saved",
+              actions: assign({
+                uuid: ({ event }) => event.uuid,
+              }),
+            },
+          },
+        },
+        Saved: {},
+      },
+    },
   },
 })
 

assets/tests/api.test.ts

@@ -29,6 +29,7 @@ import {
   fetchAllStops,
   fetchFinishedDetour,
   apiCallWithError,
+  putDetourUpdate,
 } from "../src/api"
 import routeFactory from "./factories/route"
 import routeTabFactory from "./factories/routeTab"
@@ -50,6 +51,7 @@ import stopDataFactory from "./factories/stopData"
 import { shapePointFactory } from "./factories/shapePointFactory"
 import { ok, fetchError } from "../src/util/fetchResult"
 import { directionsFactory } from "./factories/detourShapeFactory"
+import { createActor, createMachine } from "xstate"
 
 jest.mock("@sentry/react", () => ({
   __esModule: true,
@@ -67,6 +69,7 @@ const mockFetch = (status: number, json: any): void => {
     Promise.resolve({
       json: () => json,
       status,
+      ok: status == 200 ? true : false,
     } as Response)
   )
 }
@@ -1122,3 +1125,39 @@ describe("putRouteTabs", () => {
     expect(args!.body).toEqual(JSON.stringify({ route_tabs: routeTabs }))
   })
 })
+
+describe("putDetourUpdate", () => {
+  const testToggleMachine = createMachine({
+    id: "testToggle",
+    initial: "inactive",
+    states: {
+      inactive: {
+        on: {
+          TOGGLE: "active",
+        },
+      },
+      active: {
+        on: {
+          TOGGLE: "inactive",
+        },
+      },
+    },
+  })
+  const actor = createActor(testToggleMachine).start()
+  const persistedSnapshot = actor.getPersistedSnapshot()
+
+  test("uses PUT and CSRF token", () => {
+    mockFetch(200, { data: 1 })
+    putDetourUpdate(persistedSnapshot)
+    expect(window.fetch).toHaveBeenCalledTimes(1)
+    expect(jest.mocked(window.fetch)).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        method: "PUT",
+        headers: expect.objectContaining({
+          "x-csrf-token": expect.any(String),
+        }),
+      })
+    )
+  })
+})

assets/tests/components/detours/diversionPage.saveDetour.test.tsx

@@ -0,0 +1,140 @@
+import { jest, describe, test, expect, beforeEach } from "@jest/globals"
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
+import React from "react"
+import "@testing-library/jest-dom/jest-globals"
+import { fetchRoutePatterns, putDetourUpdate } from "../../../src/api"
+import {
+  DiversionPage as DiversionPageDefault,
+  DiversionPageProps,
+} from "../../../src/components/detours/diversionPage"
+import userEvent from "@testing-library/user-event"
+import { originalRouteShape } from "../../testHelpers/selectors/components/detours/diversionPage"
+import { Ok } from "../../../src/util/result"
+import { neverPromise } from "../../testHelpers/mockHelpers"
+
+import { originalRouteFactory } from "../../factories/originalRouteFactory"
+import getTestGroups from "../../../src/userTestGroups"
+import { routePatternFactory } from "../../factories/routePattern"
+import { RoutesProvider } from "../../../src/contexts/routesContext"
+import routeFactory from "../../factories/route"
+
+const DiversionPage = (props: Partial<DiversionPageProps>) => {
+  return (
+    <DiversionPageDefault
+      originalRoute={originalRouteFactory.build()}
+      showConfirmCloseModal={false}
+      {...props}
+    />
+  )
+}
+
+jest.mock("../../../src/api")
+jest.mock("../../../src/userTestGroups")
+
+beforeEach(() => {
+  jest.mocked(fetchRoutePatterns).mockReturnValue(neverPromise())
+  jest.mocked(getTestGroups).mockReturnValue([])
+  jest.mocked(putDetourUpdate).mockReturnValue(neverPromise())
+})
+
+describe("DiversionPage autosave flow", () => {
+  test("calls putDetourUpdate when the first waypoint is added", async () => {
+    const { container } = render(<DiversionPage />)
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    act(() => {
+      fireEvent.click(container.querySelector(".c-vehicle-map")!)
+    })
+
+    await waitFor(() => {
+      expect(putDetourUpdate).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  test("calls putDetourUpdate multiple times when a waypoint is added and then the detour is finished", async () => {
+    jest.mocked(putDetourUpdate).mockResolvedValue(Ok(12))
+
+    const { container } = render(<DiversionPage />)
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    act(() => {
+      fireEvent.click(container.querySelector(".c-vehicle-map")!)
+    })
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    await waitFor(() => {
+      expect(putDetourUpdate).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // We made an assumption that we'll never want to save detour edits in response to changing route/variant
+  test("when finish button is clicked, does not call API to update the database", async () => {
+    const route = routeFactory.build({ id: "66" })
+    const routePatterns = routePatternFactory.buildList(2, {
+      routeId: route.id,
+    })
+    const [rp1] = routePatterns
+
+    render(
+      <RoutesProvider routes={[route]}>
+        <DiversionPage
+          originalRoute={originalRouteFactory.build({
+            routePattern: rp1,
+            route,
+          })}
+        />
+      </RoutesProvider>
+    )
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Change route or direction" })
+    )
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Start drawing detour" })
+    )
+
+    await waitFor(() => {
+      expect(putDetourUpdate).toHaveBeenCalledTimes(0)
+    })
+  })
+
+  // We made an assumption that we'll never want to save detour edits in response to changing route/variant
+  test("when route is changed, does not call API to update the database", async () => {
+    const routes = routeFactory.buildList(2)
+    const [route1, route2] = routes
+
+    render(
+      <RoutesProvider routes={routes}>
+        <DiversionPage
+          originalRoute={originalRouteFactory.build({
+            route: route1,
+            routePattern: routePatternFactory.build({ routeId: route1.id }),
+          })}
+        />
+      </RoutesProvider>
+    )
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Change route or direction" })
+    )
+
+    await userEvent.selectOptions(
+      screen.getByRole("combobox", { name: "Choose route" }),
+      route2.name
+    )
+
+    await waitFor(() => {
+      expect(putDetourUpdate).toHaveBeenCalledTimes(0)
+    })
+  })
+})

assets/tests/components/detours/diversionPage.test.tsx

@@ -16,6 +16,7 @@ import {
   fetchNearestIntersection,
   fetchRoutePatterns,
   fetchUnfinishedDetour,
+  putDetourUpdate,
 } from "../../../src/api"
 import {
   DiversionPage as DiversionPageDefault,
@@ -81,6 +82,7 @@ beforeEach(() => {
   jest.mocked(fetchNearestIntersection).mockReturnValue(neverPromise())
   jest.mocked(fetchRoutePatterns).mockReturnValue(neverPromise())
   jest.mocked(getTestGroups).mockReturnValue([])
+  jest.mocked(putDetourUpdate).mockReturnValue(neverPromise())
 })
 
 describe("DiversionPage", () => {