feat: delete draft detour backend

assets/src/api.ts

@@ -24,6 +24,7 @@ import {
   any,
   array,
   assert,
+  boolean,
   create,
   enums,
   Infer,
@@ -556,6 +557,23 @@ export const fetchDetour = (
     ErrStruct: never(),
   }).then((v) => map(v, detourStateFromData))
 
+export const deleteDetour = (
+  id: number | undefined
+): Promise<Result<boolean, never>> => {
+  return apiCallResult({
+    url: `/api/detours/${id}`,
+    OkStruct: boolean(),
+    ErrStruct: never(),
+    requestInit: {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        "x-csrf-token": getCsrfToken(),
+      },
+    },
+  })
+}
+
 // #endregion Detour API functions
 
 const getCsrfToken = (): string => appData()?.csrfToken || ""

assets/src/components/detours/diversionPage.tsx

@@ -2,6 +2,7 @@ import React, {
   ComponentProps,
   ComponentPropsWithoutRef,
   PropsWithChildren,
+  useCallback,
   useContext,
   useState,
 } from "react"
@@ -32,6 +33,7 @@ import useScreenSize from "../../hooks/useScreenSize"
 import { Drawer } from "../drawer"
 import { isMobile } from "../../util/screenSize"
 import { AffectedRoute } from "./detourPanelComponents"
