refactor: extract draft actions into separate hook for improved modularity

This commit introduces a new useDraftActions hook that centralizes draft event management actions, further modularizing the draft event handling logic. Key changes include:

- Extracting complex draft-related methods from useDraft
- Improving separation of concerns
- Simplifying the main draft hook's implementation
- Maintaining consistent state management across draft interactions

Author: tyler-dane

packages/web/src/common/constants/web.constants.ts

@@ -12,6 +12,7 @@ export const ID_GRID_ALLDAY_ROW = "allDayRow";
 export const ID_GRID_EVENTS_TIMED = "timedEvents";
 export const ID_GRID_MAIN = "mainGrid";
 export const ID_GRID_ROW = "gridRow";
+export const ID_GRID_ROW_CONTAINER = "mainGridContainer";
 export const ID_MAIN = "mainSection";
 export const ID_DATEPICKER_SIDEBAR = "sidebarDatePicker";
 export const ID_SOMEDAY_DRAFT = "somedayDraft";

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

@@ -19,7 +19,7 @@ interface Props {
   measurements: Measurements_Grid;
   startOfView: WeekProps["component"]["startOfView"];
   endOfView: WeekProps["component"]["endOfView"];
-  onMouseDown: (e: MouseEvent, event: Schema_GridEvent) => void;
+  onClick: (e: MouseEvent, event: Schema_GridEvent) => void;
 }
 
 const AllDayEvent = ({
@@ -28,7 +28,7 @@ const AllDayEvent = ({
   measurements,
   startOfView,
   endOfView,
-  onMouseDown,
+  onClick,
 }: Props) => {
   const position = getEventPosition(
     event,
@@ -51,7 +51,7 @@ const AllDayEvent = ({
       isResizing={false}
       left={position.left}
       lineClamp={1}
-      onMouseDown={(e) => onMouseDown(e, event)}
+      onClick={(e: MouseEvent) => onClick(e, event)}
       priority={event.priority || Priorities.UNASSIGNED}
       role="button"
       top={position.top}

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

@@ -5,7 +5,10 @@ import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
 import { selectAllDayEvents } from "@web/ducks/events/selectors/event.selectors";
-import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
+import {
+  selectDraftId,
+  selectIsDrafting,
+} from "@web/ducks/events/selectors/draft.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { isSomedayEventFormOpen } from "@web/common/utils";
 
@@ -16,25 +19,39 @@ interface Props {
   measurements: Measurements_Grid;
   startOfView: WeekProps["component"]["startOfView"];
   endOfView: WeekProps["component"]["endOfView"];
+  onClick: (e: MouseEvent, event: Schema_GridEvent) => Promise<void>;
 }
 export const AllDayEvents = ({
   measurements,
   startOfView,
   endOfView,
+  onClick,
 }: Props) => {
+  // const dispatch = useAppDispatch();
   const allDayEvents = useAppSelector(selectAllDayEvents);
   const draftId = useAppSelector(selectDraftId);
-  const dispatch = useAppDispatch();
+  // const isDrafting = useAppSelector(selectIsDrafting);
 
-  const onMouseDown = (e: MouseEvent, event: Schema_GridEvent) => {
-    e.stopPropagation();
+  // const onClick = (e: MouseEvent, event: Schema_GridEvent) => {
+  //   e.stopPropagation();
 
-    if (isSomedayEventFormOpen()) {
-      dispatch(draftSlice.actions.discard());
-    }
+  //   if (isDrafting) {
+  //     console.log("todo: close draft");
+  //   } else {
+  //     dispatch(draftSlice.actions.)
+  //     console.log("todo open this draft");
+  //   }
 
-    dispatch(draftSlice.actions.startDragging({ event }));
-  };
+  // TODO remove - shouldn't need to do this anymore
+  // if (isSomedayEventFormOpen()) {
+  //   console.log("discarding (someday form)");
+  //   dispatch(draftSlice.actions.discard());
+  //   return;
+  // }
+
+  //TODO move this to onMouseDown?
+  // dispatch(draftSlice.actions.startDragging({ event }));
+  // };
 
   return (
     <StyledEvents id={ID_GRID_ALLDAY_ROW}>
@@ -47,7 +64,7 @@ export const AllDayEvents = ({
             startOfView={startOfView}
             endOfView={endOfView}
             measurements={measurements}
-            onMouseDown={onMouseDown}
+            onClick={onClick}
           />
         );
       })}

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

@@ -20,6 +20,8 @@ import { isEventFormOpen } from "@web/common/utils";
 import { StyledGridCol } from "../Columns/styled";
 import { StyledAllDayColumns, StyledAllDayRow } from "./styled";
 import { AllDayEvents } from "./AllDayEvents";
+import { Schema_GridEvent } from "@web/common/types/web.event.types";
+import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
 
 interface Props {
   dateCalcs: DateCalcs;
@@ -40,13 +42,32 @@ export const AllDayRow: FC<Props> = ({
 
   const { startOfView, weekDays } = weekProps.component;
   const rowsCount = useAppSelector(selectRowCount);
+  const isDrafting = useAppSelector(selectIsDrafting);
 
   useEffect(() => {
     measurements.remeasure(ID_GRID_MAIN);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rowsCount]);
 
-  const startAlldayDraft = async (e: MouseEvent) => {
+  const openAlldayDraft = async (e: MouseEvent, event: Schema_GridEvent) => {
+    e.stopPropagation();
+
+    if (isDrafting) {
+      console.log("todo: close draft");
+    } else {
+      console.log("opening draft for:", event.title);
+      dispatch(
+        draftSlice.actions.start({
+          activity: "gridClick",
+          eventType: Categories_Event.ALLDAY,
+          event,
+        })
+      );
+    }
+  };
+
+  const startNewAlldayDraft = async (e: MouseEvent) => {
+    //TODO move this to mouse handler?
     const x = getX(e, isSidebarOpen);
     const startDate = dateCalcs.getDateStrByXY(
       x,
@@ -73,14 +94,14 @@ export const AllDayRow: FC<Props> = ({
       return;
     }
 
-    await startAlldayDraft(e);
+    await startNewAlldayDraft(e);
   };
 
   return (
     <StyledAllDayRow
       id={ID_GRID_ALLDAY_CONTAINER}
       rowsCount={rowsCount}
-      onMouseDown={onSectionMouseDown}
+      // onMouseDown={onSectionMouseDown}
     >
       <StyledAllDayColumns id={ID_ALLDAY_COLUMNS} ref={allDayRef}>
         {weekDays.map((day) => (
@@ -91,6 +112,7 @@ export const AllDayRow: FC<Props> = ({
         measurements={measurements}
         startOfView={weekProps.component.startOfView}
         endOfView={weekProps.component.endOfView}
+        onClick={openAlldayDraft}
       />
     </StyledAllDayRow>
   );

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

@@ -5,7 +5,11 @@ import { Dayjs } from "dayjs";
 import { Ref_Callback } from "@web/common/types/util.types";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { Ref_Grid } from "@web/views/Calendar/components/Grid/grid.types";
-import { ID_GRID_MAIN, ID_GRID_ROW } from "@web/common/constants/web.constants";
+import {
+  ID_GRID_MAIN,
+  ID_GRID_ROW_CONTAINER,
+  ID_GRID_ROW,
+} from "@web/common/constants/web.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 
 import { getHourLabels } from "@web/common/utils/web.date.util";
@@ -45,7 +49,7 @@ export const MainGrid: FC<Props> = ({
         weekDays={weekDays}
       />
 
-      <StyledGridWithTimeLabels>
+      <StyledGridWithTimeLabels id={ID_GRID_ROW_CONTAINER}>
         {getHourLabels().map((dayTime, index) => (
           <StyledGridRow
             key={`${dayTime}-${index}:dayTimes`}