use actual occurrences in date list

web/src/app/arrangementer/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
-import { DateList } from "@/components/events/DateList";
+import { DateList, DateListDemo } from "@/components/events/DateList";
 import { DateListOld } from "@/components/events/DateListOld";
 import { EventHeader } from "@/components/events/EventHeader";
 import { BgPig } from "@/components/general/BgPig";
@@ -54,7 +54,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
       <main className="site-main" id="main">
         <EventHeader event={event} />
         <section className="pageContent">
-          <DateList />
+          <DateList event={event} />
+          <DateListDemo />
           <DateListOld />
           <Blocks blocks={event.body} />
         </section>

web/src/components/events/DateList.tsx

@@ -1,6 +1,85 @@
-import styles from "./dateList.module.scss";
+"use client";
 
-export const DateList = () => {
+import { useState } from "react";
+import { formatDate, isTodayOrFuture } from "@/lib/date";
+import { EventFragment, EventOccurrence, compareDates } from "@/lib/event";
+import styles from "./dateList.module.scss";
+import Link from "next/link";
+
+const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
+  const dateFormat = "EEEE dd.MM.yyyy";
+  const timeFormat = "'kl.' HH:mm";
+
+  return (
+    <li className={styles.date}>
+      <div className={styles.time}>
+        <span>{formatDate(occurrence.start, dateFormat)}</span>&nbsp;
+        <span>{formatDate(occurrence.start, timeFormat)}</span>
+      </div>
+      <div className={styles.venue}>
+        <span>
+          {occurrence.venue?.preposition + " " ?? ""}
+          {occurrence.venue?.url && (
+            <Link href={occurrence.venue?.url}>{occurrence.venue?.title}</Link>
+          )}
+          {!occurrence.venue?.url && <>{occurrence.venue?.title}</>}
+        </span>
+      </div>
+    </li>
+  );
+};
+
+export const DateList = ({ event }: { event: EventFragment }) => {
+  const [showPast, setShowPast] = useState(false);
+
+  const futureOccurrences = event.occurrences
+    .filter((occurrence) => isTodayOrFuture(occurrence.start))
+    .sort((a, b) => compareDates(a.start, b.start));
+  const pastOccurrences = event.occurrences
+    .filter((occurrence) => !isTodayOrFuture(occurrence.start))
+    .sort((a, b) => compareDates(a.start, b.start));
+
+  // TODO: end date/time?
+  // TODO: past occurrences?
+
+  return (
+    <div className={styles.dateWrapper}>
+      <h2 className="circlehead">
+        <span className="circle"></span>
+        <span className="circle"></span>
+        <span className="circle"></span>
+        Kommende datoer{" "}
+        <span className="number">({futureOccurrences.length})</span>
+      </h2>
+      <ul className={styles.dateList}>
+        {futureOccurrences.map((occurrence) => (
+          <DateListItem key={occurrence.id} occurrence={occurrence} />
+        ))}
+      </ul>
+      {/* <div onClick={() => setShowPast(!showPast)}>
+        {showPast ? "Skjul" : "Vis"} tidligere
+      </div>
+      {showPast && (
+        <>
+          <h2 className="circlehead">
+            <span className="circle"></span>
+            <span className="circle"></span>
+            <span className="circle"></span>
+            Tidligere datoer{" "}
+            <span className="number">({pastOccurrences.length})</span>
+          </h2>
+          <ul className={styles.dateList}>
+            {pastOccurrences.map((occurrence) => (
+              <DateListItem key={occurrence.id} occurrence={occurrence} />
+            ))}
+          </ul>
+        </>
+      )} */}
+    </div>
+  );
+};
+
+export const DateListDemo = ({ event }: { event: EventFragment }) => {
   return (
     <div className={styles.dateWrapper}>
       <h2 className="circlehead">

web/src/gql/gql.ts

@@ -33,7 +33,7 @@ const documents = {
     "\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n      news: pages(contentType: \"news.newsPage\", limit: 3) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  ": types.HomeDocument,
     "\n  fragment Blocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      rawValue\n      value\n    }\n    ... on ImageWithTextBlock {\n      image {\n        ...Image\n      }\n      imageFormat\n      text\n    }\n    ... on ImageSliderBlock {\n      images {\n        ... on ImageSliderItemBlock {\n          image {\n            ...Image\n          }\n          text\n        }\n      }\n    }\n    ... on HorizontalRuleBlock {\n      color\n    }\n    ... on FeaturedBlock {\n      title\n      featuredBlockText: text\n      linkText\n      imagePosition\n      featuredPage {\n        contentType\n        pageType\n        url\n        ... on EventPage {\n          featuredImage {\n            ...Image\n          }\n        }\n        ... on NewsPage {\n          featuredImage {\n            ...Image\n          }\n        }\n      }\n      featuredImageOverride {\n        ...Image\n      }\n    }\n  }\n": types.BlocksFragmentDoc,
     "\n  fragment Image on CustomImage {\n    id\n    url\n    width\n    height\n    alt\n    attribution\n  }\n": types.ImageFragmentDoc,
-    "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    pig\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n": types.EventFragmentDoc,
+    "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    pig\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n          preposition\n          url\n        }\n      }\n    }\n  }\n": types.EventFragmentDoc,
     "\n  query futureEvents {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n": types.FutureEventsDocument,
     "\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    title\n    firstPublishedAt\n    excerpt\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n": types.NewsFragmentDoc,
     "\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    title\n    lead\n  }\n": types.NewsIndexFragmentDoc,
@@ -137,7 +137,7 @@ export function graphql(source: "\n  fragment Image on CustomImage {\n    id\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    pig\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    pig\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    pig\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n          preposition\n          url\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    pig\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n          preposition\n          url\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

web/src/lib/event.ts

@@ -63,6 +63,8 @@ const EventFragmentDefinition = graphql(`
           id
           slug
           title
+          preposition
+          url
         }
       }
     }
@@ -102,9 +104,13 @@ export function getSingularEvents(events: EventFragment[]): SingularEvent[] {
     .flat();
 }
 
+export function compareDates(a: Date | string, b: Date | string) {
+  return compareAsc(new Date(a), new Date(b));
+}
+
 export function sortSingularEvents(events: SingularEvent[]) {
   return events.sort((a, b) =>
-    compareAsc(new Date(a.occurrence.start), new Date(b.occurrence.start))
+    compareDates(a.occurrence.start, b.occurrence.start)
   );
 }
 interface EventsByDate {