refactor(web): simplify optimistic rendering (#1399)

* feat(event): introduce WithId type and addId utility function

- Added a new type `WithId` to enhance event objects with a unique `_id` property.
- Implemented the `addId` function to generate and attach a MongoDB ObjectId to events, marking them as optimistic.
- Updated relevant tests to validate the functionality of the new `addId` method and ensure correct event handling during optimistic rendering.

* feat(event): implement pending event handling and cursor updates

- Introduced a new `pendingEventsSlice` to manage events in a pending state, allowing for better user experience during event creation and updates.
- Updated cursor styles and classes in various components to reflect the pending state, enhancing visual feedback for users.
- Refactored event utility functions to replace optimistic checks with pending state checks, ensuring consistent behavior across the application.
- Enhanced context menu and event components to prevent interactions when events are pending, improving usability and preventing errors during event processing.

* refactor(event): replace optimistic event handling with pending state checks

- Removed optimistic ID handling from event types and utility functions, streamlining event management.
- Updated event components and utilities to utilize a new `pendingEventsSlice`, enhancing user experience during event creation and updates.
- Refactored tests to ensure correct behavior when handling pending events, improving overall reliability.
- Adjusted context menus and event interactions to prevent actions on pending events, reducing potential errors.

* refactor(event): update pending event handling and improve state management

- Changed the data structure for pending event IDs from a Set to an array for better compatibility with existing methods.
- Updated event handling logic across various components to utilize the new array-based pending event IDs, ensuring consistent behavior.
- Enhanced the user experience by preventing interactions with events that are in a pending state, reducing potential errors during event processing.
- Refactored related tests to align with the new pending event management approach, improving overall reliability.

* test(event): add unit tests for pending event handling and selectors

- Introduced comprehensive tests for the new pending event management, including sagas and selectors.
- Verified that events are correctly added to and removed from the pending state during creation and editing processes.
- Ensured selectors accurately reflect the pending state of events, improving overall reliability and maintainability of the event handling logic.

* Apply suggestions from code review

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

* test(SomedayEventForm): enhance hotkey functionality tests

- Updated tests for SomedayEventForm to include new hotkey functionalities.
- Mocked API calls for create, edit, and delete operations to ensure isolated testing.
- Added isDraft and isExistingEvent props to test scenarios, improving coverage for event states.
- Refactored test cases to use 'it' instead of 'test' for consistency and clarity.

* test(draft): enhance setupDraftState for improved store handling

- Updated setupDraftState function to accept an optional store parameter, allowing for better test isolation and flexibility.
- Introduced dispatchSpy option to monitor dispatch calls during tests.
- Refactored related tests in SomedayEventForm to utilize the new setupDraftState functionality, improving test coverage and reliability.

* test(draft): simplify setupDraftState and improve test integration

- Refactored setupDraftState to remove the optional store parameter, streamlining the function for better clarity and usage.
- Updated related tests in SomedayEventForm to align with the simplified setupDraftState, enhancing test reliability and maintainability.
- Introduced dispatchSpy directly in the test setup for improved monitoring of dispatch calls during tests.

* test(context-menu): add tests for ContextMenuItems and enhance pending event handling

- Introduced unit tests for ContextMenuItems to verify rendering and interaction behaviors for both pending and non-pending events.
- Updated ContextMenuItems component to disable actions (edit, duplicate, delete) for pending events, improving user experience and preventing errors.
- Enhanced GridEvent and AllDayEvents components to utilize pending event checks, ensuring consistent behavior across the application.
- Added new tests for GridEvent and AllDayEvents to validate rendering and interaction with pending events.

* test(context-menu): refactor tests for ContextMenuItems to use centralized state creation

- Introduced a new utility function, createStateWithPendingEvents, to streamline the setup of test states for pending events.
- Updated existing tests for ContextMenuItems to utilize the new state creation function, improving code clarity and maintainability.
- Removed redundant initial state definitions, enhancing the overall readability of the test cases.

* test(agenda-events): enhance tests for draggable all-day and timed agenda events

- Added tests to verify dragging behavior for events based on their pending state, ensuring that dragging is disabled for pending events and enabled for non-pending events.
- Updated type assertions for interactions to improve type safety in tests.
- Refactored initial state setup in tests to utilize a centralized state creation utility, enhancing clarity and maintainability.

* test(agenda-events): add isDisabled prop to draggable agenda events

- Introduced an `isDisabled` prop to the DraggableAllDayAgendaEvent and DraggableTimedAgendaEvent components to manage event interaction states.
- Updated tests to verify the behavior of draggable events based on the new `isDisabled` prop, ensuring accurate rendering and interaction handling.
- Removed redundant initial state setups in tests, enhancing clarity and maintainability.

* refactor(agenda-events): update AllDayAgendaEvents and TimedAgendaEvents components to utilize pending event IDs

- Refactored AllDayAgendaEvents and TimedAgendaEvents components to include the `isDisabled` prop for event interactions based on pending event IDs.
- Integrated `selectPendingEventIds` selector to manage the disabled state of draggable events, enhancing user experience by preventing interactions with pending events.
- Improved code clarity and maintainability by consolidating event handling logic across both components.

* test(DND): add test for Draggable component's disabled prop behavior

- Introduced a new test to verify the Draggable component's handling of the disabled prop, ensuring it updates correctly on rerender.
- Mocked the useDraggable hook to check calls with both true and false values for the disabled state, enhancing test coverage for dynamic prop changes.
- Removed unnecessary state management from the Draggable component, simplifying its implementation and improving clarity.

* refactor(events): reorganize event slice utilities and update imports

- Moved event-related utility functions (insert, cancel, convert) from someday.slice.ts to a new file event.slice.util.ts for better modularity and clarity.
- Updated imports in day.slice.ts and week.slice.ts to reference the new utility file, ensuring consistent usage across the event slices.
- Improved code organization by consolidating event handling logic into a dedicated utility module.

* refactor(context-menu): streamline action disabling logic in ContextMenuItems

- Introduced a helper function to determine if actions (edit, duplicate, delete) should be disabled based on the pending state.
- Simplified the rendering logic for menu items by utilizing the new helper function, improving code clarity and maintainability.
- Enhanced user experience by ensuring that disabled actions are visually indicated and non-interactive during pending states.

---------

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

Author: tyler-dane

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

@@ -119,6 +119,9 @@ export const createInitialState = (
           dateToResize: null,
         },
       },
