diff --git a/web/src/components/events/DateList.tsx b/web/src/components/events/DateList.tsx index 7fab56b..19e7cf5 100644 --- a/web/src/components/events/DateList.tsx +++ b/web/src/components/events/DateList.tsx @@ -12,7 +12,6 @@ import styles from "./dateList.module.scss"; import Link from "next/link"; const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => { - const dateFormat = "EEEE d. MMMM yyyy"; const timeFormat = "'kl.' HH:mm"; const wholeCastle = occurrence.venue?.slug === "hele-huset"; @@ -43,24 +42,26 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => { }; export const DateList = ({ event }: { event: EventFragment }) => { - const [showPast, setShowPast] = useState(false); - - const futureOccurrences = event.occurrences - .filter((occurrence) => isTodayOrFuture(occurrence.start)) - .sort((a, b) => compareDates(a.start, b.start)); - const pastOccurrences = event.occurrences - .filter((occurrence) => !isTodayOrFuture(occurrence.start)) - .sort((a, b) => compareDates(a.start, b.start)); - - // TODO: events occurring once - // TODO: end date/time? - // TODO: past occurrences? - const [showAllDates, setShowAllDates] = useState(false); function toggleDates() { setShowAllDates(!showAllDates); } + const oneOff = event.occurrences.length === 1; + const showToggle = event.occurrences.length > 4; + const futureOccurrences = event.occurrences + .filter((occurrence) => isTodayOrFuture(occurrence.start)) + .sort((a, b) => compareDates(a.start, b.start)); + + let visibleOccurrences = []; + if (oneOff || showAllDates || event.occurrences.length <= 4) { + visibleOccurrences = event.occurrences; + } else { + visibleOccurrences = futureOccurrences.slice(0, 4); + } + + // TODO: end date/time? + return (