Merge v.1.0.1 to Production

* build(deps): bump @types/node from 20.4.0 to 20.4.1 (#32) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.4.0 to 20.4.1. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix fetch bug to sanity (#36) * refactor: components are now not async * refactor: useEffect for fetching the data * add: date util function and fix event page bug * build(deps): bump semver from 5.7.1 to 5.7.2 (#35) Bumps [semver](https://github.com/npm/node-semver) from 5.7.1 to 5.7.2. - [Release notes](https://github.com/npm/node-semver/releases) - [Changelog](https://github.com/npm/node-semver/blob/v5.7.2/CHANGELOG.md) - [Commits](npm/node-semver@v5.7.1...v5.7.2) --- updated-dependencies: - dependency-name: semver dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Create CODEOWNERS (#39) * Update CODEOWNERS * fix: small fix for fetching data (#41) * Loading page (#42) * add: loading page with spinner to show that we are fetching data * refactor: using loading page on waiting for api calls --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
IT-Start-Gjovik · Jul 12, 2023 · 4c3f32d · 4c3f32d
2 parents 0863648 + 3a54ca4
commit 4c3f32d
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 127 deletions.
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -0,0 +1,13 @@
+# CODEOWNERS file
+
+# IT Leder Start GJøvik and repsonsible for 
+* @KjetilIN
+
+# Deployment responsible
+/.github/* @KjetilIN
+
+# @sanity-team is responsible for the /app/(sanity)/ folder
+/app/(sanity)/* @IT-Start-Gjovik/sanity-team
+
+# Web Developers are repsonsible for the app itself that is found inside the /app/(site)/ folder
+/app/(site)/* @IT-Start-Gjovik/web-utviklere 
diff --git a/app/(site)/events/[eventPage]/page.tsx b/app/(site)/events/[eventPage]/page.tsx
@@ -2,34 +2,37 @@
 
 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 LoadingPage from "@/components/loadingPage/loadingPage";
 
 // Props for the event page 
 type Props = {
   params: { eventPage: string }
 }
 
-export default async function PageForEvent({ params }: Props) {
-  const slug = params.eventPage; // Slug to the page
+export default function PageForEvent({params}: Props) {
+  const [eventPage, setEventPage] = useState<EventPageType | null>(null);
+
+  const slug = params.eventPage;
 
-  // Get the details for the event page
-  const event: EventPageType = await getEventPage(slug);
+  useEffect(()=>{
+    if(!slug) redirect("/");
+    if(!eventPage) getEventPage(slug).then(data => setEventPage(data))
+  },[slug, eventPage])
 
-  // If the event does not exist, return the error page 
-  if (!event) {
-   return <p>Error loading the event</p>
+  if(!eventPage){
+    return <LoadingPage />
   }
 
   // Information time and date formatted correctly 
-  let currentDate: Date = new Date();
-  let eventDate: Date = new Date(event.datetime);
-  let dateFormat: string = eventDate.getDay() + ". " + eventDate.toLocaleString("no-NO", { month: "long" }) + " " + eventDate.getFullYear().toString();
-  let timeFormat: string = eventDate.getHours().toString() + ":" + eventDate.getMinutes().toString();
-  let isOver: Boolean = currentDate > eventDate;
+  let {dateFormat, timeFormat} = getDateTimeFormat(eventPage.datetime)
+  let isOver: Boolean = new Date > new Date(eventPage.datetime);
 
   const EventOverBadge = () => {
     return (
@@ -45,20 +48,20 @@ export default async function PageForEvent({ params }: Props) {
     <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">{event.title}</h1>
+          <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>
 
           <hr className="h-1 my-8 border-0 bg-gray-800" />
 
           <div className="text-lg text-gray-800 mt-5 mx-10">
-            <PortableText value={event.content} />
+            <PortableText value={eventPage.content} />
           </div>
 
 
           <div className="flex justify-left gap-2">
 
-            <RegistrerButton isEventOverBoolean={isOver ? true : false} urlToForm={event.url} />
+            <RegistrerButton isEventOverBoolean={isOver ? true : false} urlToForm={eventPage.url} />
 
             <BackButton link="/" text="Tilbake" />
 

diff --git a/app/(site)/loading.tsx b/app/(site)/loading.tsx
@@ -0,0 +1,6 @@
+
+import LoadingPage from "@/components/loadingPage/loadingPage";
+
+export default function PageLoading() {
+    return <LoadingPage />
+}
diff --git a/app/(site)/page.tsx b/app/(site)/page.tsx
@@ -2,31 +2,36 @@
 
 import { getEventCards } from '@/backend/sanity-utils';
 import { EventCardType } from '@/types/EventCardType';
-import { Suspense, useState } from 'react';
-import dynamic from 'next/dynamic';
-import Spinner from '@/components/UI/Spinner';
+import { useEffect, useState } from 'react';
 import Footer from '@/components/footer/footer';
 import Hero from '@/components/heroSection/hero';
 import HeaderJumbotron from '@/components/jumbotron/jumbotron';
 import Logo from '@/components/UI/logo';
+import EventCardList from '@/components/events/eventCardList';
+import NoEvents from '@/components/UI/noEventsFound';
+import LoadingPage from '@/components/loadingPage/loadingPage';
 
 
-// Spinner element that has been standard 
-const CenteredSpinner = () =>{ 
-  return (<div className="flex justify-center my-20"> <Spinner /> </div>);
-}
-
-// Dynamically load the list of components 
-const EventCardListLocal = dynamic(() => import("@/components/events/eventCardList"), {
-  loading: () => <CenteredSpinner/>,
-  ssr: false,
-});
+export default function Home() {
 
+  const [events, setEvents] = useState<EventCardType[]>();
 
-export default async function Home() {
+  useEffect(() => {
+    if(!events){
+      getEventCards()
+      .then((data) => {
+        setEvents(data);
+      })
+      .catch((error) => {
+        console.error('Error fetching event cards:', error);
+      });
+    }
+
+  }, [events]);
 
-  // Fetch the projects 
-  const events: EventCardType[] = await getEventCards();
+  if(!events){
+    return <LoadingPage />
+  }
 
   return (
     <div className="flex flex-col min-h-screen bg-gradient-to-tl from-gradient-end via-gradient-mid to-gradient-start">
@@ -47,14 +52,14 @@ export default async function Home() {
           <h3 className="font-sans font-bold text-4xl px-10 sm:text-5xl">📅 Kommende Arrangementer</h3>
         </div>
 
-        {/** Using Suspense and the dynamically loaded list.  */}
-        <Suspense fallback={<CenteredSpinner/>}>
-          <EventCardListLocal events={events} />
-        </Suspense>
+        {/** Listing all events if there are any  */}
+        <div className="flex flex-wrap justify-center items-center px-5 mt-20 gap-5 md:flex-row">
+        { events && events.length > 0 ? <EventCardList events={events} /> : <NoEvents/>}
+        </div>
 
       </main>
 
