web: optimize event data detching on /arrangementer

web/src/components/events/EventContainer.tsx

@@ -13,7 +13,7 @@ import { unmaskFragment } from "@/gql";
 import {
   EventCategoryFragmentDefinition,
   EventOrganizerFragmentDefinition,
-  EventFragment,
+  EventOverviewItemFragment,
   EventCategory,
   SingularEvent,
   getSingularEvents,
@@ -44,7 +44,7 @@ export const EventContainer = ({
   eventOrganizers,
   venues,
 }: {
-  events: EventFragment[];
+  events: EventOverviewItemFragment[];
   eventCategories: EventCategory[];
   eventOrganizers: EventOrganizer[];
   venues: VenueFragment[];
@@ -233,7 +233,7 @@ export const EventContainer = ({
   );
 };
 
-const EventList = ({ events }: { events: EventFragment[] }) => {
+const EventList = ({ events }: { events: EventOverviewItemFragment[] }) => {
   if (events.length === 0) {
     return <div className={styles.noEvents}>Ingen kommende arrangementer.</div>;
   }
@@ -255,7 +255,7 @@ const CalendarDay = ({
   events,
 }: {
   day: string;
-  events: SingularEvent[];
+  events: SingularEvent<EventOverviewItemFragment>[];
 }) => (
   <div
     className={`${styles.calendarDay} ${events.length === 0 && styles.empty}`}
@@ -274,7 +274,11 @@ const CalendarDay = ({
   </div>
 );
 
-const CalendarWeek = ({ days }: { days: Record<string, SingularEvent[]> }) => {
+const CalendarWeek = ({
+  days,
+}: {
+  days: Record<string, SingularEvent<EventOverviewItemFragment>[]>;
+}) => {
   const daysInWeek = Object.keys(days);
   const firstDay = daysInWeek[0];
   const lastDay = daysInWeek[daysInWeek.length - 1];
@@ -310,7 +314,7 @@ function maybeYear(yearMonthString: string) {
   return ` ${yearMonth.getFullYear()}`;
 }
 
-const EventCalendar = ({ events }: { events: EventFragment[] }) => {
+const EventCalendar = ({ events }: { events: EventOverviewItemFragment[] }) => {
   const futureSingularEvents = getSingularEvents(events).filter(
     (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start),
   );