diff --git a/package.json b/package.json
index cb06e9a..ba290dd 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
},
"scripts": {
"start": "react-app-rewired start",
- "dev": "PORT=8000 BROWSER=firefox-developer-edition react-app-rewired start",
+ "dev": "BROWSER=firefox-developer-edition react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
diff --git a/src/App.js b/src/App.js
index e782697..89f789f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,7 +22,7 @@ export default function App() {
const [isAuthenticated, setIsAuthenticated] = useState(!!existingToken);
const [currentUser, setCurrentUser] = useState(existingUser || '');
const [participant, setParticipant] = useState();
- const [possibleDates, setPossibleDates] = useState();
+ const [possibleDates, setPossibleDates] = useState([]);
const [currentMeeting, setCurrentMeeting] = useState({
title: '',
description: '', // optional
diff --git a/src/components/IntervalSelector.js b/src/components/IntervalSelector.js
index f8b1a1f..c438503 100644
--- a/src/components/IntervalSelector.js
+++ b/src/components/IntervalSelector.js
@@ -28,10 +28,7 @@ export default function IntervalSelector({
.toFormat('yyyy-MM-dd');
// Create an event dates list used to create the days columns
- const daysList = [];
- selectedDates.forEach((event) => {
- daysList.push(event.start);
- });
+ const daysList = selectedDates.map((event) => event.start);
const handleDayDidMount = (info) => {
let currentDate = DateTime.fromJSDate(info.date).toFormat('yyyy-MM-dd');
diff --git a/src/components/Schedule/SelectedDates.js b/src/components/Schedule/SelectedDates.js
index e584743..2859b19 100644
--- a/src/components/Schedule/SelectedDates.js
+++ b/src/components/Schedule/SelectedDates.js
@@ -1,13 +1,12 @@
import React from 'react';
import { Divider, Icon, IconButton } from 'rsuite';
-export default function SelectedDates({ datesList, handleDelete }) {
+export default function SelectedDates({ possibleDates, handleDelete }) {
return (
- {datesList.map((date) => (
- -
- {date.setLocale('en-gb').toLocaleString()}
- {` (${date.weekdayShort})`}
+ {possibleDates.map((date) => (
+
-
+ {date.start}
}
diff --git a/src/constants.js b/src/constants.js
index bf6892a..e2cd77f 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1 +1 @@
-export const API_URL = 'http://localhost:3000/api';
\ No newline at end of file
+export const API_URL = 'http://localhost:9000/api';
\ No newline at end of file
diff --git a/src/helpers/http-common.js b/src/helpers/http-common.js
index b4cc213..4d8c17b 100644
--- a/src/helpers/http-common.js
+++ b/src/helpers/http-common.js
@@ -10,6 +10,7 @@ export const backend = axios.create({
},
});
+// Add token if already in local storage
if (existingToken) {
backend.defaults.headers.common['Authorization'] = JSON.parse(existingToken);
}
diff --git a/src/screens/Availability.js b/src/screens/Availability.js
index 6fe89cd..c5e54a9 100644
--- a/src/screens/Availability.js
+++ b/src/screens/Availability.js
@@ -129,7 +129,7 @@ export default function Availability({
});
};
- if (!possibleDates) {
+ if (possibleDates.length === 0) {
return ;
}
diff --git a/src/screens/Schedule.js b/src/screens/Schedule.js
index 2221ce4..15c412a 100644
--- a/src/screens/Schedule.js
+++ b/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({
{error && }
- {datesList.length > 0 && (
+ {possibleDates.length > 0 && (
<>
>
@@ -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;
-};