fix(web): delete draft events immediately (#1881)

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

@@ -97,6 +97,23 @@ const resolveDateTimeState = (
   return createDateTimeState(sourceStartDate, sourceEndDate);
 };
 
+const handleEventFormDelete = ({
+  isDraft,
+  onClose,
+  onDelete,
+}: {
+  isDraft: boolean;
+  onClose: () => void;
+  onDelete: () => void;
+}) => {
+  if (isDraft) {
+    onClose();
+    return;
+  }
+
+  onDelete();
+};
+
 export const EventForm: React.FC<Omit<FormProps, "category">> = memo(
   ({
     event,
@@ -262,6 +279,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 +410,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 +508,7 @@ export const EventForm: React.FC<Omit<FormProps, "category">> = memo(
                 onConvert?.();
               }}
               onDuplicate={onDuplicateEvent}
-              onDelete={onDelete}
+              onDelete={onDeleteEvent}
             />
           }
         />

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

@@ -17,8 +17,17 @@ mock.module(
 );
 
 mock.module("@web/views/Forms/SomedayEventForm/SomedayEventActionMenu", () => ({
-  SomedayEventActionMenu: () => (
-    <button type="button">Someday event actions</button>
+  SomedayEventActionMenu: ({
+    onDeleteClick,
+  }: {
+    onDeleteClick: () => void;
+  }) => (
+    <>
+      <button type="button">Someday event actions</button>
+      <button type="button" onClick={onDeleteClick}>
+        Delete someday event
+      </button>
+    </>
   ),
 }));
 
@@ -72,4 +81,28 @@ describe("SomedayEventForm", () => {
     expect(row?.firstElementChild?.contains(title)).toBe(true);
     expect(row?.lastElementChild?.contains(actions)).toBe(true);
   });
+
+  it("closes a someday draft immediately when deleting from the menu", () => {
+    const onClose = mock();
+    const onDelete = mock();
+
+    render(
+      <SomedayEventForm
+        category={Categories_Event.SOMEDAY_WEEK}
+        event={{ ...event, _id: undefined, title: "Someday draft" }}
+        isDraft={true}
+        isExistingEvent={false}
+        onClose={onClose}
+        onDelete={onDelete}
+        onDuplicate={mock()}
+        onSubmit={mock()}
+        setEvent={mock()}
+      />,
+    );
+
+    screen.getByRole("button", { name: "Delete someday event" }).click();
+
+    expect(onDelete).not.toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
 });

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

@@ -31,7 +31,7 @@ import { useSomedayFormShortcuts } from "@web/views/Forms/SomedayEventForm/useSo
 export const SomedayEventForm: React.FC<FormProps> = ({
   event,
   category,
-  isDraft: _isDraft,
+  isDraft,
   isExistingEvent: _isExistingEvent,
   onClose,
   onMigrate,
@@ -128,9 +128,14 @@ export const SomedayEventForm: React.FC<FormProps> = ({
     };
 
   const onDelete = useCallback(() => {
+    if (isDraft) {
+      onClose();
+      return;
+    }
+
     onDeleteEvent();
     onClose();
-  }, [onDeleteEvent, onClose]);
+  }, [isDraft, onDeleteEvent, onClose]);
 
   const onKeyDown = (e: KeyboardEvent<HTMLFormElement>) => {
     if (e.key === "Backspace") {