:sparkles feat(agenda-event resize): support resizable agenda event preview

* Initial plan

* Implement resizable event preview with top and bottom handles

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* Address code review feedback: improve resize logic and reduce duplication

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* :sparkles feat(agenda-event resize): support resizable agenda event preview

:package deps(rxjs-state-management): introduce rxjs state  @ngneat/elf library

- Updated EventContextMenu and related components to utilize activeEvent$ observable for managing active events.
- Replaced setDraft with resetDraft and resetActiveEvent in event form hooks to improve state management.
- Refactored tests to mock new event store structure and ensure proper event handling.
- Introduced utility functions for calculating event height and rounding minutes to nearest fifteen.
- Updated yarn.lock to include new dependencies for @ngneat/elf-entities and @ngneat/use-observable.

* :bugfix fix(resize-agenda-event): improve event handling and add tests

* Update packages/web/src/common/hooks/useEventResizeActions.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* feat(resize-agenda-event): add bounds parameter to useEventResizeActions for improved resizing logic

* refactor(useEventResizeActions): remove debug log from resizing function

* feat(useEventResizeActions): enhance resizing logic with bounds clamping and update tests

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

packages/web/package.json

@@ -13,6 +13,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.27.3",
     "@hello-pangea/dnd": "^16.2.0",
+    "@ngneat/elf": "^2.5.1",
+    "@ngneat/elf-entities": "^5.0.2",
+    "@ngneat/use-observable": "^1.0.0",
     "@phosphor-icons/react": "^2.1.7",
     "@react-oauth/google": "^0.7.0",
     "@reduxjs/toolkit": "^1.6.1",

packages/web/src/__tests__/utils/state/store.test.util.ts

@@ -1,5 +1,6 @@
 import { PreloadedState, configureStore } from "@reduxjs/toolkit";
 import { Schema_Event } from "@core/types/event.types";
+import { sagaMiddleware } from "@web/common/store/middlewares";
 import { RootState } from "@web/store";
 import { reducers } from "@web/store/reducers";
 
@@ -157,7 +158,7 @@ export const createStoreWithEvents = (
     return acc;
   }, {});
 
-  preloadedState.events.entities.value = entities;
+  preloadedState.events.entities!.value = entities;
   preloadedState.events.getDayEvents = {
     value: {
       data: events
@@ -182,7 +183,7 @@ export const createStoreWithEvents = (
         thunk: false,
         serializableCheck: false,
         immutableCheck: false,
-      }),
+      }).concat(sagaMiddleware),
   });
 };
 

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

@@ -24,6 +24,8 @@ export const DATA_EVENT_ELEMENT_ID = "data-event-id";
 export const DATA_DRAFT_EVENT = "data-draft-event";
 export const DATA_NEW_DRAFT_EVENT = "data-new-draft-event";
 export const DATA_TASK_ELEMENT_ID = "data-task-id";
+export const DATA_OVERLAPPING = "data-overlapping";
+export const DATA_FULL_WIDTH = "data-full-width";
 export const ID_CONTEXT_MENU_ITEMS = "context-menu-items";
 export const ID_ADD_TASK_BUTTON = "add-task-button";
 export const CLASS_ALL_DAY_CALENDAR_EVENT = "all-day-calendar-event";

packages/web/src/common/hooks/useCursorCoordinates.test.ts

@@ -0,0 +1,34 @@
+import { act } from "react";
+import { renderHook } from "@testing-library/react";
+import { cursor$ } from "@web/common/context/mouse-position";
+import { useCursorCoordinates } from "./useCursorCoordinates";
+
+describe("useCursorCoordinates", () => {
+  beforeEach(() => {
+    // Reset to a known state
+    act(() => {
+      cursor$.next({ x: 0, y: 0 });
+    });
+  });
+
+  it("should return the initial cursor coordinates", () => {
+    const { result } = renderHook(() => useCursorCoordinates());
+    expect(result.current).toEqual({ x: 0, y: 0 });
+  });
+
+  it("should update coordinates when cursor$ emits new values", () => {
+    const { result } = renderHook(() => useCursorCoordinates());
+
+    act(() => {
+      cursor$.next({ x: 100, y: 200 });
+    });
+
+    expect(result.current).toEqual({ x: 100, y: 200 });
+
+    act(() => {
+      cursor$.next({ x: 50, y: 50 });
+    });
+
+    expect(result.current).toEqual({ x: 50, y: 50 });
+  });
+});

