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/assets/data/times.js

@@ -0,0 +1,51 @@
+export const times = [
+	{ time: '00:00' },
+	{ time: '00:30' },
+	{ time: '01:00' },
+	{ time: '01:30' },
+	{ time: '02:00' },
+	{ time: '02:30' },
+	{ time: '03:00' },
+	{ time: '03:30' },
+	{ time: '04:00' },
+	{ time: '04:30' },
+	{ time: '05:00' },
+	{ time: '05:30' },
+	{ time: '06:00' },
+	{ time: '06:30' },
+	{ time: '07:00' },
+	{ time: '07:30' },
+	{ time: '08:00' },
+	{ time: '08:30' },
+	{ time: '09:00' },
+	{ time: '09:30' },
+	{ time: '10:00' },
+	{ time: '10:30' },
+	{ time: '11:00' },
+	{ time: '11:30' },
+	{ time: '12:00' },
+	{ time: '12:30' },
+	{ time: '13:00' },
+	{ time: '13:30' },
+	{ time: '14:00' },
+	{ time: '14:30' },
+	{ time: '15:00' },
+	{ time: '15:30' },
+	{ time: '16:00' },
+	{ time: '16:30' },
+	{ time: '17:00' },
+	{ time: '17:30' },
+	{ time: '18:00' },
+	{ time: '18:30' },
+	{ time: '19:00' },
+	{ time: '19:30' },
+	{ time: '20:00' },
+	{ time: '20:30' },
+	{ time: '21:00' },
+	{ time: '21:30' },
+	{ time: '22:00' },
+	{ time: '22:30' },
+	{ time: '23:00' },
+	{ time: '23:30' },
+	{ time: '24:00' },
+];

src/components/IntervalSelector.js

@@ -9,14 +9,14 @@ import { Icon, IconButton } from 'rsuite';
 
 // FullCalendar props
 const dayMinWidth = 110;
-const slotMinTime = '08:00:00';
-const slotMaxTime = '18:00:00';
 
 export default function IntervalSelector({
 	selectedDates,
 	handleSelect,
 	availability,
 	setAvailability,
+	slotMinTime,
+	slotMaxTime,
 }) {
 	/// DATES DISPLAY
 	let startDate = selectedDates[0].start;
@@ -52,12 +52,6 @@ export default function IntervalSelector({
 	};
 
 	/// AVAILABILITY INTERACTION
-	// Create an array of stringified availability
-	let avListJson = [];
-	availability.forEach((event) => {
-		avListJson.push(JSON.stringify(event));
-	});
-
 	const handleClick = (eventStart, eventEnd) => {
 		let updatedAvailability = [];
 		// Create an event object to compare
@@ -68,10 +62,18 @@ export default function IntervalSelector({
 		// Make it to JSON
 		let currentAvJson = JSON.stringify(currentAvailability);
 
+		// Create an array of stringified availability
+		let avListJson = availability.map((event) => {
+			delete event['id'];
+			return JSON.stringify(event);
+		});
+
 		// Check if there's a similar event obj in the availability
 		let index = avListJson.findIndex(
 			(availability) => currentAvJson === availability,
 		);
+
+		// Remove event from availability at index
 		if (index > -1) {
 			updatedAvailability = [...availability];
 			updatedAvailability.splice(index, 1);

src/components/TimePicker.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputPicker } from 'rsuite';
+
+import { times } from '../assets/data/times';
+
+export default function TimePicker({ time, handleSelect}) {
+	return (
+		<InputPicker
+			cleanable={false}
+			data={times}
+			style={{ width: '100%' }}
+			labelKey='time'
+			valueKey='time'
+			onSelect={handleSelect}
+			value={time}
+		/>
+	);
+}

src/components/TimezonePicker.js

@@ -11,7 +11,6 @@ export default function TimezonePicker({
 	return (
 		<InputPicker
 			data={timezones}
-			// cleanable={false}
 			style={{ width: '100%' }}
 			labelKey='timezone'
 			groupBy='area'

src/components/index.js

@@ -1,5 +1,7 @@
 export { default as PrivateRoute } from './PrivateRoute';
 export { default as TimezonePicker } from './TimezonePicker';
+export { default as TimePicker } from './TimePicker';
+
 export { default as IntervalSelector } from './IntervalSelector';
 
 export { default as NavBar } from './Navbar/NavBar';

src/helpers/http-common.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { API_URL } from '../constants';
 
-const existingToken = JSON.parse(localStorage.getItem('token'));
+const existingToken = localStorage.getItem('token');
 
 export const backend = axios.create({
 	baseURL: API_URL,
@@ -11,5 +11,5 @@ export const backend = axios.create({
 });
 
 if (existingToken) {
-	backend.defaults.headers.common['Authorization'] = existingToken;
+	backend.defaults.headers.common['Authorization'] = JSON.parse(existingToken);
 }

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);
 			});
 		};