Merge branch 'main' into fix/252-someday-clicks

tyler-dane · tyler-dane · commit 30362f535fe3 · 2025-02-21T06:07:20.000-06:00
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -35,7 +35,6 @@
     "react-dom": "^18.1.0",
     "react-google-button": "^0.8.0",
     "react-hotkeys-hook": "^4.4.1",
-    "react-merge-refs": "^1.1.0",
     "react-modal": "^3.16.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.8.1",
diff --git a/packages/web/src/views/Calendar/Calendar.tsx b/packages/web/src/views/Calendar/Calendar.tsx
@@ -33,9 +33,9 @@ export const CalendarView = () => {
     weekProps.component.week,
   );
 
-  const scrollUtil = useScroll(gridRefs.gridScrollRef);
+  const scrollUtil = useScroll(gridRefs.mainGridRef);
 
-  const dateCalcs = useDateCalcs(measurements, gridRefs.gridScrollRef);
+  const dateCalcs = useDateCalcs(measurements, gridRefs.mainGridRef);
 
   const isCurrentWeek = weekProps.component.isCurrentWeek;
   const util = weekProps.util;
diff --git a/packages/web/src/views/Calendar/components/Draft/hooks/actions/useDraftActions.ts b/packages/web/src/views/Calendar/components/Draft/hooks/actions/useDraftActions.ts
@@ -159,34 +159,40 @@ export const useDraftActions = (
   const drag = useCallback(
     (e: MouseEvent) => {
       const updateTimesDuringDrag = (e: MouseEvent) => {
-        setDraft((_draft) => {
-          const x = getX(e, isSidebarOpen);
-          const _initialStart = dateCalcs.getDateByXY(
-            x,
-            e.clientY,
-            weekProps.component.startOfView,
-          );
-
-          const startDate = _draft?.isAllDay
-            ? _initialStart.format(YEAR_MONTH_DAY_FORMAT)
-            : _initialStart.format();
-
-          const _end = _initialStart.add(
-            dragStatus?.durationMin || 0,
-            "minutes",
-          );
-
-          const endDate = _draft.isAllDay
-            ? _end.format(YEAR_MONTH_DAY_FORMAT)
-            : _end.format();
+        if (!draft) return;
 
-          return {
-            ..._draft,
-            startDate,
-            endDate,
-            priority: _draft?.priority || Priorities.UNASSIGNED,
-          };
-        });
+        const x = getX(e, isSidebarOpen);
+        const startEndDurationMin = dragStatus?.durationMin || 0;
+
+        let eventStart = dateCalcs.getDateByXY(
+          x,
+          e.clientY,
+          weekProps.component.startOfView,
+        );
+
+        let eventEnd = eventStart.add(startEndDurationMin, "minutes");
+
+        if (!draft.isAllDay) {
+          // Edge case: timed events' end times can overflow past midnight at the bottom of the grid.
+          // Below logic prevents that from occurring.
+          if (eventEnd.date() !== eventStart.date()) {
+            eventEnd = eventEnd.hour(0).minute(0);
+            eventStart = eventEnd.subtract(startEndDurationMin, "minutes");
+          }
+        }
+
+        const _draft: Schema_GridEvent = {
+          ...draft,
+          startDate: draft.isAllDay
+            ? eventStart.format(YEAR_MONTH_DAY_FORMAT)
+            : eventStart.format(),
+          endDate: draft.isAllDay
+            ? eventEnd.format(YEAR_MONTH_DAY_FORMAT)
+            : eventEnd.format(),
+          priority: draft.priority || Priorities.UNASSIGNED,
+        };
+
+        setDraft(_draft);
       };
 
       if (!isDragging) {
diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx
@@ -28,7 +28,7 @@ interface Props {
   measurements: Measurements_Grid;
   mouseCoords: { x: number; y: number };
   startOfView: WeekProps["component"]["startOfView"];
-  gridScrollRef: Refs_Grid["gridScrollRef"];
+  mainGridRef: Refs_Grid["mainGridRef"];
 }
 
 const _GridEventPreview: FC<Props> = ({
@@ -40,7 +40,7 @@ const _GridEventPreview: FC<Props> = ({
   measurements,
   mouseCoords,
   startOfView,
-  gridScrollRef,
+  mainGridRef,
 }) => {
   const { colWidths } = measurements;
   const { x, y } = mouseCoords;
@@ -83,7 +83,7 @@ const _GridEventPreview: FC<Props> = ({
     x,
     y,
     measurements,
-    gridScrollRef.current?.scrollTop || 0,
+    mainGridRef.current?.scrollTop || 0,
   );
 
   return (
diff --git a/packages/web/src/views/Calendar/components/Grid/Grid.tsx b/packages/web/src/views/Calendar/components/Grid/Grid.tsx
@@ -24,7 +24,7 @@ export const Grid: FC<Props> = ({
   today,
   weekProps,
 }) => {
-  const { allDayRef, gridScrollRef, mainGridRef } = gridRefs;
+  const { allDayRef, mainGridRef } = gridRefs;
 
   return (
     <>
@@ -41,7 +41,6 @@ export const Grid: FC<Props> = ({
         isSidebarOpen={isSidebarOpen}
         mainGridRef={mainGridRef}
         measurements={measurements}
-        scrollRef={gridScrollRef}
         today={today}
         weekProps={weekProps}
       />
diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx b/packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx
@@ -1,13 +1,10 @@
-import React, { FC, MouseEvent } from "react";
-import mergeRefs from "react-merge-refs";
+import React, { FC, MouseEvent, MutableRefObject } from "react";
 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";
@@ -24,14 +21,14 @@ import { MainGridEvents } from "./MainGridEvents";
 import { MainGridColumns } from "../Columns/MainGridColumns";
 import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
 import { isRightClick } from "@web/common/utils/mouse/mouse.util";
+import { useDragEventSmartScroll } from "@web/views/Calendar/hooks/grid/useDragEventSmartScroll";
 
 interface Props {
   dateCalcs: DateCalcs;
   isSidebarOpen: boolean;
-  mainGridRef: Ref_Callback;
+  mainGridRef: MutableRefObject<HTMLDivElement | null>;
   measurements: Measurements_Grid;
   today: Dayjs;
-  scrollRef: Ref_Grid;
   weekProps: WeekProps;
 }
 
@@ -41,15 +38,15 @@ export const MainGrid: FC<Props> = ({
   mainGridRef,
   measurements,
   today,
-  scrollRef,
   weekProps,
 }) => {
   const dispatch = useAppDispatch();
-
   const { component } = weekProps;
   const { isCurrentWeek, week, weekDays } = component;
   const isDrafting = useAppSelector(selectIsDrafting);
 
+  useDragEventSmartScroll(mainGridRef);
+
   const onMouseDown = async (e: MouseEvent) => {
     if (isDrafting) {
       dispatch(draftSlice.actions.discard());
@@ -80,7 +77,7 @@ export const MainGrid: FC<Props> = ({
   };
 
   return (
-    <StyledMainGrid id={ID_GRID_MAIN} ref={mergeRefs([mainGridRef, scrollRef])}>
+    <StyledMainGrid id={ID_GRID_MAIN} ref={mainGridRef}>
       <MainGridColumns
         isCurrentWeek={isCurrentWeek}
         today={today}
diff --git a/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/MonthSection.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/MonthSection.tsx
@@ -48,7 +48,7 @@ export const MonthSection: FC<Props> = ({
         measurements={measurements}
         sidebarProps={somedayProps}
         viewStart={viewStart}
-        gridScrollRef={gridRefs.gridScrollRef}
+        mainGridRef={gridRefs.mainGridRef}
       />
     </SidebarSection>
   );
diff --git a/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvents.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvents.tsx
@@ -27,7 +27,7 @@ interface Props {
   measurements: Measurements_Grid;
   sidebarProps: SidebarProps;
   viewStart: WeekProps["component"]["startOfView"];
-  gridScrollRef: Refs_Grid["gridScrollRef"];
+  mainGridRef: Refs_Grid["mainGridRef"];
 }
 
 const getSomedayEvents = (
@@ -49,7 +49,7 @@ export const SomedayEvents: FC<Props> = ({
   measurements,
   sidebarProps,
   viewStart,
-  gridScrollRef,
+  mainGridRef,
 }) => {
   const { state, util } = sidebarProps;
   const gridX = state.mouseCoords.x - (SIDEBAR_OPEN_WIDTH + GRID_X_START);
@@ -75,7 +75,7 @@ export const SomedayEvents: FC<Props> = ({
           measurements={measurements}
           mouseCoords={state.mouseCoords}
           startOfView={viewStart}
-          gridScrollRef={gridScrollRef}
+          mainGridRef={mainGridRef}
         />
       )}
 
diff --git a/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/WeekSection.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/WeekSection.tsx
@@ -47,7 +47,7 @@ export const WeekSection: FC<Props> = ({
         measurements={measurements}
         sidebarProps={sidebarProps}
         viewStart={viewStart}
-        gridScrollRef={gridRefs.gridScrollRef}
+        mainGridRef={gridRefs.mainGridRef}
       />
     </SidebarSection>
   );
diff --git a/packages/web/src/views/Calendar/hooks/grid/useDateCalcs.ts b/packages/web/src/views/Calendar/hooks/grid/useDateCalcs.ts
@@ -1,3 +1,4 @@
+import { MutableRefObject } from "react";
 import dayjs, { Dayjs } from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
@@ -9,15 +10,13 @@ import { ACCEPTED_TIMES } from "@web/common/constants/web.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { GRID_X_START } from "@web/views/Calendar/layout.constants";
 
-import { Ref_Grid } from "../../components/Grid/grid.types";
-
 dayjs.extend(weekPlugin);
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
 export const useDateCalcs = (
   measurements: Measurements_Grid,
-  scrollRef: Ref_Grid,
+  mainGridRef: MutableRefObject<HTMLDivElement | null>,
 ) => {
   const getDateByX = (x: number, firstDayInView: Dayjs) => {
     const gridX = x - GRID_X_START;
@@ -71,7 +70,7 @@ export const useDateCalcs = (
   const getMinuteByY = (y: number) => {
     if (!measurements.mainGrid) return 0; // TS guard. This should never happen
 
-    const scrollTop = scrollRef.current.scrollTop;
+    const scrollTop = mainGridRef.current?.scrollTop || 0;
     // gridY is the distance from the top of the grid (main grid) to the click
     const gridY = y - measurements.mainGrid.top + scrollTop;
 
diff --git a/packages/web/src/views/Calendar/hooks/grid/useDragEventSmartScroll.ts b/packages/web/src/views/Calendar/hooks/grid/useDragEventSmartScroll.ts
@@ -0,0 +1,72 @@
+import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
+import { MutableRefObject, useEffect, useState, useRef } from "react";
+
+const SCROLL_SPEED = 10;
+const EDGE_THRESHOLD = 50;
+
+export const useDragEventSmartScroll = (
+  mainGridRef: MutableRefObject<HTMLDivElement | null>,
+) => {
+  const { state } = useDraftContext();
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const scrollRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!state.isDragging) return;
+    if (state.draft?.isAllDay) return;
+
+    const updateMousePosition = (event: MouseEvent) => {
+      setMousePosition({ x: event.clientX, y: event.clientY });
+    };
+
+    window.addEventListener("mousemove", updateMousePosition);
+
+    return () => {
+      window.removeEventListener("mousemove", updateMousePosition);
+    };
+  }, [state.isDragging]);
+
+  useEffect(() => {
+    if (!mainGridRef.current) return;
+
+    const container = mainGridRef.current;
+
+    const scrollIfNeeded = () => {
+      if (!container) return;
+
+      const { top, bottom } = container.getBoundingClientRect();
+      const { y } = mousePosition;
+
+      let scrollAmount = 0;
+
+      const isAtTop = container.scrollTop === 0;
+      const isAtBottom =
+        container.scrollTop + container.clientHeight >= container.scrollHeight;
+
+      if (y < top + EDGE_THRESHOLD && !isAtTop) {
+        scrollAmount = -SCROLL_SPEED;
+      } else if (y > bottom - EDGE_THRESHOLD && !isAtBottom) {
+        scrollAmount = SCROLL_SPEED;
+      }
+
+      if (scrollAmount !== 0) {
+        container.scrollTop += scrollAmount;
+        scrollRef.current = requestAnimationFrame(scrollIfNeeded);
+      } else {
+        scrollRef.current = null;
+      }
+    };
+
+    if (!scrollRef.current) {
+      scrollRef.current = requestAnimationFrame(scrollIfNeeded);
+    }
+
+    return () => {
+      if (scrollRef.current) {
+        cancelAnimationFrame(scrollRef.current);
+        scrollRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mousePosition]);
+};
diff --git a/packages/web/src/views/Calendar/hooks/grid/useGridLayout.ts b/packages/web/src/views/Calendar/hooks/grid/useGridLayout.ts
@@ -39,16 +39,7 @@ export const useGridLayout = (isSidebarOpen: boolean, week: number) => {
     }
   }, []);
 
-  const gridScrollRef = useRef<HTMLDivElement | null>(null);
-
-  const mainGridRef = useCallback(
-    (node: HTMLDivElement) => {
-      if (node !== null && !mainMeasurements) {
-        _measureMainGrid(node);
-      }
-    },
-    [mainMeasurements],
-  );
+  const mainGridRef = useRef<HTMLDivElement | null>(null);
 
   const _measureAllDayRow = (node?: HTMLDivElement) => {
     if (node) {
@@ -103,10 +94,15 @@ export const useGridLayout = (isSidebarOpen: boolean, week: number) => {
     }
   };
 
+  useEffect(() => {
+    if (mainGridRef.current && !mainMeasurements) {
+      _measureMainGrid(mainGridRef.current);
+    }
+  }, [mainGridRef.current]);
+
   return {
     gridRefs: {
       allDayRef,
-      gridScrollRef,
       mainGridRef,
     },
     measurements: {
diff --git a/packages/web/src/views/Calendar/hooks/grid/useScroll.ts b/packages/web/src/views/Calendar/hooks/grid/useScroll.ts
diff --git a/yarn.lock b/yarn.lock
