Add Availability component

src/screens/Availability/Availability.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+
 import {
 	Panel,
 	Form,
@@ -9,43 +10,32 @@ import {
 	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 IntervalSelector from '../../components/Interval/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 [availability, setAvailability] = useState([...availabilityList]);
+
+	useEffect(() => {
+		console.log(availability);
+	}, [availability]);
 
 	const handleClear = () => {
 		setAvailability([]);
 	};
 
-	const handleSelect = () => {
-		console.log('Congrats, you have selected!');
+	const handleSelect = ({ start, end }) => {
+		let updatedEvents = [];
+		let newAvailability = {
+			start: start,
+			end: end,
+		};
+		updatedEvents.push(newAvailability);
+		setAvailability([...availability, ...updatedEvents]);
 	};
 
 	return (
@@ -95,7 +85,9 @@ export default function Availability({ title }) {
 							description='Select your availibility on the calendar.'
 						/>
 						<IntervalSelector
-							eventsList={eventsList}
+							selectedDates={eventsList}
+							availability={availability}
+							setAvailability={setAvailability}
 							handleSelect={handleSelect}
 							handleClear={handleClear}
 						/>
@@ -106,18 +98,76 @@ export default function Availability({ title }) {
 	);
 }
 
-// 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)',
 };
+
+// TODO Remove fake data
+const eventsList = [
+	{
+		start: '2020-06-05',
+		display: 'background',
+	},
+	{
+		start: '2020-06-06',
+		display: 'background',
+	},
+	{
+		start: '2020-06-08',
+		display: 'background',
+	},
+	{
+		start: '2020-06-10',
+		display: 'background',
+	},
+	{
+		start: '2020-06-11',
+		display: 'background',
+	},
+	{
+		start: '2020-06-21',
+		display: 'background',
+	},
+	{
+		start: '2020-06-29',
+		display: 'background',
+	},
+];
+
+const availabilityList = [
+	{
+		start: '2020-06-08T08:00:00.000Z',
+		end: '2020-06-08T12:00:00.000Z',
+	},
+	{
+		start: '2020-06-10T09:00:00.000Z',
+		end: '2020-06-10T13:00:00.000Z',
+	},
+	{
+		start: '2020-06-11T09:00:00.000Z',
+		end: '2020-06-11T13:00:00.000Z',
+	},
+	{
+		start: '2020-06-11T06:30:00.000Z',
+		end: '2020-06-11T08:30:00.000Z',
+	},
+	{
+		start: '2020-06-21T07:00:00.000Z',
+		end: '2020-06-21T11:30:00.000Z',
+	},
+	{
+		start: '2020-06-21T12:00:00.000Z',
+		end: '2020-06-21T15:30:00.000Z',
+	},
+	{
+		start: '2020-06-06T08:00:00.000Z',
+		end: '2020-06-06T14:00:00.000Z',
+	},
+	{
+		start: '2020-06-05T10:30:00.000Z',
+		end: '2020-06-05T14:30:00.000Z',
+	},
+];

src/screens/Login.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Panel, Form, FormGroup, FormControl, ControlLabel, HelpBlock, Button } from 'rsuite';
+import { Panel, Form, FormGroup, FormControl, ControlLabel, Button } from 'rsuite';
 
 import NavBar from './../components/Navbar/NavBar';