frontend/src/screens/Availability.js

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

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

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

export default function Availability({ possibleDates, currentUser }) {
	const [availability, setAvailability] = useState([]);

	console.log(currentUser)
	console.log(possibleDates)
	//TODO post  intervals to backend

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

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

		// console.log("NEW AVAILABILITY UNIX EPOCH: ", Math.floor(newAvailability.start / 1000))
		setAvailability([...availability, ...updatedEvents]);
	};

	const handleSubmit = () => {
		console.log(availability);
	};

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

	return (
		<>
			<NavBar title='Add your availability' />
			<Panel className={'app-container'}>
				<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}
									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}
						/>
					</div>
				</Form>
			</Panel>
		</>
	);
}