From cf500e796580a80eafc214f85d0c8aab1e456b7e Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Tue, 27 Aug 2024 17:31:22 +0530 Subject: [PATCH] Issue #PS-1625 feat: edit events data mapping for extra -online and offline events - API integration done --- src/components/PlannedSession.tsx | 159 ++++++++++++++++++++++++------ src/components/SessionCard.tsx | 34 ++++--- src/utils/Interfaces.ts | 6 +- 3 files changed, 152 insertions(+), 47 deletions(-) diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx index 8c8aa161..60aa6324 100644 --- a/src/components/PlannedSession.tsx +++ b/src/components/PlannedSession.tsx @@ -39,7 +39,7 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker'; import dayjs, { Dayjs } from 'dayjs'; import utc from 'dayjs/plugin/utc'; import { useTranslation } from 'next-i18next'; -import { ChangeEvent, useEffect, useState } from 'react'; +import { ChangeEvent, useEffect, useRef, useState } from 'react'; import ReactGA from 'react-ga4'; import { DaysOfWeek, @@ -89,7 +89,7 @@ const PlannedSession: React.FC = ({ editSession, onEventDeleted, eventData, - onEventEdited, + updateEvent, }) => { const { t } = useTranslation(); const theme = useTheme(); @@ -106,6 +106,7 @@ const PlannedSession: React.FC = ({ t('CENTER_SESSION.EDIT_THIS_SESSION') ); const [subjects, setSubjects] = useState(); + const [initialEventData, setInitialEventData] = useState(null); const [shortDescription, setShortDescription] = useState(); const [meetingPasscode, setMeetingPasscode] = useState(); const [selectedDays, setSelectedDays] = useState(); @@ -139,9 +140,8 @@ const PlannedSession: React.FC = ({ useEffect(() => { console.log(eventData); - console.log(eventData?.metadata?.framework?.subject); - if (eventData) { + setInitialEventData(eventData); const mode = eventData?.meetingDetails?.url !== undefined ? sessionMode.ONLINE @@ -162,7 +162,7 @@ const PlannedSession: React.FC = ({ const localStartDateTime = dayjs.utc(startDateTime).tz(timeZone); const localEndDateTime = dayjs.utc(endDateTime).tz(timeZone); - const localEndDateValue = dayjs.utc(endDateValue).tz('Asia/Kolkata'); + const localEndDateValue = dayjs.utc(endDateValue).tz(timeZone); setStartDate(localStartDateTime.startOf('day')); setStartTime(localStartDateTime); @@ -176,6 +176,15 @@ const PlannedSession: React.FC = ({ const recurrencePattern = eventData?.recurrencePattern?.daysOfWeek; setSelectedDays(recurrencePattern); + setSessionBlocks([ + { + subject: sub, + subjectTitle: sessionTitle, + startDatetime: startDateTime, + endDatetime: endDateTime, + endDateValue: endDateValue, + }, + ]); } }, [eventData, editSelection]); @@ -232,17 +241,6 @@ const PlannedSession: React.FC = ({ setSessionBlocks(updatedSessionBlocks); }; - // const handleSessionTypeChange = ( - // 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 - // ); - // setSessionBlocks(updatedSessionBlocks); - // }; - useEffect(() => { const getAddFacilitatorFormData = async () => { try { @@ -757,9 +755,119 @@ const PlannedSession: React.FC = ({ } }; - const handelEditEvent = (eventData: any, deleteSelection: string) => { - console.log(eventData); - }; + useEffect(() => { + const onUpdateEvent = async () => { + if (updateEvent && eventData) { + console.log('eventData', eventData); + try { + const isMainEvent = true; + const eventRepetitionId = eventData?.eventRepetitionId; + const apiBody: any = { + isMainEvent: isMainEvent, + status: 'live', + }; + + let startDateTime = sessionBlocks?.[0]?.startDatetime; + if ( + new Date(eventData?.startDateTime).getTime() !== + new Date(startDateTime).getTime() + ) { + apiBody['startDateTime'] = startDateTime; + } + + let endDateTime = sessionBlocks?.[0]?.endDatetime; + if ( + new Date(eventData?.endDateTime).getTime() !== + new Date(endDateTime).getTime() + ) { + apiBody['endDateTime'] = endDateTime; + } + + const metadata = { + framework: { + board: eventData?.metadata?.framework?.board || '', + medium: eventData?.metadata?.framework?.medium || '', + grade: eventData?.metadata?.framework?.grade || '', + subject: eventData?.metadata?.framework?.subject || '', + topic: eventData?.metadata?.framework?.topic || '', + subTopic: eventData?.metadata?.framework?.subTopic || '', + teacherName: eventData?.metadata?.framework?.teacherName || '', + }, + eventType: eventData?.metadata?.clickedBox || '', + doId: eventData?.metadata?.doId || '', + cohortId: eventData?.metadata?.cohortId || '', + cycleId: eventData?.metadata?.cycleId || '', + tenant: eventData?.metadata?.tenant || '', + }; + + const sessionSubject = sessionBlocks?.[0]?.subject || ''; + + if ( + sessionSubject && + eventData?.metadata?.framework?.subject !== sessionSubject + ) { + metadata.framework.subject = sessionSubject; + apiBody['metadata'] = metadata; + } + + const sessionTitle = sessionBlocks?.[0]?.subjectTitle; + if ( + eventData?.shortDescription !== sessionTitle && + sessionTitle !== '' + ) { + apiBody['shortDescription'] = sessionTitle; + } + if (sessionBlocks?.[0]?.sessionMode === 'online') { + const meetingDetails = { + id: eventData?.meetingDetails?.id || '', + onlineProvider: + eventData?.meetingDetails?.onlineProvider || 'zoom', + password: eventData?.meetingDetails?.password || '', + providerGenerated: + eventData?.meetingDetails?.providerGenerated || false, + url: eventData?.meetingDetails?.url || '', + }; + + const meetingUrl = sessionBlocks?.[0]?.meetingLink; + if ( + eventData?.meetingDetails?.url !== meetingUrl && + meetingUrl !== '' + ) { + meetingDetails.url = meetingUrl; + apiBody['meetingDetails'] = meetingDetails; + } + + const meetingPassword = sessionBlocks?.[0]?.meetingPasscode; + if ( + eventData?.meetingDetails?.password !== meetingPassword && + meetingPasscode !== '' + ) { + meetingDetails.password = meetingPassword; + apiBody['meetingDetails'] = meetingDetails; + } + } + if (sessionBlocks?.[0]?.sessionMode === 'offline') { + apiBody['meetingDetails'] = null; + } + + console.log('apiBody', apiBody); + + const response = await editEvent(eventRepetitionId, apiBody); + if (response?.responseCode === 'OK') { + showToastMessage( + t('COMMON.SESSION_EDITED_SUCCESSFULLY'), + 'success' + ); + } else { + showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error'); + } + } catch (error) { + console.error('Error in editing event:', error); + } + } + }; + onUpdateEvent(); + }, [updateEvent, eventData, sessionBlocks]); return ( @@ -1267,19 +1375,6 @@ const PlannedSession: React.FC = ({ modalOpen={modalOpen} /> )} - - {onEventEdited && ( - handelEditEvent(editSession, editSelection)} - modalOpen={modalOpen} - /> - )} ); }; diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx index 80481c3d..b4ebd23d 100644 --- a/src/components/SessionCard.tsx +++ b/src/components/SessionCard.tsx @@ -16,7 +16,7 @@ const SessionsCard: React.FC = ({ data, children, isEventDeleted, - isEventEdited, + isEventUpdated, }) => { const theme = useTheme(); const { t } = useTranslation(); @@ -24,12 +24,12 @@ const SessionsCard: React.FC = ({ const [snackbarOpen, setSnackbarOpen] = React.useState(false); const [eventDeleted, setEventDeleted] = React.useState(false); const [eventEdited, setEventEdited] = React.useState(false); - const [onEventEdited, setOnEventEdited] = React.useState(false); const [startTime, setStartTime] = React.useState(''); const [endTime, setEndTime] = React.useState(''); const [startDate, setStartDate] = React.useState(''); const [modalOpen, setModalOpen] = React.useState(false); const [editSelection, setEditSelection] = React.useState('EDIT_SESSION'); + const [updateEvent, setUpdateEvent] = React.useState(false); const [editSession, setEditSession] = React.useState(); const handleEditSelection = (selection: string) => { setEditSelection(selection); @@ -50,14 +50,6 @@ const SessionsCard: React.FC = ({ } }; - // const onEventEdited = () => { - // setOpen(false); - // setEventEdited(true); - // if (isEventEdited) { - // isEventEdited(); - // } - // }; - const handleSnackbarClose = () => setSnackbarOpen(false); const handleCopyUrl = () => { @@ -94,7 +86,14 @@ const SessionsCard: React.FC = ({ const handleEditModal = () => { setModalOpen(true); - setOnEventEdited(true); + }; + + const onUpdateClick = () => { + console.log('update the event'); + setUpdateEvent(true); + // if (isEventUpdated) { + // isEventUpdated(); + // } }; return ( @@ -190,12 +189,23 @@ const SessionsCard: React.FC = ({ editSession={editSession} handleEditSelection={handleEditSelection} onEventDeleted={onEventDeleted} - onEventEdited={onEventEdited} eventDeleted={eventDeleted} eventData={data} + updateEvent={updateEvent} /> + + {children} void; - isEventEdited?: () => void; + isEventUpdated?: () => void; } export interface SessionsModalProps { children?: React.ReactNode; @@ -156,7 +156,7 @@ export interface PlannedModalProps { editSelection?: string; handleEditSelection?: (selection: string) => void; onEventDeleted?: () => void; - onEventEdited?: boolean; + updateEvent?: boolean; editSession?: any; eventData?: any; } @@ -614,7 +614,7 @@ export interface GetUserProjectDetailsParams { export interface EditEvent { isMainEvent: boolean; - status: string; + status?: string; } export interface ISearchAssessment {