🐛 Fix: Runtime error when dragging all-day draft (#289)

* ✨ feat: differentiate between click and drag depending on mouse behavior

if mousing up before threshold: click
if mouse is still down after threshold: drag
if mouse down + move before threshold: drag

* 🐛 Fix: Improve event form interaction and prevent unintended behavior

- Update event form to stop event propagation on mouse events
- Add `type="button"` to delete buttons to prevent form submission
- Modify calendar test to use `document.body` for closing form
- Simplify event form mouse interaction logic

* 🧹 Chore: delete commented code in Calendar.form.test

https://docs.compasscalendar.com/docs/contribute/convention-guide#no-dead-code

* 🧹 Chore: Uncomment test assertion in EventForm.test.tsx

Remove commented-out test assertion to improve test coverage and clarity

* 🐛 Fix: adjust behavior based on whether form is open

* ♻️  Refactor: rename to useGridEventMouseDown and cleanup

* 🐛 Fix: prevent smart scrolling after adjusting all day event

Author: tyler-dane

packages/web/src/views/Calendar/Calendar.form.test.tsx

@@ -1,7 +1,7 @@
 import React, { act } from "react";
 import "@testing-library/jest-dom";
 import { screen, waitFor, within } from "@testing-library/react";
-import userEvent, { UserEvent } from "@testing-library/user-event";
+import userEvent from "@testing-library/user-event";
 import { CLIMB } from "@core/__mocks__/events/events.misc";
 import { render } from "@web/__tests__/__mocks__/mock.render";
 import { preloadedState } from "@web/__tests__/__mocks__/state/state.weekEvents";
@@ -12,54 +12,20 @@ jest.mock("@web/views/Calendar/hooks/mouse/useEventListener", () => ({
 }));
 
 describe("Event Form", () => {
-  //   it("opens when clicking events", async () => {
-  //     const user = userEvent.setup();
-  //     render(<CalendarView />, { state: preloadedState });
-  //     expect(screen.queryByRole("form")).not.toBeInTheDocument();
-  /* timed event */
-  // await act(async () => {
-  //   await user.click(screen.getByRole("button", { name: /Ty & Tim/i }));
-  //   await _confirmCorrectEventFormIsOpen(TY_TIM.title);
-  // });
-  /* multi-week event */
-  // await act(async () => {
-  //   await _clickHeading(user);
-  //   await user.click(
-  //     screen.getByRole("button", { name: /multiweek event/i })
-  //   );
-  // });
-  // await waitFor(
-  //   () => {
-  //     expect(screen.getByRole("form")).toBeInTheDocument();
-  //   },
-  //   { timeout: 10000 }
-  // );
-  // await _confirmCorrectEventFormIsOpen(MULTI_WEEK.title);
-  // await waitFor(() => {
-  //   expect(
-  //     within(screen.getByRole("form")).getByText(MULTI_WEEK.title)
-  //   ).toBeInTheDocument();
-  // });
-  // /* someday event */
-  // await _clickHeading(user);
-  // await user.click(screen.getByRole("button", { name: /takeover world/i }));
-  // expect(
-  //   within(screen.getRole("form", name: {"Someday Event Form"})).getByText("Takeover world")
-  // ).toBeInTheDocument();
-  // }, 20000);
   it("closes after clicking outside", async () => {
     render(<CalendarView />, { state: preloadedState });
     const user = userEvent.setup();
 
     await act(async () => {
       await user.click(screen.getByRole("button", { name: CLIMB.title }));
-      await _clickHeading(user);
     });
 
-    await waitFor(() => {
-      expect(screen.queryByRole("form")).not.toBeInTheDocument();
+    await act(async () => {
+      await user.click(document.body);
     });
-  }, 10000);
+
+    expect(screen.queryByRole("form")).not.toBeInTheDocument();
+  });
   it("closes after clicking trash icon", async () => {
     const user = userEvent.setup();
     render(<CalendarView />, { state: preloadedState });
@@ -101,18 +67,3 @@ describe("Event Form", () => {
     });
   });
 });
-
-/***********
- * Helpers *
- ***********/
-const _clickHeading = async (user: UserEvent) => {
-  await user.click(screen.getByRole("heading", { level: 1 }));
-};
-
-const _confirmCorrectEventFormIsOpen = async (eventName: string) => {
-  await waitFor(() => {
-    expect(
-      within(screen.getByRole("form")).getByText(eventName),
-    ).toBeInTheDocument();
-  });
-};

packages/web/src/views/Calendar/components/Draft/grid/GridDraft.tsx

@@ -3,7 +3,7 @@ import { FloatingFocusManager } from "@floating-ui/react";
 import { YEAR_MONTH_DAY_FORMAT } from "@core/constants/date.constants";
 import { Categories_Event } from "@core/types/event.types";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
-import { useGridEventMouseHold } from "@web/views/Calendar/hooks/grid/useGridEventMouseHold";
+import { useGridEventMouseDown } from "@web/views/Calendar/hooks/grid/useGridEventMouseDown";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { EventForm } from "@web/views/Forms/EventForm";
@@ -35,9 +35,16 @@ export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
     actions.convert(start, end);
   };
 
