edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

collapse yearmonths that are two months ahead by default in event calendar

Browse Source
This commit is contained in:
Jonas Braathen
2024-08-05 20:58:56 +02:00
parent af20820bac
commit 9416df11a3
2 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/components/events/EventContainer.tsx
View File

@ -118,7 +118,11 @@ export const EventContainer = ({
<div className={styles.events}>
<div className={styles.eventWrapper}>
<div className={styles.displayOptions}>
<button onClick={() => setMode(null)} className="button toggler hasIcon" data-active={mode === "list"}>
<button
onClick={() => setMode(null)}
className="button toggler hasIcon"
data-active={mode === "list"}
>
<span>Vis liste</span>
<Icon type="list" />
</button>
@ -194,43 +198,48 @@ const CalendarDay = ({
);
const EventCalendar = ({ events }: { events: EventFragment[] }) => {
const [showAll, setShowAll] = useState(false);
const futureSingularEvents = getSingularEvents(events).filter(
(x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
);
const eventsByDate = organizeEventsInCalendar(futureSingularEvents);
const yearMonths = Object.keys(eventsByDate);
const visibleYearMonths = showAll ? yearMonths : yearMonths.slice(0, 2);
const [visibleYearMonths, setVisibleYearMonths] = useState(
yearMonths.slice(0, 2)
);
const toggleYearMonth = (yearMonth: string) => {
if (visibleYearMonths.includes(yearMonth)) {
setVisibleYearMonths(visibleYearMonths.filter((x) => x != yearMonth));
} else {
setVisibleYearMonths([...visibleYearMonths, yearMonth]);
}
};
return (
<>
<div className={styles.eventCalendar}>
{Object.keys(eventsByDate)
.filter((yearMonth) => visibleYearMonths.includes(yearMonth))
.map((yearMonth) => (
<div key={yearMonth} className={styles.calendarYearMonth}>
<h2>{formatYearMonth(yearMonth)}</h2>
{Object.keys(eventsByDate[yearMonth]).map((week) => (
<div key={week} className={styles.calendarWeek}>
{Object.keys(eventsByDate[yearMonth][week]).map((day) => (
<CalendarDay
key={day}
day={day}
events={eventsByDate[yearMonth][week][day]}
/>
))}
</div>
))}
</div>
))}
{Object.keys(eventsByDate).map((yearMonth) => (
<div
key={yearMonth}
className={styles.calendarYearMonth}
data-collapsed={!visibleYearMonths.includes(yearMonth)}
onClick={() => toggleYearMonth(yearMonth)}
>
<h2>{formatYearMonth(yearMonth)}</h2>
{Object.keys(eventsByDate[yearMonth]).map((week) => (
<div key={week} className={styles.calendarWeek}>
{Object.keys(eventsByDate[yearMonth][week]).map((day) => (
<CalendarDay
key={day}
day={day}
events={eventsByDate[yearMonth][week][day]}
/>
))}
</div>
))}
</div>
))}
</div>
{!showAll && yearMonths.length > 2 && (
<button onClick={() => setShowAll(true)} className="button">
<span>Vis alt</span>
<Icon />
</button>
)}
</>
);
};