diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx index 400f355..e47041c 100644 --- a/web/src/components/events/EventContainer.tsx +++ b/web/src/components/events/EventContainer.tsx @@ -37,7 +37,7 @@ const EventList = ({ events }: { events: EventFragment[] }) => { return ( ); diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx index 27da146..176c59f 100644 --- a/web/src/components/events/EventItem.tsx +++ b/web/src/components/events/EventItem.tsx @@ -3,7 +3,11 @@ import styles from "./eventItem.module.scss"; import Link from "next/link"; import Image from "../general/Image"; -import { SingularEvent, EventFragment } from "@/lib/event"; +import { + SingularEvent, + EventFragment, + getClosestOccurrence, +} from "@/lib/event"; import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date"; export const EventItem = ({ @@ -15,6 +19,8 @@ export const EventItem = ({ mode: "list" | "calendar"; size?: "small" | "medium" | "large"; }) => { + const nextOccurrence = getClosestOccurrence(event); + return (
  • {event.title}

    - {event.occurrence?.start && mode === "list" && ( + {mode === "list" && nextOccurrence && (

    - {formatDate(event.occurrence?.start, commonDateFormat)} + {event.occurrences.length === 1 && + formatDate(nextOccurrence.start, commonDateFormat)} + {event.occurrences.length > 1 && nextOccurrence && ( + + Neste:{" "} + {formatDate(nextOccurrence.start, commonDateFormat)} + + )}

    )} - {event.occurrence?.start && mode === "calendar" && ( + {mode === "calendar" && event.occurrence?.start && (

    {formatDate(event.occurrence?.start, "'kl.' HH:mm")}

    diff --git a/web/src/lib/event.ts b/web/src/lib/event.ts index e0b588c..9fb5c51 100644 --- a/web/src/lib/event.ts +++ b/web/src/lib/event.ts @@ -5,9 +5,12 @@ import { getWeek, getDate, endOfWeek, + startOfToday, startOfWeek, + isAfter, eachDayOfInterval, addWeeks, + parseISO, } from "date-fns"; import { toLocalTime, formatDate } from "./date"; import { graphql } from "@/gql"; @@ -145,3 +148,17 @@ export function organizeEventsByDate(events: SingularEvent[]): EventsByDate { return eventsByDate; } + +export function getClosestOccurrence(event: EventFragment) { + const today = startOfToday(); + const occurrences = event?.occurrences ?? []; + + const futureOccurrences = occurrences.filter((occurrence) => + isAfter(toLocalTime(occurrence.start), today) + ); + futureOccurrences.sort( + (a, b) => parseISO(a.start).getTime() - parseISO(b.start).getTime() + ); + + return futureOccurrences[0]; +}