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
const dayMinWidth = 110;
const slotMinTime = '08:00:00';
const slotMaxTime = '18:00:00';
export default function IntervalSelector({
selectedDates,
handleSelect,
availability,
setAvailability,
slotMinTime,
slotMaxTime,
}) {
/// DATES DISPLAY
let startDate = selectedDates[0].start;
@ -52,12 +52,6 @@ export default function IntervalSelector({
};
/// AVAILABILITY INTERACTION
// Create an array of stringified availability
let avListJson = [];
availability.forEach((event) => {
avListJson.push(JSON.stringify(event));
});
const handleClick = (eventStart, eventEnd) => {
let updatedAvailability = [];
// Create an event object to compare
@ -68,10 +62,18 @@ export default function IntervalSelector({
// Make it to JSON
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
let index = avListJson.findIndex(
(availability) => currentAvJson === availability,
);
// Remove event from availability at index
if (index > -1) {
updatedAvailability = [...availability];
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 (
<InputPicker
data={timezones}
// cleanable={false}
style={{ width: '100%' }}
labelKey='timezone'
groupBy='area'

View File

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

View File

@ -1,7 +1,7 @@
import axios from 'axios';
import { API_URL } from '../constants';
const existingToken = JSON.parse(localStorage.getItem('token'));
const existingToken = localStorage.getItem('token');
export const backend = axios.create({
baseURL: API_URL,
@ -11,5 +11,5 @@ export const backend = axios.create({
});
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 {
Panel,
Form,
FormControl,
ControlLabel,
Button,
ButtonGroup,
@ -12,39 +11,90 @@ import {
FormGroup,
} from 'rsuite';
import { NavBar, TimezonePicker, IntervalSelector } from '../components';
import {
NavBar,
TimezonePicker,
TimePicker,
IntervalSelector,
} from '../components';
import './styles/Availability.less';
import './styles/layout.less';
export default function Availability({ possibleDates, currentUser }) {
const [availability, setAvailability] = useState([]);
// DEV possibleDates
const possibleDates = [
{
id: 63,
start: '2020-08-01',
display: 'background',
},
{
id: 64,
start: '2020-08-02',
display: 'background',
},
];
console.log(currentUser)
console.log(possibleDates)
//TODO post intervals to backend
export default function Availability({ currentUser }) {
const [availability, setAvailability] = useState([]);
const [timezone, setTimezone] = useState(currentUser.timezone);
const [times, setTimes] = useState({
earliest: currentUser.earliest_time,
latest: currentUser.latest_time,
});
const handleClear = () => {
setAvailability([]);
};
const handleSelect = ({ start, end }) => {
let updatedEvents = [];
let newAvailability = {
setAvailability([
...availability,
{
start: start,
end: end,
};
updatedEvents.push(newAvailability);
// console.log("NEW AVAILABILITY UNIX EPOCH: ", Math.floor(newAvailability.start / 1000))
setAvailability([...availability, ...updatedEvents]);
},
]);
};
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);
};
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) {
return <Redirect to='/schedule' />;
return <Redirect to='/dashboard' />;
}
return (
@ -55,15 +105,25 @@ export default function Availability({ possibleDates, currentUser }) {
<div className={'av-details'}>
<FormGroup>
<ControlLabel>Earliest time</ControlLabel>
<FormControl name='earliest-time' type='text' />
<TimePicker
time={times.earliest}
handleSelect={handleEarliest}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Latest time</ControlLabel>
<FormControl name='latest-time' type='text' />
<TimePicker
time={times.latest}
handleSelect={handleLatest}
/>
</FormGroup>
<FormGroup className='av-timezone'>
<ControlLabel>Timezone</ControlLabel>
<TimezonePicker />
<TimezonePicker
timezone={timezone}
handleSelect={handleSelectTimezone}
handleClean={handleClearTimezone}
/>
</FormGroup>
<div className='av-controls'>
<ButtonGroup justified>
@ -100,6 +160,8 @@ export default function Availability({ possibleDates, currentUser }) {
setAvailability={setAvailability}
handleSelect={handleSelect}
handleClear={handleClear}
slotMinTime={times.earliest}
slotMaxTime={times.latest}
/>
</div>
</Form>

View File

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