frontend/src/screens/Availability.js

import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom';

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

import {
	NavBar,
	TimezonePicker,
	TimePicker,
	IntervalSelector,
} from '../components';
import './styles/Availability.less';
import './styles/layout.less';

// DEV possibleDates
const possibleDates = [
	{
		id: 63,
		start: '2020-08-01',
		display: 'background',
	},
	{
		id: 64,
		start: '2020-08-02',
		display: 'background',
	},
];

export default function Availability({ currentUser }) {
	const [availability, setAvailability] = useState([]);
	const [timezone, setTimezone] = useState(currentUser.timezone);
	const [times, setTimes] = useState({
		earliest: currentUser.earliest_time,
		latest: currentUser.latest_time,
	});

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

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

	const handleSubmit = () => {
		//TODO post intervals to backend
		// Post it as UNIX EPOCH TIME
		// timezone = UTC always

		// Use Map to add id to events
		// // Find corresponding id
		// const selectedDate = start.toISOString().substring(0, 10);
		// const [date] = possibleDates.filter(
		// 	(date) => date.start === selectedDate,
		// );

		console.log(availability);
	};

	const handleSelectTimezone = (value, item, event) => {
		setTimezone(item.timezone);
	};

	const handleClearTimezone = () => {
		setTimezone(currentUser.timezone);
	};

	const handleEarliest = (value, item, event) => {
		setTimes({
			...times,
			earliest: value,
		});
	};

	const handleLatest = (value, item, event) => {
		setTimes({
			...times,
			latest: value,
		});
	};

	if (!possibleDates) {
		return <Redirect to='/dashboard' />;
	}

	return (
		<>
			<NavBar title='Add your availability' />
			<Panel className={'app-container'}>
				<Form className={'av-container'}>
					<div className={'av-details'}>
						<FormGroup>
							<ControlLabel>Earliest time</ControlLabel>
							<TimePicker
								time={times.earliest}
								handleSelect={handleEarliest}
							/>
						</FormGroup>
						<FormGroup>
							<ControlLabel>Latest time</ControlLabel>
							<TimePicker
								time={times.latest}
								handleSelect={handleLatest}
							/>
						</FormGroup>
						<FormGroup className='av-timezone'>
							<ControlLabel>Timezone</ControlLabel>
							<TimezonePicker
								timezone={timezone}
								handleSelect={handleSelectTimezone}
								handleClean={handleClearTimezone}
							/>
						</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}
									onClick={handleSubmit}
								>
									Save your availability
								</Button>
							</ButtonGroup>
						</div>
					</div>
					<div className={'interval-selector'}>
						<Message
							showIcon
							type='info'
							description='Select your availability on the calendar.'
						/>
						<IntervalSelector
							selectedDates={possibleDates}
							availability={availability}
							setAvailability={setAvailability}
							handleSelect={handleSelect}
							handleClear={handleClear}
							slotMinTime={times.earliest}
							slotMaxTime={times.latest}
						/>
					</div>
				</Form>
			</Panel>
		</>
	);
}