few variable renames & minor changes

2021-06-29 18:15:22 +03:00
parent 36b8cab248
commit 55e1d243c6
1 changed files with 15 additions and 11 deletions
@@ -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<InitialProps> = ({ 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<SignupForm>(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 <LoadingView />;
  }

-  if (!form) {
+  if (!data) {
    return (
      <NotFoundPage />
    );
  }

-  const onSubmit = async (data) => {
+  const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
    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<InitialProps> = ({ initialForm }) => {
  return (
    <>
      <Head>
-        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/signup/${form.id}`} />
+        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/signup/${data.id}`} />
      </Head>
      <PageWrapper>
        <SignUpPageView
-          signUpForm={form}
+          signUpForm={data}
          formData={{}}
          onChange={noop}
          onSubmit={onSubmit}