-      <Footer/>
+      <Footer />
     </div>
   )
 }
diff --git a/components/UI/noEventsFound.tsx b/components/UI/noEventsFound.tsx
@@ -0,0 +1,6 @@
+export default function NoEvents() {
+    return (
+    <div className="flex justify-center">
+        <h2 className="text-white text-xl">Ingen kommende Arrangementer! </h2>
+    </div>);
+}
diff --git a/components/events/eventCard.tsx b/components/events/eventCard.tsx
@@ -1,3 +1,4 @@
+import event from "@/backend/schemas/event";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -7,11 +8,12 @@ interface EventProps{
     title: string,
     date?: string,
     time?: string,
-    description: string
+    description: string,
+    slug: string
 } 
 
 // Event card itself
-export default function EventCard({date, title, imageUrl, time, description}: EventProps): JSX.Element {
+export default function EventCard({date, title, imageUrl, time, description, slug}: EventProps): JSX.Element {
 
     return (
         <div className="flex flex-col items-center border rounded-lg shadow md:flex-row md:max-w-xl max-w-md border-gray-700 bg-gray-800 hover:bg-gray-700">
@@ -31,7 +33,7 @@ export default function EventCard({date, title, imageUrl, time, description}: Ev
                 </p>
                 <h4> 📅 {date}</h4>
                 <h4>🕕 {time}</h4>
-                <Link href="#" className="inline-flex items-center px-3 py-2 mt-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                <Link href={`/events/${slug}`} className="inline-flex items-center px-3 py-2 mt-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                     Les meir
                     <svg aria-hidden="true" className="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
                 </Link>

diff --git a/components/events/eventCardList.tsx b/components/events/eventCardList.tsx
@@ -1,73 +1,20 @@
-"use client";
-
 import { EventCardType } from "@/types/EventCardType";
 import EventCard from "./eventCard";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Spinner from "../UI/Spinner";
+import getDateTimeFormat from "@/utils/date";
 
 
 // Props for the event card 
 interface EventCardListProps {
-    events: EventCardType[];
+  events: EventCardType[];
 }
 
-// Component for the list of events 
-export default function EventCardList({events }: EventCardListProps) {
-
-    // State for if the list is loading or not after being clicked on
-    const [loading, setLoading] = useState(false); 
-
-    // Router for sending to another page
-    const router = useRouter();
-
-    // Function for handling click on an event link
-    const handleClick = (e:any, url: string) => {
-        setLoading(true);
-        router.push(url);
-    }
-
-
-    return (
-        <>
-          {loading ? (
-            <div className="flex justify-center my-20">
-              <Spinner />
-            </div>
-          ) : (
-            <div className="flex flex-wrap justify-center items-center px-5 mt-20 gap-5 md:flex-row">
-              {events && events.length > 0 ? (
-                events.map((event) => {
-                  let currentDate: Date = new Date(event.datetime);
-                  let dateFormat: string = currentDate.getDay() + ". " + currentDate.toLocaleString("no-NO", { month: "long" }) + " " +currentDate.getFullYear().toString();
-                  let timeFormat: string = currentDate.getHours().toString() + ":" + currentDate.getMinutes().toString();
-
-                  return (
-                    <a
-                      key={event._id}
-                      onClick={(e: any) =>
-                        handleClick(e, `/events/${event.slug}`)
-                      }
-                      className="cursor-pointer"
-                    >
-                      <EventCard
-                        title={event.title}
-                        description={event.description}
-                        imageUrl={event.image}
-                        date={dateFormat}
-                        time={timeFormat}
-                      />
-                    </a>
-                  );
-                })
-              ) : (
-                <div className="flex justify-center">
-                  <h2 className="text-white text-xl">Ingen kommende Arrangementer! </h2>
-                </div>
-
-              )}
-            </div>
-          )}
-        </>
-      );
+export default function EventCardList({ events }: EventCardListProps) {
+  return (
+    <>
+      {events.map((event) => {
+        let { dateFormat, timeFormat } = getDateTimeFormat(event.datetime);
+        return <EventCard description={event.description} imageUrl={event.image} title={event.title} key={event._id} date={dateFormat} slug={event.slug} time={timeFormat} />;
+      })}
+    </>
+  );
 }
diff --git a/components/loadingPage/loadingPage.tsx b/components/loadingPage/loadingPage.tsx
@@ -0,0 +1,10 @@
+import Spinner from "../UI/Spinner";
+
+export default function LoadingPage() {
+    return (
+        <div className="flex flex-col gap-3 justify-center items-center h-screen ">
+            <Spinner />
+            <p className="font-sans md:text-xl">Vi henter siden for deg...</p>
+        </div>
+    );
+}