+import { deleteDetour } from "../../api"
 
 const displayFieldsFromRouteAndPattern = (
   route: Route,
@@ -118,6 +120,15 @@ export const DiversionPage = ({
       : { input: useDetourProps.originalRoute }
   )
 
+  const deleteDetourCallback = useCallback(() => {
+    if (snapshot.context.uuid) {
+      deleteDetour(snapshot.context.uuid).then(() => {
+        onClose()
+        return send({ type: "detour.delete.delete-modal.delete-draft" })
+      })
+    }
+  }, [onClose, send, snapshot.context.uuid])
+
   const nearestIntersectionDirection = [
     { instruction: "From " + nearestIntersection },
   ]
@@ -171,7 +182,11 @@ export const DiversionPage = ({
     }
   }
 
-  const detourPanel = () => {
+  const detourPanel: ({
+    deleteDetourCallback,
+  }: {
+    deleteDetourCallback: () => void
+  }) => React.JSX.Element = () => {
     if (snapshot.matches({ "Detour Drawing": "Pick Route Pattern" })) {
       return (
         <DetourRouteSelectionPanel
@@ -273,7 +288,7 @@ export const DiversionPage = ({
               : undefined
           }
           onDeleteDetour={
-            inTestGroup(TestGroups.DeleteDraftDetours)
+            inTestGroup(TestGroups.DeleteDraftDetours) && snapshot.context.uuid
               ? () => {
                   send({ type: "detour.delete.open-delete-modal" })
                 }
@@ -376,13 +391,11 @@ export const DiversionPage = ({
 
           {snapshot.matches({
             "Detour Drawing": {
-              "Share Detour": "Deleting",
+              "Share Detour": { Deleting: "Confirming" },
             },
           }) ? (
             <DeleteDetourModal
-              onDelete={() =>
-                send({ type: "detour.delete.delete-modal.delete-draft" })
-              }
+              onDelete={deleteDetourCallback}
               onCancel={() =>
                 send({ type: "detour.delete.delete-modal.cancel" })
               }
@@ -518,9 +531,11 @@ export const DiversionPage = ({
           ])}
         >
           {isMobile(displayType) ? (
-            <Drawer.WithState startOpen>{detourPanel()}</Drawer.WithState>
+            <Drawer.WithState startOpen>
+              {detourPanel({ deleteDetourCallback })}
+            </Drawer.WithState>
           ) : (
-            detourPanel()
+            detourPanel({ deleteDetourCallback })
           )}
         </div>
         <div className="l-diversion-page__map position-relative">

assets/src/hooks/useDetours.ts

@@ -24,6 +24,7 @@ const subscribe = (
   handleDrafted: ((data: SimpleDetour) => void) | undefined,
   handleActivated: ((data: SimpleDetour) => void) | undefined,
   handleDeactivated: ((data: SimpleDetour) => void) | undefined,
+  handleDeleted: ((detour_id: number) => void) | undefined,
   initialMessageType: typeof SimpleDetourData | typeof ActivatedDetourData
 ): Channel => {
   const channel = socket.channel(topic)
@@ -43,6 +44,12 @@ const subscribe = (
       const data = create(unknownData, SimpleDetourData)
       handleDeactivated(simpleDetourFromData(data))
     })
+  handleDeleted &&
+    channel.on("deleted", ({ data: detour_id }: { data: unknown }) => {
+      if (typeof detour_id === "number") {
+        handleDeleted(detour_id)
+      }
+    })
   channel.on("auth_expired", reload)
 
   channel
@@ -107,6 +114,7 @@ export const useActiveDetours = (socket: Socket | undefined) => {
         undefined,
         handleActivated,
         handleDeactivated,
+        undefined,
         ActivatedDetourData
       )
     }
@@ -140,6 +148,7 @@ export const usePastDetours = (socket: Socket | undefined) => {
         undefined,
         undefined,
         handleDeactivated,
+        undefined,
         SimpleDetourData
       )
     }
@@ -170,6 +179,13 @@ export const useDraftDetours = (socket: Socket | undefined) => {
     })
   }
 
+  const handleDeleted = (detour_id: number) => {
+    setDraftDetours((draftDetours) => {
+      delete draftDetours[detour_id]
+      return draftDetours
+    })
+  }
+
   useEffect(() => {
     let channel: Channel | undefined
     if (socket) {
@@ -180,6 +196,7 @@ export const useDraftDetours = (socket: Socket | undefined) => {
         handleDrafted,
         handleActivated,
         undefined,
+        handleDeleted,
         SimpleDetourData
       )
     }

assets/src/models/createDetourMachine.ts

@@ -210,6 +210,7 @@ export const createDetourMachine = setup({
       finishedDetour: undefined,
       detourShape: undefined,
     }),
+    "detour.deleted": assign(() => ({})),
   },
 }).createMachine({
   id: "Detours Machine",
@@ -657,17 +658,24 @@ export const createDetourMachine = setup({
                 Confirming: {
                   on: {
                     "detour.delete.delete-modal.delete-draft": {
-                      target: "Done",
+                      tags: "no-save",
+                      target: "Deleted",
+                      actions: "detour.deleted",
                     },
                   },
                 },
-                Done: { type: "final" },
+                Deleted: {
+                  tags: "no-save",
+                  target: ".onDone",
+                },
+                Done: { tags: "no-save", type: "final" },
               },
               onDone: {
-                target: "Done",
+                target: "DoneNoSave",
               },
             },
             Done: { type: "final" },
+            DoneNoSave: { tags: "no-save", type: "final" },
           },
           onDone: {
             target: "Active",

lib/skate/detours/detours.ex

@@ -155,6 +155,22 @@ defmodule Skate.Detours.Detours do
   """
   def get_detour!(id), do: Repo.get!(Detour, id)
 
+  @doc """
+  Gets a single detour authored by the provided user_id.
+
+  Raises `Ecto.NoResultsError` if the Detour does not exist.
+
+  ## Examples
+
+      iex> get_detour_for_user!(123, 123)
+      %Detour{}
+
+      iex> get_detour_for_user!(456, 123)
+      ** (Ecto.NoResultsError)
+
+  """
+  def get_detour_for_user!(id, user_id), do: Repo.get_by!(Detour, id: id, author_id: user_id)
+
   @doc """
   Gets a single detour with state intact.
 
@@ -248,6 +264,22 @@ defmodule Skate.Detours.Detours do
     detour_db_result
   end
 
+  @spec delete_draft_detour(Detour.t(), DbUser.id()) :: :ok
+  def delete_draft_detour(detour, author_id) do
+    author_uuid =
+      author_id
+      |> User.get_by_id!()
+      |> Map.get(:uuid)
+
+    {:ok, _} = delete_detour(detour)
+
+    Phoenix.PubSub.broadcast(
+      Skate.PubSub,
+      "detours:draft:" <> author_uuid,
+      {:draft_detour_deleted, detour.id}
+    )
+  end
+
   @spec broadcast_detour(detour_type(), Detour.t(), DbUser.id()) :: :ok
   defp broadcast_detour(:draft, detour, author_id) do
     author_uuid =

lib/skate_web/channels/detours_channel.ex

@@ -60,4 +60,10 @@ defmodule SkateWeb.DetoursChannel do
     :ok = push(socket, "drafted", %{data: detour})
     {:noreply, socket}
   end
+
+  @impl SkateWeb.AuthenticatedChannel
+  def handle_info_authenticated({:draft_detour_deleted, detour_id}, socket) do
+    :ok = push(socket, "deleted", %{data: detour_id})
+    {:noreply, socket}
+  end
 end

lib/skate_web/controllers/detours_controller.ex

@@ -143,6 +143,15 @@ defmodule SkateWeb.DetoursController do
     end
   end
 
+  @spec delete_detour(Plug.Conn.t(), map()) :: Plug.Conn.t()
+  def delete_detour(conn, %{"detour_id" => detour_id}) do
+    %{id: user_id} = AuthManager.Plug.current_resource(conn)
+    detour = Detours.get_detour_for_user!(detour_id, user_id)
+    :ok = Detours.delete_draft_detour(detour, user_id)
+
+    json(conn, %{data: true})
+  end
+
   defp format(%RouteSegments.UnfinishedResult{
          before_start_point: before_start_point,
          after_start_point: after_start_point

lib/skate_web/router.ex

@@ -163,6 +163,7 @@ defmodule SkateWeb.Router do
     get "/location_search/suggest", LocationSearchController, :suggest
     get "/detours", DetoursController, :detours
     get "/detours/:detour_id", DetoursController, :detour
+    delete "/detours/:detour_id", DetoursController, :delete_detour
     post "/detours/directions/", DetourRouteController, :directions
     put "/detours/update_snapshot", DetoursController, :update_snapshot
     post "/detours/unfinished_detour", DetoursController, :unfinished_detour