meeting-planner/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Connect Schedule to Availability screen

Browse Source
This commit is contained in:
rui hildt 2020-08-23 00:28:05 +02:00
parent 017f6e3869
commit bc245eff51
3 changed files with 16 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/IntervalSelector.js
View File

@ -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];
updatedAvailibility.splice(index, 1);
updatedAvailability = [...availability];
updatedAvailability.splice(index, 1);
}
setAvailability([...updatedAvailibility]);
setAvailability([...updatedAvailability]);
};
const handleContent = ({ event }) => {

79
src/screens/Availability.js
View File

@ -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',
},
];

6
src/screens/Schedule.js
View File

@ -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)
}, [datesList, setPossibleDates])
setPossibleDates(eventsList);
}, [eventsList, setPossibleDates]);
// EVENTS & DATES
useEffect(() => {
let updatedDates = eventsToDates(eventsList).sort();
setDatesList(updatedDates);
}, [eventsList]);
// EVENTS & DATES
const handleSelectDates = (info) => {
let updatedEvents = [];
let datesList = new Set();