diff --git a/src/pages/signup/[id].tsx b/src/pages/signup/[id].tsx index 5e20d20..13cd647 100644 --- a/src/pages/signup/[id].tsx +++ b/src/pages/signup/[id].tsx @@ -2,6 +2,7 @@ import React from "react"; import { NextPage, GetStaticProps, GetStaticPaths } from "next"; import Head from "next/head"; import { useRouter } from "next/router"; +import { ISubmitEvent } from "react-jsonschema-form"; import { toast } from "react-toastify"; import axios from "axios"; import useSWR, { mutate } from "swr"; @@ -23,32 +24,35 @@ const SignUpPage: NextPage = ({ initialForm }) => { const router = useRouter(); const id = String(initialForm?.id ?? ""); const URL = `${FORM_URL}${id}/`; - const signupResult = useSWR(URL, (url) => axios.get(url).then((res) => res.data), { initialData: initialForm }); + const { data, error } = useSWR(URL, (url) => axios.get(url).then((res) => res.data), { initialData: initialForm }); - const form = signupResult.data ?? initialForm; + if (error) { + console.error(error); + } - if (router.isFallback) { + // TODO: Shows LoadingView on client-side fetch error. Maybe something else preferred? + if (router.isFallback || error) { return ; } - if (!form) { + if (!data) { return ( ); } - const onSubmit = async (data) => { + const onSubmit = async ({ formData }: ISubmitEvent) => { const payload: Signup = { - signupForm_id: form.id, - answer: data.formData, + signupForm_id: data.id, + answer: formData, }; try { await SignupApi.createSignup(payload); toast.success("Sign-up submitted successfully 😎"); mutate(URL); - } catch (error) { - console.error(error); + } catch (err) { + console.error(err); toast.error("Uh oh! Sign-up failed! 😟"); } }; @@ -56,11 +60,11 @@ const SignUpPage: NextPage = ({ initialForm }) => { return ( <> - +