🐛 Fix: Prevent date changes from being overwritten after other changes

When changing a date and then changing another form field (like title), the date change was being lost. This makes sure that everytime the date is changed, the draft is updated.

Author: tyler-dane

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

@@ -9,6 +9,7 @@ import {
 } from "@web/common/utils/web.date.util";
 import { DatePicker } from "@web/components/DatePicker/DatePicker";
 import { AlignItems } from "@web/components/Flex/styled";
+import { SetEventFormField } from "../../types";
 import { StyledDateFlex } from "./styled";
 
 const stopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -22,6 +23,7 @@ interface Props {
   isStartDatePickerOpen: boolean;
   selectedEndDate: Date;
   selectedStartDate: Date;
+  onSetEventField: SetEventFormField;
   setSelectedEndDate: (value: Date) => void;
   setSelectedStartDate: (value: Date) => void;
   setIsStartDatePickerOpen: (arg0: boolean) => void;
@@ -35,6 +37,7 @@ export const DatePickers: FC<Props> = ({
   isStartDatePickerOpen,
   selectedEndDate,
   selectedStartDate,
+  onSetEventField,
   setIsEndDatePickerOpen,
   setIsStartDatePickerOpen,
   setSelectedEndDate,
@@ -142,12 +145,14 @@ export const DatePickers: FC<Props> = ({
     setSelectedStartDate(start);
     setIsStartDatePickerOpen(false);
     adjustComplimentDateIfNeeded("start", start);
+    onSetEventField("startDate", dayjs(start).format(MONTH_DAY_YEAR));
   };
 
   const onSelectEndDate = (end: Date) => {
     setSelectedEndDate(end);
     setIsEndDatePickerOpen(false);
     adjustComplimentDateIfNeeded("end", end);
+    onSetEventField("endDate", dayjs(end).format(MONTH_DAY_YEAR));
   };
 
   return (

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

@@ -1,9 +1,10 @@
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import React, { FC, SetStateAction } from "react";
+import React, { FC } from "react";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
 import { SelectOption } from "@web/common/types/component.types";
 import { AlignItems } from "@web/components/Flex/styled";
+import { SetEventFormField } from "../types";
 import { DatePickers } from "./DatePickers/DatePickers";
 import { TimePickers } from "./TimePicker/TimePickers";
 import { StyledDateTimeFlex } from "./styled";
@@ -18,6 +19,7 @@ export interface Props {
   inputColor?: string;
   isEndDatePickerOpen: boolean;
   isStartDatePickerOpen: boolean;
+  onSetEventField: SetEventFormField;
   selectedEndDate: Date;
   selectedStartDate: Date;
   setEndTime: (value: SelectOption<string>) => void;
@@ -26,7 +28,7 @@ export interface Props {
   setSelectedEndDate: (value: Date) => void;
   setSelectedStartDate: (value: Date) => void;
   setStartTime: (value: SelectOption<string>) => void;
-  setEvent: (event: Schema_Event) => SetStateAction<Schema_Event | void>;
+  setEvent: (event: Schema_Event) => React.SetStateAction<Schema_Event> | void;
   startTime: SelectOption<string>;
 }
 
@@ -39,6 +41,7 @@ export const DateTimeSection: FC<Props> = ({
   isStartDatePickerOpen,
   selectedEndDate,
   selectedStartDate,
+  onSetEventField,
   setIsStartDatePickerOpen,
   setIsEndDatePickerOpen,
   setStartTime,
@@ -59,6 +62,7 @@ export const DateTimeSection: FC<Props> = ({
           isStartDatePickerOpen={isStartDatePickerOpen}
           selectedEndDate={selectedEndDate}
           selectedStartDate={selectedStartDate}
+          onSetEventField={onSetEventField}
           setSelectedEndDate={setSelectedEndDate}
           setSelectedStartDate={setSelectedStartDate}
           setIsEndDatePickerOpen={setIsEndDatePickerOpen}

packages/web/src/views/Forms/EventForm/DateTimeSection/TimePicker/TimePickers.tsx

@@ -1,4 +1,4 @@
-import React, { FC, SetStateAction, useState } from "react";
+import React, { FC, useState } from "react";
 import { Schema_Event } from "@core/types/event.types";
 import { SelectOption } from "@web/common/types/component.types";
 import { Option_Time } from "@web/common/types/util.types";
@@ -19,7 +19,7 @@ interface Props {
   selectedEndDate: Date;
   selectedStartDate: Date;
   setEndTime: (value: SelectOption<string>) => void;
-  setEvent: (event: Schema_Event) => SetStateAction<Schema_Event | void>;
+  setEvent: (event: Schema_Event) => React.SetStateAction<Schema_Event> | void;
   setStartTime: (value: SelectOption<string>) => void;
   startTime: SelectOption<string>;
 }

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

@@ -295,6 +295,7 @@ export const EventForm: React.FC<FormProps> = ({
         inputColor={hoverColorByPriority[priority || Priorities.UNASSIGNED]}
         isEndDatePickerOpen={isEndDatePickerOpen}
         isStartDatePickerOpen={isStartDatePickerOpen}
+        onSetEventField={onSetEventField}
         selectedEndDate={selectedEndDate}
         selectedStartDate={selectedStartDate}
         setEndTime={setEndTime}