add some date handling

web/src/components/events/EventContainer.tsx

@@ -1,16 +1,21 @@
 "use client";
 
-import styles from "./eventContainer.module.scss";
+import { useState } from "react";
 import { EventItem } from "./EventItem";
 import { EventFilter } from "./EventFilter";
-import { EventFragment } from "@/gql/graphql";
-import { getSingularEvents } from "@/lib/event";
-import { useState } from "react";
+import { EventFragment, getSingularEvents } from "@/lib/event";
+import {
+  toLocalTime,
+  formatDate,
+  commonDateFormat,
+  isTodayOrFuture,
+} from "@/lib/date";
+import styles from "./eventContainer.module.scss";
 
 type EventContainerMode = "list" | "calendar";
 
 export const EventContainer = ({ events }: { events: EventFragment[] }) => {
-  const [mode, setMode] = useState<EventContainerMode>("list");
+  const [mode, setMode] = useState<EventContainerMode>("calendar");
 
   return (
     <div className={styles.events}>
@@ -38,10 +43,13 @@ const EventList = ({ events }: { events: EventFragment[] }) => {
 };
 
 const EventCalendar = ({ events }: { events: EventFragment[] }) => {
-  const singularEvents = getSingularEvents(events);
+  const singularEvents = getSingularEvents(events).filter((x) =>
+    x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
+  );
+
   return (
     <ul className={styles.eventList}>
-      {events.map((event) => (
+      {singularEvents.map((event) => (
         <EventItem key={event.id} event={event} />
       ))}
     </ul>

web/src/components/events/EventItem.tsx

@@ -1,9 +1,16 @@
-import { SingularEvent } from "@/app/arrangementer/page";
+"use client";
+
 import styles from "./eventItem.module.scss";
 import Link from "next/link";
 import Image from "../general/Image";
+import { SingularEvent, EventFragment } from "@/lib/event";
+import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";
 
-export const EventItem = ({ event }: { event: SingularEvent }) => {
+export const EventItem = ({
+  event,
+}: {
+  event: SingularEvent | EventFragment;
+}) => {
   return (
     <li className={`${styles.eventItem} linkItem`}>
       <div className={styles.image}>
@@ -19,7 +26,11 @@ export const EventItem = ({ event }: { event: SingularEvent }) => {
       </div>
       <div className={styles.text}>
         <h1 className={styles.title}>{event.title}</h1>
-        {event.occurrence && <p className={styles.details}>{event.occurrence.start}</p>}
+        {event.occurrence?.start && (
+          <p className={styles.details}>
+            {formatDate(event.occurrence?.start, commonDateFormat)}
+          </p>
+        )}
       </div>
       <Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
         Mer om arrangementet {event.title}