Lift Schedule child components state to parent

src/components/Schedule/DaySelector.js

@@ -1,79 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interaction from '@fullcalendar/interaction';
-import { DateTime } from 'luxon';
-
-export default function DaySelector() {
-	const [eventsList, setEventsList] = useState([]);
-
-	useEffect(() => {
-		console.log('Latest events list: ', eventsList);
-	}, [eventsList]);
-
-	const handleSelect = (info) => {
-		let updatedEvents = [];
-		let datesList = new Set();
-
-		/// Add each date selected to datesList
-		let start = DateTime.fromISO(info.startStr);
-		let end = DateTime.fromISO(info.endStr);
-
-		// Check if selection contains only one day
-		let singleDay = end.toISODate() === start.plus({ days: 1 }).toISODate();
-
-		if (singleDay) {
-			// When a single date is selected
-			let selectedDate = info.startStr;
-			let selectedEvent = { start: selectedDate, display: 'background' };
-
-			// If selectedEvent exists in the list, find and set its index
-			let selectedEventIndex;
-			for (let index = 0; index < eventsList.length; index++) {
-				const eventDate = eventsList[index].start;
-				if (selectedDate === eventDate) {
-					// If it's the case, set current index to selectedEventIndex
-					selectedEventIndex = index;
-					break;
-				}
-			}
-
-			if (selectedEventIndex !== undefined) {
-				// If selectedEventIndex exists, remove the corresponding event from the list
-				eventsList.splice(selectedEventIndex, 1);
-				updatedEvents = [...eventsList];
-			} else {
-				// Add selected event to the list
-				updatedEvents = [...eventsList, selectedEvent];
-			}
-			// setEventsList(updatedEvents);
-		} else {
-			// When a range of dates is selected
-			let currentDate = start;
-			while (!(+end === +currentDate)) {
-				// Add currentDate to the datesList
-				datesList.add(currentDate.toISODate());
-				let newDate = currentDate.plus({ days: 1 });
-				currentDate = newDate;
-			}
-
-			// Add each date from the eventsList to datesList
-			eventsList.forEach((event) => {
-				datesList.add(event.start);
-			});
-
-			// Create events from datesList and add them to updatedEvents
-			datesList.forEach((date) => {
-				updatedEvents.push({ start: date, display: 'background' });
-			});
-		}
-		setEventsList(updatedEvents);
-	};
-
-	const handleClear = () => {
-		setEventsList([])
-	}
 
+export default function DaySelector({ eventsList, handleSelect, handleClear }) {
 	return (
 		<FullCalendar
 			initialView='dayGridMonth'
@@ -83,8 +13,10 @@ export default function DaySelector() {
 			select={(info) => handleSelect(info)}
 			defaultAllDay={true}
 			events={eventsList}
-			customButtons={{resetSelection:{text: 'clear selection', click: handleClear}}}
-			headerToolbar={{right: 'resetSelection today prev,next'}}
+			customButtons={{
+				resetSelection: { text: 'clear selection', click: handleClear },
+			}}
+			headerToolbar={{ right: 'resetSelection today prev,next' }}
 		/>
 	);
 }