♻️ Refactor: Simplify event form field updates

Modify event form field update logic to use a more concise and consistent approach:
- Simplify onSetEventField to accept a partial event object
- Update type definitions to match new implementation
- Adjust event field updates across multiple components to use new method

Author: tyler-dane

packages/web/src/views/Forms/EventForm/DateTimeSection/DatePickers/DatePickers.tsx

@@ -145,7 +145,7 @@ export const DatePickers: FC<Props> = ({
       });
     } else {
       const newStartDate = dayjs(start).format(MONTH_DAY_YEAR);
-      onSetEventField("startDate", newStartDate);
+      onSetEventField({ startDate: newStartDate });
     }
   };
 
@@ -167,7 +167,7 @@ export const DatePickers: FC<Props> = ({
       });
     } else {
       const newEndDate = dayjs(end).add(1, "day").format(MONTH_DAY_YEAR);
-      onSetEventField("endDate", newEndDate);
+      onSetEventField({ endDate: newEndDate });
     }
   };
 

packages/web/src/views/Forms/EventForm/EventForm.tsx

@@ -116,7 +116,7 @@ export const EventForm: React.FC<FormProps> = ({
   const onChangeEventTextField =
     (fieldName: "title" | "description") =>
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      onSetEventField(fieldName, e.target.value);
+      onSetEventField({ [fieldName]: e.target.value });
     };
 
   const onClose = () => {
@@ -165,16 +165,8 @@ export const EventForm: React.FC<FormProps> = ({
     onClose();
   };
 
-  const onSetEventField: SetEventFormField = (field, value) => {
-    const oldEvent = { ...event };
-    // Handle multiple fields
-    if (typeof field === "object") {
-      setEvent({ ...oldEvent, ...field });
-      return;
-    }
-
-    // Handle single field
-    setEvent({ ...oldEvent, [field]: value });
+  const onSetEventField: SetEventFormField = (field) => {
+    setEvent({ ...event, ...field });
   };
 
   const onFormKeyDown: KeyboardEventHandler<HTMLFormElement> = (e) => {

packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx

@@ -21,9 +21,9 @@ export const PrioritySection: React.FC<Props> = ({
         bordered={priority === Priorities.WORK}
         color={colorByPriority.work}
         onClick={() => {
-          onSetEventField("priority", Priorities.WORK);
+          onSetEventField({ priority: Priorities.WORK });
         }}
-        onFocus={() => onSetEventField("priority", Priorities.WORK)}
+        onFocus={() => onSetEventField({ priority: Priorities.WORK })}
         role="tab"
         tabIndex={0}
         title="Doing your best work"
@@ -34,8 +34,8 @@ export const PrioritySection: React.FC<Props> = ({
       <PriorityButton
         bordered={priority === Priorities.SELF}
         color={colorByPriority.self}
-        onClick={() => onSetEventField("priority", Priorities.SELF)}
-        onFocus={() => onSetEventField("priority", Priorities.SELF)}
+        onClick={() => onSetEventField({ priority: Priorities.SELF })}
+        onFocus={() => onSetEventField({ priority: Priorities.SELF })}
         role="tab"
         tabIndex={0}
         title="Nurturing your authentic self"
@@ -47,9 +47,9 @@ export const PrioritySection: React.FC<Props> = ({
         bordered={priority === Priorities.RELATIONS}
         color={colorByPriority.relationships}
         onClick={() => {
-          onSetEventField("priority", Priorities.RELATIONS);
+          onSetEventField({ priority: Priorities.RELATIONS });
         }}
-        onFocus={() => onSetEventField("priority", Priorities.RELATIONS)}
+        onFocus={() => onSetEventField({ priority: Priorities.RELATIONS })}
         role="tab"
         tabIndex={0}
         title="Connecting with others"

packages/web/src/views/Forms/EventForm/RepeatSection/RepeatSection.tsx

@@ -16,14 +16,14 @@ export const RepeatSection: FC<Props> = ({
   onSetEventField,
   recurrence,
 }) => {
-  const [isRepeat, setIsRepeat] = useState(recurrence?.rule?.length > 0);
+  const [isRepeat, setIsRepeat] = useState((recurrence?.rule?.length ?? 0) > 0);
 
   const toggleRecurrence = () => {
     if (isRepeat) {
-      onSetEventField("recurrence", null);
+      onSetEventField({ recurrence: { ...recurrence, rule: [] } });
       setIsRepeat(false);
     } else {
-      onSetEventField("recurrence", { ...recurrence, rule: [RRULE.WEEK] });
+      onSetEventField({ recurrence: { ...recurrence, rule: [RRULE.WEEK] } });
       setIsRepeat(true);
     }
   };
@@ -35,9 +35,9 @@ export const RepeatSection: FC<Props> = ({
           bgColor={bgColor}
           onChangeRecurrence={(rule) => {
             if (rule === null) {
-              onSetEventField("recurrence", { ...recurrence, rule: null });
+              onSetEventField({ recurrence: { ...recurrence, rule: [] } });
             } else {
-              onSetEventField("recurrence", { ...recurrence, rule });
+              onSetEventField({ recurrence: { ...recurrence, rule } });
             }
           }}
           recurrence={recurrence}

packages/web/src/views/Forms/EventForm/types.ts

@@ -15,15 +15,14 @@ export interface FormProps {
   setEvent: (event: Schema_Event) => SetStateAction<Schema_Event> | void;
 }
 
-//++ TODO delete export type SetEventFormField = <FieldName extends keyof Schema_Event>(
 type EventField =
   | "title"
   | "description"
   | "startDate"
   | "endDate"
   | "priority";
 export type SetEventFormField = (
-  field: EventField | Partial<Schema_Event>,
+  field: Partial<Schema_Event>,
   value?: Schema_Event[EventField],
 ) => void;
 

packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx

@@ -45,7 +45,7 @@ export const SomedayEventForm: React.FC<FormProps> = ({
       hasInstances && event.recurrence?.rule?.length === 0;
 
     if (removedRecurrence) {
-      onSetEventField("recurrence", { ...event.recurrence, rule: null });
+      onSetEventField({ recurrence: { ...event.recurrence, rule: [] } });
     }
 
     onSubmit(event);
@@ -54,7 +54,7 @@ export const SomedayEventForm: React.FC<FormProps> = ({
   const onChangeEventTextField =
     (fieldName: "title" | "description") =>
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      onSetEventField(fieldName, e.target.value);
+      onSetEventField({ [fieldName]: e.target.value });
     };
 
   const onDelete = () => {
@@ -93,10 +93,10 @@ export const SomedayEventForm: React.FC<FormProps> = ({
     }
   };
 
-  const onSetEventField: SetEventFormField = (field, value) => {
-    const newEvent = { ...event, [field]: value };
+  const onSetEventField: SetEventFormField = (field) => {
+    const newEvent = { ...event, ...field };
 
-    if (value === null) {
+    if (field === null) {
       delete newEvent[field];
     }