Connect TimezonePicker/TimePicker in Availability

- create TimePicker, import and connect it in Availability to state
- create 'times' assets for TimePicker
- connect TimezonePicker to state

src/screens/Availability.js

@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
 
 import {
 	Panel,
 	Form,
-	FormControl,
 	ControlLabel,
 	Button,
 	ButtonGroup,
@@ -12,39 +11,90 @@ import {
 	FormGroup,
 } from 'rsuite';
 
-import { NavBar, TimezonePicker, IntervalSelector } from '../components';
+import {
+	NavBar,
+	TimezonePicker,
+	TimePicker,
+	IntervalSelector,
+} from '../components';
 import './styles/Availability.less';
 import './styles/layout.less';
 
-export default function Availability({ possibleDates, currentUser }) {
-	const [availability, setAvailability] = useState([]);
+// DEV possibleDates
+const possibleDates = [
+	{
+		id: 63,
+		start: '2020-08-01',
+		display: 'background',
+	},
+	{
+		id: 64,
+		start: '2020-08-02',
+		display: 'background',
+	},
+];
 
-	console.log(currentUser)
-	console.log(possibleDates)
-	//TODO post  intervals to backend
+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 }) => {
-		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]);
+		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='/schedule' />;
+		return <Redirect to='/dashboard' />;
 	}
 
 	return (
@@ -55,15 +105,25 @@ export default function Availability({ possibleDates, currentUser }) {
 					<div className={'av-details'}>
 						<FormGroup>
 							<ControlLabel>Earliest time</ControlLabel>
-							<FormControl name='earliest-time' type='text' />
+							<TimePicker
+								time={times.earliest}
+								handleSelect={handleEarliest}
+							/>
 						</FormGroup>
 						<FormGroup>
 							<ControlLabel>Latest time</ControlLabel>
-							<FormControl name='latest-time' type='text' />
+							<TimePicker
+								time={times.latest}
+								handleSelect={handleLatest}
+							/>
 						</FormGroup>
 						<FormGroup className='av-timezone'>
 							<ControlLabel>Timezone</ControlLabel>
-							<TimezonePicker />
+							<TimezonePicker
+								timezone={timezone}
+								handleSelect={handleSelectTimezone}
+								handleClean={handleClearTimezone}
+							/>
 						</FormGroup>
 						<div className='av-controls'>
 							<ButtonGroup justified>
@@ -100,6 +160,8 @@ export default function Availability({ possibleDates, currentUser }) {
 							setAvailability={setAvailability}
 							handleSelect={handleSelect}
 							handleClear={handleClear}
+							slotMinTime={times.earliest}
+							slotMaxTime={times.latest}
 						/>
 					</div>
 				</Form>

src/screens/Schedule.js

@@ -185,6 +185,8 @@ export default function Schedule({
 					addID(result),
 				);
 
+				console.log('WITH ID', possibleDatesWithID)
+
 				setPossibleDates(possibleDatesWithID);
 			});
 		};