From 50b08b874d6d4294f9523ac692ea2a2fc5c04e43 Mon Sep 17 00:00:00 2001 From: Jonas Braathen Date: Sun, 23 Jun 2024 15:39:41 +0200 Subject: [PATCH] organize events by day in UpcomingEvents --- web/src/components/events/EventContainer.tsx | 4 +- web/src/components/events/EventItem.tsx | 11 +---- web/src/components/events/UpcomingEvents.tsx | 46 +++++++++++++++----- web/src/lib/event.ts | 42 +++++++++++++----- 4 files changed, 70 insertions(+), 33 deletions(-) diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx index f655f51..a7d31f7 100644 --- a/web/src/components/events/EventContainer.tsx +++ b/web/src/components/events/EventContainer.tsx @@ -8,7 +8,7 @@ import { EventCategory, SingularEvent, getSingularEvents, - organizeEventsByDate, + organizeEventsInCalendar, EventOrganizer, } from "@/lib/event"; import { isTodayOrFuture } from "@/lib/date"; @@ -141,7 +141,7 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => { (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start) ); - const eventsByDate = organizeEventsByDate(futureSingularEvents); + const eventsByDate = organizeEventsInCalendar(futureSingularEvents); return (
diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx index 582da1e..e3f9d12 100644 --- a/web/src/components/events/EventItem.tsx +++ b/web/src/components/events/EventItem.tsx @@ -18,7 +18,7 @@ export const EventItem = ({ size, }: { event: SingularEvent | EventFragment; - mode: "list" | "calendar" | "singular"; + mode: "list" | "calendar" | "singular-time-only"; size?: "small" | "medium" | "large"; }) => { const futureOccurrences = getFutureOccurrences(event); @@ -58,14 +58,7 @@ export const EventItem = ({ )}
)} - {mode === "singular" && - "occurrence" in event && - event.occurrence?.start && ( -

- {formatExtendedDateTime(event.occurrence.start)} -

- )} - {mode === "calendar" && + {(mode === "calendar" || mode === "singular-time-only") && "occurrence" in event && event.occurrence?.start && (

diff --git a/web/src/components/events/UpcomingEvents.tsx b/web/src/components/events/UpcomingEvents.tsx index ee17c6d..3710b3e 100644 --- a/web/src/components/events/UpcomingEvents.tsx +++ b/web/src/components/events/UpcomingEvents.tsx @@ -1,6 +1,11 @@ import { EventFragment } from "@/gql/graphql"; -import { isTodayOrFuture } from "@/lib/date"; -import { getSingularEvents, sortSingularEvents } from "@/lib/event"; +import { isTodayOrFuture, formatDate } from "@/lib/date"; +import { parse } from "date-fns"; +import { + getSingularEvents, + organizeEventsByDate, + sortSingularEvents, +} from "@/lib/event"; import Link from "next/link"; import { EventItem } from "./EventItem"; import styles from "./upcomingEvents.module.scss"; @@ -11,6 +16,8 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => { isTodayOrFuture(event.occurrence.start) ) ); + const sliced = upcomingSingularEvents.slice(0, 10); + const eventsByDate = organizeEventsByDate(sliced); return (

@@ -20,16 +27,31 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => { Denne uka på Chateau Neuf - +
+ {Object.keys(eventsByDate).map((day) => { + const eventsThisDay = eventsByDate[day]; + return ( +
+

+ {formatDate( + parse(day, "yyyy-MM-dd", new Date()), + "eeee dd.MM." + )} +

+
    + {eventsThisDay.map((event) => ( + + ))} +
+
+ ); + })} +
Vis kalender →
diff --git a/web/src/lib/event.ts b/web/src/lib/event.ts index a7266ea..06d5fe8 100644 --- a/web/src/lib/event.ts +++ b/web/src/lib/event.ts @@ -143,7 +143,7 @@ export function sortSingularEvents(events: SingularEvent[]) { compareDates(a.occurrence.start, b.occurrence.start) ); } -interface EventsByDate { +interface EventCalendar { [yearMonth: string]: { [week: string]: { [day: string]: SingularEvent[]; @@ -151,10 +151,12 @@ interface EventsByDate { }; } -export function organizeEventsByDate(events: SingularEvent[]): EventsByDate { +export function organizeEventsInCalendar( + events: SingularEvent[] +): EventCalendar { const sortedEvents = sortSingularEvents(events); - const eventsByDate: EventsByDate = {}; + const calendar: EventCalendar = {}; const minDate = new Date(sortedEvents[0]?.occurrence.start); const maxDate = new Date( @@ -170,16 +172,16 @@ export function organizeEventsByDate(events: SingularEvent[]): EventsByDate { end: endOfWeek(currentDate, { weekStartsOn: 1 }), }); - if (!eventsByDate[yearMonth]) { - eventsByDate[yearMonth] = {}; + if (!calendar[yearMonth]) { + calendar[yearMonth] = {}; } - if (!eventsByDate[yearMonth][week]) { - eventsByDate[yearMonth][week] = {}; + if (!calendar[yearMonth][week]) { + calendar[yearMonth][week] = {}; } daysOfWeek.forEach((day) => { const formattedDay = formatDate(day, "yyyy-MM-dd"); - if (!eventsByDate[yearMonth][week][formattedDay]) { - eventsByDate[yearMonth][week][formattedDay] = []; + if (!calendar[yearMonth][week][formattedDay]) { + calendar[yearMonth][week][formattedDay] = []; } }); @@ -191,7 +193,27 @@ export function organizeEventsByDate(events: SingularEvent[]): EventsByDate { const yearMonth = formatDate(start, "yyyy-MM"); const week = formatDate(start, "w"); const day = formatDate(start, "yyyy-MM-dd"); - eventsByDate[yearMonth][week][day].push(event); + calendar[yearMonth][week][day].push(event); + }); + + return calendar; +} + +interface EventsByDate { + [day: string]: SingularEvent[]; +} + +export function organizeEventsByDate(events: SingularEvent[]): EventsByDate { + const sortedEvents = sortSingularEvents(events); + const eventsByDate: EventsByDate = {}; + + sortedEvents.forEach((event) => { + const start = toLocalTime(event.occurrence.start); + const day = formatDate(start, "yyyy-MM-dd"); + if (!eventsByDate[day]) { + eventsByDate[day] = []; + } + eventsByDate[day].push(event); }); return eventsByDate;