Implement availibility to the backend

src/screens/Availability.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 import {
 	Panel,
 	Form,
@@ -20,7 +20,6 @@ import dtToUTC from '../helpers/datetimeToUTC';
 import { backend } from '../helpers/http-common';
 import './styles/Availability.less';
 import './styles/layout.less';
-
 // // DEV possibleDates
 // const possibleDates = [
 // 	{
@@ -52,6 +51,13 @@ export default function Availability({
 		earliest: currentUser.earliest_time,
 		latest: currentUser.latest_time,
 	});
+	const [status, setStatus] = useState({
+		error: null,
+		success: null,
+		message: '',
+	});
+
+	const history = useHistory();
 
 	const handleClear = () => {
 		setAvailability([]);
@@ -68,8 +74,8 @@ export default function Availability({
 	};
 
 	const handleSubmit = () => {
-		// Create list of events to post
+		// Create a list of availability to post
-		const events = availability.map((event) => {
+		const availabilityList = availability.map((event) => {
 			// Format start date to availability
 			const selectedDate = event.start.toISOString().substring(0, 10);
 			// Find the date id
@@ -87,25 +93,32 @@ export default function Availability({
 			};
 		});
 
-		backend
+		// Create availability post request
-			.post('availability', events[0])
+		const postAvailability = (data) => {
-			.then((response) => {
+			return backend.post('/availability', data);
-				console.log(response)
+		};
+
+		const requests = availabilityList.map((event) =>
+			postAvailability(event),
+		);
+
+		Promise.all(requests)
+			.then(function (results) {
+				// Add confirmation message
+				setStatus({
+					success: true,
+					error: false,
+					message: 'Your availability has been added to the meeting.',
+				});
 			})
 			.catch((error) => {
-				console.log(error)
+				setStatus({
+					error: true,
+					success: false,
+					message:
+						"Your availability couldn't be added to the meeting.",
+				});
 			});
-
-		// // Create availability post request
-		// const postAvailability = (data) => {
-		// 	return backend.post('/availability', data);
-		// };
-
-		// const requests = events.map((event) => postAvailability(event));
-
-		// Promise.all(requests).then(function (results) {
-		// 	console.log('RESULTS: ', results);
-		// });
 	};
 
 	const handleSelectTimezone = (value, item, event) => {
@@ -163,26 +176,55 @@ export default function Availability({
 							/>
 						</FormGroup>
 						<div className='av-controls'>
-							<ButtonGroup justified>
+							{!status.success && (
-								<Button
+								<ButtonGroup justified>
-									appearance='ghost'
+									<Button
-									block
+										appearance='ghost'
-									size='lg'
+										block
-									disabled={availability.length === 0}
+										size='lg'
-									onClick={() => handleClear()}
+										disabled={availability.length === 0}
-								>
+										onClick={() => handleClear()}
-									Clear selection
+									>
-								</Button>
+										Clear selection
-								<Button
+									</Button>
-									appearance='primary'
+									<Button
-									size='lg'
+										appearance='primary'
-									block
+										size='lg'
-									disabled={availability.length === 0}
+										block
-									onClick={handleSubmit}
+										disabled={availability.length === 0}
-								>
+										onClick={handleSubmit}
-									Save your availability
+									>
-								</Button>
+										Save your availability
-							</ButtonGroup>
+									</Button>
+								</ButtonGroup>
+							)}
+
+							{status.success && (
+								<ButtonGroup justified>
+									<Button
+										appearance='ghost'
+										size='lg'
+										block
+										onClick={() => history.push('dashboard')}
+									>
+										Go to dashboard
+									</Button>
+									<Button
+										appearance='primary'
+										size='lg'
+										block
+										onClick={() => history.push('invite')}
+									>
+										Invite Participants
+									</Button>
+								</ButtonGroup>
+							)}
+							{(status.error || status.success) && (
+								<Message
+									type={status.success ? 'success' : 'error'}
+									description={status.message}
+								/>
+							)}
 						</div>
 					</div>
 					<div className={'interval-selector'}>

src/screens/Schedule.js

@@ -163,7 +163,6 @@ export default function Schedule({
 			backend
 				.post('/participants', data)
 				.then((response) => {
-					console.log(response);
 					addPossibleDates({ meeting_id: response.data.meeting_id });
 				})
 				.catch((error) => {