fix(web): delete draft events immediately

Author: tyler-dane

packages/web/src/views/Forms/EventForm/EventForm.test.tsx

@@ -7,7 +7,7 @@ import { type Schema_Event } from "@core/types/event.types";
 import dayjs from "@core/util/date/dayjs";
 import { type Props as DateTimeSectionProps } from "@web/views/Forms/EventForm/DateControlsSection/DateTimeSection/DateTimeSection";
 import { getFormDates } from "@web/views/Forms/EventForm/DateControlsSection/DateTimeSection/form.datetime.util";
-import { beforeEach, describe, expect, it, mock } from "bun:test";
+import { afterEach, beforeEach, describe, expect, it, mock } from "bun:test";
 
 type CapturedDateTimeSectionProps = Pick<
   DateTimeSectionProps,
@@ -36,7 +36,14 @@ mock.module(
 );
 
 mock.module("@web/views/Forms/EventForm/EventActionMenu", () => ({
-  EventActionMenu: () => <button type="button">Event actions</button>,
+  EventActionMenu: ({ onDelete }: { onDelete: () => void }) => (
+    <>
+      <button type="button">Event actions</button>
+      <button type="button" onClick={onDelete}>
+        Delete event
+      </button>
+    </>
+  ),
 }));
 
 mock.module("@web/views/Forms/EventForm/PrioritySection", () => ({
@@ -91,12 +98,18 @@ const createEvent = (overrides: Partial<Schema_Event> = {}): Schema_Event => ({
 });
 
 describe("EventForm", () => {
+  const originalConfirm = window.confirm;
+
   beforeEach(() => {
     HotkeyManager.resetInstance();
     capturedDateControlsSectionProps = null;
     document.body.removeAttribute("data-app-locked");
   });
 
+  afterEach(() => {
+    window.confirm = originalConfirm;
+  });
+
   it("renders the title before the actions on the same row", () => {
     render(
       <EventForm
@@ -185,6 +198,33 @@ describe("EventForm", () => {
     expect(afterTyping.defaultPrevented).toBe(false);
   });
 
+  it("closes a draft event immediately when deleting from the menu", async () => {
+    const user = userEvent.setup();
+    const onClose = mock();
+    const onDelete = mock();
+    const confirm = mock(() => true);
+    window.confirm = confirm;
+
+    render(
+      <EventForm
+        event={createEvent({ _id: undefined, title: "Unsaved draft" })}
+        isDraft={true}
+        isExistingEvent={false}
+        onClose={onClose}
+        onDelete={onDelete}
+        onDuplicate={mock()}
+        onSubmit={mock()}
+        setEvent={mock()}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Delete event" }));
+
+    expect(confirm).not.toHaveBeenCalled();
+    expect(onDelete).not.toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
   it("resets title editing state when an unsaved draft session changes", async () => {
     const user = userEvent.setup();
     const event = { ...createEvent(), _id: undefined, title: "" };

packages/web/src/views/Forms/EventForm/EventForm.tsx

@@ -29,6 +29,7 @@ import { DateControlsSection } from "@web/views/Forms/EventForm/DateControlsSect
 import { getFormDates } from "@web/views/Forms/EventForm/DateControlsSection/DateTimeSection/form.datetime.util";
 import { RecurrenceSection } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/RecurrenceSection";
 import { EventActionMenu } from "@web/views/Forms/EventForm/EventActionMenu";
+import { handleEventFormDelete } from "@web/views/Forms/EventForm/eventFormDelete.util";
 import { PrioritySection } from "@web/views/Forms/EventForm/PrioritySection";
 import { SaveSection } from "@web/views/Forms/EventForm/SaveSection";
 import { TitleActionsRow } from "@web/views/Forms/EventForm/TitleActionsRow";
@@ -262,6 +263,10 @@ export const EventForm: React.FC<Omit<FormProps, "category">> = memo(
       }, 1);
     }, [_onClose]);
 
+    const onDeleteEvent = useCallback(() => {
+      handleEventFormDelete({ isDraft, onClose, onDelete });
+    }, [isDraft, onClose, onDelete]);
+
     const onDuplicateEvent = useCallback(() => {
       onDuplicate?.(event);
       onClose();
@@ -389,18 +394,7 @@ export const EventForm: React.FC<Omit<FormProps, "category">> = memo(
       setEvent: setLatestEvent,
     };
 
-    useAppHotkey(
-      "Delete",
-      () => {
-        if (isDraft) {
-          onClose();
-          return;
-        }
-
-        onDelete();
-      },
-      EVENT_FORM_PLAIN_HOTKEY_OPTIONS,
-    );
+    useAppHotkey("Delete", onDeleteEvent, EVENT_FORM_PLAIN_HOTKEY_OPTIONS);
 
     useAppHotkey(
       "Enter",
@@ -498,7 +492,7 @@ export const EventForm: React.FC<Omit<FormProps, "category">> = memo(
                 onConvert?.();
               }}
               onDuplicate={onDuplicateEvent}
-              onDelete={onDelete}
+              onDelete={onDeleteEvent}
             />
           }
         />

packages/web/src/views/Forms/EventForm/eventFormDelete.util.ts

@@ -0,0 +1,18 @@
+interface DeleteEventArgs {
+  isDraft: boolean;
+  onClose: () => void;
+  onDelete: () => void;
+}
+
+export function handleEventFormDelete({
+  isDraft,
+  onClose,
+  onDelete,
+}: DeleteEventArgs) {
+  if (isDraft) {
+    onClose();
+    return;
+  }
+
+  onDelete();
+}