Add SelectedDates component

src/components/General/TimezonePicker.js

@@ -1,15 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { timezones } from '../../assets/data/timezonesFlat';
 import { InputPicker } from 'rsuite';
 
 export default function TimezonePicker() {
 	const [timezone, setTimezone] = useState('');
 
-	// TODO Remove this if not used
-	useEffect(() => {
-		console.log('useEffect:', timezone);
-	}, [timezone]);
-
 	return (
 		<InputPicker
 			data={timezones}

src/components/Schedule/SelectedDates.js

@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react';
+import { DateTime } from 'luxon';
+
+import { Divider, Icon, IconButton } from 'rsuite';
+
+export default function SelectedDates() {
+	const [eventsList, setEventsList] = useState([
+		{
+			start: '2020-04-29',
+			display: 'background',
+		},
+		{
+			start: '2020-04-30',
+			display: 'background',
+		},
+		{
+			start: '2020-05-07',
+			display: 'background',
+		},
+		{
+			start: '2020-05-06',
+			display: 'background',
+		},
+	]);
+	const [datesList, setDatesList] = useState(eventsToDates(eventsList));
+
+	useEffect(() => {
+		// Update selected dates
+		let updatedDates = eventsToDates(eventsList)
+		setDatesList(updatedDates)
+		console.log(eventsList)
+	}, [eventsList]);
+
+	const handleDelete = (date) => {
+		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;
+				}
+			}
+		// Create updated eventsList
+		eventsList.splice(selectedEventIndex, 1);
+		let	updatedEvents = [...eventsList];
+		// Update the eventsList
+		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(<></>)
+	}
+}
+
+
+// Convert events to Luxon Datetime objects
+const eventsToDates = (events) => {
+	let dates = []
+	events.forEach((event) => {
+		dates.push(DateTime.fromFormat(event.start, 'yyyy-MM-dd'));
+	});
+	return dates
+}
+
+// Convert Luxon Datetime objects to events
+const datesToEvents = (dates) => {
+	let events = []
+	dates.forEach((date) => {
+		let event = { start: date.toFormat('yyyy-MM-dd'), display: 'background' }
+		events.push(event);
+	});
+	return events
+}

src/screens/Schedule.js

@@ -1,18 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
-import {
+import { Container, Form, FormControl, FormGroup, Input } from 'rsuite';
-	Container,
-	Form,
-	FormControl,
-	FormGroup,
-	Input,
-	Divider,
-	Icon,
-} from 'rsuite';
-import { DateTime } from 'luxon';
 
 import TimezonePicker from '../components/General/TimezonePicker';
 import DaySelector from '../components/Schedule/DaySelector';
 import DurationSelector from '../components/Schedule/DurationSelector';
+import SelectedDates from '../components/Schedule/SelectedDates';
 
 export default function Schedule() {
 	return (
@@ -40,6 +32,9 @@ export default function Schedule() {
 				<FormGroup>
 					<DaySelector />
 				</FormGroup>
+				<FormGroup>
+					<SelectedDates />
+				</FormGroup>
 			</Form>
 		</Container>
 	);