🐛 Fix: Optimistically render when drag-and-dropping event

Fixes [issue](SwitchbackTech#203)

In this commit, whenever we drag and drop a someday event to the grid, we now handle:
- Optimistically removing the someday event from the sidebar
- Optimistically inserting the grid event

We also error handle the optimistic flow and revert if needed

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

@@ -15,6 +15,10 @@ export interface Schema_GridEvent extends Schema_Event {
   siblingsCount?: number;
 }
 
+export interface Schema_OptimisticEvent extends Schema_Event {
+  _id: string; // We guarantee that we have an _id for optimistic events, unlike `Schema_Event`
+}
+
 export interface Schema_SelectedDates {
   startDate: Date;
   startTime: SelectOption<string>;

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

@@ -11,6 +11,7 @@ import { Status } from "@core/errors/status.codes";
 
 import {
   Schema_GridEvent,
+  Schema_OptimisticEvent,
   Schema_SomedayEventsColumn,
 } from "../types/web.event.types";
 import { removeGridFields } from "./grid.util";
@@ -211,8 +212,10 @@ export const prepEvtBeforeSubmit = (draft: Schema_GridEvent) => {
   return event;
 };
 
-export const createOptimisticEvent = (event: Schema_Event) => {
-  const _event: Schema_Event = {
+export const createOptimisticEvent = (
+  event: Schema_Event
+): Schema_OptimisticEvent => {
+  const _event: Schema_OptimisticEvent = {
     ...event,
     _id: `${ID_OPTIMISTIC_PREFIX}-${uuidv4()}`,
   };

packages/web/src/ducks/events/sagas/event.sagas.ts

@@ -46,42 +46,34 @@ import {
 } from "./event.saga.util";
 
 function* convertSomedayEvent({ payload }: Action_ConvertSomedayEvent) {
+  let event = {};
+
   try {
     const { _id, updatedFields } = payload;
 
     const currEvent = (yield select((state: RootState) =>
       selectEventById(state, _id)
     )) as Response_GetEventsSaga;
 
+    // Optimistically convert the event
+    yield put(getSomedayEventsSlice.actions.remove({ _id }));
+    event = createOptimisticEvent({
+      ...currEvent,
+      ...updatedFields,
+    });
+    const optimisticId = event._id;
+    yield* insertOptimisticEvent(event, false);
+
     const updatedEvent = { ...currEvent, ...updatedFields };
     delete updatedEvent.order;
     delete updatedEvent.recurrence;
 
     const res = yield call(EventApi.edit, _id, updatedEvent);
-    const event = res.data as Schema_Event;
-    yield put(getWeekEventsSlice.actions.insert(event._id));
-
-    const normalizedEvent = normalize<Schema_Event>(
-      event,
-      normalizedEventsSchema()
-    );
-    yield put(
-      eventsEntitiesSlice.actions.insert(normalizedEvent.entities.events)
-    );
-
-    const somedayEvents: Response_GetEventsSaga = (yield select(
-      (state: RootState) => selectPaginatedEventsBySectionType(state, "someday")
-    )) as Response_GetEventsSaga;
-
-    const remainingSomedayEvents = somedayEvents.data.filter(
-      (id) => id !== _id
-    );
-    yield put(
-      getSomedayEventsSlice.actions.success({
-        data: remainingSomedayEvents,
-      })
-    );
+    const convertedEvent = res.data as Schema_Event;
+    yield* replaceOptimisticId(optimisticId, convertedEvent._id, false);
   } catch (error) {
+    yield put(eventsEntitiesSlice.actions.delete({ _id: event._id }));
+    yield put(getSomedayEventsSlice.actions.insert(payload._id));
     yield put(getSomedayEventsSlice.actions.error());
     handleError(error as Error);
   }