…oks/__tests__/useEventDNDActions.test.ts …/common/hooks/useEventDNDActions.test.tspackages/web/src/common/hooks/__tests__/useEventDNDActions.test.ts renamed to packages/web/src/common/hooks/useEventDNDActions.test.ts packages/web/src/common/hooks/__tests__/useEventDNDActions.test.ts renamed to packages/web/src/common/hooks/useEventDNDActions.test.ts

@@ -6,15 +6,19 @@ import {
   ID_GRID_ALLDAY_ROW,
   ID_GRID_MAIN,
 } from "@web/common/constants/web.constants";
-import { editEventSlice } from "@web/ducks/events/slices/event.slice";
+import { useEventDNDActions } from "@web/common/hooks/useEventDNDActions";
+import { useUpdateEvent } from "@web/common/hooks/useUpdateEvent";
 import { useAppDispatch } from "@web/store/store.hooks";
 import { getSnappedMinutes } from "@web/views/Day/util/agenda/agenda.util";
-import { useEventDNDActions } from "../useEventDNDActions";
 
 jest.mock("@dnd-kit/core", () => ({
   useDndMonitor: jest.fn(),
 }));
 
+jest.mock("@web/common/hooks/useUpdateEvent", () => ({
+  useUpdateEvent: jest.fn(),
+}));
+
 jest.mock("@web/store/store.hooks", () => ({
   useAppDispatch: jest.fn(),
 }));
