More things

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

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 {

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>
     )
 }

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:"
 }

styles/globals.css

@@ -214,6 +214,6 @@ input.negative, button.negative {
     width: 100%;
 }
 
-#page-event-detail h1 {
+#page-event-detail hgroup {
     text-align: center;
 }