✨ feat(edit-recurrence): add recurring event update scope dialog

Author: victor-enogwe

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

@@ -1,49 +1,22 @@
-import dayjs, { Dayjs } from "dayjs";
-import isBetween from "dayjs/plugin/isBetween";
-import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
-import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
 import { v4 as uuidv4 } from "uuid";
 import { DropResult } from "@hello-pangea/dnd";
 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 { Categories_Event, Schema_Event } from "@core/types/event.types";
+import dayjs, { Dayjs } from "@core/util/date/dayjs";
 import { validateEvent } from "@core/validators/event.validator";
 import { getUserId } from "@web/auth/auth.util";
-import { PartialMouseEvent } from "@web/common/types/util.types";
-import { validateSomedayEvent } from "@web/common/validators/someday.event.validator";
 import {
   DATA_EVENT_ELEMENT_ID,
   ID_OPTIMISTIC_PREFIX,
-} from "../constants/web.constants";
+} from "@web/common/constants/web.constants";
+import { PartialMouseEvent } from "@web/common/types/util.types";
 import {
   Schema_GridEvent,
   Schema_OptimisticEvent,
-} from "../types/web.event.types";
-
-dayjs.extend(isSameOrAfter);
-dayjs.extend(isSameOrBefore);
-dayjs.extend(isBetween);
-
-export const assembleBaseEvent = (
-  userId: string,
-  event: Partial<Schema_Event>,
-): Schema_Event => {
-  const baseEvent = {
-    _id: event._id,
-    title: event.title || "",
-    description: event.description || "",
-    startDate: event.startDate,
-    endDate: event.endDate,
-    user: userId,
-    isAllDay: event.isAllDay || false,
-    isSomeday: event.isSomeday || false,
-    origin: event.origin || Origin.COMPASS,
-    priority: event.priority || Priorities.UNASSIGNED,
-  };
-
-  return baseEvent;
-};
+} from "@web/common/types/web.event.types";
+import { validateSomedayEvent } from "@web/common/validators/someday.event.validator";
 
 const gridEventDefaultPosition = {
   isOverlapping: false,
@@ -55,7 +28,7 @@ const gridEventDefaultPosition = {
 };
 
 export const assembleDefaultEvent = async (
-  draftType: Categories_Event,
+  draftType?: Categories_Event | null,
   startDate?: string,
   endDate?: string,
 ): Promise<Schema_Event | Schema_GridEvent> => {
@@ -192,7 +165,7 @@ export const isOptimisticEvent = (event: Schema_Event) => {
 
 export const prepEvtAfterDraftDrop = (
   category: Categories_Event,
-  dropItem: DropResult,
+  dropItem: DropResult & Schema_Event,
   dates: { startDate: string; endDate: string },
 ) => {
   const baseEvent = assembleDefaultEvent(category);
@@ -260,10 +233,10 @@ const _assembleBaseEvent = (
     startDate: event.startDate,
     endDate: event.endDate,
     user: userId,
-    isAllDay: event.isAllDay || false,
-    isSomeday: event.isSomeday || false,
-    origin: event.origin || Origin.COMPASS,
-    priority: event.priority || Priorities.UNASSIGNED,
+    isAllDay: event.isAllDay ?? false,
+    isSomeday: event.isSomeday ?? false,
+    origin: event.origin ?? Origin.COMPASS,
+    priority: event.priority ?? Priorities.UNASSIGNED,
   };
 
   return baseEvent;

packages/web/src/ducks/events/slices/event.slice.ts

@@ -33,7 +33,7 @@ export const deleteEventSlice = createAsyncSlice<{ _id: string }>({
 
 export const editEventSlice = createAsyncSlice<Payload_EditEvent>({
   name: "editEvent",
-  initialState: {},
+  initialState: {} as unknown as undefined,
   reducers: {
     migrate: () => {},
   },

packages/web/src/views/Calendar/components/Draft/grid/GridDraft.tsx

@@ -1,17 +1,21 @@
-import React, { FC, MouseEvent } from "react";
+import React, { FC, MouseEvent, useCallback, useMemo, useState } from "react";
 import { FloatingFocusManager } from "@floating-ui/react";
 import { YEAR_MONTH_DAY_FORMAT } from "@core/constants/date.constants";
-import { Categories_Event } from "@core/types/event.types";
+import {
+  Categories_Event,
+  RecurringEventUpdateScope,
+} from "@core/types/event.types";
 import { PartialMouseEvent } from "@web/common/types/util.types";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { getEventDragOffset } from "@web/common/utils/event.util";
+import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
+import { GridEvent } from "@web/views/Calendar/components/Event/Grid";
 import { useGridEventMouseDown } from "@web/views/Calendar/hooks/grid/useGridEventMouseDown";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { EventForm } from "@web/views/Forms/EventForm/EventForm";
+import { RecurringEventUpdateScopeDialog } from "@web/views/Forms/EventForm/RecurringEventUpdateScopeDialog";
 import { StyledFloatContainer } from "@web/views/Forms/SomedayEventForm/styled";
-import { GridEvent } from "../../Event/Grid";
-import { useDraftContext } from "../context/useDraftContext";
 
 interface Props {
   draft: Schema_GridEvent;
@@ -23,8 +27,9 @@ interface Props {
 
 export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
   const { actions, setters, state } = useDraftContext();
-  const { discard, deleteEvent, duplicateEvent, submit, startDragging } =
-    actions;
+  const { discard, deleteEvent, duplicateEvent, submit } = actions;
+  const { startDragging, isRecurrenceChanged } = actions;
+  const { isInstance, isRecurrence, isEventDirty } = actions;
   const { setDraft, setDateBeingChanged, setIsResizing } = setters;
   const { draft, isDragging, formProps, isFormOpen, isResizing } = state;
   const { context, getReferenceProps, getFloatingProps, x, y, refs, strategy } =
@@ -55,6 +60,46 @@ export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
     startDragging();
   };
 
+  const [
+    isRecurrenceUpdateScopeDialogOpen,
+    setRecurrenceUpdateScopeDialogOpen,
+  ] = useState<boolean>(false);
+
+  const [finalDraft, setFinalDraft] = useState<Schema_GridEvent | null>(null);
+
+  const onUpdateScopeChange = useCallback(
+    (applyTo: RecurringEventUpdateScope) => {
+      if (finalDraft) {
+        submit(finalDraft, applyTo);
+        setFinalDraft(null);
+        discard();
+      }
+    },
+    [finalDraft, submit, setFinalDraft, discard],
+  );
+
+  const onSubmit = useCallback(
+    async (_draft: Schema_GridEvent) => {
+      if (isEventDirty(_draft) && isRecurrence(_draft)) {
+        setFinalDraft(_draft);
+
+        return setRecurrenceUpdateScopeDialogOpen(true);
+      }
+
+      submit(_draft);
+      discard();
+    },
+    [
+      submit,
+      setRecurrenceUpdateScopeDialogOpen,
+      isRecurrenceChanged,
+      setFinalDraft,
+      isEventDirty,
+      isRecurrence,
+      discard,
+    ],
+  );
+
   const { onMouseDown } = useGridEventMouseDown(
     draft?.isAllDay ? Categories_Event.ALLDAY : Categories_Event.TIMED,
     handleClick,
@@ -78,7 +123,7 @@ export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
           onMouseDown(e, event);
         }}
         onScalerMouseDown={(
-          event: Schema_GridEvent,
+          _event: Schema_GridEvent,
           e: MouseEvent,
           dateToChange: "startDate" | "endDate",
         ) => {
@@ -108,13 +153,25 @@ export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
                 onConvert={onConvert}
                 onDelete={deleteEvent}
                 onDuplicate={duplicateEvent}
-                onSubmit={(_draft: Schema_GridEvent) => submit(_draft)}
+                onSubmit={onSubmit}
                 setEvent={setDraft}
               />
             </StyledFloatContainer>
           </FloatingFocusManager>
         )}
       </div>
+
+      {useMemo(
+        () => (
+          <RecurringEventUpdateScopeDialog
+            open={isRecurrenceUpdateScopeDialogOpen}
+            priority={draft.priority}
+            onOpenChange={setRecurrenceUpdateScopeDialogOpen}
+            onSubmit={onUpdateScopeChange}
+          />
+        ),
+        [isRecurrenceUpdateScopeDialogOpen, setRecurrenceUpdateScopeDialogOpen],
+      )}
     </>
   );
 };