frontend/src/screens/Schedule/Schedule.js

import React, { useState, useEffect } from 'react';
import {
	Panel,
	Form,
	FormControl,
	ControlLabel,
	Input,
	HelpBlock,
	Button,
	ButtonGroup,
	Message,
	FormGroup,
} from 'rsuite';
import { DateTime } from 'luxon';

import NavBar from '../../components/Navbar/NavBar';
import TimezonePicker from '../../components/General/TimezonePicker';
import DaySelector from '../../components/Schedule/DaySelector';
import DurationSelector from '../../components/Schedule/DurationSelector';
import SelectedDates from '../../components/Schedule/SelectedDates';

import './Schedule.less';

export default function Schedule() {
	const [eventsList, setEventsList] = useState([]);
	const [datesList, setDatesList] = useState(eventsToDates(eventsList));

	useEffect(() => {
		let updatedDates = eventsToDates(eventsList).sort();
		setDatesList(updatedDates);
	}, [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];
			}
		} 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([]);
	};

	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);
	};

	return (
		<>
			<NavBar title='Schedule a meeting' />
			<Panel style={containerStyle}>
				<Form className={'meeting-container'}>
					<div className={'meeting-info'}>
						<FormGroup>
							<ControlLabel>Title</ControlLabel>
							<FormControl name='title' type='text' />
							<HelpBlock>This field is required</HelpBlock>
						</FormGroup>
						<FormGroup>
							<ControlLabel>Description</ControlLabel>
							<Input
								name='description'
								componentClass='textarea'
								type='text'
								rows={3}
								placeholder='(optional)'
							/>
						</FormGroup>
						<div className='meeting-options-inline'>
							<FormGroup className='meeting-timezone'>
								<ControlLabel>Timezone</ControlLabel>
								<TimezonePicker />
							</FormGroup>
							<FormGroup className='meeting-duration'>
								<ControlLabel>Duration</ControlLabel>
								<DurationSelector />
							</FormGroup>
						</div>
						<ButtonGroup justified>
							<Button
								appearance='ghost'
								block
								size='lg'
								disabled={datesList.length === 0}
								onClick={() => handleClear()}
							>
								Clear selection
							</Button>
							<Button
								appearance='primary'
								size='lg'
								block
								disabled={datesList.length === 0}
							>
								Confirm dates
							</Button>
						</ButtonGroup>
						<div className={'selected-dates'}></div>
						{datesList.length > 0 && (
							<>
								<SelectedDates
									datesList={datesList}
									handleDelete={handleDelete}
								/>
							</>
						)}
					</div>
					<div className={'day-selector'}>
						<Message
							showIcon
							type='info'
							description='Select possible meetings dates on the calendar.'
						/>
						<DaySelector
							eventsList={eventsList}
							handleSelect={handleSelect}
							handleClear={handleClear}
						/>
					</div>
				</Form>
			</Panel>
		</>
	);
}

// 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;
};

const containerStyle = {
	// TODO Move to a .less file
	maxWidth: '1200px',
	margin: '30px auto',
	backgroundColor: 'rgba(255,255,255,0.6)',
};