@@ -25,6 +29,7 @@ jest.mock("@web/views/Day/util/agenda/agenda.util", () => ({
 
 describe("useEventDNDActions", () => {
   const mockDispatch = jest.fn();
+  const mockUpdateEvent = jest.fn();
   const mockEvent = {
     _id: "event-1",
     startDate: "2023-01-01T10:00:00.000Z",
@@ -35,6 +40,7 @@ describe("useEventDNDActions", () => {
   beforeEach(() => {
     jest.clearAllMocks();
     (useAppDispatch as jest.Mock).mockReturnValue(mockDispatch);
+    (useUpdateEvent as jest.Mock).mockReturnValue(mockUpdateEvent);
   });
 
   it("should register dnd monitor", () => {
@@ -79,14 +85,15 @@ describe("useEventDNDActions", () => {
         .add(60, "minute")
         .toISOString();
 
-      expect(mockDispatch).toHaveBeenCalledWith(
-        editEventSlice.actions.request({
-          _id: mockEvent._id,
+      expect(mockUpdateEvent).toHaveBeenCalledWith(
+        {
           event: expect.objectContaining({
+            ...mockEvent,
             startDate: expectedStartDate,
             endDate: expectedEndDate,
           }),
-        }),
+        },
+        true,
       );
     });
 
@@ -115,15 +122,16 @@ describe("useEventDNDActions", () => {
         .add(15, "minute")
         .toISOString();
 
-      expect(mockDispatch).toHaveBeenCalledWith(
-        editEventSlice.actions.request({
-          _id: allDayEvent._id,
+      expect(mockUpdateEvent).toHaveBeenCalledWith(
+        {
           event: expect.objectContaining({
+            ...allDayEvent,
             isAllDay: false,
             startDate: expectedStartDate,
             endDate: expectedEndDate,
           }),
-        }),
+        },
+        true,
       );
     });
 
@@ -149,15 +157,16 @@ describe("useEventDNDActions", () => {
         .add(1, "day")
         .format(dayjs.DateFormat.YEAR_MONTH_DAY_FORMAT);
 
-      expect(mockDispatch).toHaveBeenCalledWith(
-        editEventSlice.actions.request({
-          _id: mockEvent._id,
+      expect(mockUpdateEvent).toHaveBeenCalledWith(
+        {
           event: expect.objectContaining({
+            ...mockEvent,
             isAllDay: true,
             startDate: expectedStartDate,
             endDate: expectedEndDate,
           }),
-        }),
+        },
+        true,
       );
     });
 
@@ -167,7 +176,7 @@ describe("useEventDNDActions", () => {
 
       onDragEnd({ active, over });
 
-      expect(mockDispatch).not.toHaveBeenCalled();
+      expect(mockUpdateEvent).not.toHaveBeenCalled();
     });
   });
 });

packages/web/src/common/hooks/useEventDNDActions.ts

@@ -6,22 +6,30 @@ import {
   ID_GRID_ALLDAY_ROW,
   ID_GRID_MAIN,
 } from "@web/common/constants/web.constants";
+import {
+  CursorItem,
+  isOpenAtCursor,
+  setFloatingReferenceAtCursor,
+} from "@web/common/hooks/useOpenAtCursor";
+import { useUpdateEvent } from "@web/common/hooks/useUpdateEvent";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
-import { editEventSlice } from "@web/ducks/events/slices/event.slice";
-import { useAppDispatch } from "@web/store/store.hooks";
+import { reorderGrid } from "@web/common/utils/dom/grid-organization.util";
+import { getCalendarEventElementFromGrid } from "@web/common/utils/event/event.util";
 import { getSnappedMinutes } from "@web/views/Day/util/agenda/agenda.util";
 
-export function useEventDNDActions() {
-  const dispatch = useAppDispatch();
+const shouldSaveImmediately = () => !isOpenAtCursor(CursorItem.EventForm);
 
-  const updateEvent = useCallback(
-    (event: Schema_GridEvent) => {
-      if (!event._id) return;
+const resetFloatingReference = (eventId: string) => {
+  queueMicrotask(() => {
+    const reference = getCalendarEventElementFromGrid(eventId);
 
-      dispatch(editEventSlice.actions.request({ _id: event._id, event }));
-    },
-    [dispatch],
-  );
+    setFloatingReferenceAtCursor(reference);
+    reorderGrid();
+  });
+};
+
+export function useEventDNDActions() {
+  const updateEvent = useUpdateEvent();
 
   const moveTimedAroundMainGridDayView = useCallback(
     (event: Schema_GridEvent, active: Active, over: Over) => {
@@ -32,14 +40,26 @@ export function useEventDNDActions() {
       const start = dayjs(event.startDate);
       const end = dayjs(event.endDate);
       const durationMinutes = end.diff(start, "minute");
-      const startDate = start.startOf("day").add(snappedMinutes, "minute");
-      const newEndDate = startDate.add(durationMinutes, "minute");
-
-      updateEvent({
-        ...event,
-        startDate: startDate.toISOString(),
-        endDate: newEndDate.toISOString(),
-      });
+      const newStartDate = start.startOf("day").add(snappedMinutes, "minute");
+      const newEndDate = newStartDate.add(durationMinutes, "minute");
+
+      const startChanged = !newStartDate.isSame(start);
+      const endChanged = !newEndDate.isSame(end);
+
+      if (!startChanged && !endChanged) return;
+
+      updateEvent(
+        {
+          event: {
+            ...event,
+            startDate: newStartDate.toISOString(),
+            endDate: newEndDate.toISOString(),
+          },
+        },
+        shouldSaveImmediately(),
+      );
+
+      resetFloatingReference(event._id);
     },
     [updateEvent],
   );
@@ -54,12 +74,19 @@ export function useEventDNDActions() {
       const startDate = start.add(snappedMinutes, "minute");
       const endDate = startDate.add(15, "minutes"); // Default 15 mins
 
-      updateEvent({
-        ...event,
-        isAllDay: false,
-        startDate: startDate.toISOString(),
-        endDate: endDate.toISOString(),
-      });
+      updateEvent(
+        {
+          event: {
+            ...event,
+            isAllDay: false,
+            startDate: startDate.toISOString(),
+            endDate: endDate.toISOString(),
+          },
+        },
+        shouldSaveImmediately(),
+      );
+
+      resetFloatingReference(event._id);
     },
     [updateEvent],
   );
@@ -70,12 +97,19 @@ export function useEventDNDActions() {
       const startDate = dayjs(event.startDate).startOf("day");
       const endDate = dayjs(event.endDate).startOf("day").add(1, "day");
 
-      updateEvent({
-        ...event,
-        isAllDay: true,
-        startDate: startDate.format(dayjs.DateFormat.YEAR_MONTH_DAY_FORMAT),
-        endDate: endDate.format(dayjs.DateFormat.YEAR_MONTH_DAY_FORMAT),
-      });
+      updateEvent(
+        {
+          event: {
+            ...event,
+            isAllDay: true,
+            startDate: startDate.format(dayjs.DateFormat.YEAR_MONTH_DAY_FORMAT),
+            endDate: endDate.format(dayjs.DateFormat.YEAR_MONTH_DAY_FORMAT),
+          },
+        },
+        shouldSaveImmediately(),
+      );
+
+      resetFloatingReference(event._id);
     },
     [updateEvent],
   );