From e5a69b7ce9bc0d538e2165f3bd3e5dd2a83e5a56 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sat, 10 Aug 2024 16:04:15 +0200
Subject: [PATCH] link to organizers, change presentation from list to text

---
 web/src/components/events/EventDetails.tsx  |  2 ++
 web/src/components/events/OrganizerList.tsx | 33 +++++++++++++--------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/web/src/components/events/EventDetails.tsx b/web/src/components/events/EventDetails.tsx
index aeb396e..7689f39 100644
--- a/web/src/components/events/EventDetails.tsx
+++ b/web/src/components/events/EventDetails.tsx
@@ -19,6 +19,8 @@ function formatPrice(price: number | string): string {
   return `${asNumber} kr`;
 }
 
+
+
 export const EventDetails = ({ event }: { event: EventFragment }) => {
   const featuredImage: any = event.featuredImage;
 
diff --git a/web/src/components/events/OrganizerList.tsx b/web/src/components/events/OrganizerList.tsx
index dfa25c6..6072e0c 100644
--- a/web/src/components/events/OrganizerList.tsx
+++ b/web/src/components/events/OrganizerList.tsx
@@ -1,25 +1,32 @@
 "use client";
 
-import { useState } from "react";
-import { formatDate, isTodayOrFuture } from "@/lib/date";
 import { EventFragment, EventOrganizer } from "@/lib/event";
 import styles from "./organizerList.module.scss";
 import Link from "next/link";
+import { Fragment } from "react";
 
 export const OrganizerList = ({ event }: { event: EventFragment }) => {
+  const total = event.organizers.length;
   return (
-    <ul className={styles.organizerList}>
-      {event.organizers.map((organizer) => {
+    <div className={styles.organizerList}>
+      {event.organizers.map((organizer, index) => {
         const url = organizer.association?.url ?? organizer.externalUrl ?? null;
-        if (typeof url === "string" && url.startsWith("http")) {
-          return (
-            <li key={organizer.name}>
-              <Link href={url}>{organizer.name}</Link>
-            </li>
-          );
-        }
-        return <li key={organizer.name}>{organizer.name}</li>;
+        const hasValidUrl =
+          typeof url === "string" &&
+          (url.startsWith("http") || url.startsWith("/"));
+        return (
+          <Fragment key={organizer.name}>
+            {total > 1 && index === total - 1 && <> og </>}
+            {hasValidUrl && (
+              <span>
+                <Link href={url}>{organizer.name}</Link>
+              </span>
+            )}
+            {!hasValidUrl && <span>{organizer.name}</span>}
+            {total > 1 && index < total - 2 && <>, </>}
+          </Fragment>
+        );
       })}
-    </ul>
+    </div>
   );
 };