From fe069c42978516280e4856b18de75fdf7880b4b5 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Tue, 13 Aug 2024 13:14:57 +0530 Subject: [PATCH] Issue #PS-1550 feat: issues in duplicating the events resolved --- src/components/PlannedSession.tsx | 177 ++++++++++++++++++++---------- src/pages/centers/[cohortId].tsx | 6 +- 2 files changed, 123 insertions(+), 60 deletions(-) diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx index e313ddcd..41e7ea76 100644 --- a/src/components/PlannedSession.tsx +++ b/src/components/PlannedSession.tsx @@ -1,58 +1,50 @@ import * as React from 'react'; +import { getFormRead } from '@/services/CreateUserService'; +import { createEvent } from '@/services/EventService'; +import { getMyCohortMemberList } from '@/services/MyClassDetailsService'; +import { CreateEvent, PlannedModalProps } from '@/utils/Interfaces'; +import { + FormContext, + FormContextType, + Role, + Status, + sessionMode, + sessionType, +} from '@/utils/app.constant'; +import AddIcon from '@mui/icons-material/Add'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import { Box, Button, Divider, FormControl, - FormControlLabel, - FormLabel, Grid, InputLabel, MenuItem, - Radio, - RadioGroup, Select, TextField, Typography, styled, } from '@mui/material'; -import { ChangeEvent, useEffect, useState } from 'react'; -import dayjs, { Dayjs } from 'dayjs'; -import { - FormContext, - FormContextType, - Role, - Status, - sessionMode, - sessionType, -} from '@/utils/app.constant'; -import utc from 'dayjs/plugin/utc'; +import Stack from '@mui/material/Stack'; +import { useTheme } from '@mui/material/styles'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import AddIcon from '@mui/icons-material/Add'; -import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'; -import { - PlannedModalProps, - CohortMemberList, - CreateEvent, -} from '@/utils/Interfaces'; -import SessionMode from './SessionMode'; -import Stack from '@mui/material/Stack'; import { TimePicker } from '@mui/x-date-pickers/TimePicker'; -import { useTheme } from '@mui/material/styles'; +import dayjs, { Dayjs } from 'dayjs'; +import utc from 'dayjs/plugin/utc'; import { useTranslation } from 'next-i18next'; -import WeekDays from './WeekDays'; -import { getFormRead } from '@/services/CreateUserService'; -import { getMyCohortMemberList } from '@/services/MyClassDetailsService'; +import { ChangeEvent, useEffect, useState } from 'react'; import { DaysOfWeek, eventDaysLimit, idealTimeForSession, } from '../../app.config'; -import { createEvent } from '@/services/EventService'; +import SessionMode from './SessionMode'; import { showToastMessage } from './Toastify'; +import WeekDays from './WeekDays'; type mode = (typeof sessionMode)[keyof typeof sessionMode]; type type = (typeof sessionType)[keyof typeof sessionType]; @@ -72,6 +64,10 @@ interface Session { meetingLink?: string; meetingPasscode?: string; onlineProvider?: string; + sessionStartDate?: Dayjs | null | undefined; + sessionEndDate?: Dayjs | null | undefined; + sessionStartTime?: Dayjs | null | undefined; + sessionEndTime?: Dayjs | null | undefined; } const PlannedSession: React.FC = ({ @@ -88,6 +84,7 @@ const PlannedSession: React.FC = ({ const [linkError, setLinkError] = useState(''); const [selectedWeekDays, setSelectedWeekDays] = useState(); const [selectedSubject, setSelectedSubject] = useState(); + const [selectedBlockId, setSelectedBlockId] = useState(0); const [subjects, setSubjects] = useState(); dayjs.extend(utc); const [startDate, setStartDate] = useState(dayjs()); @@ -110,6 +107,10 @@ const PlannedSession: React.FC = ({ meetingLink: '', meetingPasscode: '', onlineProvider: '', + sessionStartDate: startDate, + sessionEndDate: endDate, + sessionStartTime: startTime, + sessionEndTime: endTime, }, ]); @@ -124,17 +125,21 @@ const PlannedSession: React.FC = ({ setSessionBlocks((blocks) => blocks.map((block) => - block.id === 0 + block.id === selectedBlockId ? { ...block, startDatetime: startDatetime || '', endDatetime: endDatetime || '', endDateValue: endDateValue || '', + sessionStartDate: startDate, + sessionEndDate: endDate, + sessionStartTime: startTime, + sessionEndTime: endTime, } : block ) ); - }, [startDate, startTime, endDate, endTime]); + }, [startDate, startTime, endDate, endTime, selectedBlockId]); const handleSessionModeChange = ( event: ChangeEvent, @@ -152,6 +157,7 @@ const PlannedSession: React.FC = ({ event: ChangeEvent, id: string | number | undefined ) => { + setEventType(event.target.value as type); const updatedSessionBlocks = sessionBlocks.map((block) => block.id === id ? { ...block, sessionType: event.target.value } : block ); @@ -247,26 +253,72 @@ const PlannedSession: React.FC = ({ field: 'date' | 'time' ) => { if (newValue) { - console.log(newValue); - let startDate; - let endDate; - let startTime; - let endTime; if (type === 'start' && field === 'date') { - // setStartDate(newValue); - startDate = newValue; + setStartDate((prev) => { + const combinedStartDateTime = combineDateAndTime(newValue, startTime); + updateSessionBlock(id, combinedStartDateTime, endDate, endTime, type); + return newValue; + }); } else if (type === 'start' && field === 'time') { - // setStartTime(newValue); - startTime = newValue; + setStartTime((prev) => { + const combinedStartDateTime = combineDateAndTime(startDate, newValue); + updateSessionBlock(id, combinedStartDateTime, endDate, endTime, type); + return newValue; + }); } else if (type === 'end' && field === 'date') { - // setEndDate(newValue); - endDate = newValue; + setEndDate((prev) => { + const combinedEndDateTime = combineDateAndTime(newValue, endTime); + updateSessionBlock(id, startDate, combinedEndDateTime, endTime, type); + return newValue; + }); } else if (type === 'end' && field === 'time') { - // setEndTime(newValue); - endTime = newValue; + setEndTime((prev) => { + const combinedEndDateTime = combineDateAndTime(startDate, newValue); + updateSessionBlock(id, startDate, combinedEndDateTime, endTime, type); + return newValue; + }); } } + }; + + const updateSessionBlock = ( + id: string | number | undefined, + combinedStartDateTime: Dayjs | null, + combinedEndDateTime: Dayjs | null, + combinedEndDateValue: Dayjs | null, + type: 'start' | 'end' + ) => { + // const EndDateTime = combineDateAndTime(startDate, endTime); + const startDatetime = convertToUTC(combinedStartDateTime); + const endDatetime = convertToUTC(combinedEndDateTime); + const endDateValue = + eventType && eventType === t('CENTER_SESSION.JUST_ONCE') + ? endDatetime + : convertToUTC(combinedEndDateValue); + + if (startDatetime && endDatetime && endDateValue) { + let isRecurringEvent = endDatetime !== endDateValue ? true : false; + setSessionBlocks( + sessionBlocks.map((block) => + block?.id === id + ? { + ...block, + startDatetime: startDatetime, + endDatetime: endDatetime, + endDateValue: endDateValue, + isRecurring: isRecurringEvent, + sessionStartDate: startDate, + sessionEndDate: endDate, + sessionStartTime: startTime, + sessionEndTime: endTime, + } + : block + ) + ); + } + }; + useEffect(() => { const combinedStartDateTime = combineDateAndTime(startDate, startTime); const combinedEndDateTime = combineDateAndTime(startDate, endTime); const combinedEndDateValue = combineDateAndTime(endDate, endTime); @@ -279,23 +331,26 @@ const PlannedSession: React.FC = ({ : convertToUTC(combinedEndDateValue); if (startDatetime && endDatetime && endDateValue) { - let isRecurringEvent = startDatetime !== endDateValue ? true : false; + let isRecurringEvent = endDatetime !== endDateValue ? true : false; setSessionBlocks( sessionBlocks.map((block) => - block?.id === id + block?.id === selectedBlockId // assuming selectedId represents the current block ID ? { ...block, startDatetime: startDatetime, endDatetime: endDatetime, endDateValue: endDateValue, isRecurring: isRecurringEvent, + sessionStartDate: startDate, + sessionEndDate: endDate, + sessionStartTime: startTime, + sessionEndTime: endTime, } : block ) ); } - console.log(sessionBlocks); - }; + }, [startDate, endDate, startTime, endTime, selectedBlockId]); const CustomTimePicker = styled(TimePicker)(({ theme }) => ({ '& .MuiInputAdornment-root': { @@ -398,10 +453,12 @@ const PlannedSession: React.FC = ({ }; const handleAddSession = () => { + const newSessionId = sessionBlocks.length; + setSessionBlocks([ ...sessionBlocks, { - id: sessionBlocks.length, + id: newSessionId, selectedWeekDays: [], DaysOfWeek: [], sessionMode: '', @@ -413,8 +470,13 @@ const PlannedSession: React.FC = ({ meetingLink: '', meetingPasscode: '', onlineProvider: '', + sessionStartDate: null, + sessionEndDate: null, + sessionStartTime: null, + sessionEndTime: null, }, ]); + setSelectedBlockId(newSessionId); console.log(sessionBlocks); }; @@ -491,7 +553,7 @@ const PlannedSession: React.FC = ({ title, shortDescription: '', description: '', - eventType: block?.sessionMode || '', + eventType: block?.sessionMode || mode, isRestricted: true, autoEnroll: true, location: cohortName || '', @@ -571,7 +633,6 @@ const PlannedSession: React.FC = ({ } } catch (error) { console.error('Error creating event:', error); - showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); if (onCloseModal) { onCloseModal(); } @@ -751,7 +812,7 @@ const PlannedSession: React.FC = ({ handleChange(block?.id, newValue, 'start', 'date') } @@ -767,7 +828,7 @@ const PlannedSession: React.FC = ({ handleChange( block?.id, @@ -786,7 +847,7 @@ const PlannedSession: React.FC = ({ handleChange(block?.id, newValue, 'end', 'time') } @@ -825,7 +886,7 @@ const PlannedSession: React.FC = ({ handleChange(block?.id, newValue, 'start', 'time') } @@ -839,7 +900,7 @@ const PlannedSession: React.FC = ({ handleChange(block?.id, newValue, 'end', 'time') } @@ -857,7 +918,7 @@ const PlannedSession: React.FC = ({ handleChange(block?.id, newValue, 'start', 'date') } @@ -874,7 +935,7 @@ const PlannedSession: React.FC = ({ handleChange(block?.id, newValue, 'end', 'date') } diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx index 3e09af4c..fd2ea412 100644 --- a/src/pages/centers/[cohortId].tsx +++ b/src/pages/centers/[cohortId].tsx @@ -134,8 +134,10 @@ const TeachingCenterDetails = () => { useEffect(() => { if (eventCreated) { setOpen(false); + setCreateEvent(false); } - }, [eventCreated]); + }, [eventCreated, createEvent]); + const handleOpen = () => setOpen(true); const handleClose = () => { @@ -463,7 +465,7 @@ const TeachingCenterDetails = () => { ? t('CENTER_SESSION.DELETE_SESSION') : openSchedule ? clickedBox === t('CENTER_SESSION.EXTRA_SESSION') - ? 'Extra Session' + ? t('CENTER_SESSION.EXTRA_SESSION') : t('CENTER_SESSION.PLANNED_SESSION') : t('CENTER_SESSION.SCHEDULE') }