Issue #PS-360 fix: Fixed typescript issues

tekdi · Jun 2, 2024 · 266c02a · 266c02a
1 parent ece91c0
commit 266c02a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
@@ -152,7 +152,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
     };
   };
 
-  const handleCalendarDateChange = (date: Date | [Date, Date] | null) => {
+  const handleCalendarDateChange = (date: Date | Date[] | null) => {
     if (Array.isArray(date)) {
       setDateRangeArray(date);
       // toggleCalendarModal();

diff --git a/src/components/MonthCalender.tsx b/src/components/MonthCalender.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import Calendar from 'react-calendar';
+import Calendar, { CalendarProps } from 'react-calendar';
+import Value from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import {
   CheckCircleOutlineOutlined,
@@ -8,11 +9,12 @@ import {
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 import { shortDateFormat } from '@/utils/Helper';
 import useDeterminePathColor from '../hooks/useDeterminePathColor';
+
 interface CalendarWithAttendanceProps {
   formattedAttendanceData?: FormattedAttendanceData;
   learnerAttendanceDate?: learnerAttendanceDate;
   onChange: (date: Date) => void;
-  onDateChange: (date: Date | [Date, Date] | null) => void;
+  onDateChange: (date: Date | Date[] | null) => void;
   selectionType?: 'single' | 'range'; 
 }
 
@@ -36,7 +38,7 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
   onDateChange,
   selectionType,
 }) => {
-  const [date, setDate] = useState<Date | [Date, Date] | null>(() => new Date());
+  const [date, setDate] = useState<Date | null | undefined | [Date | null, Date | null]>(() => new Date());
   const determinePathColor = useDeterminePathColor();
 
   useEffect(() => {
@@ -147,7 +149,7 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
   //   onDateChange(newDate);
   // };
 
-  const handleDateChange: (value: Date | [Date, Date] | null) => void = (newDate) => {
+  const handleDateChange = (newDate: Date | null | undefined | [Date | null, Date | null]) => {
     const formatDate = (date: Date) => {
       const year = date.getFullYear();
       const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -160,15 +162,17 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
       setDate(null);
       onDateChange(null);
     } else if (Array.isArray(newDate)) {
-      const formattedDates = newDate.map(date => formatDate(date));
-      console.log('Selected date range:', formattedDates); // Format--->["2024-06-01","2024-06-14"]
-      setDate(newDate); // Format--->["2024-06-04T18:30:00.000Z","2024-06-13T18:29:59.999Z"]
-      onDateChange(newDate);
+      // const formattedDates = newDate.map(date => formatDate(date));
+      // console.log('Selected date range:', formattedDates); // Format--->["2024-06-01","2024-06-14"]
+      if (newDate) {
+        setDate(newDate); // Format--->["2024-06-04T18:30:00.000Z","2024-06-13T18:29:59.999Z"]
+        onDateChange(newDate as Date | Date [] | null);
+      }
     } else {
-      const formattedDate = formatDate(newDate);
+      const formattedDate = formatDate(newDate as Date);
       console.log('Selected date:', formattedDate);
       setDate(newDate);
-      onDateChange(newDate);
+      onDateChange(newDate as Date | Date [] | null);
     }
   };
 

diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx
@@ -345,8 +345,8 @@ const UserAttendanceHistory = () => {
     return datesArray;
   };
 
-  const handleSelectedDateChange = (date: Date) => {
-    setSelectedDate(date);
+  const handleSelectedDateChange = (date: Date | Date[] | null) => {
+    setSelectedDate(date as Date);
   };
 
   const handleUpdate = async (date: string, status: string) => {

diff --git a/src/pages/learner-attendance-history.tsx b/src/pages/learner-attendance-history.tsx
@@ -42,8 +42,8 @@ const LearnerAttendanceHistory = () => {
     handleSelectedDateChange(selectedDate);
   }, []);
 
-  const handleSelectedDateChange = (date: Date) => {
-    setSelectedDate(date);
+  const handleSelectedDateChange = (date: Date | Date[] | null) => {
+    setSelectedDate(date as Date);
   };
 
   const handleActiveStartDateChange = (date: Date) => {