refactor(web): simplify optimistic rendering

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,16 @@ 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(),
+    isOptimistic: true,
+  } as WithId<Schema_GridEvent>;
+
+  return _event;
+};
+
 export const assembleDefaultEvent = async (
   draftType?: Categories_Event | null,
   startDate?: string,
@@ -248,26 +254,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 +292,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,

packages/web/src/components/ContextMenu/ContextMenuItems.tsx

@@ -15,6 +15,8 @@ import {
   TooltipWrapper,
 } from "@web/components/ContextMenu/styled";
 import IconButton from "@web/components/IconButton/IconButton";
+import { selectIsEventPending } from "@web/ducks/events/selectors/pending.selectors";
+import { useAppSelector } from "@web/store/store.hooks";
 import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
 import { useSidebarContext } from "@web/views/Calendar/components/Draft/sidebar/context/useSidebarContext";
 
@@ -36,6 +38,9 @@ export function ContextMenuItems({ event, close }: ContextMenuItemsProps) {
   const { setDraft } = setters;
 
   const sidebarContext = useSidebarContext(true);
+  const isPending = useAppSelector((state) =>
+    selectIsEventPending(state, event._id!),
+  );
 
   const [selectedPriority, setSelectedPriority] = useState(event.priority);
 
@@ -61,12 +66,14 @@ export function ContextMenuItems({ event, close }: ContextMenuItemsProps) {
   ];
 
   const handleEditPriority = (priority: Priorities) => {
+    if (isPending) return;
     setSelectedPriority(priority);
     submit({ ...event, priority });
     close();
   };
 
   const handleEdit = () => {
+    if (isPending) return;
     if (!event.isSomeday) {
       setDraft(assembleGridEvent(event));
       openForm();
@@ -124,6 +131,10 @@ export function ContextMenuItems({ event, close }: ContextMenuItemsProps) {
               color={priority.color}
               selected={selectedPriority === priority.value}
               onClick={() => handleEditPriority(priority.value)}
+              style={{
+                opacity: isPending ? 0.5 : 1,
+                cursor: isPending ? "wait" : "pointer",
+              }}
             />
             <TooltipText>{priority.label}</TooltipText>
           </TooltipWrapper>
@@ -133,9 +144,22 @@ export function ContextMenuItems({ event, close }: ContextMenuItemsProps) {
         <MenuItem
           key={item.id}
           onClick={() => {
+            if (isPending && (item.id === "edit" || item.id === "duplicate")) {
+              return;
+            }
             item.onClick();
             close();
           }}
+          style={{
+            opacity:
+              isPending && (item.id === "edit" || item.id === "duplicate")
+                ? 0.5
+                : 1,
+            cursor:
+              isPending && (item.id === "edit" || item.id === "duplicate")
+                ? "wait"
+                : "pointer",
+          }}
         >
           {item.icon}
           <MenuItemLabel>{item.label}</MenuItemLabel>

packages/web/src/components/ContextMenu/GridContextMenuWrapper.tsx

@@ -10,7 +10,6 @@ import { Categories_Event } from "@core/types/event.types";
 import {
   assembleGridEvent,
   getCalendarEventIdFromElement,
-  isOptimisticEvent,
 } from "@web/common/utils/event/event.util";
 import { selectDraft } from "@web/ducks/events/selectors/draft.selectors";
 import {
@@ -33,6 +32,9 @@ export const ContextMenuWrapper = ({
   const timedEvents = useAppSelector(selectGridEvents);
   const allDayEvents = useAppSelector(selectAllDayEvents);
   const somedayEvents = useAppSelector(selectSomedayEvents);
+  const pendingEventIds = useAppSelector(
+    (state) => state.events.pendingEvents.eventIds,
+  );
 
   const draftEvent = useAppSelector(selectDraft);
 
@@ -82,7 +84,8 @@ export const ContextMenuWrapper = ({
       e.preventDefault();
 
       const event = getSelectedEvent(eventId);
-      if (isOptimisticEvent(event)) return;
+      const isPending = pendingEventIds.has(eventId);
+      if (isPending) return;
 
       // Create a virtual element where the user clicked
       refs.setReference({