Fixing bug when editing day planner events

src/components/tiles/DayPlanner/DayPlannerForm.tsx

@@ -20,11 +20,12 @@ interface DayPlannerFormProps extends StackProps {
   formValues: Booking;
   setFormValues: React.Dispatch<React.SetStateAction<Booking>>;
   onSubmit: (e: React.FormEvent) => void;
+  onEditEvent: (e: React.FormEvent) => void;
   bookings: Booking[] | undefined;
   startTime: string;
   onClose: () => void;
   usingExternalCalendar?: boolean;
-  isEditingEvent: boolean;
+  isEditingEventId: string | null;
   handleDeleteBookingEvent: (time: string) => void;
 }
 
@@ -36,8 +37,9 @@ const DayPlannerForm: React.FC<DayPlannerFormProps> = ({
   onClose,
   startTime,
   usingExternalCalendar,
-  isEditingEvent,
+  isEditingEventId,
   handleDeleteBookingEvent,
+  onEditEvent,
   ...props
 }) => {
   const [userTyped, setUserTyped] = useState(false);
@@ -90,6 +92,14 @@ const DayPlannerForm: React.FC<DayPlannerFormProps> = ({
     }
   };
 
+  const onFormSubmit = (e: React.FormEvent) => {
+    if (isEditingEventId) {
+      onEditEvent(e);
+    } else {
+      onSubmit(e);
+    }
+  };
+
   const formValidationError = validateForm();
 
   return (
@@ -103,7 +113,7 @@ const DayPlannerForm: React.FC<DayPlannerFormProps> = ({
       >
         <CloseIcon />
       </Button>
-      <form onSubmit={onSubmit}>
+      <form onSubmit={onFormSubmit}>
         <Box>
           <Flex fontSize="md" mb="4" fontWeight="600">
             <NumberedBubble displayNumber={1} mr="2" /> Event Name
@@ -195,9 +205,9 @@ const DayPlannerForm: React.FC<DayPlannerFormProps> = ({
             type="submit"
             disabled={formValidationError ? true : false}
           >
-            {isEditingEvent ? "Edit Event" : "Create Event"}
+            {isEditingEventId ? "Edit Event" : "Create Event"}
           </OutlinedButton>
-          {isEditingEvent && (
+          {isEditingEventId && (
             <OutlinedButton
               fontWeight="500"
               borderColor="var(--chakra-colors-orange-500)"

src/components/tiles/DayPlanner/DayPlannerTile.tsx

@@ -8,12 +8,7 @@ import {
   times,
 } from "@/helpers/tileHelpers";
 import { usingExternalCalendarForDayPlannerSelector } from "@/recoil/UserSettingsSelectors";
-import {
-  Booking,
-  GoogleMeetingEvent,
-  OutlookContextInterface,
-  OutlookMeetingEvent,
-} from "@/types";
+import { Booking, OutlookContextInterface } from "@/types";
 import {
   Box,
   Flex,
@@ -33,10 +28,11 @@ import React, {
   useState,
 } from "react";
 import { SetterOrUpdater, useRecoilState } from "recoil";
+import { isEqual } from "lodash";
 
 import { GoogleContext } from "@/context/GoogleContext";
-import { GoogleContextInterface } from "@/types";
 import { OutlookContext } from "@/context/OutlookContext";
+import { GoogleContextInterface } from "@/types";
 
 interface DayPlannerTileProps {
   tileId: number;
@@ -61,7 +57,7 @@ const DayPlannerTileComponent: React.FC<DayPlannerTileProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [width, setWidth] = useState(0);
   const [pixelsToPushTimerAcross, setPixelsToPushTimerAcross] = useState(0);
-  const [isEditingEvent, setIsEditingEvent] = useState(false);
+  const [isEditingEventId, setIsEditingEventId] = useState<null | string>(null);
   const [formValues, setFormValues] = useState<Booking>(
     defaultDayPlannerFormValues
   );
@@ -149,7 +145,7 @@ const DayPlannerTileComponent: React.FC<DayPlannerTileProps> = ({
   }, []);
 
   const onCloseEvent = () => {
-    setIsEditingEvent(false);
+    setIsEditingEventId(null);
     onClose();
     setFormValues(defaultDayPlannerFormValues);
   };
@@ -170,7 +166,7 @@ const DayPlannerTileComponent: React.FC<DayPlannerTileProps> = ({
 
       const existingBooking = getBookingInTimeSlot(time);
       if (existingBooking) {
-        setIsEditingEvent(true);
+        setIsEditingEventId(existingBooking.id);
         setFormValues({ ...formValues, ...existingBooking });
       }
     }
@@ -191,10 +187,29 @@ const DayPlannerTileComponent: React.FC<DayPlannerTileProps> = ({
       formValues.startTime,
       formValues.endTime
     );
+    formValues.id = crypto.randomUUID();
 
     setBookings([...(bookings || []), formValues]);
-    setFormValues(defaultDayPlannerFormValues);
-    onClose();
+    onCloseEvent();
+  };
+
+  const onEditEvent = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    formValues.duration = calculateDurationOfBooking(
+      formValues.startTime,
+      formValues.endTime
+    );
+
+    setBookings((bookings) =>
+      bookings?.map((booking) => {
+        if (booking.id === isEditingEventId) {
+          return { ...formValues };
+        }
+        return booking;
+      })
+    );
+    onCloseEvent();
   };
 
   // all times are in the format HH:MM (in 24 hour time)
@@ -364,8 +379,9 @@ const DayPlannerTileComponent: React.FC<DayPlannerTileProps> = ({
               onSubmit={onSubmit}
               startTime={formValues.startTime}
               onClose={onCloseEvent}
+              onEditEvent={onEditEvent}
               usingExternalCalendar={usingExternalCalendar}
-              isEditingEvent={isEditingEvent}
+              isEditingEventId={isEditingEventId}
               handleDeleteBookingEvent={handleDeleteBookingEvent}
             />
           </ModalContent>
@@ -379,7 +395,7 @@ const areEqual = (
   prevProps: DayPlannerTileProps,
   nextProps: DayPlannerTileProps
 ) => {
-  return prevProps.bookings?.length === nextProps.bookings?.length;
+  return isEqual(prevProps.bookings, nextProps.bookings);
 };
 
 export const DayPlannerTile = React.memo(DayPlannerTileComponent, areEqual);

src/helpers/tileHelpers.ts

@@ -88,6 +88,7 @@ export const defaultDayPlannerFormValues: Booking = {
   endTime: "07:00",
   creationDate: new Date(),
   permanentBooking: false,
+  id: crypto.randomUUID(),
 };
 
 function hashStringToIndex(str: string): number {

src/types/tiles.ts

@@ -14,6 +14,7 @@ export type SearchEngineDefault = {
 };
 
 export type Booking = {
+  id: string;
   color: string;
   startTime: string;
   endTime: string;