IT-Start-Gjovik · KjetilIN · Oct 5, 2023 · Sep 29, 2023 · Sep 29, 2023
diff --git a/app/(site)/events/[eventPage]/page.tsx b/app/(site)/events/[eventPage]/page.tsx
@@ -1,91 +1,86 @@
-"use client"; // Use client to render the page 
+"use client"; // Use client to render the page
 
 import { getEventPage } from "@/backend/sanity-utils";
-import { EventPageType } from "@/types/EventPageType";
-import {PortableText} from '@portabletext/react'
-import Footer from "@/components/footer/footer";
 import BackButton from "@/components/UI/backbutton";
 import RegistrerButton from "@/components/UI/registrerbutton";
-import { useEffect, useState } from "react";
-import { redirect } from 'next/navigation';
-import getDateTimeFormat from "@/utils/date";
+import Footer from "@/components/footer/footer";
 import LoadingPage from "@/components/loadingPage/loadingPage";
+import { EventPageType } from "@/types/EventPageType";
+import getDateTimeFormat from "@/utils/date";
+import { PortableText } from "@portabletext/react";
 import { error } from "console";
-import { useRouter } from 'next/navigation'
+import { redirect, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 
-// Props for the event page 
+// Props for the event page
 type Props = {
-  params: { eventPage: string }
-}
+  params: { eventPage: string };
+};
 
