From 08636d4419748d45351af1f2c5b833c9d4f05a92 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 3 Jun 2022 04:54:09 +0200
Subject: [PATCH] More things

---
 components/EventCreate.tsx       | 23 +++++++++++------------
 hooks/useAxiosRequest.ts         |  8 +++++---
 pages/events/[slug].tsx          | 17 +++++++++++------
 public/locales/it-IT/common.json |  1 +
 styles/globals.css               |  2 +-
 5 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/components/EventCreate.tsx b/components/EventCreate.tsx
index 4c8ef5a..8945c50 100644
--- a/components/EventCreate.tsx
+++ b/components/EventCreate.tsx
@@ -11,21 +11,20 @@ export function EventCreate() {
     const { t } = useTranslation()
     const router = useRouter()
     const [name, setName] = useState<string>("")
-    const createEvent = useAxiosRequest<Event>({
-        method: "POST",
-        url: "/api/events/",
-        data: { name }
-    })
 
-    // This is a pretty bad hack... or not?
-    // Idc, as long as it works
-    useEffect(() => {
-        if (createEvent.error) return
-        if (!createEvent.data) return
-        router.push(`/event/${createEvent.data.slug}`)
-    })
+    const createEvent = useAxiosRequest<Event>(
+        {
+            method: "POST", 
+            url: "/api/events/", 
+            data: { name }
+        }, 
+        (response) => {
+            router.push(`/events/${response.data.slug}`)
+        }
+    )
 
     if (createEvent.running) return <Loading text={t("eventListCreateRunning")} />
+    if (createEvent.data) return <Loading text={t("eventListCreateRedirecting")} />
 
     return <>
         <form
diff --git a/hooks/useAxiosRequest.ts b/hooks/useAxiosRequest.ts
index f8cf9fa..83bbb4c 100644
--- a/hooks/useAxiosRequest.ts
+++ b/hooks/useAxiosRequest.ts
@@ -13,8 +13,8 @@ type ReducerState<T, D = any> = {
     error: any | undefined,
 }
 
-export function useAxiosRequest<T, D = any>(config: AxiosRequestConfig<D> = {}, hookConfig: AxiosRequestConfig<D> = {}) {
-    const axios = useAxios(hookConfig)
+export function useAxiosRequest<T, D = any>(config: AxiosRequestConfig<D> = {}, onSuccess?: (response: AxiosResponse<T>) => void, onError?: (error: any) => void) {
+    const axios = useAxios()
 
     const [state, dispatch] = useReducer(
         (prev: ReducerState<T, D>, action: ReducerAction<T, D>) => {
@@ -56,12 +56,14 @@ export function useAxiosRequest<T, D = any>(config: AxiosRequestConfig<D> = {},
             }
             catch (error) {
                 dispatch({ type: "error", error })
+                onError?.(error)
                 return
             }
 
             dispatch({ type: "done", response })
+            onSuccess?.(response)
         },
-        [axios, hookConfig]
+        [axios]
     )
 
     return {
diff --git a/pages/events/[slug].tsx b/pages/events/[slug].tsx
index 7932fa9..b192fe8 100644
--- a/pages/events/[slug].tsx
+++ b/pages/events/[slug].tsx
@@ -1,4 +1,4 @@
-import { Event } from "@prisma/client";
+import { Event, User } from "@prisma/client";
 import { NextPageContext } from "next";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -14,7 +14,10 @@ export async function getServerSideProps(context: NextPageContext) {
         return {notFound: true}
     }
 
-    const event = await database.event.findUnique({where: {slug}})
+    const event = await database.event.findUnique({
+        where: {slug},
+        include: {creator: true}
+    })
     if(!event) {
         return {notFound: true}
     }
@@ -29,7 +32,7 @@ export async function getServerSideProps(context: NextPageContext) {
 
 
 type PageEventDetailProps = {
-    event: Event
+    event: Event & {creator: User}
 }
 
 
@@ -48,9 +51,11 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
 
     return (
         <main id="page-event-detail" className="page">
-            <h1>
-                {event.name}
-            </h1>
+            <hgroup>
+                <h1>
+                    {event.name}
+                </h1>
+            </hgroup>
         </main>
     )
 }
\ No newline at end of file
diff --git a/public/locales/it-IT/common.json b/public/locales/it-IT/common.json
index 9112cc7..eee027b 100644
--- a/public/locales/it-IT/common.json
+++ b/public/locales/it-IT/common.json
@@ -21,5 +21,6 @@
     "eventListCreateEventNameLabel": "Nome evento",
     "eventListCreateSubmitLabel": "Crea",
     "eventListCreateRunning": "Creazione in corso...",
+    "eventListCreateRedirecting": "Caricamento dell'evento in corso...",
     "eventListCreateError": "Si è verificato il seguente errore nella creazione del tuo evento:"
 }
diff --git a/styles/globals.css b/styles/globals.css
index aff18bf..f213422 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -214,6 +214,6 @@ input.negative, button.negative {
     width: 100%;
 }
 
-#page-event-detail h1 {
+#page-event-detail hgroup {
     text-align: center;
 }
\ No newline at end of file