: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.

Author: victor-enogwe

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";

…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,20 @@ import {
   ID_GRID_ALLDAY_ROW,
   ID_GRID_MAIN,
 } from "@web/common/constants/web.constants";
-import { editEventSlice } from "@web/ducks/events/slices/event.slice";
+import { useUpdateEvent } from "@web/common/hooks/useUpdateEvent";
+import { getEventFromStore } from "@web/common/utils/event/event.util";
 import { useAppDispatch } from "@web/store/store.hooks";
 import { getSnappedMinutes } from "@web/views/Day/util/agenda/agenda.util";
-import { useEventDNDActions } from "../useEventDNDActions";
+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(),
 }));
@@ -23,8 +28,13 @@ jest.mock("@web/views/Day/util/agenda/agenda.util", () => ({
   getSnappedMinutes: jest.fn(),
 }));
 
+jest.mock("@web/common/utils/event/event.util", () => ({
+  getEventFromStore: jest.fn(),
+}));
+
 describe("useEventDNDActions", () => {
   const mockDispatch = jest.fn();
+  const mockUpdateEvent = jest.fn();
   const mockEvent = {
     _id: "event-1",
     startDate: "2023-01-01T10:00:00.000Z",
@@ -35,6 +45,8 @@ describe("useEventDNDActions", () => {
   beforeEach(() => {
     jest.clearAllMocks();
     (useAppDispatch as jest.Mock).mockReturnValue(mockDispatch);
+    (getEventFromStore as jest.Mock).mockReturnValue(mockEvent);
+    (useUpdateEvent as jest.Mock).mockReturnValue(mockUpdateEvent);
   });
 
   it("should register dnd monitor", () => {
@@ -79,14 +91,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 +128,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 +163,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 +182,7 @@ describe("useEventDNDActions", () => {
 
       onDragEnd({ active, over });
 
-      expect(mockDispatch).not.toHaveBeenCalled();
+      expect(mockUpdateEvent).not.toHaveBeenCalled();
     });
   });
 });

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

@@ -6,22 +6,21 @@ import {
   ID_GRID_ALLDAY_ROW,
   ID_GRID_MAIN,
 } from "@web/common/constants/web.constants";
+import { CursorItem, nodeId$, open$ } 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 { getSnappedMinutes } from "@web/views/Day/util/agenda/agenda.util";
 
 export function useEventDNDActions() {
-  const dispatch = useAppDispatch();
+  const updateEvent = useUpdateEvent();
 
-  const updateEvent = useCallback(
-    (event: Schema_GridEvent) => {
-      if (!event._id) return;
+  const saveImmediate = () => {
+    const eventFormOpen = nodeId$.getValue() === CursorItem.EventForm;
+    const openAtCursor = open$.getValue();
+    const saveDraftOnly = eventFormOpen && openAtCursor;
 
-      dispatch(editEventSlice.actions.request({ _id: event._id, event }));
-    },
-    [dispatch],
-  );
+    return !saveDraftOnly;
+  };
 
   const moveTimedAroundMainGridDayView = useCallback(
     (event: Schema_GridEvent, active: Active, over: Over) => {
@@ -32,14 +31,24 @@ 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(),
+          },
+        },
+        saveImmediate(),
+      );
     },
     [updateEvent],
   );
@@ -54,12 +63,17 @@ 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(),
+          },
+        },
+        saveImmediate(),
+      );
     },
     [updateEvent],
   );
@@ -70,12 +84,17 @@ 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),
+          },
+        },
+        saveImmediate(),
+      );
     },
     [updateEvent],
   );

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

@@ -0,0 +1,88 @@
+import { ResizeCallback, ResizeStartCallback } from "re-resizable";
+import { useCallback, useRef, useState } from "react";
+import { Schema_Event, WithCompassId } from "@core/types/event.types";
+import dayjs from "@core/util/date/dayjs";
+import { CursorItem, nodeId$, open$ } from "@web/common/hooks/useOpenAtCursor";
+import { useUpdateEvent } from "@web/common/hooks/useUpdateEvent";
+import { Schema_GridEvent } from "@web/common/types/web.event.types";
+import { setDraft } from "@web/store/events";
+import {
+  MINUTES_PER_SLOT,
+  SLOT_HEIGHT,
+} from "@web/views/Day/constants/day.constants";
+import {
+  roundMinutesToNearestFifteen,
+  roundToNearestFifteenWithinHour,
+} from "@web/views/Day/util/agenda/agenda.util";
+
+export function useEventResizeActions(event: WithCompassId<Schema_Event>) {
+  const updateReduxEvent = useUpdateEvent();
+  const [resizing, setResizing] = useState<boolean>(false);
+  const originalEvent = useRef<WithCompassId<Schema_Event> | null>(event);
+  const _id = event._id;
+
+  const onResizeStart: ResizeStartCallback = useCallback(() => {
+    setResizing(true);
+    setDraft(event);
+    originalEvent.current = event;
+  }, [setResizing, event]);
+
+  const onResize: ResizeCallback = useCallback(
+    (_e, direction, _ref, delta) => {
+      const slotMinute = MINUTES_PER_SLOT / SLOT_HEIGHT;
+      const minutes = roundMinutesToNearestFifteen(delta.height * slotMinute);
+      const start = dayjs(originalEvent.current?.startDate);
+      const end = dayjs(originalEvent.current?.endDate);
+
+      if (direction === "top") {
+        setDraft({
+          _id,
+          ...originalEvent.current,
+          startDate: start.subtract(minutes, "minutes").format(),
+        });
+      } else {
+        setDraft({
+          _id,
+          ...originalEvent.current,
+          endDate: end.add(minutes, "minutes").format(),
+        });
+      }
+    },
+    [_id],
+  );
+
+  const onResizeStop: ResizeCallback = useCallback(() => {
+    setResizing(false);
+    originalEvent.current = null;
+
+    const start = dayjs(event.startDate);
+    const end = dayjs(event.endDate);
+    const snappedStartMinute = roundToNearestFifteenWithinHour(start.minute());
+    const snappedEndMinute = roundToNearestFifteenWithinHour(end.minute());
+
+    const snappedStart = start.minute(snappedStartMinute).second(0);
+    const snappedEnd = end.minute(snappedEndMinute).second(0);
+
+    const eventFormOpen = nodeId$.getValue() === CursorItem.EventForm;
+    const openAtCursor = open$.getValue();
+    const saveDraftOnly = eventFormOpen && openAtCursor;
+
+    setDraft({
+      ...event,
+      startDate: snappedStart.format(),
+      endDate: snappedEnd.format(),
+    });
+
+    if (saveDraftOnly) return;
+
+    updateReduxEvent({
+      event: {
+        ...event,
+        startDate: snappedStart.format(),
+        endDate: snappedEnd.format(),
+      } as Schema_GridEvent,
+    });
+  }, [event, updateReduxEvent]);
+
+  return { onResizeStart, onResize, onResizeStop, resizing };
+}