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

Update conditional rendering of SelectedDates

This commit is contained in:
rui hildt 2020-06-02 15:42:14 +02:00
parent 7ae26e39c4
commit 0ca7e66a4b
1 changed files with 50 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/Schedule/SelectedDates.js
View File

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