Add SelectedDates component

This commit is contained in:
rui hildt 2020-06-02 12:48:28 +02:00
parent f03fc0c461
commit 7ae26e39c4
3 changed files with 105 additions and 17 deletions

View File

@ -1,15 +1,10 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import { timezones } from '../../assets/data/timezonesFlat'; import { timezones } from '../../assets/data/timezonesFlat';
import { InputPicker } from 'rsuite'; import { InputPicker } from 'rsuite';
export default function TimezonePicker() { export default function TimezonePicker() {
const [timezone, setTimezone] = useState(''); const [timezone, setTimezone] = useState('');
// TODO Remove this if not used
useEffect(() => {
console.log('useEffect:', timezone);
}, [timezone]);
return ( return (
<InputPicker <InputPicker
data={timezones} data={timezones}

View File

@ -0,0 +1,98 @@
import React, { useState, useEffect } from 'react';
import { DateTime } from 'luxon';
import { Divider, Icon, IconButton } from 'rsuite';
export default function SelectedDates() {
const [eventsList, setEventsList] = useState([
{
start: '2020-04-29',
display: 'background',
},
{
start: '2020-04-30',
display: 'background',
},
{
start: '2020-05-07',
display: 'background',
},
{
start: '2020-05-06',
display: 'background',
},
]);
const [datesList, setDatesList] = useState(eventsToDates(eventsList));
useEffect(() => {
// Update selected dates
let updatedDates = eventsToDates(eventsList)
setDatesList(updatedDates)
console.log(eventsList)
}, [eventsList]);
const handleDelete = (date) => {
let currentEvent = { start: date.toFormat('yyyy-MM-dd'), display: 'background' }
// Find the event corresponding to the date
let selectedEventIndex;
for (let index = 0; index < eventsList.length; index++) {
const eventDate = eventsList[index].start;
if (currentEvent.start === eventDate) {
// When it's the case, set current index to selectedEventIndex
selectedEventIndex = index;
break;
}
}
// Create updated eventsList
eventsList.splice(selectedEventIndex, 1);
let updatedEvents = [...eventsList];
// Update the eventsList
setEventsList(updatedEvents)
}
if (datesList.length > 0) {
return (
<>
<h3>Dates selected</h3>
<ul>
{datesList.map((date) => (
<li key={date}>
{date.setLocale('en-gb').toLocaleString()}
{` (${date.weekdayShort})`}
<Divider vertical />
<IconButton
icon={<Icon icon='close' />}
appearance='subtle'
circle
onClick={() => handleDelete(date)}
></IconButton>
</li>
))}
</ul>
</>
);
} else {
return(<></>)
}
}
// 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
}
// Convert Luxon Datetime objects to events
const datesToEvents = (dates) => {
let events = []
dates.forEach((date) => {
let event = { start: date.toFormat('yyyy-MM-dd'), display: 'background' }
events.push(event);
});
return events
}

View File

@ -1,18 +1,10 @@
import React, { useState } from 'react'; import React from 'react';
import { import { Container, Form, FormControl, FormGroup, Input } from 'rsuite';
Container,
Form,
FormControl,
FormGroup,
Input,
Divider,
Icon,
} from 'rsuite';
import { DateTime } from 'luxon';
import TimezonePicker from '../components/General/TimezonePicker'; import TimezonePicker from '../components/General/TimezonePicker';
import DaySelector from '../components/Schedule/DaySelector'; import DaySelector from '../components/Schedule/DaySelector';
import DurationSelector from '../components/Schedule/DurationSelector'; import DurationSelector from '../components/Schedule/DurationSelector';
import SelectedDates from '../components/Schedule/SelectedDates';
export default function Schedule() { export default function Schedule() {
return ( return (
@ -40,6 +32,9 @@ export default function Schedule() {
<FormGroup> <FormGroup>
<DaySelector /> <DaySelector />
</FormGroup> </FormGroup>
<FormGroup>
<SelectedDates />
</FormGroup>
</Form> </Form>
</Container> </Container>
); );