Update conditional rendering of SelectedDates

src/components/Schedule/SelectedDates.js

@@ -26,73 +26,77 @@ export default function SelectedDates() {
 
 	useEffect(() => {
 		// Update selected dates
-		let updatedDates = eventsToDates(eventsList)
-		setDatesList(updatedDates)
-		console.log(eventsList)
+		let updatedDates = eventsToDates(eventsList);
+		setDatesList(updatedDates);
 	}, [eventsList]);
 
 	const handleDelete = (date) => {
-		let currentEvent = { start: date.toFormat('yyyy-MM-dd'), display: 'background' }
+		let currentEvent = {
+			start: date.toFormat('yyyy-MM-dd'),
+			display: 'background',
+		};
 
 		// Find the event corresponding to the date
 		let selectedEventIndex;
-			for (let index = 0; index < eventsList.length; index++) {
-				const eventDate = eventsList[index].start;
-				if (currentEvent.start === eventDate) {
-					// When it's the case, set current index to selectedEventIndex
-					selectedEventIndex = index;
-					break;
-				}
+		for (let index = 0; index < eventsList.length; index++) {
+			const eventDate = eventsList[index].start;
+			if (currentEvent.start === eventDate) {
+				// When it's the case, set current index to selectedEventIndex
+				selectedEventIndex = index;
+				break;
 			}
+		}
 		// Create updated eventsList
 		eventsList.splice(selectedEventIndex, 1);
-		let	updatedEvents = [...eventsList];
+		let updatedEvents = [...eventsList];
 		// Update the eventsList
-		setEventsList(updatedEvents)
-	}
+		setEventsList(updatedEvents);
+	};
 
-	if (datesList.length  > 0) {
-		return (
-			<>
-				<h3>Dates selected</h3>
-				<ul>
-					{datesList.map((date) => (
-						<li key={date}>
-							{date.setLocale('en-gb').toLocaleString()}
-							{` (${date.weekdayShort})`}
-							<Divider vertical />
-							<IconButton
-								icon={<Icon icon='close' />}
-								appearance='subtle'
-								circle
-								onClick={() => handleDelete(date)}
-							></IconButton>
-						</li>
-					))}
-				</ul>
-			</>
-		);
-	} else {
-		return(<></>)
-	}
+	return (
+		<>
+			{datesList.length > 0 && (
+				<div>
+					<h3>Dates selected</h3>
+					<ul>
+						{datesList.map((date) => (
+							<li key={date}>
+								{date.setLocale('en-gb').toLocaleString()}
+								{` (${date.weekdayShort})`}
+								<Divider vertical />
+								<IconButton
+									icon={<Icon icon='close' />}
+									appearance='subtle'
+									circle
+									onClick={() => handleDelete(date)}
+								></IconButton>
+							</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</>
+	);
 }
 
-
 // Convert events to Luxon Datetime objects
 const eventsToDates = (events) => {
-	let dates = []
+	let dates = [];
 	events.forEach((event) => {
 		dates.push(DateTime.fromFormat(event.start, 'yyyy-MM-dd'));
 	});
-	return dates
-}
+	return dates;
+};
 
 // Convert Luxon Datetime objects to events
 const datesToEvents = (dates) => {
-	let events = []
+	let events = [];
 	dates.forEach((date) => {
-		let event = { start: date.toFormat('yyyy-MM-dd'), display: 'background' }
+		let event = {
+			start: date.toFormat('yyyy-MM-dd'),
+			display: 'background',
+		};
 		events.push(event);
 	});
-	return events
-}
+	return events;
+};