Connect TimezonePicker/TimePicker in Availability

- create TimePicker, import and connect it in Availability to state
- create 'times' assets for TimePicker
- connect TimezonePicker to state
This commit is contained in:
rui hildt 2020-08-26 20:13:12 +02:00
parent bbc9a3c12c
commit 850921eb25
8 changed files with 168 additions and 32 deletions

51
src/assets/data/times.js Normal file
View File

@ -0,0 +1,51 @@
export const times = [
{ time: '00:00' },
{ time: '00:30' },
{ time: '01:00' },
{ time: '01:30' },
{ time: '02:00' },
{ time: '02:30' },
{ time: '03:00' },
{ time: '03:30' },
{ time: '04:00' },
{ time: '04:30' },
{ time: '05:00' },
{ time: '05:30' },
{ time: '06:00' },
{ time: '06:30' },
{ time: '07:00' },
{ time: '07:30' },
{ time: '08:00' },
{ time: '08:30' },
{ time: '09:00' },
{ time: '09:30' },
{ time: '10:00' },
{ time: '10:30' },
{ time: '11:00' },
{ time: '11:30' },
{ time: '12:00' },
{ time: '12:30' },
{ time: '13:00' },
{ time: '13:30' },
{ time: '14:00' },
{ time: '14:30' },
{ time: '15:00' },
{ time: '15:30' },
{ time: '16:00' },
{ time: '16:30' },
{ time: '17:00' },
{ time: '17:30' },
{ time: '18:00' },
{ time: '18:30' },
{ time: '19:00' },
{ time: '19:30' },
{ time: '20:00' },
{ time: '20:30' },
{ time: '21:00' },
{ time: '21:30' },
{ time: '22:00' },
{ time: '22:30' },
{ time: '23:00' },
{ time: '23:30' },
{ time: '24:00' },
];

View File

