Improve date handling in absence forms

Refactored date selection logic in DeclareAbsenceForm and EditAbsenceForm to handle null and invalid dates more robustly. Updated DateOfAbsence component to accept null date values and handle input state accordingly, ensuring better consistency and preventing errors when no date is selected.

Author: ChinemeremChigbo

src/components/absences/modals/DateOfAbsence.tsx

@@ -13,7 +13,7 @@ import { useCallback, useEffect, useState } from 'react';
 import MiniCalendar from '../../calendar/MiniCalendar';
 
 interface DateOfAbsenceProps {
-  dateValue: Date;
+  dateValue: Date | null;
   onDateSelect: (date: Date | null) => void;
   error?: string;
   label?: string;
@@ -33,9 +33,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
-    if (dateValue) {
-      setInputValue(dateValue.toLocaleDateString('en-CA'));
-    }
+    setInputValue(dateValue ? dateValue.toLocaleDateString('en-CA') : '');
   }, [dateValue]);
 
   const handleInputChange = useCallback(
@@ -94,7 +92,7 @@ export const DateOfAbsence: React.FC<DateOfAbsenceProps> = ({
         </PopoverTrigger>
         <PopoverContent width="300px" p={2} boxShadow="lg">
           <MiniCalendar
-            initialDate={dateValue}
+            initialDate={dateValue ?? undefined}
             onDateSelect={handleDateSelect}
             selectDate={dateValue}
           />

src/components/absences/modals/declare/DeclareAbsenceForm.tsx

@@ -296,14 +296,21 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
     }
   };
 
-  const handleDateSelect = (date: Date) => {
+  const handleDateSelect = (date: Date | null) => {
     setFormData((prev) => ({
       ...prev,
       lessonDate: date ? date.toISOString().split('T')[0] : '',
     }));
   };
 
-  const selectedDate = new Date(formData.lessonDate + 'T00:00:00');
+  const parsedLessonDate = formData.lessonDate
+    ? new Date(`${formData.lessonDate}T00:00:00`)
+    : null;
+  const dateValue =
+    parsedLessonDate && !isNaN(parsedLessonDate.getTime())
+      ? parsedLessonDate
+      : null;
+  const selectedDate = dateValue ?? new Date();
   const now = new Date();
   const isWithin14Days =
     (selectedDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24) <= 14;
@@ -387,7 +394,7 @@ const DeclareAbsenceForm: React.FC<DeclareAbsenceFormProps> = ({
           />
         </FormControl>
         <DateOfAbsence
-          dateValue={initialDate}
+          dateValue={dateValue}
           onDateSelect={handleDateSelect}
           error={errors.lessonDate}
         />

src/components/absences/modals/edit/EditAbsenceForm.tsx

@@ -226,13 +226,21 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
     }
   };
 
-  const handleDateSelect = (date: Date) => {
+  const handleDateSelect = (date: Date | null) => {
     setFormData((prev) => ({
       ...prev,
       lessonDate: date ? date.toISOString().split('T')[0] : '',
     }));
   };
 
+  const parsedLessonDate = formData.lessonDate
+    ? new Date(`${formData.lessonDate}T00:00:00`)
+    : null;
+  const dateValue =
+    parsedLessonDate && !isNaN(parsedLessonDate.getTime())
+      ? parsedLessonDate
+      : null;
+
   const handleCloseNotify = () => {
     closeNotify();
     onClose?.();
@@ -353,7 +361,7 @@ const EditAbsenceForm: React.FC<EditAbsenceFormProps> = ({
         </FormControl>
 
         <DateOfAbsence
-          dateValue={initialData.start}
+          dateValue={dateValue}
           onDateSelect={handleDateSelect}
           error={errors.lessonDate}
         />