🐛 fix(recurring-events): fix ui recurring event transitions

victor-enogwe · victor-enogwe · commit b1726aa0a7e6 · 2025-10-09T11:18:03.000+01:00
diff --git a/packages/web/src/common/parsers/dirty.parser.ts b/packages/web/src/common/parsers/dirty.parser.ts
@@ -43,9 +43,9 @@ export class DirtyParser {
   }
 
   /**
-   * Private Static method to check if recurrence has changed
+   * Public Static method to check if recurrence has changed
    */
-  private static recurrenceChanged(
+  public static recurrenceChanged(
     curr: Schema_WebEvent,
     orig: Schema_WebEvent,
   ): boolean {
diff --git a/packages/web/src/components/ConditionalRender/ConditionalRender.tsx b/packages/web/src/components/ConditionalRender/ConditionalRender.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export function ConditionalRender({
+  condition,
+  children,
+}: {
+  condition: boolean;
+  children: React.ReactNode;
+}) {
+  if (!condition) return null;
+
+  return <React.Fragment>{children}</React.Fragment>;
+}
diff --git a/packages/web/src/views/Calendar/Calendar.tsx b/packages/web/src/views/Calendar/Calendar.tsx
@@ -4,24 +4,24 @@ 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 { RootProps } from "@web/views/Calendar/calendarView.types";
+import { Dedication } from "@web/views/Calendar/components/Dedication";
+import { Draft } from "@web/views/Calendar/components/Draft/Draft";
+import { DraftProvider } from "@web/views/Calendar/components/Draft/context/DraftProvider";
+import { SidebarDraftProvider } from "@web/views/Calendar/components/Draft/sidebar/context/SidebarDraftProvider";
+import { Grid } from "@web/views/Calendar/components/Grid/";
+import { Header } from "@web/views/Calendar/components/Header/Header";
+import { Shortcuts } from "@web/views/Calendar/components/Shortcuts";
+import { Sidebar } from "@web/views/Calendar/components/Sidebar/Sidebar";
+import { useDateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
+import { useGridLayout } from "@web/views/Calendar/hooks/grid/useGridLayout";
+import { useScroll } from "@web/views/Calendar/hooks/grid/useScroll";
+import { useRefresh } from "@web/views/Calendar/hooks/useRefresh";
+import { useToday } from "@web/views/Calendar/hooks/useToday";
+import { useWeek } from "@web/views/Calendar/hooks/useWeek";
+import { Styled, StyledCalendar } from "@web/views/Calendar/styled";
+import { CmdPalette } from "@web/views/CmdPalette";
 import { RecurringEventUpdateScopeDialog } from "@web/views/Forms/EventForm/RecurringEventUpdateScopeDialog";
-import { CmdPalette } from "../CmdPalette";
-import { RootProps } from "./calendarView.types";
-import { Dedication } from "./components/Dedication";
-import { Draft } from "./components/Draft/Draft";
-import { DraftProvider } from "./components/Draft/context/DraftProvider";
-import { SidebarDraftProvider } from "./components/Draft/sidebar/context/SidebarDraftProvider";
-import { Grid } from "./components/Grid/";
-import { Header } from "./components/Header/Header";
-import { Shortcuts } from "./components/Shortcuts";
-import { Sidebar } from "./components/Sidebar/Sidebar";
-import { useDateCalcs } from "./hooks/grid/useDateCalcs";
-import { useGridLayout } from "./hooks/grid/useGridLayout";
-import { useScroll } from "./hooks/grid/useScroll";
-import { useRefresh } from "./hooks/useRefresh";
-import { useToday } from "./hooks/useToday";
-import { useWeek } from "./hooks/useWeek";
-import { Styled, StyledCalendar } from "./styled";
 
 export const CalendarView = () => {
   const isSidebarOpen = useAppSelector(selectIsSidebarOpen);
@@ -104,9 +104,9 @@ export const CalendarView = () => {
               </ContextMenuWrapper>
             </StyledCalendar>
           </Shortcuts>
-        </SidebarDraftProvider>
 
-        <RecurringEventUpdateScopeDialog />
+          <RecurringEventUpdateScopeDialog />
+        </SidebarDraftProvider>
       </DraftProvider>
     </Styled>
   );
diff --git a/packages/web/src/views/Calendar/components/Draft/hooks/state/useDraftConfirmation.ts b/packages/web/src/views/Calendar/components/Draft/hooks/state/useDraftConfirmation.ts
@@ -40,6 +40,9 @@ export const useDraftConfirmation = ({
       const isRecurringEvent = isRecurrence();
       const instanceEvent = isInstance();
       const toStandAlone = instanceEvent && rule === null;
+      const applyTo = toStandAlone
+        ? RecurringEventUpdateScope.ALL_EVENTS
+        : RecurringEventUpdateScope.THIS_EVENT;
 
       if (!toStandAlone && isRecurringEvent) {
         setFinalDraft(_draft);
@@ -54,7 +57,7 @@ export const useDraftConfirmation = ({
         if (!confirmed) return;
       }
 
-      submit(_draft);
+      submit(_draft, applyTo);
       discard();
     },
     [
diff --git a/packages/web/src/views/Calendar/components/Draft/sidebar/hooks/useSidebarActions.ts b/packages/web/src/views/Calendar/components/Draft/sidebar/hooks/useSidebarActions.ts
@@ -1,4 +1,5 @@
-import { useCallback } from "react";
+import { ObjectId } from "bson";
+import { useCallback, useMemo } from "react";
 import { DropResult } from "@hello-pangea/dnd";
 import {
   SOMEDAY_MONTH_LIMIT_MSG,
@@ -18,7 +19,9 @@ import {
   COLUMN_WEEK,
   ID_SOMEDAY_DRAFT,
 } from "@web/common/constants/web.constants";
+import { DirtyParser } from "@web/common/parsers/dirty.parser";
 import { Coordinates } from "@web/common/types/util.types";
+import { Schema_WebEvent } from "@web/common/types/web.event.types";
 import {
   computeCurrentEventDateRange,
   computeRelativeEventDateRange,
@@ -82,6 +85,10 @@ export const useSidebarActions = (
   const draftType = useAppSelector(selectDraftCategory);
   const activity = useAppSelector(selectDraftActivity);
 
+  const isInstance = useMemo((): boolean => {
+    return ObjectId.isValid(reduxDraft?.recurrence?.eventId ?? "");
+  }, [reduxDraft?.recurrence?.eventId]);
+
   const viewStart = dayjs(start);
   const viewEnd = dayjs(end);
 
@@ -385,11 +392,21 @@ export const useSidebarActions = (
 
     const isExisting = _event._id;
     if (isExisting) {
+      const recurrenceChanged = DirtyParser.recurrenceChanged(
+        _event as Schema_WebEvent,
+        reduxDraft!,
+      );
+
+      const applyTo =
+        isInstance && recurrenceChanged
+          ? RecurringEventUpdateScope.ALL_EVENTS
+          : RecurringEventUpdateScope.THIS_EVENT;
+
       dispatch(
         editEventSlice.actions.request({
           _id: _event._id,
           event: _event,
-          applyTo: RecurringEventUpdateScope.THIS_EVENT,
+          applyTo,
         }),
       );
     } else {
diff --git a/packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/RecurrenceSection.tsx b/packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/RecurrenceSection.tsx
@@ -1,19 +1,23 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import { Priorities } from "@core/constants/core.constants";
-import { Schema_Event } from "@core/types/event.types";
 import { hoverColorByPriority } from "@web/common/styles/theme.util";
+import {
+  Schema_GridEvent,
+  Schema_WebEvent,
+} from "@web/common/types/web.event.types";
+import { ConditionalRender } from "@web/components/ConditionalRender/ConditionalRender";
 import { FlexDirections } from "@web/components/Flex/styled";
+import { EndsOnDate } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/EndsOnDate";
+import { RecurrenceIntervalSelect } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/RecurrenceIntervalSelect";
+import { RecurrenceToggle } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/RecurrenceToggle";
+import { WeekDays } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/WeekDays";
 import { StyledRepeatRow } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/styled";
 import { useRecurrence } from "@web/views/Forms/EventForm/DateControlsSection/RecurrenceSection/useRecurrence/useRecurrence";
-import { EndsOnDate } from "./components/EndsOnDate";
-import { RecurrenceIntervalSelect } from "./components/RecurrenceIntervalSelect";
-import { RecurrenceToggle } from "./components/RecurrenceToggle";
-import { WeekDays } from "./components/WeekDays";
 
 export interface RecurrenceSectionProps {
   bgColor: string;
-  event: Schema_Event;
-  setEvent: Dispatch<SetStateAction<Schema_Event | null>>;
+  event: Schema_WebEvent | Schema_GridEvent;
+  setEvent: Dispatch<SetStateAction<Schema_WebEvent | Schema_GridEvent | null>>;
 }
 
 export const RecurrenceSection = ({
@@ -25,48 +29,37 @@ export const RecurrenceSection = ({
   const { setInterval, setFreq, setWeekDays, setUntil } = recurrenceHook;
   const { weekDays, interval, freq, until, toggleRecurrence } = recurrenceHook;
   const { hasRecurrence } = recurrenceHook;
-  const [showForm, setShowForm] = useState(() => hasRecurrence);
-
-  useEffect(() => {
-    setShowForm(hasRecurrence);
-  }, [hasRecurrence, event?._id]);
-
-  const shouldShowForm = hasRecurrence && showForm;
 
   return (
     <StyledRepeatRow direction={FlexDirections.COLUMN}>
       <RecurrenceToggle
         hasRecurrence={hasRecurrence}
         toggleRecurrence={toggleRecurrence}
-        showForm={showForm}
-        onToggleForm={() => setShowForm((value) => !value)}
       />
 
-      {shouldShowForm && (
-        <>
-          <RecurrenceIntervalSelect
-            bgColor={bgColor}
-            initialValue={interval}
-            frequency={freq}
-            onChange={setInterval}
-            onFreqSelect={setFreq}
-            min={1}
-            max={12}
-          />
+      <ConditionalRender condition={hasRecurrence}>
+        <RecurrenceIntervalSelect
+          bgColor={bgColor}
+          initialValue={interval}
+          frequency={freq}
+          onChange={setInterval}
+          onFreqSelect={setFreq}
+          min={1}
+          max={12}
+        />
 
-          <WeekDays bgColor={bgColor} value={weekDays} onChange={setWeekDays} />
+        <WeekDays bgColor={bgColor} value={weekDays} onChange={setWeekDays} />
 
-          <EndsOnDate
-            bgColor={bgColor}
-            inputColor={
-              hoverColorByPriority[event.priority ?? Priorities.UNASSIGNED]
-            }
-            until={until}
-            minDate={event.endDate}
-            setUntil={setUntil}
-          />
-        </>
-      )}
+        <EndsOnDate
+          bgColor={bgColor}
+          inputColor={
+            hoverColorByPriority[event.priority ?? Priorities.UNASSIGNED]
+          }
+          until={until}
+          minDate={event.endDate}
+          setUntil={setUntil}
+        />
+      </ConditionalRender>
     </StyledRepeatRow>
   );
 };
diff --git a/packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/RecurrenceToggle.tsx b/packages/web/src/views/Forms/EventForm/DateControlsSection/RecurrenceSection/components/RecurrenceToggle.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useCallback } from "react";
+import { ConditionalRender } from "@web/components/ConditionalRender/ConditionalRender";
 import { RepeatIcon } from "@web/components/Icons/Repeat";
 import {
   StyledRepeatContainer,
@@ -10,59 +11,49 @@ import {
 export interface RecurrenceToggleProps {
   hasRecurrence: boolean;
   toggleRecurrence: () => void;
-  showForm: boolean;
-  onToggleForm: () => void;
 }
 
 export const RecurrenceToggle = ({
   hasRecurrence,
   toggleRecurrence,
-  showForm,
-  onToggleForm,
 }: RecurrenceToggleProps) => {
-  const handleClick = () => {
-    if (!hasRecurrence) {
-      // Enable recurrence and show form
-      toggleRecurrence();
-      onToggleForm();
-    } else {
-      // Toggle form visibility when recurrence is already enabled
-      onToggleForm();
-    }
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      handleClick();
-    }
-  };
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggleRecurrence();
+      }
+    },
+    [toggleRecurrence],
+  );
 
   return (
     <StyledRepeatRow>
-      {!hasRecurrence || showForm ? (
-        <StyledRepeatContainer onClick={handleClick}>
+      <ConditionalRender condition={hasRecurrence}>
+        <StyledRepeatContainer onClick={toggleRecurrence}>
           <StyledRepeatText
             hasRepeat={hasRecurrence}
-            tabIndex={0}
             onKeyDown={handleKeyDown}
+            tabIndex={0}
           >
             <RepeatIcon size={18} />
             <span>Repeat</span>
           </StyledRepeatText>
         </StyledRepeatContainer>
-      ) : (
+      </ConditionalRender>
+
+      <ConditionalRender condition={!hasRecurrence}>
         <StyledRepeatTextContainer
           aria-label="Edit recurrence"
-          onClick={handleClick}
+          onClick={toggleRecurrence}
           onKeyDown={handleKeyDown}
           role="button"
           tabIndex={0}
         >
           <RepeatIcon size={18} />
           <span>Repeat</span>
         </StyledRepeatTextContainer>
-      )}
+      </ConditionalRender>
     </StyledRepeatRow>
   );
 };
diff --git a/packages/web/src/views/Forms/EventForm/RecurringEventUpdateScopeDialog.tsx b/packages/web/src/views/Forms/EventForm/RecurringEventUpdateScopeDialog.tsx
@@ -11,20 +11,31 @@ import {
 } from "@floating-ui/react";
 import { Priorities } from "@core/constants/core.constants";
 import { RecurringEventUpdateScope } from "@core/types/event.types";
+import { DirtyParser } from "@web/common/parsers/dirty.parser";
 import { theme } from "@web/common/styles/theme";
+import { Schema_WebEvent } from "@web/common/types/web.event.types";
 import { selectDraft } from "@web/ducks/events/selectors/draft.selectors";
 import { useAppSelector } from "@web/store/store.hooks";
 import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
 import { SaveSection } from "@web/views/Forms/EventForm/SaveSection/SaveSection";
 import { StyledEventForm } from "@web/views/Forms/EventForm/styled";
 
 export function RecurringEventUpdateScopeDialog() {
-  const { confirmation, state } = useDraftContext();
+  const {
+    confirmation,
+    state: { draft },
+  } = useDraftContext();
   const { isRecurrenceUpdateScopeDialogOpen } = confirmation;
   const { setRecurrenceUpdateScopeDialogOpen } = confirmation;
-  const { onUpdateScopeChange, recurrenceChanged } = confirmation;
+  const { onUpdateScopeChange } = confirmation;
   const reduxDraft = useAppSelector(selectDraft);
-  const draft = state.draft ?? reduxDraft;
+  const { UNASSIGNED } = Priorities;
+  const priority = draft?.priority ?? reduxDraft?.priority ?? UNASSIGNED;
+
+  const recurrenceChanged = DirtyParser.recurrenceChanged(
+    (draft as Schema_WebEvent) ?? reduxDraft,
+    reduxDraft!,
+  );
 
   const { context, refs, floatingStyles } = useFloating({
     open: isRecurrenceUpdateScopeDialogOpen,
@@ -75,7 +86,7 @@ export function RecurringEventUpdateScopeDialog() {
             style={{ ...floatingStyles, top: "50%", left: "50%" }}
             {...interactions.getFloatingProps()}
           >
-            <StyledEventForm role="form" priority={draft?.priority}>
+            <StyledEventForm role="form" priority={priority}>
               <fieldset style={{ borderRadius: theme.shape.borderRadius }}>
                 <legend>Apply Changes To</legend>
 
@@ -101,7 +112,7 @@ export function RecurringEventUpdateScopeDialog() {
 
               <SaveSection
                 saveText="Ok"
-                priority={draft?.priority ?? Priorities.UNASSIGNED}
+                priority={priority}
                 onSubmit={onSubmitHandler}
                 onCancel={() => setRecurrenceUpdateScopeDialogOpen(false)}
               />
