Add basic Availibility screen

src/components/Availability/IntervalSelector.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function IntervalSelector() {
+    return (
+        <div>
+            It's empty for now
+        </div>
+    )
+}

src/screens/App.js

@@ -4,11 +4,13 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import Dashboard from './Dashboard';
 import Schedule from './Schedule/Schedule';
+import Availability from './Availability/Availability';
 import Login from './Login';
 import Register from './Register';
 
 const titles = {
 	schedule: 'Schedule a meeting',
+	availability: 'Add you availability',
 	dashboard: 'Dashboard',
 	login: 'Login',
 	register: 'Registration',
@@ -19,7 +21,13 @@ export default function App() {
 	return (
 		<Router>
 			<Switch>
-				<Route path='/' exact>
+			<Route path='/' exact>
+					<Availability title={titles.availability} />
+				</Route>
+				<Route path='/availability'>
+					<Availability title={titles.availability} />
+				</Route>
+				<Route path='/schedule'>
 					<Schedule title={titles.schedule} />
 				</Route>
 				<Route path='/dashboard'>

src/screens/Availability/Availability.js

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import {
+	Panel,
+	Form,
+	FormControl,
+	ControlLabel,
+	Button,
+	ButtonGroup,
+	Message,
+	FormGroup,
+} from 'rsuite';
+import { DateTime } from 'luxon';
+
+import NavBar from '../../components/Navbar/NavBar';
+import TimezonePicker from '../../components/General/TimezonePicker';
+import IntervalSelector from '../../components/Availability/IntervalSelector';
+
+import './Availability.less';
+
+const eventsList = [
+	{
+		start: '2020-06-10',
+		display: 'background',
+	},
+	{
+		start: '2020-06-11',
+		display: 'background',
+	},
+	{
+		start: '2020-06-12',
+		display: 'background',
+	},
+	{
+		start: '2020-06-13',
+		display: 'background',
+	},
+];
+
+export default function Availability({ title }) {
+	// const [eventsList, setEventsList] = useState([]);
+	const [availability, setAvailability] = useState([]);
+
+	const handleClear = () => {
+		setAvailability([]);
+	};
+
+	const handleSelect = () => {
+		console.log('Congrats, you have selected!');
+	};
+
+	return (
+		<>
+			<NavBar title={title} />
+			<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
+							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)',
+};

src/screens/Availability/Availability.less

@@ -0,0 +1,28 @@
+.av-container {
+	display: grid;
+	grid-template-columns: 6fr 3fr;
+	grid-template-rows: 1fr;
+	grid-template-areas:
+    'selector details';
+
+    column-gap: 2em;
+    row-gap: 2em;
+    grid-column-gap: 2em;
+    grid-row-gap: 2em;
+}
+
+.av-details {
+    grid-area: details;
+    margin: 1em 0 3em 0;
+}
+
+.interval-selector {
+    grid-area: selector;
+    margin: 1em 0 3em 0;
+}
+
+// Fix button alignment bug
+// TODO Check if still needed
+.rs-btn-block + .rs-btn-block {
+	margin-top: unset;
+}