frontend/src/screens/Availability/Availability.js

import React, { useState } from 'react';

import {
	Panel,
	Form,
	FormControl,
	ControlLabel,
	Button,
	ButtonGroup,
	Message,
	FormGroup,
} from 'rsuite';

import NavBar from '../../components/Navbar/NavBar';
import TimezonePicker from '../../components/General/TimezonePicker';
import IntervalSelector from '../../components/Interval/IntervalSelector';

import './Availability.less';

export default function Availability() {
	const [availability, setAvailability] = useState([...availabilityList]);

	const handleClear = () => {
		setAvailability([]);
	};

	const handleSelect = ({ start, end }) => {
		let updatedEvents = [];
		let newAvailability = {
			start: start,
			end: end,
		};
		updatedEvents.push(newAvailability);
		setAvailability([...availability, ...updatedEvents]);
	};

	return (
		<>
			<NavBar title='Add your availability' />
			<Panel style={containerStyle}>
				<Form className={'av-container'}>
					<div className={'av-details'}>
						<FormGroup>
							<ControlLabel>Earliest time</ControlLabel>
							<FormControl name='earliest-time' type='text' />
						</FormGroup>
						<FormGroup>
							<ControlLabel>Latest time</ControlLabel>
							<FormControl name='latest-time' type='text' />
						</FormGroup>
						<FormGroup className='av-timezone'>
							<ControlLabel>Timezone</ControlLabel>
							<TimezonePicker />
						</FormGroup>
						<div className='av-controls'>
							<ButtonGroup justified>
								<Button
									appearance='ghost'
									block
									size='lg'
									disabled={availability.length === 0}
									onClick={() => handleClear()}
								>
									Clear selection
								</Button>
								<Button
									appearance='primary'
									size='lg'
									block
									disabled={availability.length === 0}
								>
									Save your availability
								</Button>
							</ButtonGroup>
						</div>
					</div>
					<div className={'interval-selector'}>
						<Message
							showIcon
							type='info'
							description='Select your availibility on the calendar.'
						/>
						<IntervalSelector
							selectedDates={eventsList}
							availability={availability}
							setAvailability={setAvailability}
							handleSelect={handleSelect}
							handleClear={handleClear}
						/>
					</div>
				</Form>
			</Panel>
		</>
	);
}

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

// TODO Remove fake data
const eventsList = [
	{
		start: '2020-06-05',
		display: 'background',
	},
	{
		start: '2020-06-06',
		display: 'background',
	},
	{
		start: '2020-06-08',
		display: 'background',
	},
	{
		start: '2020-06-10',
		display: 'background',
	},
	{
		start: '2020-06-11',
		display: 'background',
	},
	{
		start: '2020-06-21',
		display: 'background',
	},
	{
		start: '2020-06-29',
		display: 'background',
	},
];

const availabilityList = [
	{
		start: '2020-06-08T08:00:00.000Z',
		end: '2020-06-08T12:00:00.000Z',
	},
	{
		start: '2020-06-10T09:00:00.000Z',
		end: '2020-06-10T13:00:00.000Z',
	},
	{
		start: '2020-06-11T09:00:00.000Z',
		end: '2020-06-11T13:00:00.000Z',
	},
	{
		start: '2020-06-11T06:30:00.000Z',
		end: '2020-06-11T08:30:00.000Z',
	},
	{
		start: '2020-06-21T07:00:00.000Z',
		end: '2020-06-21T11:30:00.000Z',
	},
	{
		start: '2020-06-21T12:00:00.000Z',
		end: '2020-06-21T15:30:00.000Z',
	},
	{
		start: '2020-06-06T08:00:00.000Z',
		end: '2020-06-06T14:00:00.000Z',
	},
	{
		start: '2020-06-05T10:30:00.000Z',
		end: '2020-06-05T14:30:00.000Z',
	},
];