-  const { onMouseDown } = useGridEventMouseHold((event) => {
+  const handleClick = () => {};
+  const handleDrag = () => {
     setIsDragging(true);
-  }, Categories_Event.TIMED);
+  };
+
+  const { onMouseDown } = useGridEventMouseDown(
+    Categories_Event.TIMED,
+    handleClick,
+    handleDrag,
+  );
 
   if (!draft) return null;
 

packages/web/src/views/Calendar/components/Draft/hooks/actions/useDraftActions.ts

@@ -147,14 +147,12 @@ export const useDraftActions = (
   };
 
   const discard = useCallback(() => {
-    if (draft) {
-      setDraft(null);
-    }
+    reset();
 
     if (reduxDraft || reduxDraftType) {
       dispatch(draftSlice.actions.discard());
     }
-  }, [dispatch, draft, reduxDraft, reduxDraftType]);
+  }, [dispatch, draft, reduxDraft, reduxDraftType, setDraft]);
 
   const drag = useCallback(
     (e: MouseEvent) => {

packages/web/src/views/Calendar/components/Draft/hooks/effects/useDraftEffects.ts

@@ -40,7 +40,6 @@ export const useDraftEffects = (
   }, [dateBeingChanged, isResizing]);
 
   useEffect(() => {
-    // const isStaleDraft = !isDrafting && (isResizing || isDragging);
     const isStaleDraft = !isDrafting;
     if (isStaleDraft) {
       setDraft(null);
@@ -51,26 +50,28 @@ export const useDraftEffects = (
       setResizeStatus(null);
       setDateBeingChanged(null);
     }
-  }, [isDrafting]);
+  }, [
+    isDrafting,
+    setDateBeingChanged,
+    setDraft,
+    setDragStatus,
+    setIsDragging,
+    setIsFormOpen,
+    setIsResizing,
+    setResizeStatus,
+  ]);
 
   useEffect(() => {
     handleChange();
   }, [handleChange]);
 
   useEffect(() => {
-    if (isDragging) {
+    if (isDragging && draft) {
       setIsFormOpen(false);
-      setDraft((_draft) => {
-        const durationMin = dayjs(_draft.endDate).diff(
-          _draft.startDate,
-          "minutes",
-        );
-
-        setDragStatus({
-          durationMin,
-        });
+      const durationMin = dayjs(draft.endDate).diff(draft.startDate, "minutes");
 
-        return draft;
+      setDragStatus({
+        durationMin,
       });
     }
   }, [isDragging]);

packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvents.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import { Categories_Event } from "@core/types/event.types";
 import { ID_GRID_EVENTS_ALLDAY } from "@web/common/constants/web.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
-import { isSomedayEventFormOpen } from "@web/common/utils";
 import { isLeftClick } from "@web/common/utils/mouse/mouse.util";
 import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
 import { selectAllDayEvents } from "@web/ducks/events/selectors/event.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
-import { useGridEventMouseHold } from "@web/views/Calendar/hooks/grid/useGridEventMouseHold";
+import { useGridEventMouseDown } from "@web/views/Calendar/hooks/grid/useGridEventMouseDown";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { AllDayEventMemo } from "./AllDayEvent";
@@ -28,18 +27,30 @@ export const AllDayEvents = ({
   const draftId = useAppSelector(selectDraftId);
   const dispatch = useAppDispatch();
 
-  const { onMouseDown } = useGridEventMouseHold((event) => {
-    if (isSomedayEventFormOpen()) {
-      dispatch(draftSlice.actions.discard());
-    }
+  const handleClick = (event: Schema_GridEvent) => {
+    dispatch(
+      draftSlice.actions.start({
+        activity: "gridClick",
+        event,
+        eventType: Categories_Event.ALLDAY,
+      }),
+    );
+  };
 
+  const handleDrag = (event: Schema_GridEvent) => {
     dispatch(
       draftSlice.actions.startDragging({
         category: Categories_Event.ALLDAY,
         event,
       }),
     );
-  }, Categories_Event.ALLDAY);
+  };
+
+  const { onMouseDown } = useGridEventMouseDown(
+    Categories_Event.ALLDAY,
+    handleClick,
+    handleDrag,
+  );
 
   return (
     <StyledEvents id={ID_GRID_EVENTS_ALLDAY}>

packages/web/src/views/Calendar/components/Grid/MainGrid/MainGridEvents.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import { Categories_Event } from "@core/types/event.types";
 import { ID_GRID_EVENTS_TIMED } from "@web/common/constants/web.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
-import { isEventFormOpen } from "@web/common/utils";
 import { adjustOverlappingEvents } from "@web/common/utils/overlap/overlap";
 import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
 import { selectGridEvents } from "@web/ducks/events/selectors/event.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
-import { useGridEventMouseHold } from "@web/views/Calendar/hooks/grid/useGridEventMouseHold";
+import { useGridEventMouseDown } from "@web/views/Calendar/hooks/grid/useGridEventMouseDown";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { GridEventMemo } from "../../Event/Grid/GridEvent/GridEvent";
@@ -27,34 +26,40 @@ export const MainGridEvents = ({ measurements, weekProps }: Props) => {
   const adjustedEvents = adjustOverlappingEvents(timedEvents);
   const category = Categories_Event.TIMED;
 
-  const { onMouseDown } = useGridEventMouseHold((event) => {
-    if (isEventFormOpen()) {
-      dispatch(
-        draftSlice.actions.swap({ event, category: Categories_Event.TIMED }),
-      );
-      return;
-    }
-    editTimedEvent(event);
-  }, Categories_Event.TIMED);
+  const handleClick = (event: Schema_GridEvent) => {
+    dispatch(
+      draftSlice.actions.start({
+        activity: "gridClick",
+        event,
+        eventType: category,
+      }),
+    );
+  };
 
-  const resizeTimedEvent = (
-    event: Schema_GridEvent,
-    dateToChange: "startDate" | "endDate",
-  ) => {
+  const handleDrag = (event: Schema_GridEvent) => {
     dispatch(
-      draftSlice.actions.startResizing({
+      draftSlice.actions.startDragging({
         category,
         event,
-        dateToChange,
       }),
     );
   };
 
-  const editTimedEvent = (event: Schema_GridEvent) => {
+  const { onMouseDown } = useGridEventMouseDown(
+    Categories_Event.TIMED,
+    handleClick,
+    handleDrag,
+  );
+
+  const resizeTimedEvent = (
+    event: Schema_GridEvent,
+    dateToChange: "startDate" | "endDate",
+  ) => {
     dispatch(
-      draftSlice.actions.startDragging({
+      draftSlice.actions.startResizing({
         category,
         event,
+        dateToChange,
       }),
     );
   };

packages/web/src/views/Calendar/hooks/grid/useDragEventSmartScroll.ts

@@ -13,7 +13,7 @@ export const useDragEventSmartScroll = (
 
   useEffect(() => {
     if (!state.isDragging) return;
-    if (state.draft?.isAllDay) return;
+    if (state.draft?.isAllDay !== false) return;
 
     const updateMousePosition = (event: MouseEvent) => {
       setMousePosition({ x: event.clientX, y: event.clientY });
@@ -24,15 +24,16 @@ export const useDragEventSmartScroll = (
     return () => {
       window.removeEventListener("mousemove", updateMousePosition);
     };
-  }, [state.isDragging]);
+  }, [state.draft?.isAllDay, state.isDragging]);
 
   useEffect(() => {
     if (!mainGridRef.current) return;
-
     const container = mainGridRef.current;
 
     const scrollIfNeeded = () => {
+      if (!state.isDragging) return;
       if (!container) return;
+      if (state.draft?.isAllDay !== false) return;
 
       const { top, bottom } = container.getBoundingClientRect();
       const { y } = mousePosition;
@@ -67,6 +68,5 @@ export const useDragEventSmartScroll = (
         scrollRef.current = null;
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mousePosition]);
 };