+      pendingEvents: {
+        eventIds: [],
+      },
     },
     view: {
       dates: {

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

@@ -1,6 +1,4 @@
-import { ObjectId } from "bson";
 import { z } from "zod";
-import { ID_OPTIMISTIC_PREFIX } from "@core/constants/core.constants";
 import {
   CompassCoreEventSchema,
   CompassEventRecurrence,
@@ -9,22 +7,14 @@ import {
 import { IDSchema } from "@core/types/type.utils";
 import { SelectOption } from "@web/common/types/component.types";
 
-export const optimisticIdSchema = z
-  .string()
-  .refine(
-    (id) =>
-      id.startsWith(`${ID_OPTIMISTIC_PREFIX}-`) &&
-      ObjectId.isValid(id.replace(`${ID_OPTIMISTIC_PREFIX}-`, "")),
-  );
-
 const WebEventRecurrence = z.union([
   z.undefined(),
   CompassEventRecurrence.omit({ rule: true }).extend({ rule: z.null() }),
   CompassEventRecurrence,
 ]);
 
 const WebCoreEventSchema = CompassCoreEventSchema.extend({
-  _id: z.union([IDSchema, optimisticIdSchema]).optional(),
+  _id: IDSchema.optional(),
   recurrence: WebEventRecurrence,
   order: z.number().optional(),
 });
@@ -79,3 +69,9 @@ export interface Schema_SomedayEventsColumn {
     [key: string]: Schema_Event;
   };
 }
+
+/**
+ * Adds an _id property to an object shape
+ * @template TSchema - The base type to add _id to.
+ */
+export type WithId<TSchema> = TSchema & { _id: string };

packages/web/src/common/utils/event/event.util.test.ts

@@ -3,7 +3,7 @@ import {
   Schema_GridEvent,
   Schema_WebEvent,
 } from "@web/common/types/web.event.types";
-import { isEventInRange } from "@web/common/utils/event/event.util";
+import { addId, isEventInRange } from "@web/common/utils/event/event.util";
 import { _assembleGridEvent } from "@web/ducks/events/sagas/saga.util";
 
 describe("isEventInRange", () => {
@@ -53,3 +53,14 @@ describe("_assembleGridEvent", () => {
     expect(result.position.horizontalOrder).toBe(1);
   });
 });
+
+describe("addId", () => {
+  it("should add a raw MongoID and set isOptimistic flag", () => {
+    const event = createMockStandaloneEvent() as Schema_GridEvent;
+    const result = addId(event);
+
+    expect(result._id).toBeDefined();
+    expect(result._id).not.toMatch(/^optimistic-/);
+    expect((result as any).isOptimistic).toBe(true);
+  });
+});

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

@@ -1,10 +1,6 @@
 import { ObjectId } from "bson";
 import { DropResult } from "@hello-pangea/dnd";
-import {
-  ID_OPTIMISTIC_PREFIX,
-  Origin,
-  Priorities,
-} from "@core/constants/core.constants";
+import { Origin, Priorities } from "@core/constants/core.constants";
 import { YEAR_MONTH_DAY_COMPACT_FORMAT } from "@core/constants/date.constants";
 import { Status } from "@core/errors/status.codes";
 import {
@@ -25,8 +21,8 @@ import { isElementInViewport } from "@web/common/context/pointer-position";
 import { PartialMouseEvent } from "@web/common/types/util.types";
 import {
   Schema_GridEvent,
-  Schema_OptimisticEvent,
   Schema_WebEvent,
+  WithId,
 } from "@web/common/types/web.event.types";
 import {
   focusElement,
@@ -43,6 +39,21 @@ export const gridEventDefaultPosition: Schema_GridEvent["position"] = {
   dragOffset: { x: 0, y: 0 },
 };
 
+export const addId = (event: Schema_GridEvent): WithId<Schema_GridEvent> => {
+  const _event = {
+    ...event,
+    _id: new ObjectId().toString(),
+  } as WithId<Schema_GridEvent>;
+
+  Object.defineProperty(_event, "isOptimistic", {
+    value: true,
+    writable: true,
+    configurable: true,
+    enumerable: false,
+  });
+  return _event;
+};
+
 export const assembleDefaultEvent = async (
   draftType?: Categories_Event | null,
   startDate?: string,
@@ -248,26 +259,21 @@ export const isEventInRange = (
   return isStartDateInRange || isEndDateInRange;
 };
 
-export const isOptimisticEvent = (event: Schema_Event) => {
-  const isOptimistic = event._id?.startsWith(ID_OPTIMISTIC_PREFIX) || false;
-  return isOptimistic;
-};
-
 export const getEventCursorStyle = (
   isDragging: boolean,
-  isOptimistic: boolean,
+  isPending = false,
 ): string => {
   if (isDragging) return "move";
-  if (isOptimistic) return "wait";
+  if (isPending) return "wait";
   return "pointer";
 };
 
 export const getEventCursorClass = (
   isDragging: boolean,
-  isOptimistic: boolean,
+  isPending = false,
 ): string => {
   if (isDragging) return "cursor-move";
-  if (isOptimistic) return "cursor-wait";
+  if (isPending) return "cursor-wait";
   return "cursor-pointer";
 };
 
@@ -291,17 +297,6 @@ export const prepEvtAfterDraftDrop = (
   return event;
 };
 
-export const replaceIdWithOptimisticId = (
-  event: Schema_GridEvent,
-): Schema_OptimisticEvent => {
-  const _event = {
-    ...event,
-    _id: `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`,
-  };
-
-  return _event;
-};
-
 const _assembleBaseEvent = (
   userId: string,
   event: Partial<Schema_Event>,

packages/web/src/common/utils/event/someday.event.util.test.ts

@@ -1,7 +1,6 @@
 import { ObjectId } from "bson";
 import { faker } from "@faker-js/faker";
 import {
-  ID_OPTIMISTIC_PREFIX,
   Origin,
   Priorities,
   RRULE,
@@ -333,14 +332,14 @@ describe("computeRelativeEventDateRange", () => {
     jest.useRealTimers();
   });
 
-  describe("Optimistic Event IDs", () => {
-    it("should handle events with optimistic IDs", () => {
-      const optimisticId = `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`;
+  describe("Event IDs", () => {
+    it("should handle events with IDs", () => {
+      const eventId = new ObjectId().toString();
       // Add all required properties for Schema_SomedayEvent
       const events = {
-        [optimisticId]: {
+        [eventId]: {
           ...baseEvent,
-          _id: optimisticId,
+          _id: eventId,
           startDate: "2024-03-19",
           endDate: "2024-03-20",
           isSomeday: true,
@@ -358,20 +357,20 @@ describe("computeRelativeEventDateRange", () => {
 
       const result = categorizeSomedayEvents(events, weekDates);
 
-      expect(result.columns[COLUMN_WEEK].eventIds).toContain(optimisticId);
-      expect(result.columns[COLUMN_MONTH].eventIds).not.toContain(optimisticId);
+      expect(result.columns[COLUMN_WEEK].eventIds).toContain(eventId);
+      expect(result.columns[COLUMN_MONTH].eventIds).not.toContain(eventId);
       expect(result.columnOrder).toEqual([COLUMN_WEEK, COLUMN_MONTH]);
     });
 
-    it("should maintain order for events with optimistic IDs", () => {
-      const optimisticIdA = `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`;
-      const optimisticIdB = `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`;
+    it("should maintain order for events with IDs", () => {
+      const eventIdA = new ObjectId().toString();
+      const eventIdB = new ObjectId().toString();
 
       // Add all required properties for Schema_SomedayEvent
       const events = {
-        [optimisticIdA]: {
+        [eventIdA]: {
           ...baseEvent,
-          _id: optimisticIdA,
+          _id: eventIdA,
           startDate: "2024-03-19",
           endDate: "2024-03-20",
           order: 2,
@@ -380,9 +379,9 @@ describe("computeRelativeEventDateRange", () => {
           priority: Priorities.UNASSIGNED,
           user: "test-user",
         },
-        [optimisticIdB]: {
+        [eventIdB]: {
           ...baseEvent,
-          _id: optimisticIdB,
+          _id: eventIdB,
           startDate: "2024-03-19",
           endDate: "2024-03-20",
           order: 1,
@@ -401,27 +400,27 @@ describe("computeRelativeEventDateRange", () => {
       const result = categorizeSomedayEvents(events, weekDates);
 
       expect(result.columns[COLUMN_WEEK].eventIds).toEqual([
-        optimisticIdB,
-        optimisticIdA,
+        eventIdB,
+        eventIdA,
       ]);
     });
 
-    it("should assign sequential orders for optimistic events without order", () => {
-      const optimisticIdA = `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`;
-      const optimisticIdB = `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`;
+    it("should assign sequential orders for events without order", () => {
+      const eventIdA = new ObjectId().toString();
+      const eventIdB = new ObjectId().toString();
       // Add all required properties for Schema_Event
       const events = [
         {
           ...baseEvent,
-          _id: optimisticIdA,
+          _id: eventIdA,
           isSomeday: true,
           origin: Origin.COMPASS,
           priority: Priorities.UNASSIGNED,
           user: "test-user",
         },
         {
           ...baseEvent,
-          _id: optimisticIdB,
+          _id: eventIdB,
           isSomeday: true,
           origin: Origin.COMPASS,
           priority: Priorities.UNASSIGNED,
@@ -437,15 +436,15 @@ describe("computeRelativeEventDateRange", () => {
       ]);
     });
 
-    it("should fill gaps in order sequence for optimistic events", () => {
-      const optimisticIdA = `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`;
-      const optimisticIdB = `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`;
-      const optimisticIdC = `${ID_OPTIMISTIC_PREFIX}-${new ObjectId().toString()}`;
+    it("should fill gaps in order sequence for events", () => {
+      const eventIdA = new ObjectId().toString();
+      const eventIdB = new ObjectId().toString();
+      const eventIdC = new ObjectId().toString();
       // Add all required properties for Schema_Event
       const events = [
         {
           ...baseEvent,
-          _id: optimisticIdA,
+          _id: eventIdA,
           order: 0,
           isSomeday: true,
           origin: Origin.COMPASS,
@@ -454,15 +453,15 @@ describe("computeRelativeEventDateRange", () => {
         },
         {
           ...baseEvent,
-          _id: optimisticIdB,
+          _id: eventIdB,
           isSomeday: true,
           origin: Origin.COMPASS,
           priority: Priorities.UNASSIGNED,
           user: "test-user",
         }, // Should get order 1
         {
           ...baseEvent,
-          _id: optimisticIdC,
+          _id: eventIdC,
           order: 3,
           isSomeday: true,
           origin: Origin.COMPASS,