Connect Schedule to Availability screen

src/components/IntervalSelector.js

@@ -59,7 +59,7 @@ export default function IntervalSelector({
 	});
 
 	const handleClick = (eventStart, eventEnd) => {
-		let updatedAvailibility = [];
+		let updatedAvailability = [];
 		// Create an event object to compare
 		let currentAvailability = {
 			start: eventStart,
@@ -73,11 +73,11 @@ export default function IntervalSelector({
 			(availability) => currentAvJson === availability,
 		);
 		if (index > -1) {
-			updatedAvailibility = [...availability];
+			updatedAvailability = [...availability];
-			updatedAvailibility.splice(index, 1);
+			updatedAvailability.splice(index, 1);
 		}
 
-		setAvailability([...updatedAvailibility]);
+		setAvailability([...updatedAvailability]);
 	};
 
 	const handleContent = ({ event }) => {

src/screens/Availability.js

@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import { Redirect } from 'react-router-dom';
+
 import {
 	Panel,
 	Form,
@@ -15,7 +17,7 @@ import './styles/Availability.less';
 import './styles/layout.less';
 
 export default function Availability({ possibleDates }) {
-	const [availability, setAvailability] = useState([...availabilityList]);
+	const [availability, setAvailability] = useState([]);
 
 	const handleClear = () => {
 		setAvailability([]);
@@ -31,6 +33,10 @@ export default function Availability({ possibleDates }) {
 		setAvailability([...availability, ...updatedEvents]);
 	};
 
+	if(!possibleDates) {
+		return <Redirect to='/schedule' />
+	}
+
 	return (
 		<>
 			<NavBar title='Add your availability' />
@@ -75,10 +81,10 @@ export default function Availability({ possibleDates }) {
 						<Message
 							showIcon
 							type='info'
-							description='Select your availibility on the calendar.'
+							description='Select your availability on the calendar.'
 						/>
 						<IntervalSelector
-							selectedDates={eventsList}
+							selectedDates={possibleDates}
 							availability={availability}
 							setAvailability={setAvailability}
 							handleSelect={handleSelect}
@@ -90,70 +96,3 @@ export default function Availability({ possibleDates }) {
 		</>
 	);
 }
-
-// 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/Schedule.js

@@ -40,15 +40,15 @@ export default function Schedule({
 	useEffect(() => {
 		// Push the selected dates up the state tree
 		// but keep all related logic here
-		setPossibleDates(datesList)
+		setPossibleDates(eventsList);
-	}, [datesList, setPossibleDates])
+	}, [eventsList, setPossibleDates]);
 
-	// EVENTS & DATES
 	useEffect(() => {
 		let updatedDates = eventsToDates(eventsList).sort();
 		setDatesList(updatedDates);
 	}, [eventsList]);
 
+	// EVENTS & DATES
 	const handleSelectDates = (info) => {
 		let updatedEvents = [];
 		let datesList = new Set();