From b4d6b70b196912a553c062542163ed24179ea9c4 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Sat, 1 Jun 2024 19:04:45 +0530 Subject: [PATCH] Issue #PS-294 chore: Build issues fixed --- src/components/AttendanceStatus.tsx | 25 ++++++++++++------ src/components/MarkBulkAttendance.tsx | 8 +++--- src/components/MonthCalender.tsx | 5 ++-- src/hooks/useDeterminePathColor.js | 2 +- src/pages/learner-attendance-history.tsx | 33 ++++++++++++++++++------ src/utils/Interfaces.ts | 1 - 6 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/components/AttendanceStatus.tsx b/src/components/AttendanceStatus.tsx index eaf26b01..4c8bdbde 100644 --- a/src/components/AttendanceStatus.tsx +++ b/src/components/AttendanceStatus.tsx @@ -8,7 +8,6 @@ import { CreateOutlined, } from '@mui/icons-material'; import useDeterminePathColor from '../hooks/useDeterminePathColor'; -import { useTheme } from '@mui/material/styles'; import { useTranslation } from 'next-i18next'; interface AttendanceStatusProps { @@ -24,6 +23,7 @@ type AttendanceData = { present_percentage: number; present_students: number; total_students: number; + attendanceStatus: string; }; type FormattedAttendanceData = { @@ -31,7 +31,9 @@ type FormattedAttendanceData = { }; type learnerAttendanceData = { - [date: string]: AttendanceData; + [date: string]: { + attendanceStatus: string; + }; }; function AttendanceStatus({ @@ -42,7 +44,6 @@ function AttendanceStatus({ onUpdate, }: AttendanceStatusProps) { const { t } = useTranslation(); - const theme = useTheme(); const determinePathColor = useDeterminePathColor(); const selectedDate = shortDateFormat(onDateSelection); const dateString = shortDateFormat(onDateSelection); @@ -92,7 +93,10 @@ function AttendanceStatus({ break; } - const presentPercentage = currentAttendance?.present_percentage; + const presentPercentage = + typeof currentAttendance !== 'string' + ? currentAttendance.present_percentage + : 0; const pathColor = determinePathColor(presentPercentage); return ( @@ -144,8 +148,7 @@ function AttendanceStatus({ color={pathColor} > {t('DASHBOARD.PERCENT_ATTENDANCE', { - percent_students: - currentAttendance?.present_percentage, + percent_students: presentPercentage, })}   @@ -155,8 +158,14 @@ function AttendanceStatus({ color={pathColor} > {t('DASHBOARD.PRESENT_STUDENTS', { - present_students: currentAttendance?.present_students, - total_students: currentAttendance?.totalcount, + present_students: + typeof currentAttendance !== 'string' + ? currentAttendance.present_students + : 0, + total_students: + typeof currentAttendance !== 'string' + ? currentAttendance.totalcount + : 0, })} diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx index 1bfa0fd8..69dd989c 100644 --- a/src/components/MarkBulkAttendance.tsx +++ b/src/components/MarkBulkAttendance.tsx @@ -150,10 +150,10 @@ const MarkBulkAttendance: React.FC = ({ userAttendanceArray.push({ userId, attendance: attendance?.attendance - ? attendance.attendance - : '', - }); - }); + ? attendance.attendance + : '', + }); + }); return userAttendanceArray; }; const userAttendanceArray = getUserAttendanceStatus( diff --git a/src/components/MonthCalender.tsx b/src/components/MonthCalender.tsx index 7d71242e..524434a5 100644 --- a/src/components/MonthCalender.tsx +++ b/src/components/MonthCalender.tsx @@ -16,7 +16,8 @@ interface CalendarWithAttendanceProps { } type AttendanceData = { - present_percentage: number; + present_percentage?: number; + attendanceStatus?: string; }; type FormattedAttendanceData = { @@ -59,7 +60,7 @@ const MonthCalender: React.FC = ({ console.log('formattedAttendanceData', formattedAttendanceData); const attendanceData = formattedAttendanceData?.[dateString]; if (!attendanceData) return null; - const presentPercentage = attendanceData?.present_percentage; + const presentPercentage = attendanceData?.present_percentage || 0; const pathColor = determinePathColor(presentPercentage); diff --git a/src/hooks/useDeterminePathColor.js b/src/hooks/useDeterminePathColor.js index b6345632..108105aa 100644 --- a/src/hooks/useDeterminePathColor.js +++ b/src/hooks/useDeterminePathColor.js @@ -4,7 +4,7 @@ const useDeterminePathColor = () => { const theme = useTheme(); const determinePathColor = (presentPercentage) => { - if (isNaN(presentPercentage)) return; + if (presentPercentage == 0) return theme.palette.warning['400']; if (presentPercentage < 25) return theme.palette.error.main; if (presentPercentage < 50) return theme.palette.action.activeChannel; return theme.palette.success.main; diff --git a/src/pages/learner-attendance-history.tsx b/src/pages/learner-attendance-history.tsx index eeb7ae38..57ab0476 100644 --- a/src/pages/learner-attendance-history.tsx +++ b/src/pages/learner-attendance-history.tsx @@ -13,6 +13,17 @@ import { LearnerAttendanceProps } from '@/utils/Interfaces'; import { getLearnerAttendanceStatus } from '@/services/AttendanceService'; import MarkAttendance from '@/components/MarkAttendance'; +type LearnerAttendanceData = { + [date: string]: { + attendanceStatus: string; + }; +}; + +type AttendanceRecord = { + attendanceDate: string; + attendance: string; +}; + const LearnerAttendanceHistory = () => { const { t } = useTranslation(); const theme = useTheme(); @@ -22,7 +33,9 @@ const LearnerAttendanceHistory = () => { const [open, setOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false); const [attendanceUpdated, setAttendanceUpdated] = useState(false); - const [learnerAttendance, setLearnerAttendance] = React.useState(null); + const [learnerAttendance, setLearnerAttendance] = useState< + LearnerAttendanceData | undefined + >(undefined); useEffect(() => { handleSelectedDateChange(selectedDate); @@ -83,12 +96,15 @@ const LearnerAttendanceHistory = () => { }; const response = await getLearnerAttendanceStatus(attendanceRequest); const attendanceStats = response?.data?.attendanceList; - const attendanceData = attendanceStats?.reduce((acc, record) => { - acc[record.attendanceDate] = { - attendanceStatus: record.attendance, - }; - return acc; - }, {}); + const attendanceData = attendanceStats?.reduce( + (acc: LearnerAttendanceData, record: AttendanceRecord) => { + acc[record.attendanceDate] = { + attendanceStatus: record.attendance, + }; + return acc; + }, + {} + ); setLearnerAttendance(attendanceData); setLoading(false); } @@ -182,7 +198,8 @@ const LearnerAttendanceHistory = () => { date={shortDateFormat(selectedDate)} isSelfAttendance={false} currentStatus={ - learnerAttendance?.[shortDateFormat(selectedDate)]?.attendanceStatus + learnerAttendance?.[shortDateFormat(selectedDate)] + ?.attendanceStatus || '' } handleClose={handleModalClose} onAttendanceUpdate={() => setAttendanceUpdated(!attendanceUpdated)} diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index f17ec033..46d3937b 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -20,7 +20,6 @@ export interface MarkAttendanceProps { currentStatus: string; handleClose: () => void; onAttendanceUpdate: () => void; - handleSubmit: (attendanceDate: string, attendance: string) => void; } export interface AttendanceStatusListViewProps {