-export default function PageForEvent({params}: Props) {
+export default function PageForEvent({ params }: Props) {
   const [eventPage, setEventPage] = useState<EventPageType | null>(null);
 
   const slug = params.eventPage;
-  const router = useRouter()
+  const router = useRouter();
 
-
-
-  useEffect(()=>{
-    if(!slug) router.push("/");
-    if(!eventPage) {
+  useEffect(() => {
+    if (!slug) router.push("/");
+    if (!eventPage) {
       getEventPage(slug)
-      .then(
-        (data) => {
-          if(!data){
-            router.push("/feilside")
+        .then((data) => {
+          if (!data) {
+            router.push("/feilside");
           }
-          setEventPage(data)
+          setEventPage(data);
         })
-      .catch(error => console.log("Error catches!", error))}
-  },[slug, eventPage, router])
-
+        .catch((error) => console.log("Error catches!", error));
+    }
+  }, [slug, eventPage, router]);
 
-  if(!eventPage){
-    return <LoadingPage />
+  if (!eventPage) {
+    return <LoadingPage />;
   }
-  
-  // Information time and date formatted correctly 
-  let {dateFormat, timeFormat} = getDateTimeFormat(eventPage.datetime)
-  let isOver: Boolean = new Date > new Date(eventPage.datetime);
+
+  // Information time and date formatted correctly
+  let { dateFormat, timeFormat } = getDateTimeFormat(eventPage.datetime);
+  let isOver: Boolean = new Date() > new Date(eventPage.datetime);
 
   const EventOverBadge = () => {
-    return (
-      isOver ? (
-        <span className="bg-red-100 text-red-800 text-sm font-medium mr-2 px-2.5 py-1.5 rounded ">
-          Påmelding Lukket!
-        </span>
-      ) : null
-    );
-  }
+    return isOver ? (
+      <span className="bg-red-100 text-red-800 text-sm font-medium mr-2 px-2.5 py-1.5 rounded ">
+        Påmelding Lukket!
+      </span>
+    ) : null;
+  };
 
   return (
     <div className="flex flex-col min-h-screen bg-gradient-to-tl from-gradient-end via-gradient-mid to-gradient-start">
       <main className="text-4xl flex justify-center min-h-screen">
         <div className="bg-slate-100 h-fit w-11/12 mt-2 p-5 md:p-20 md:w-3/4 md:text-6xl">
           <h1 className=" font-bold text-black">{eventPage.title}</h1>
 
-          <h2 className="text-black text-xl my-2 md:text-2xl md:my-5"> 📅 {dateFormat}  |  🕕 {timeFormat} <EventOverBadge /> </h2>
+          <h2 className="text-black text-xl my-2 md:text-2xl md:my-5">
+            {" "}
+            📅 {dateFormat} | 🕕 {timeFormat} <EventOverBadge />{" "}
+          </h2>
 
           <hr className="h-1 my-8 border-0 bg-gray-800" />
 
           <div className="text-lg text-gray-800 mt-5 mx-10">
             <PortableText value={eventPage.content} />
           </div>
 
-
           <div className="flex justify-left gap-2">
-
-            <RegistrerButton isEventOverBoolean={isOver ? true : false} urlToForm={eventPage.url} />
+            <RegistrerButton
+              isEventOverBoolean={isOver ? true : false}
+              urlToForm={eventPage.url}
+            />
 
             <BackButton link="/" text="Tilbake" />
-
           </div>
-
-
         </div>
       </main>
       <Footer />
     </div>
   );
-}
+}
diff --git a/backend/sanity-utils.ts b/backend/sanity-utils.ts
@@ -3,13 +3,13 @@ import { EventPageType } from "@/types/EventPageType";
 import { VervType } from "@/types/Verv";
 import { createClient, groq } from "next-sanity";
 
-// Async function that gets all event cards available 
-export async function getEventCards(): Promise<EventCardType[]>{
+// Async function that gets all event cards available
+export async function getEventCards(): Promise<EventCardType[]> {
     const client = createClient({
         projectId: "a42ubgcg",
         dataset: "production",
         apiVersion: "2023-07-06",
-        useCdn: false 
+        useCdn: false,
     });
 
     return client.fetch(
@@ -21,7 +21,7 @@ export async function getEventCards(): Promise<EventCardType[]>{
             "image": image.asset -> url,
             "slug": slug.current,
         }`
-    )
+    );
 }
 
 // Get a single event page based on the slug
@@ -30,12 +30,11 @@ export async function getEventPage(slug: string): Promise<EventPageType> {
         projectId: "a42ubgcg",
         dataset: "production",
         apiVersion: "2023-07-06",
-        useCdn: false 
+        useCdn: false,
     });
 
-
     return client.fetch(
-      groq`*[_type == "event" && slug.current == $slug][0]{
+        groq`*[_type == "event" && slug.current == $slug][0]{
         _id,
         title,
         "slug": slug.current,
@@ -44,17 +43,17 @@ export async function getEventPage(slug: string): Promise<EventPageType> {
         content,
         datetime
       }`,
-      { slug }
-    )
+        { slug }
+    );
 }
 
 // Async function that gets all vervtypes from the backend
-export async function getVervs(): Promise<VervType[]>{
+export async function getVervs(): Promise<VervType[]> {
     const client = createClient({
         projectId: "a42ubgcg",
         dataset: "production",
         apiVersion: "2023-07-06",
-        useCdn: false 
+        useCdn: false,
     });
 
     return client.fetch(
@@ -64,5 +63,5 @@ export async function getVervs(): Promise<VervType[]>{
             url,
             type
         }`
-    )
+    );
 }
diff --git a/backend/schemas/verv.ts b/backend/schemas/verv.ts
@@ -1,4 +1,4 @@
-import { JoinStatus } from "@/components/JoinList/joinlistelement";
+import { JoinStatus } from "@/enums/EJoinStatus";
 
 const verv = {
     name: "verv",
@@ -10,29 +10,29 @@ const verv = {
             title: "Tittel",
             description: "Tittel til verv. F.eks IT Verv",
             type: "string",
-            required: true
+            required: true,
         },
         {
-            name:"url",
+            name: "url",
             title: "Url",
             description: "Link til påmeldingskjema for vervet",
             type: "url",
-            required: true
+            required: true,
         },
         {
             title: "Status",
             description: "Velg status for opptak til vervet. NB! Kun åpen status vil gi tilgang til påmeldingen",
             name: "type",
             type: "string",
             options: {
-              list: [
-                { title: "Open", value: JoinStatus.OPEN.toString() },
-                { title: "Coming Soon", value: JoinStatus.COMING_SOON.toString() },
-                { title: "Closed", value: JoinStatus.CLOSED.toString() },
-              ],
+                list: [
+                    { title: "Open", value: JoinStatus.OPEN.toString() },
+                    { title: "Coming Soon", value: JoinStatus.COMING_SOON.toString() },
+                    { title: "Closed", value: JoinStatus.CLOSED.toString() },
+                ],
             },
-            initialValue: JoinStatus.COMING_SOON
-          }
+            initialValue: JoinStatus.COMING_SOON,
+        },
     ],
 };
 

diff --git a/components/JoinList/joinlist.tsx b/components/JoinList/joinlist.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import JoinListElement, { JoinStatus } from "./joinlistelement";
 import { getVervs } from "@/backend/sanity-utils";
-import { useState, useEffect } from "react";
-import LoadingPage from "../loadingPage/loadingPage";
 import { VervType } from "@/types/Verv";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import LoadingPage from "../loadingPage/loadingPage";
+import JoinListElement from "./joinlistelement";
 
 export default function JoinList() {
 

diff --git a/components/JoinList/joinlistelement.tsx b/components/JoinList/joinlistelement.tsx
@@ -1,45 +1,61 @@
-interface Props{
-    title: string,
-    formUrl: string,
-    status: number
+import { JoinStatus } from "@/enums/EJoinStatus";
 
+interface Props {
+    title: string;
+    formUrl: string;
+    status: number;
 }
 
-export enum JoinStatus{
-    OPEN, COMING_SOON, CLOSED
-}
-
-const getStatusBadge = (status: JoinStatus) =>{
-    switch(status){
+const getStatusBadge = (status: JoinStatus) => {
+    switch (status) {
         case JoinStatus.OPEN:
-            return <span className="bg-green-900 min-w-[100px] flex justify-center text-green-300 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">Åpen</span>
+            return (
+                <span className="bg-green-900 min-w-[100px] flex justify-center text-green-300 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
+                    Åpen
+                </span>
+            );
         case JoinStatus.CLOSED:
-            return <span className="bg-gray-700 min-w-[100px] flex justify-center text-gray-300 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">Lukket</span>
+            return (
+                <span className="bg-gray-700 min-w-[100px] flex justify-center text-gray-300 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
+                    Lukket
+                </span>
+            );
         case JoinStatus.COMING_SOON:
-            return <span className="bg-yellow-900 min-w-[80px] flex justify-center text-yellow-300 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">Kommer Snart</span>
+            return (
+                <span className="bg-yellow-900 min-w-[80px] flex justify-center text-yellow-300 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">
+                    Kommer Snart
+                </span>
+            );
     }
-}
-
-
-// Transforming a status code into the correct type 
-const statusMap : Record<string, JoinStatus>= {
-    "0" : JoinStatus.OPEN,
-    "1" : JoinStatus.COMING_SOON,
-    "2" : JoinStatus.CLOSED
-}
+};
 
+// Transforming a status code into the correct type
+const statusMap: Record<string, JoinStatus> = {
+    "0": JoinStatus.OPEN,
+    "1": JoinStatus.COMING_SOON,
+    "2": JoinStatus.CLOSED,
+};
 
-export default function JoinListElement({formUrl, title, status }:Props) {
-
+export default function JoinListElement({ formUrl, title, status }: Props) {
     let statusType: JoinStatus = statusMap[status];
-    const style = statusType === JoinStatus.OPEN ? " bg-gray-700 hover:bg-gray-600" : "bg-gray-900 cursor-not-allowed pointer-events-none"
+    const style =
+        statusType === JoinStatus.OPEN
+            ? " bg-gray-700 hover:bg-gray-600"
+            : "bg-gray-900 cursor-not-allowed pointer-events-none";
 
     return (
         <li>
-            <a href={formUrl} target="_blank" className={"flex items-center p-3 text-white rounded-lg text-base font-bold hover:shadow "+ style}>
+            <a
+                href={formUrl}
+                target="_blank"
+                className={
+                    "flex items-center p-3 text-white rounded-lg text-base font-bold hover:shadow " +
+                    style
+                }
+            >
                 <span className="flex-1 ml-3 whitespace-nowrap">{title}</span>
                 {getStatusBadge(statusType)}
             </a>
         </li>
-    )
-}
+    );
+}
diff --git a/enums/EJoinStatus.ts b/enums/EJoinStatus.ts
@@ -0,0 +1,5 @@
+export enum JoinStatus {
+  OPEN,
+  COMING_SOON,
+  CLOSED,
+}
diff --git a/types/Verv.ts b/types/Verv.ts
@@ -1,8 +1,8 @@
-import { JoinStatus } from "@/components/JoinList/joinlistelement"
+import { JoinStatus } from "@/enums/EJoinStatus";
 
 export type VervType = {
-    _id: string,
-    title: string,
-    url: string,
-    type: JoinStatus
-}
+    _id: string;
+    title: string;
+    url: string;
+    type: JoinStatus;
+};