🐛 Fix: Prevent mismatch between displayed date and internal date

Tracking these separately makes it possible to display user-friendly
dates, while also letting the date picker and backend use
backend-friendly dates, which save an all-day event like so:
start: 2025-03-03, end 2025-03-04

Author: tyler-dane

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

@@ -237,11 +237,9 @@ export const getCalendarHeadingLabel = (
 
 export const mapToBackend = (s: Schema_SelectedDates) => {
   if (s.isAllDay) {
-    const adjustedEnd = dayjs(s.endDate).add(1, "day");
-
     return {
       startDate: dayjs(s.startDate).format(YEAR_MONTH_DAY_FORMAT),
-      endDate: adjustedEnd.format(YEAR_MONTH_DAY_FORMAT),
+      endDate: dayjs(s.endDate).format(YEAR_MONTH_DAY_FORMAT),
     };
   }
 

packages/web/src/components/DatePicker/DatePicker.tsx

@@ -20,6 +20,7 @@ import {
 export interface Props extends ReactDatePickerProps {
   animationOnToggle?: boolean;
   bgColor?: string;
+  displayDate?: Date;
   inputColor?: string;
   isOpen?: boolean;
   onInputBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;

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

@@ -10,6 +10,7 @@ import {
 import { DatePicker } from "@web/components/DatePicker/DatePicker";
 import { AlignItems } from "@web/components/Flex/styled";
 import { SetEventFormField } from "../../types";
+import { adjustEndDate } from "../form.datetime.util";
 import { StyledDateFlex } from "./styled";
 
 const stopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -18,12 +19,14 @@ const stopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {
 
 interface Props {
   bgColor: string;
+  displayEndDate: Date;
   inputColor?: string;
   isEndDatePickerOpen: boolean;
   isStartDatePickerOpen: boolean;
   selectedEndDate: Date;
   selectedStartDate: Date;
   onSetEventField: SetEventFormField;
+  setDisplayEndDate: (value: Date) => void;
   setSelectedEndDate: (value: Date) => void;
   setSelectedStartDate: (value: Date) => void;
   setIsStartDatePickerOpen: (arg0: boolean) => void;
@@ -32,12 +35,14 @@ interface Props {
 
 export const DatePickers: FC<Props> = ({
   bgColor,
+  displayEndDate,
   inputColor,
   isEndDatePickerOpen,
   isStartDatePickerOpen,
   selectedEndDate,
   selectedStartDate,
   onSetEventField,
+  setDisplayEndDate,
   setIsEndDatePickerOpen,
   setIsStartDatePickerOpen,
   setSelectedEndDate,
@@ -142,17 +147,23 @@ export const DatePickers: FC<Props> = ({
   };
 
   const onSelectStartDate = (start: Date) => {
-    setSelectedStartDate(start);
     setIsStartDatePickerOpen(false);
+    setSelectedStartDate(start);
     adjustComplimentDateIfNeeded("start", start);
-    onSetEventField("startDate", dayjs(start).format(MONTH_DAY_YEAR));
+
+    const newStartDate = dayjs(start).format(MONTH_DAY_YEAR);
+    onSetEventField("startDate", newStartDate);
   };
 
   const onSelectEndDate = (end: Date) => {
-    setSelectedEndDate(end);
     setIsEndDatePickerOpen(false);
     adjustComplimentDateIfNeeded("end", end);
-    onSetEventField("endDate", dayjs(end).format(MONTH_DAY_YEAR));
+
+    setDisplayEndDate(end);
+
+    const { datePickerDate, formattedEndDate } = adjustEndDate(end);
+    setSelectedEndDate(datePickerDate);
+    onSetEventField("endDate", formattedEndDate);
   };
 
   return (
@@ -202,7 +213,7 @@ export const DatePickers: FC<Props> = ({
             }}
             onKeyDown={(e) => onPickerKeyDown("end", e)}
             onSelect={onSelectEndDate}
-            selected={selectedEndDate}
+            selected={displayEndDate}
             title="Pick End Date"
             view="grid"
           />

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

@@ -14,6 +14,7 @@ dayjs.extend(customParseFormat);
 export interface Props {
   bgColor: string;
   category: Categories_Event;
+  displayEndDate: Date;
   event: Schema_Event;
   endTime: SelectOption<string>;
   inputColor?: string;
@@ -22,6 +23,7 @@ export interface Props {
   onSetEventField: SetEventFormField;
   selectedEndDate: Date;
   selectedStartDate: Date;
+  setDisplayEndDate: (value: Date) => void;
   setEndTime: (value: SelectOption<string>) => void;
   setIsEndDatePickerOpen: (arg0: boolean) => void;
   setIsStartDatePickerOpen: (arg0: boolean) => void;
@@ -35,13 +37,15 @@ export interface Props {
 export const DateTimeSection: FC<Props> = ({
   bgColor,
   category,
+  displayEndDate,
   event,
   inputColor,
   isEndDatePickerOpen,
   isStartDatePickerOpen,
   selectedEndDate,
   selectedStartDate,
   onSetEventField,
+  setDisplayEndDate,
   setIsStartDatePickerOpen,
   setIsEndDatePickerOpen,
   setStartTime,
@@ -57,12 +61,14 @@ export const DateTimeSection: FC<Props> = ({
       {category === Categories_Event.ALLDAY && (
         <DatePickers
           bgColor={bgColor}
+          displayEndDate={displayEndDate}
           inputColor={inputColor}
           isEndDatePickerOpen={isEndDatePickerOpen}
           isStartDatePickerOpen={isStartDatePickerOpen}
           selectedEndDate={selectedEndDate}
           selectedStartDate={selectedStartDate}
           onSetEventField={onSetEventField}
+          setDisplayEndDate={setDisplayEndDate}
           setSelectedEndDate={setSelectedEndDate}
           setSelectedStartDate={setSelectedStartDate}
           setIsEndDatePickerOpen={setIsEndDatePickerOpen}

packages/web/src/views/Forms/EventForm/DateTimeSection/form.datetime.util.test.ts

@@ -0,0 +1,11 @@
+import { adjustEndDate } from "./form.datetime.util";
+
+describe("adjustEndDate", () => {
+  it("should return the correct end date variations", () => {
+    const end = new Date("2025-12-25");
+    const { datePickerDate, formattedEndDate } = adjustEndDate(end);
+
+    expect(formattedEndDate).toEqual("2025-12-25");
+    expect(datePickerDate).toEqual(new Date("2025-12-26"));
+  });
+});

packages/web/src/views/Forms/EventForm/DateTimeSection/form.datetime.util.ts

@@ -0,0 +1,37 @@
+import dayjs from "dayjs";
+import { YEAR_MONTH_DAY_FORMAT } from "@core/constants/date.constants";
+import { getTimeOptionByValue } from "@web/common/utils/web.date.util";
+
+export const adjustEndDate = (end: Date) => {
+  // Given an all-day event that starts and ends on December 25,
+  // the event form should show a start of "2025-12-25" and an end of "2025-12-25",
+  // and the backend should store the start as "2025-12-25" and the end as"2025-12-26".
+  // Adding one day to the end here helps us achieve that requirement.
+  const endPlusOne = dayjs(end).add(1, "day");
+
+  const formattedEndDate = endPlusOne.format(YEAR_MONTH_DAY_FORMAT);
+  const datePickerDate = endPlusOne.toDate();
+  return { datePickerDate, formattedEndDate };
+};
+
+export const getFormDates = (startDate: string, endDate: string) => {
+  const start = dayjs(startDate);
+  const startTime = getTimeOptionByValue(start);
+  const _startDate = start.toDate();
+
+  const end = dayjs(endDate);
+  const isOneDay = start.format(YEAR_MONTH_DAY_FORMAT) === endDate;
+  const displayEndDate = isOneDay
+    ? start.format(YEAR_MONTH_DAY_FORMAT)
+    : end.subtract(1, "day").format(YEAR_MONTH_DAY_FORMAT);
+  const _endDate = isOneDay ? start.toDate() : end.toDate();
+  const endTime = getTimeOptionByValue(end);
+
+  return {
+    startDate: _startDate,
+    startTime,
+    endDate: _endDate,
+    displayEndDate,
+    endTime,
+  };
+};

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

@@ -10,21 +10,18 @@ import React, {
 import { Key } from "ts-key-enum";
 import { Trash } from "@phosphor-icons/react";
 import { Priorities } from "@core/constants/core.constants";
-import { Schema_Event } from "@core/types/event.types";
 import { ID_EVENT_FORM } from "@web/common/constants/web.constants";
 import {
   colorByPriority,
   hoverColorByPriority,
 } from "@web/common/styles/theme.util";
 import { SelectOption } from "@web/common/types/component.types";
 import { getCategory } from "@web/common/utils/event.util";
-import {
-  getTimeOptionByValue,
-  mapToBackend,
-} from "@web/common/utils/web.date.util";
+import { mapToBackend } from "@web/common/utils/web.date.util";
 import IconButton from "@web/components/IconButton/IconButton";
 import { StyledMigrateArrowInForm } from "@web/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventContainer/styled";
 import { DateTimeSection } from "./DateTimeSection/DateTimeSection";
+import { getFormDates } from "./DateTimeSection/form.datetime.util";
 import { PrioritySection } from "./PrioritySection";
 import { SaveSection } from "./SaveSection";
 import {
@@ -64,13 +61,14 @@ export const EventForm: React.FC<FormProps> = ({
     label: "12 AM",
     value: "12:00 AM",
   });
-  const [selectedEndDate, setSelectedEndDate] = useState(new Date());
   const [selectedStartDate, setSelectedStartDate] = useState(new Date());
+  const [selectedEndDate, setSelectedEndDate] = useState(new Date());
+  const [displayEndDate, setDisplayEndDate] = useState(selectedStartDate);
 
   const descriptionRef = useRef<HTMLTextAreaElement>(null);
 
-  /********
-   * Effect
+  /*********
+   * Effects
    *********/
 
   const keyDownHandler = useCallback(
@@ -100,46 +98,18 @@ export const EventForm: React.FC<FormProps> = ({
   }, []);
 
   useEffect(() => {
-    const getDefaultDateTimes = (event: Schema_Event) => {
-      const start = event?.startDate ? dayjs(event.startDate) : dayjs();
-      const startTime = getTimeOptionByValue(start);
-      const startDate = start.toDate();
-
-      const { endDate, endTime } = getDefaultEndDateTimes(event);
-
-      return { startDate, startTime, endDate, endTime };
-    };
-
-    const dt = getDefaultDateTimes(event);
-
     setEvent(event || {});
+
+    const dt = getFormDates(event.startDate as string, event.endDate as string);
     setStartTime(dt.startTime);
-    setEndTime(dt.endTime);
     setSelectedStartDate(dt.startDate);
+    setDisplayEndDate(dayjs(dt.displayEndDate).toDate());
+    setEndTime(dt.endTime);
     setSelectedEndDate(dt.endDate);
+
     setIsFormOpen(true);
   }, [event, setEvent]);
 
-  /***********
-   * Helpers
-   **********/
-
-  const getDefaultEndDateTimes = (event: Schema_Event) => {
-    const end = event?.endDate ? dayjs(event.endDate) : dayjs();
-    const endTime = getTimeOptionByValue(end);
-
-    if (event.isAllDay) {
-      const isMultiDay = !dayjs(event.startDate).isSame(end);
-      if (isMultiDay) {
-        const userFriendlyEnd = end.add(-1, "day").toDate();
-
-        return { endDate: userFriendlyEnd, endTime };
-      }
-    }
-
-    return { endDate: end.toDate(), endTime };
-  };
-
   /***********
    * Handlers
    **********/
@@ -192,17 +162,16 @@ export const EventForm: React.FC<FormProps> = ({
     };
 
     onSubmit(finalEvent);
-
     onClose();
   };
 
   const onSetEventField: SetEventFormField = (field, value) => {
-    const newEvent = { ...event, [field]: value };
+    const oldEvent = { ...event };
+    const newEvent = { ...oldEvent, [field]: value };
     setEvent(newEvent);
   };
 
   const onFormKeyDown: KeyboardEventHandler<HTMLFormElement> = (e) => {
-    console.log("onFormKeyDown", e.key);
     if (e.key === Key.Backspace || e.key == Key.Delete) {
       if (isDraft) {
         onClose();
@@ -289,6 +258,7 @@ export const EventForm: React.FC<FormProps> = ({
 
       <DateTimeSection
         bgColor={priorityColor}
+        displayEndDate={displayEndDate}
         event={event}
         category={category}
         endTime={endTime}
@@ -303,6 +273,7 @@ export const EventForm: React.FC<FormProps> = ({
         setSelectedStartDate={setSelectedStartDate}
         setStartTime={setStartTime}
         startTime={startTime}
+        setDisplayEndDate={setDisplayEndDate}
         setIsEndDatePickerOpen={setIsEndDatePickerOpen}
         setIsStartDatePickerOpen={setIsStartDatePickerOpen}
         setEvent={setEvent}