Fix rendering of events in Availability & refactor

- Possible dates were not ordered by dates, which in turn crashed
the rendering of Availability component
- Token was not added to headers after login
- Refactor Schedule by removing useless UseEffect
- Simplify rendering of events in Selected Dates (for now)

src/screens/Availability.js

@@ -129,7 +129,7 @@ export default function Availability({
 		});
 	};
 
-	if (!possibleDates) {
+	if (possibleDates.length === 0) {
 		return <Redirect to='/dashboard' />;
 	}
 

src/screens/Schedule.js

@@ -1,4 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import { DateTime } from 'luxon';
+import { useHistory } from 'react-router-dom';
 import {
 	Panel,
 	Form,
@@ -10,8 +12,6 @@ import {
 	Message,
 	FormGroup,
 } from 'rsuite';
-import { DateTime } from 'luxon';
-import { useHistory } from 'react-router-dom';
 
 import {
 	NavBar,
@@ -20,6 +20,8 @@ import {
 	SelectedDates,
 } from '../components';
 import { backend } from '../helpers/http-common';
+import { useAuth } from '../helpers/authContext';
+
 import { durations } from '../assets/data/durations';
 import './styles/Schedule.less';
 
@@ -32,22 +34,11 @@ export default function Schedule({
 	setParticipant,
 }) {
 	const [eventsList, setEventsList] = useState([]);
-	const [datesList, setDatesList] = useState(eventsToDates(eventsList));
 	const [durationIdx, setDurationIdx] = useState(0);
 	const [error, setError] = useState(false);
 
 	const history = useHistory();
-
-	useEffect(() => {
-		// Push the selected dates up the state tree
-		// but keep all related logic here
-		setPossibleDates(eventsList);
-	}, [eventsList, setPossibleDates]);
-
-	useEffect(() => {
-		let updatedDates = eventsToDates(eventsList).sort();
-		setDatesList(updatedDates);
-	}, [eventsList]);
+	const { authToken } = useAuth();
 
 	// EVENTS & DATES
 	const handleSelectDates = (info) => {
@@ -105,7 +96,14 @@ export default function Schedule({
 				updatedEvents.push({ start: date, display: 'background' });
 			});
 		}
+
+		// Sort by date
+		updatedEvents.sort(
+			(date1, date2) => Date.parse(date1.start) - Date.parse(date2.start),
+		);
+
 		setEventsList(updatedEvents);
+		setPossibleDates(updatedEvents);
 	};
 
 	const handleDelete = (date) => {
@@ -137,6 +135,9 @@ export default function Schedule({
 
 	// MEETING
 	const handleSchedule = () => {
+		// Add token to the request
+		backend.defaults.headers.common['Authorization'] = authToken;
+
 		// ADD THE MEETING
 		backend
 			.post('/meetings', currentMeeting)
@@ -155,7 +156,6 @@ export default function Schedule({
 					host: 1,
 					answered: 0,
 				});
-				history.push('/availability');
 			})
 			.catch((error) => {
 				setError('Failed to add new meeting.');
@@ -198,18 +198,19 @@ export default function Schedule({
 				.then(function (results) {
 					const addID = ({ data }) => {
 						let possibleDate = {
-							id: data.id,
 							start: data.possible_date.substring(0, 10),
 							display: 'background',
+							id: data.id,
 						};
 						return possibleDate;
 					};
 
-					const possibleDatesWithID = results.map((result) =>
-						addID(result),
-					);
+					const possibleDatesWithID = results
+						// Add id
+						.map((result) => addID(result));
 
 					setPossibleDates(possibleDatesWithID);
+					history.push('/availability');
 				})
 				.catch((error) => {
 					setError("Couldn't add possible dates to the meeting.");
@@ -289,7 +290,7 @@ export default function Schedule({
 								appearance='ghost'
 								block
 								size='lg'
-								disabled={datesList.length === 0}
+								disabled={possibleDates.length === 0}
 								onClick={() => handleClear()}
 							>
 								Clear selection
@@ -298,7 +299,7 @@ export default function Schedule({
 								appearance='primary'
 								size='lg'
 								block
-								disabled={datesList.length === 0}
+								disabled={possibleDates.length === 0}
 								onClick={handleSchedule}
 							>
 								Confirm dates
@@ -306,10 +307,10 @@ export default function Schedule({
 						</ButtonGroup>
 						{error && <Message type='error' description={error} />}
 						<div className={'selected-dates'}></div>
-						{datesList.length > 0 && (
+						{possibleDates.length > 0 && (
 							<>
 								<SelectedDates
-									datesList={datesList}
+									possibleDates={possibleDates}
 									handleDelete={handleDelete}
 								/>
 							</>
@@ -332,12 +333,3 @@ export default function Schedule({
 		</>
 	);
 }
-
-// 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;
-};