✨ feat(edit-recurrence): create recurring event update scope selection component (#825)

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

* ✨ feat(edit-recurrence): enable basic recurring events edit

Author: victor-enogwe

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

@@ -41,6 +41,10 @@ export const mockBSON = () => {
       toString() {
         return crypto.randomUUID();
       }
+
+      static isValid(value?: string) {
+        return value?.length === 36;
+      }
     },
   }));
 };

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/components/Button/styled.ts

@@ -27,22 +27,26 @@ export const PriorityButton = styled(Btn)<PalletteProps>`
 
   &:hover {
     background: ${({ theme }) => theme.color.bg.primary};
-    color: ${({ color }) => brighten(color)};
+    color: ${({ color }) => brighten(color!)};
     transition: background-color 0.5s;
     transition: color 0.55s;
   }
 `;
 interface CustomProps {
   priority: Priority;
   minWidth: number;
+  disabled?: boolean;
 }
 
 export const StyledSaveBtn = styled(PriorityButton)<CustomProps>`
   background: ${({ priority }) => darken(colorByPriority[priority])};
   color: ${({ theme }) => theme.color.text.dark}
-      
+
   min-width: ${({ minWidth }) => minWidth}px;
 
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
+
   &:focus {
     border: 2px solid ${({ theme }) => theme.color.border.primaryDark};
   }

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

@@ -6,17 +6,17 @@ import { colorByPriority } from "@web/common/styles/theme.util";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { assembleGridEvent } from "@web/common/utils/event.util";
 import { getSomedayEventCategory } from "@web/common/utils/someday.util";
-import IconButton from "@web/components/IconButton/IconButton";
-import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
-import { useSidebarContext } from "@web/views/Calendar/components/Draft/sidebar/context/useSidebarContext";
 import {
   MenuItem,
   MenuItemLabel,
   PriorityCircle,
   PriorityContainer,
   TooltipText,
   TooltipWrapper,
-} from "./styled";
+} from "@web/components/ContextMenu/styled";
+import IconButton from "@web/components/IconButton/IconButton";
+import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
+import { useSidebarContext } from "@web/views/Calendar/components/Draft/sidebar/context/useSidebarContext";
 
 export interface ContextMenuAction {
   id: string;
@@ -31,8 +31,8 @@ interface ContextMenuItemsProps {
 }
 
 export function ContextMenuItems({ event, close }: ContextMenuItemsProps) {
-  const { actions, setters } = useDraftContext();
-  const { openForm, deleteEvent, duplicateEvent, submit } = actions;
+  const { actions, setters, confirmation } = useDraftContext();
+  const { openForm, duplicateEvent, submit } = actions;
   const { setDraft } = setters;
 
   const sidebarContext = useSidebarContext(true);
@@ -80,6 +80,8 @@ export function ContextMenuItems({ event, close }: ContextMenuItemsProps) {
     }
   };
 
+  const { onDelete } = confirmation;
+
   const menuActions: ContextMenuAction[] = [
     {
       id: "edit",
@@ -104,7 +106,7 @@ export function ContextMenuItems({ event, close }: ContextMenuItemsProps) {
     {
       id: "delete",
       label: "Delete",
-      onClick: deleteEvent,
+      onClick: onDelete,
       icon: (
         <IconButton>
           <Trash />

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

@@ -11,8 +11,8 @@ const EventApi = {
   create: (event: Schema_Event | Schema_Event[]) => {
     return CompassApi.post(`/event`, event);
   },
-  delete: (_id: string) => {
-    return CompassApi.delete(`/event/${_id}`);
+  delete: (_id: string, applyTo?: RecurringEventUpdateScope) => {
+    return CompassApi.delete(`/event/${_id}?applyTo=${applyTo}`);
   },
   edit: (
     _id: string,

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

@@ -79,6 +79,7 @@ interface Payload_ConvertTimedEvent {
 
 interface Payload_DeleteEvent {
   _id: string;
+  applyTo?: RecurringEventUpdateScope;
 }
 
 export interface Payload_EditEvent {

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

@@ -109,7 +109,7 @@ export function* deleteEvent({ payload }: Action_DeleteEvent) {
 
     const isInDb = !event._id.startsWith(ID_OPTIMISTIC_PREFIX);
     if (isInDb) {
-      yield call(EventApi.delete, payload._id);
+      yield call(EventApi.delete, payload._id, payload.applyTo);
     }
 
     yield put(deleteEventSlice.actions.success());

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

@@ -55,7 +55,7 @@ export function* deleteSomedayEvent({ payload }: Action_DeleteEvent) {
   try {
     yield put(eventsEntitiesSlice.actions.delete(payload));
 
-    yield call(EventApi.delete, payload._id);
+    yield call(EventApi.delete, payload._id, payload.applyTo);
   } catch (error) {
     yield put(getSomedayEventsSlice.actions.error());
     handleError(error as Error);

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/Calendar.tsx

@@ -4,6 +4,7 @@ import { ContextMenuWrapper } from "@web/components/ContextMenu/GridContextMenuW
 import { FlexDirections } from "@web/components/Flex/styled";
 import { selectIsSidebarOpen } from "@web/ducks/events/selectors/view.selectors";
 import { useAppSelector } from "@web/store/store.hooks";
+import { RecurringEventUpdateScopeDialog } from "@web/views/Forms/EventForm/RecurringEventUpdateScopeDialog";
 import { CmdPalette } from "../CmdPalette";
 import { RootProps } from "./calendarView.types";
 import { Dedication } from "./components/Dedication";
@@ -104,6 +105,8 @@ export const CalendarView = () => {
             </StyledCalendar>
           </Shortcuts>
         </SidebarDraftProvider>
+
+        <RecurringEventUpdateScopeDialog />
       </DraftProvider>
     </Styled>
   );