use singular events in upcoming events

This commit is contained in:
2024-05-23 01:05:37 +02:00
parent c640104183
commit be3f9ca82b
3 changed files with 26 additions and 7 deletions

View File

@ -16,7 +16,7 @@ export const EventItem = ({
size,
}: {
event: SingularEvent | EventFragment;
mode: "list" | "calendar";
mode: "list" | "calendar" | "singular";
size?: "small" | "medium" | "large";
}) => {
const nextOccurrence = getClosestOccurrence(event);
@ -55,6 +55,13 @@ export const EventItem = ({
)}
</p>
)}
{mode === "singular" &&
"occurrence" in event &&
event.occurrence?.start && (
<p className={styles.details}>
{formatDate(event.occurrence?.start, commonDateTimeFormat)}
</p>
)}
{mode === "calendar" &&
"occurrence" in event &&
event.occurrence?.start && (

View File

@ -1,9 +1,12 @@
import { EventFragment } from "@/gql/graphql";
import { EventItem } from "./EventItem";
import { sortSingularEvents, getSingularEvents } from "@/lib/event";
import styles from "./upcomingEvents.module.scss";
import Link from "next/link";
export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
const upcomingSingularEvents = sortSingularEvents(getSingularEvents(events));
return (
<section className={styles.upcomingWrapper}>
<h2 className="circlehead">
@ -13,8 +16,13 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
Denne uka Chateau Neuf
</h2>
<ul className={styles.eventList}>
{events.slice(0, 5).map((event) => (
<EventItem key={event.id} event={event} mode="list" size="medium" />
{upcomingSingularEvents.slice(0, 10).map((event) => (
<EventItem
key={event.id}
event={event}
mode="singular"
size="medium"
/>
))}
</ul>
<div className={styles.calendarLink}>

View File

@ -89,7 +89,7 @@ export const futureEventsQuery = graphql(`
}
`);
export function getSingularEvents(events: EventFragment[]) {
export function getSingularEvents(events: EventFragment[]): SingularEvent[] {
return events
.map((event) => {
return event.occurrences.map((occurrence) => {
@ -100,6 +100,12 @@ export function getSingularEvents(events: EventFragment[]) {
})
.flat();
}
export function sortSingularEvents(events: SingularEvent[]) {
return events.sort((a, b) =>
compareAsc(new Date(a.occurrence.start), new Date(b.occurrence.start))
);
}
interface EventsByDate {
[yearMonth: string]: {
[week: string]: {
@ -109,9 +115,7 @@ interface EventsByDate {
}
export function organizeEventsByDate(events: SingularEvent[]): EventsByDate {
const sortedEvents = events.sort((a, b) =>
compareAsc(new Date(a.occurrence.start), new Date(b.occurrence.start))
);
const sortedEvents = sortSingularEvents(events);
const eventsByDate: EventsByDate = {};