From aaf6baeab092622fa005776c5e3e30cc0f7051ca Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Thu, 8 Aug 2024 16:51:13 +0530 Subject: [PATCH 1/2] Issue #PS-1626 feat: event list for month view --- public/locales/en/common.json | 4 +- src/pages/center-session.tsx | 120 ----------------- src/pages/centers/[cohortId].tsx | 14 +- src/pages/eventMonthView.tsx | 223 +++++++++++++++++++++++++++++++ src/utils/Helper.ts | 32 ++--- 5 files changed, 244 insertions(+), 149 deletions(-) delete mode 100644 src/pages/center-session.tsx create mode 100644 src/pages/eventMonthView.tsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 86245338..2da28169 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -231,7 +231,7 @@ "ENTER_NUMBER": "Please enter a number", "ENTER_CHARACTER": "Please enter at least one character", "CONTACT_NUMBER": "Contact Number", - "ENROLLMENT_NUMBER":"Enrollment Number", + "ENROLLMENT_NUMBER": "Enrollment Number", "SELECT_OPTION": "Select Option" }, @@ -336,7 +336,7 @@ "REMOVE_THIS_SESSION": "Remove this session", "PLANNED_SESSION": "Planned Session", "FIXES_SUBJECTS": "For fixed subjects in the timetable", - "EXTRA_SESSION": "Extra Session", + "EXTRA_SESSION": "Extra Sessions", "DOUBT_CLEARING": "For doubt clearing, webinars, etc", "TOPIC": "Topic", "SUBTOPIC": "Sub Topic", diff --git a/src/pages/center-session.tsx b/src/pages/center-session.tsx deleted file mode 100644 index 8e896bb4..00000000 --- a/src/pages/center-session.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { Box, Typography } from '@mui/material'; -import React, { useEffect, useState } from 'react'; - -import Header from '@/components/Header'; -import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; -import { Session } from '../utils/Interfaces'; -import SessionCardFooter from '@/components/SessionCardFooter'; -import SessionsCard from '@/components/SessionCard'; -import { getSessions } from '@/services/Sessionservice'; -import { logEvent } from '@/utils/googleAnalytics'; -import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; -import { useTheme } from '@mui/material/styles'; -import { useTranslation } from 'next-i18next'; - -const CenterSession: React.FC = () => { - const theme = useTheme(); - const { t } = useTranslation(); - - const [sessions, setSessions] = useState([]); - - useEffect(() => { - const getSessionsData = async () => { - try { - const response: Session[] = getSessions('cohortId'); // Todo add dynamic cohortId - setSessions(response); - } catch (error) { - console.error('Error fetching sessions:', error); - } - }; - - getSessionsData(); - }, []); - - return ( - <> - -
- {/* {loading && } */} - - - - - - - { - window.history.back(); - logEvent({ - action: 'back-button-clicked-attendance-history-page', - category: 'Attendance History Page', - label: 'Back Button Clicked', - }); - }} - > - - - - - - {t('COMMON.CENTER_SESSIONS')} - - - - - - - - {/* month calender will come here */} - - - - - - {sessions.map((item) => ( - - - - ))} - - - ); -}; - -export default CenterSession; - -export async function getStaticProps({ locale }: { locale: string }) { - return { - props: { - ...(await serverSideTranslations(locale, ['common'])), - }, - }; -} diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 247cf39d..a642a0b4 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -118,9 +118,7 @@ const TeachingCenterDetails = () => { setOpenSchedule(true); }; - const handleSchedule = () => { - console.log('API Call'); - }; + const handleSchedule = () => {}; const handleOpen = () => setOpen(true); const handleClose = () => { @@ -135,7 +133,6 @@ const TeachingCenterDetails = () => { useEffect(() => { const getCohortData = async () => { const response = await getCohortDetails(cohortId); - console.log(response); let cohortData = null; @@ -191,7 +188,6 @@ const TeachingCenterDetails = () => { setSessions(sessionArray); } catch (error) { setSessions([]); - showToastMessage(t('COMMON.NO_SESSIONS_SCHEDULED'), 'error'); } }; @@ -216,12 +212,10 @@ const TeachingCenterDetails = () => { status: ['live'], }; const response = await getEventList({ limit, offset, filters }); - console.log(response); let extraSessionArray: any[] = []; if (response?.events.length > 0) { response?.events.forEach((event: any) => { if (!event.isRecurring) { - console.log(event); extraSessionArray.push(event); } }); @@ -229,9 +223,7 @@ const TeachingCenterDetails = () => { setExtraSessions(extraSessionArray); } catch (error) { setExtraSessions([]); - showToastMessage(t('COMMON.NO_SESSIONS_SCHEDULED'), 'error'); } - console.log(sessions); }; getExtraSessionsData(); @@ -278,7 +270,7 @@ const TeachingCenterDetails = () => { const viewAttendanceHistory = () => { if (classId !== 'all') { - router.push('/center-session'); + router.push('/eventMonthView'); ReactGA.event('month-name-clicked', { selectedCohortID: classId }); } }; @@ -528,7 +520,7 @@ const TeachingCenterDetails = () => { opacity: classId === 'all' ? 0.5 : 1, alignItems: 'center', }} - // onClick={viewAttendanceHistory} + onClick={viewAttendanceHistory} > {getMonthName()} diff --git a/src/pages/eventMonthView.tsx b/src/pages/eventMonthView.tsx new file mode 100644 index 00000000..0816ebe9 --- /dev/null +++ b/src/pages/eventMonthView.tsx @@ -0,0 +1,223 @@ +import React, { useEffect, useState } from 'react'; +import Header from '@/components/Header'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import { Session } from '../utils/Interfaces'; +import SessionCardFooter from '@/components/SessionCardFooter'; +import SessionsCard from '@/components/SessionCard'; +import { getSessions } from '@/services/Sessionservice'; +import { logEvent } from '@/utils/googleAnalytics'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; +import { Box, Typography } from '@mui/material'; +import { shortDateFormat } from '@/utils/Helper'; +import { getEventList } from '@/services/EventService'; +import { showToastMessage } from '@/components/Toastify'; +import MonthCalender from '@/components/MonthCalender'; + +const eventMonthView = () => { + const theme = useTheme(); + const { t } = useTranslation(); + + const [sessions, setSessions] = useState([]); + const [selectedDate, setSelectedDate] = useState(new Date()); + const [percentageAttendance, setPercentageAttendance] = + React.useState(null); + const [extraSessions, setExtraSessions] = React.useState(); + + useEffect(() => { + const getSessionsData = async () => { + try { + const date = new Date(); + const today = shortDateFormat(selectedDate); + let cohortId; + if (typeof window !== 'undefined' && window.localStorage) { + cohortId = localStorage.getItem('classId') || ''; + } + const limit = 0; + const offset = 0; + const filters = { + date: today, + cohortId: cohortId, + status: ['live'], + }; + const response = await getEventList({ limit, offset, filters }); + let sessionArray: any[] = []; + let extraSessionArray: any[] = []; + if (response?.events.length > 0) { + response?.events.forEach((event: any) => { + if (event.isRecurring) { + sessionArray.push(event); + } + if (!event.isRecurring) { + extraSessionArray.push(event); + } + }); + } + setSessions(sessionArray); + setExtraSessions(extraSessionArray); + } catch (error) { + setSessions([]); + setExtraSessions([]); + } + }; + + getSessionsData(); + }, [selectedDate]); + + const handleActiveStartDateChange = (date: Date) => { + setSelectedDate(date); + }; + + useEffect(() => { + handleSelectedDateChange(selectedDate); + }, []); + + const handleSelectedDateChange = (date: Date | Date[] | null) => { + setSelectedDate(date as Date); + }; + + return ( + <> + +
+ {/* {loading && } */} + + + + + + + { + window.history.back(); + logEvent({ + action: 'back-button-clicked-attendance-history-page', + category: 'Attendance History Page', + label: 'Back Button Clicked', + }); + }} + > + + + + + + {t('COMMON.CENTER_SESSIONS')} + + + + + + + + + + + + + + + + {t('CENTER_SESSION.PLANNED_SESSIONS')} + + + + {sessions?.map((item) => ( + + + + ))} + {sessions && sessions?.length === 0 && ( + + {t('COMMON.NO_SESSIONS_SCHEDULED')} + + )} + + + + + + {t('CENTER_SESSION.EXTRA_SESSION')} + + + + {extraSessions?.map((item) => ( + + + + ))} + {extraSessions && extraSessions?.length === 0 && ( + + {t('COMMON.NO_SESSIONS_SCHEDULED')} + + )} + + + + ); +}; + +export default eventMonthView; + +export async function getStaticProps({ locale }: { locale: string }) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + }, + }; +} diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts index 907ebad2..18848b46 100644 --- a/src/utils/Helper.ts +++ b/src/utils/Helper.ts @@ -304,7 +304,7 @@ export const mapFieldIdToValue = ( }, {}); }; -export const convertUTCToIST = (utcDateTime: any) => { +export const convertUTCToIST = (utcDateTime: string) => { const options: Intl.DateTimeFormatOptions = { timeZone: 'Asia/Kolkata', year: 'numeric', @@ -317,22 +317,22 @@ export const convertUTCToIST = (utcDateTime: any) => { const date = new Date(utcDateTime); const dateTimeFormat = new Intl.DateTimeFormat('en-GB', options); - const [ - { value: day }, - , - { value: month }, - , - { value: year }, - , - { value: hour }, - , - { value: minute }, - , - { value: period }, - ] = dateTimeFormat.formatToParts(date); + const parts = dateTimeFormat.formatToParts(date); + + let hour = parts.find((p) => p.type === 'hour')?.value ?? '00'; + const minute = parts.find((p) => p.type === 'minute')?.value; + const dayPeriod = parts + .find((p) => p.type === 'dayPeriod') + ?.value?.toLowerCase(); + const day = parts.find((p) => p.type === 'day')?.value; + const month = parts.find((p) => p.type === 'month')?.value; + + if (hour === '00') { + hour = '12'; + } const formattedDate = `${day} ${month}`; - const formattedTime = `${hour}:${minute} ${period.toLowerCase()}`; + const formattedTime = `${hour}:${minute} ${dayPeriod}`; return { date: formattedDate, time: formattedTime }; }; @@ -382,4 +382,4 @@ export function filterMiniProfileFields(customFieldsData: UpdateCustomField[]) { } } return filteredFields; -} \ No newline at end of file +} From e66688a364933406abb800b239c58adbf236171e Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Thu, 8 Aug 2024 16:52:42 +0530 Subject: [PATCH 2/2] Issue #PS-1626 feat: event list for month view --- src/pages/eventMonthView.tsx | 45 ++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/src/pages/eventMonthView.tsx b/src/pages/eventMonthView.tsx index 0816ebe9..e82a3787 100644 --- a/src/pages/eventMonthView.tsx +++ b/src/pages/eventMonthView.tsx @@ -28,34 +28,35 @@ const eventMonthView = () => { useEffect(() => { const getSessionsData = async () => { try { - const date = new Date(); const today = shortDateFormat(selectedDate); let cohortId; if (typeof window !== 'undefined' && window.localStorage) { cohortId = localStorage.getItem('classId') || ''; } - const limit = 0; - const offset = 0; - const filters = { - date: today, - cohortId: cohortId, - status: ['live'], - }; - const response = await getEventList({ limit, offset, filters }); - let sessionArray: any[] = []; - let extraSessionArray: any[] = []; - if (response?.events.length > 0) { - response?.events.forEach((event: any) => { - if (event.isRecurring) { - sessionArray.push(event); - } - if (!event.isRecurring) { - extraSessionArray.push(event); - } - }); + if (cohortId !== '') { + const limit = 0; + const offset = 0; + const filters = { + date: today, + cohortId: cohortId, + status: ['live'], + }; + const response = await getEventList({ limit, offset, filters }); + let sessionArray: any[] = []; + let extraSessionArray: any[] = []; + if (response?.events.length > 0) { + response?.events.forEach((event: any) => { + if (event.isRecurring) { + sessionArray.push(event); + } + if (!event.isRecurring) { + extraSessionArray.push(event); + } + }); + } + setSessions(sessionArray); + setExtraSessions(extraSessionArray); } - setSessions(sessionArray); - setExtraSessions(extraSessionArray); } catch (error) { setSessions([]); setExtraSessions([]);