98 lines
2.2 KiB
JavaScript
98 lines
2.2 KiB
JavaScript
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
|
|
} |