@ -9,14 +9,14 @@ import { Icon, IconButton } from 'rsuite';
// FullCalendar props // FullCalendar props
const dayMinWidth = 110; const dayMinWidth = 110;
const slotMinTime = '08:00:00';
const slotMaxTime = '18:00:00';
export default function IntervalSelector({ export default function IntervalSelector({
selectedDates, selectedDates,
handleSelect, handleSelect,
availability, availability,
setAvailability, setAvailability,
slotMinTime,
slotMaxTime,
}) { }) {
/// DATES DISPLAY /// DATES DISPLAY
let startDate = selectedDates[0].start; let startDate = selectedDates[0].start;
@ -52,12 +52,6 @@ export default function IntervalSelector({
}; };
/// AVAILABILITY INTERACTION /// AVAILABILITY INTERACTION
// Create an array of stringified availability
let avListJson = [];
availability.forEach((event) => {
avListJson.push(JSON.stringify(event));
});
const handleClick = (eventStart, eventEnd) => { const handleClick = (eventStart, eventEnd) => {
let updatedAvailability = []; let updatedAvailability = [];
// Create an event object to compare // Create an event object to compare
@ -68,10 +62,18 @@ export default function IntervalSelector({
// Make it to JSON // Make it to JSON
let currentAvJson = JSON.stringify(currentAvailability); let currentAvJson = JSON.stringify(currentAvailability);
// Create an array of stringified availability
let avListJson = availability.map((event) => {
delete event['id'];
return JSON.stringify(event);
});
// Check if there's a similar event obj in the availability // Check if there's a similar event obj in the availability
let index = avListJson.findIndex( let index = avListJson.findIndex(
(availability) => currentAvJson === availability, (availability) => currentAvJson === availability,
); );
// Remove event from availability at index
if (index > -1) { if (index > -1) {
updatedAvailability = [...availability]; updatedAvailability = [...availability];
updatedAvailability.splice(index, 1); updatedAvailability.splice(index, 1);

View File

@ -0,0 +1,18 @@
import React from 'react';
import { InputPicker } from 'rsuite';
import { times } from '../assets/data/times';
export default function TimePicker({ time, handleSelect}) {
return (
<InputPicker
cleanable={false}
data={times}
style={{ width: '100%' }}
labelKey='time'
valueKey='time'
onSelect={handleSelect}
value={time}
/>
);
}

View File

@ -11,7 +11,6 @@ export default function TimezonePicker({
return ( return (
<InputPicker <InputPicker
data={timezones} data={timezones}
// cleanable={false}
style={{ width: '100%' }} style={{ width: '100%' }}
labelKey='timezone' labelKey='timezone'
groupBy='area' groupBy='area'

View File

@ -1,5 +1,7 @@
export { default as PrivateRoute } from './PrivateRoute'; export { default as PrivateRoute } from './PrivateRoute';
export { default as TimezonePicker } from './TimezonePicker'; export { default as TimezonePicker } from './TimezonePicker';
export { default as TimePicker } from './TimePicker';
export { default as IntervalSelector } from './IntervalSelector'; export { default as IntervalSelector } from './IntervalSelector';
export { default as NavBar } from './Navbar/NavBar'; export { default as NavBar } from './Navbar/NavBar';

View File

@ -1,7 +1,7 @@
import axios from 'axios'; import axios from 'axios';
import { API_URL } from '../constants'; import { API_URL } from '../constants';
const existingToken = JSON.parse(localStorage.getItem('token')); const existingToken = localStorage.getItem('token');
export const backend = axios.create({ export const backend = axios.create({
baseURL: API_URL, baseURL: API_URL,
@ -11,5 +11,5 @@ export const backend = axios.create({
}); });
if (existingToken) { if (existingToken) {
backend.defaults.headers.common['Authorization'] = existingToken; backend.defaults.headers.common['Authorization'] = JSON.parse(existingToken);
} }

View File

@ -1,10 +1,9 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import { import {
Panel, Panel,
Form, Form,
FormControl,
ControlLabel, ControlLabel,
Button, Button,
ButtonGroup, ButtonGroup,
@ -12,39 +11,90 @@ import {
FormGroup, FormGroup,
} from 'rsuite'; } from 'rsuite';
import { NavBar, TimezonePicker, IntervalSelector } from '../components'; import {
NavBar,
TimezonePicker,
TimePicker,
IntervalSelector,
} from '../components';
import './styles/Availability.less'; import './styles/Availability.less';
import './styles/layout.less'; import './styles/layout.less';
export default function Availability({ possibleDates, currentUser }) { // DEV possibleDates
const [availability, setAvailability] = useState([]); const possibleDates = [
{
id: 63,
start: '2020-08-01',
display: 'background',
},
{
id: 64,
start: '2020-08-02',
display: 'background',
},
];
console.log(currentUser) export default function Availability({ currentUser }) {
console.log(possibleDates) const [availability, setAvailability] = useState([]);
//TODO post intervals to backend const [timezone, setTimezone] = useState(currentUser.timezone);
const [times, setTimes] = useState({
earliest: currentUser.earliest_time,
latest: currentUser.latest_time,
});
const handleClear = () => { const handleClear = () => {
setAvailability([]); setAvailability([]);
}; };
const handleSelect = ({ start, end }) => { const handleSelect = ({ start, end }) => {
let updatedEvents = []; setAvailability([
let newAvailability = { ...availability,
start: start, {
end: end, start: start,
}; end: end,
updatedEvents.push(newAvailability); },
]);
// console.log("NEW AVAILABILITY UNIX EPOCH: ", Math.floor(newAvailability.start / 1000))
setAvailability([...availability, ...updatedEvents]);
}; };
const handleSubmit = () => { const handleSubmit = () => {
//TODO post intervals to backend
// Post it as UNIX EPOCH TIME
// timezone = UTC always
// Use Map to add id to events
// // Find corresponding id
// const selectedDate = start.toISOString().substring(0, 10);
// const [date] = possibleDates.filter(
// (date) => date.start === selectedDate,
// );
console.log(availability); console.log(availability);
}; };
const handleSelectTimezone = (value, item, event) => {
setTimezone(item.timezone);
};
const handleClearTimezone = () => {
setTimezone(currentUser.timezone);
};
const handleEarliest = (value, item, event) => {
setTimes({
...times,
earliest: value,
});
};
const handleLatest = (value, item, event) => {
setTimes({
...times,
latest: value,
});
};
if (!possibleDates) { if (!possibleDates) {
return <Redirect to='/schedule' />; return <Redirect to='/dashboard' />;
} }
return ( return (
@ -55,15 +105,25 @@ export default function Availability({ possibleDates, currentUser }) {
<div className={'av-details'}> <div className={'av-details'}>
<FormGroup> <FormGroup>
<ControlLabel>Earliest time</ControlLabel> <ControlLabel>Earliest time</ControlLabel>
<FormControl name='earliest-time' type='text' /> <TimePicker
time={times.earliest}
handleSelect={handleEarliest}
/>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<ControlLabel>Latest time</ControlLabel> <ControlLabel>Latest time</ControlLabel>
<FormControl name='latest-time' type='text' /> <TimePicker
time={times.latest}
handleSelect={handleLatest}
/>
</FormGroup> </FormGroup>
<FormGroup className='av-timezone'> <FormGroup className='av-timezone'>
<ControlLabel>Timezone</ControlLabel> <ControlLabel>Timezone</ControlLabel>
<TimezonePicker /> <TimezonePicker
timezone={timezone}
handleSelect={handleSelectTimezone}
handleClean={handleClearTimezone}
/>
</FormGroup> </FormGroup>
<div className='av-controls'> <div className='av-controls'>
<ButtonGroup justified> <ButtonGroup justified>
@ -100,6 +160,8 @@ export default function Availability({ possibleDates, currentUser }) {
setAvailability={setAvailability} setAvailability={setAvailability}
handleSelect={handleSelect} handleSelect={handleSelect}
handleClear={handleClear} handleClear={handleClear}
slotMinTime={times.earliest}
slotMaxTime={times.latest}
/> />
</div> </div>
</Form> </Form>

View File

@ -185,6 +185,8 @@ export default function Schedule({
addID(result), addID(result),
); );
console.log('WITH ID', possibleDatesWithID)
setPossibleDates(possibleDatesWithID); setPossibleDates(possibleDatesWithID);
}); });
}; };