Create event page

hooks/useEventDetail.ts

@@ -0,0 +1,6 @@
+import { Event } from "@prisma/client";
+import useSWR, { SWRResponse } from "swr";
+
+export function useEventDetail(slug: string): SWRResponse<Event> {
+    return useSWR(`/api/events/${slug}`)
+}

hooks/useMyEvents.ts

@@ -1,5 +1,6 @@
-import useSWR from "swr";
+import { Event } from "@prisma/client";
+import useSWR, { SWRResponse } from "swr";
 
-export function useMyEvents() {
+export function useMyEvents(): SWRResponse<Event[]> {
     return useSWR("/api/events/mine")
 }

pages/events/[slug].tsx

@@ -0,0 +1,48 @@
+import { Event } from "@prisma/client";
+import { NextPageContext } from "next";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { ErrorInline } from "../../components/ErrorInline";
+import { Loading } from "../../components/Loading";
+import {useEventDetail} from "../../hooks/useEventDetail"
+import { database } from "../../utils/prismaClient";
+
+
+export async function getServerSideProps(context: NextPageContext) {
+    const slug = context.query.slug as string
+    if(typeof slug === "object") {
+        return {notFound: true}
+    }
+
+    const event = await database.event.findUnique({where: {slug}})
+    if(!event) {
+        return {notFound: true}
+    }
+
+    return {
+        props: {
+            event,
+            ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
+        }
+    }
+}
+
+
+type PageEventDetailProps = {
+    event: Event
+}
+
+
+export default function PageEventDetail({event}: PageEventDetailProps) {
+    const {t} = useTranslation()
+
+    return (
+        <main id="page-event-detail" className="page">
+            <h1>
+                {event.name}
+            </h1>
+        </main>
+    )
+}

pages/index.tsx

@@ -17,7 +17,7 @@ export async function getStaticProps(context: NextPageContext) {
 
 
 export default function PageIndex() {
-    const { t } = useTranslation("common")
+    const { t } = useTranslation()
     const [login, _] = useDefinedContext(LoginContext)
 
     return (

styles/globals.css

@@ -211,3 +211,7 @@ input.negative, button.negative {
     max-width: 800px;
     width: 100%;
 }
+
+#page-event-detail h1 {
+    text-align: center;
+}

utils/interrupt.ts

@@ -11,6 +11,9 @@ export async function handleInterrupts(res: NextApiResponse, f: () => Promise<vo
         if(e instanceof Interrupt) {
             return res.status(e.status).json(e.response)
         }
+        else {
+            console.error(e)
+        }
     }
 }