checkpoint(refactor): move handlers to root mouse hook instead of in component

this implementation is based on measureing the grid and computing the position of the mouse (which is probably unnecessarily complicated)

works: initial drag and move and click out using

Author: tyler-dane

packages/web/src/common/types/web.event.types.ts

@@ -52,8 +52,10 @@ export interface Schema_SomedayEventsColumn {
     [key: string]: Schema_Event;
   };
 }
+
+type Activity = "createShortcut" | "dragging" | "gridClick" | "resizing";
 export interface Status_DraftEvent {
-  activity: string | null;
+  activity: Activity | null;
   eventType: Categories_Event | null;
   isDrafting: boolean;
   dateToResize: "startDate" | "endDate" | null;

packages/web/src/common/utils/draft/draft.util.ts

@@ -0,0 +1,86 @@
+import { MouseEvent } from "react";
+import dayjs, { Dayjs } from "dayjs";
+import {
+  ID_GRID_EVENTS_ALLDAY,
+  ID_GRID_EVENTS_TIMED,
+} from "@web/common/constants/web.constants";
+import { roundToNext } from "@web/common/utils";
+import { getElemById, getX } from "@web/common/utils/grid.util";
+import {
+  DRAFT_DURATION_MIN,
+  GRID_TIME_STEP,
+  GRID_Y_START,
+  SIDEBAR_X_START,
+} from "@web/views/Calendar/layout.constants";
+import { Categories_Event } from "@core/types/event.types";
+import { assembleDefaultEvent } from "@web/common/utils/event.util";
+import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
+import { Schema_GridEvent } from "@web/common/types/web.event.types";
+import { getMousePosition } from "../position/mouse.position";
+
+export const assembleTimedDraft = async (
+  e: MouseEvent,
+  dateCalcs: DateCalcs,
+  isSidebarOpen: boolean,
+  startOfView: Dayjs
+): Promise<Schema_GridEvent> => {
+  const x = getX(e, isSidebarOpen);
+  const _start = dateCalcs.getDateByXY(x, e.clientY, startOfView);
+  const startDate = _start.format();
+  const endDate = _start.add(DRAFT_DURATION_MIN, "minutes").format();
+
+  const event = (await assembleDefaultEvent(
+    Categories_Event.TIMED,
+    startDate,
+    endDate
+  )) as Schema_GridEvent;
+  return event;
+};
+
+export const getDraftTimes = (isCurrentWeek: boolean, startOfWeek: Dayjs) => {
+  const currentMinute = dayjs().minute();
+  const nextMinuteInterval = roundToNext(currentMinute, GRID_TIME_STEP);
+
+  const fullStart = isCurrentWeek ? dayjs() : startOfWeek.hour(dayjs().hour());
+  const _start = fullStart.minute(nextMinuteInterval).second(0);
+
+  const _end = _start.add(1, "hour");
+  const startDate = _start.format();
+  const endDate = _end.format();
+
+  return { startDate, endDate };
+};
+
+export const getDraftContainer = (isAllDay: boolean) => {
+  if (isAllDay) {
+    return getElemById(ID_GRID_EVENTS_ALLDAY);
+  }
+
+  return getElemById(ID_GRID_EVENTS_TIMED);
+};
+
+export const isOverMainGrid = (
+  x: number,
+  y: number,
+  allDayRow: DOMRect | null
+) => {
+  if (!allDayRow?.bottom || !allDayRow?.top) {
+    throw Error("Missing measurements for all-day row");
+    return false;
+  }
+
+  const { isOverMainGrid } = getMousePosition(
+    {
+      allDayRowBottom: allDayRow.bottom,
+      allDayRowTop: allDayRow.top,
+      gridYStart: GRID_Y_START,
+      sidebarXStart: SIDEBAR_X_START,
+    },
+    {
+      x,
+      y,
+    }
+  );
+
+  return isOverMainGrid;
+};

packages/web/src/ducks/events/slices/draft.slice.types.ts

@@ -22,9 +22,9 @@ interface Payload_Draft_Drag {
 }
 
 interface Payload_DraftEvent {
+  activity?: "createShortcut" | "dragging" | "gridClick" | "resizing";
   event?: Schema_Event;
   eventType: Categories_Event;
-  activity?: "createShortcut" | "dragging" | "resizing";
 }
 
 interface Payload_Draft_Resize {

packages/web/src/views/Calendar/components/Event/Draft/Draft.tsx

@@ -7,9 +7,9 @@ import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { getCategory } from "@web/common/utils/event.util";
+import { getDraftContainer } from "@web/common/utils/draft/draft.util";
 import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
 
-import { getDraftContainer } from "./draft.util";
 import { GridDraft } from "./GridDraft";
 
 interface Props {

packages/web/src/views/Calendar/components/Event/Draft/draft.util.ts

@@ -37,8 +37,6 @@ export const Grid: FC<Props> = ({
       />
 
       <MainGrid
-        dateCalcs={dateCalcs}
-        isSidebarOpen={isSidebarOpen}
         mainGridRef={mainGridRef}
         measurements={measurements}
         scrollRef={gridScrollRef}

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

@@ -1,19 +1,13 @@
-import React, { FC, MouseEvent } from "react";
+import React, { FC } from "react";
 import mergeRefs from "react-merge-refs";
 import { Dayjs } from "dayjs";
-import { Categories_Event } from "@core/types/event.types";
-import { DRAFT_DURATION_MIN } from "@web/views/Calendar/layout.constants";
-import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
+
 import { Ref_Callback } from "@web/common/types/util.types";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
-import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { Ref_Grid } from "@web/views/Calendar/components/Grid/grid.types";
 import { ID_GRID_MAIN } from "@web/common/constants/web.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
-import { assembleDefaultEvent } from "@web/common/utils/event.util";
-import { getX } from "@web/common/utils/grid.util";
-import { draftSlice } from "@web/ducks/events/slices/draft.slice";
-import { isEventFormOpen } from "@web/common/utils";
+
 import { getHourLabels } from "@web/common/utils/web.date.util";
 
 import {
@@ -23,53 +17,24 @@ import {
 } from "./styled";
 import { MainGridEvents } from "./MainGridEvents";
 import { MainGridColumns } from "../Columns/MainGridColumns";
-import {
-  selectIsDrafting,
-  selectIsDraftingExisting,
-} from "@web/ducks/events/selectors/draft.selectors";
 
 interface Props {
-  dateCalcs: DateCalcs;
-  isSidebarOpen: boolean;
   mainGridRef: Ref_Callback;
   measurements: Measurements_Grid;
-  today: Dayjs;
   scrollRef: Ref_Grid;
+  today: Dayjs;
   weekProps: WeekProps;
 }
 
 export const MainGrid: FC<Props> = ({
-  dateCalcs,
-  isSidebarOpen,
   mainGridRef,
   measurements,
   today,
   scrollRef,
   weekProps,
 }) => {
-  const dispatch = useAppDispatch();
-
   const { component } = weekProps;
   const { isCurrentWeek, week, weekDays } = component;
-  const isDrafting = useAppSelector(selectIsDrafting);
-
-  //TODO remove
-  // const onGridClick = async (e: MouseEvent) => {
-  //   if (isDrafting) {
-  //     console.log("todo discarding...");
-
-  //     // todo next: this works for main grid, but now when
-  //     // clicking outside on any other element its
-  //     // still lingering the old draft cuz were not discarding there
-
-  //     // ESC and repeating this flow also breaks
-  //     dispatch(draftSlice.actions.discard());
-  //     return;
-  //   }
-
-  //   console.log("form not open, so starting draft");
-  //   await startTimedDraft(e);
-  // };
 
   return (
     <StyledMainGrid id={ID_GRID_MAIN} ref={mergeRefs([mainGridRef, scrollRef])}>
@@ -84,7 +49,7 @@ export const MainGrid: FC<Props> = ({
         {getHourLabels().map((dayTime, index) => (
           <StyledGridRow
             key={`${dayTime}-${index}:dayTimes`}
-            // onClick={onGridClick}
+            id={`gridRow-${index}`}
           />
         ))}
       </StyledGridWithTimeLabels>

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

@@ -73,20 +73,15 @@ export const useDraftUtil = (
   const [isFormOpen, setIsFormOpen] = useState(false);
   const onIsFormOpenChange = (isOpen: boolean) => {
     const formAlreadyOpen = isFormOpen === true;
-    const shouldJustDiscard = formAlreadyOpen;
 
-    if (shouldJustDiscard) {
-      // console.log("clicked out, discarding...");
-      console.log("clicked out, just resetting...");
+    if (formAlreadyOpen) {
+      // console.log("clicked out, so reseting + discarding...");
+      console.log("clicked out, so reseting ..");
       reset();
       // discard();
       return;
-    } else {
-      // we wont actually get here
-      console.log("clicked empty, starting new ...");
     }
     setIsFormOpen(isOpen);
-    console.log("closed form [onIsFormOpenChange]");
 
     /*
 
@@ -142,12 +137,12 @@ export const useDraftUtil = (
 
   const handleChange = useCallback(async () => {
     if (isDrafting) {
-      if (activity === "createShortcut") {
-        const defaultDraft = await assembleDefaultEvent(
+      if (activity === "createShortcut" || activity === "gridClick") {
+        const defaultDraft = (await assembleDefaultEvent(
           reduxDraftType,
           reduxDraft?.startDate,
           reduxDraft?.endDate
-        );
+        )) as Schema_GridEvent;
         setDraft(defaultDraft);
         setIsFormOpen(true);
         return;
@@ -165,7 +160,6 @@ export const useDraftUtil = (
         setDateBeingChanged(dateToResize);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     activity,
     dateToResize,

packages/web/src/views/Calendar/hooks/draft/useDraftUtil.ts

@@ -3,7 +3,7 @@ import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { WeekProps } from "../useWeek";
 import { useDraftUtil } from "./useDraftUtil";
 import { useGridClick } from "./useGridClick";
-import { useGridMouseMove } from "./useGridMouseMove";
+import { useMouseHandlers } from "./useMouseHandlers";
 import { Measurements_Grid } from "../grid/useGridLayout";
 
 export const useGridDraft = (
@@ -19,7 +19,7 @@ export const useGridDraft = (
   );
 
   useGridClick(draftState, draftUtil);
-  useGridMouseMove(
+  useMouseHandlers(
     draftState,
     draftUtil,
     dateCalcs,