🐛 fix: resizing all day events issues (#1033)

* fix: ensure start date and end date is not the same when resizing allday events

* fix: diffDays being incorrectly computed

* fix: ensure allday start-end date patch applies only to allday events

* fix(web): correct diffDays calculation for all-day events

* fix(web): enable resizing of all-day events by restoring scaler mouse down functionality

* fix(web): remove redundant check

Author: that-one-arab

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

@@ -438,21 +438,20 @@ export const useDraftActions = (
     (currTime: dayjs.Dayjs) => {
       if (!draft || !dateBeingChanged) return false;
 
-      const _currTime = draft.isAllDay
-        ? currTime.format(YEAR_MONTH_DAY_FORMAT)
-        : currTime.format();
+      if (draft.isAllDay) {
+        return true;
+      }
+
+      const _currTime = currTime.format();
       const noChange = draft[dateBeingChanged] === _currTime;
 
       if (noChange) return false;
 
-      // For timed events, restrict to same day
-      if (!draft.isAllDay) {
-        const diffDay = currTime.day() !== dayjs(draft.startDate).day();
-        if (diffDay) return false;
+      const diffDay = currTime.day() !== dayjs(draft.startDate).day();
+      if (diffDay) return false;
 
-        const sameStart = currTime.format() === draft.startDate;
-        if (sameStart) return false;
-      }
+      const sameStart = currTime.format() === draft.startDate;
+      if (sameStart) return false;
 
       return true;
     },
@@ -461,8 +460,11 @@ export const useDraftActions = (
 
   const resize = useCallback(
     (e: MouseEvent) => {
+      if (!draft || !reduxDraft) return; // TS Guard
+
+      const _dateBeingChanged = dateBeingChanged as "startDate" | "endDate";
       const oppositeKey =
-        dateBeingChanged === "startDate" ? "endDate" : "startDate";
+        _dateBeingChanged === "startDate" ? "endDate" : "startDate";
 
       const flipIfNeeded = (currTime: Dayjs) => {
         let startDate = draft?.startDate;
@@ -529,7 +531,7 @@ export const useDraftActions = (
 
       const x = getX(e, isSidebarOpen);
       // For all-day events, use a fixed Y coordinate (0) because Y positioning is irrelevant:
-      const y = draft?.isAllDay ? 0 : e.clientY;
+      const y = draft.isAllDay ? 0 : e.clientY;
       const currTime = dateCalcs.getDateByXY(
         x,
         y,
@@ -541,18 +543,18 @@ export const useDraftActions = (
       }
 
       const justFlipped = flipIfNeeded(currTime);
-      const dateChanged = justFlipped ? oppositeKey : dateBeingChanged;
+      const dateChanged = justFlipped ? oppositeKey : _dateBeingChanged;
 
-      const origTime = dayjs(dateChanged ? draft?.[dateChanged] : null);
+      const origTime = dayjs(reduxDraft[dateChanged]).add(-1, "day");
 
       let updatedTime: string;
       let hasMoved: boolean;
 
       if (draft?.isAllDay) {
         // For all-day events, work with day differences
-        const diffDays = currTime.diff(origTime, "day");
-        updatedTime = origTime
-          .add(diffDays, "days")
+        const diffDays = currTime.diff(origTime, "day", true);
+        updatedTime = currTime
+          .add(dateChanged === "endDate" ? 1 : 0, "day")
           .format(YEAR_MONTH_DAY_FORMAT);
         hasMoved = diffDays !== 0;
       } else {
@@ -578,6 +580,7 @@ export const useDraftActions = (
       dateBeingChanged,
       dateCalcs,
       draft,
+      reduxDraft,
       isResizing,
       isSidebarOpen,
       isValidMovement,

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

@@ -94,15 +94,15 @@ export const AllDayEvents = ({
             }
             onMouseDown(e, event);
           }}
-          // onScalerMouseDown={(
-          //   event,
-          //   e,
-          //   dateToChange: "startDate" | "endDate",
-          // ) => {
-          //   e.stopPropagation();
-          //   e.preventDefault();
-          //   resizeAllDayEvent(event, dateToChange);
-          // }}
+          onScalerMouseDown={(
+            event,
+            e,
+            dateToChange: "startDate" | "endDate",
+          ) => {
+            e.stopPropagation();
+            e.preventDefault();
+            resizeAllDayEvent(event, dateToChange);
+          }}
         />
       );
     });