quick fix #42

src/i18n/locales/en/common.json

@@ -53,6 +53,9 @@
   "Ilmoittautuminen sulkeutuu":
   "Signup closes at",
 
+  "Ilmoittautuminen onnistui!":
+  "Signup successful!",
+
   "Ilmoittauminen on umpeutunut!":
   "Signup has been closed!",
 

src/pages/signup/[id].tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { NextPage, GetStaticProps, GetStaticPaths } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -25,6 +25,8 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   const id = String(initialForm?.id ?? "");
   const URL = `${FORM_URL}${id}/`;
   const { data: signupForm, error } = useSWR<SignupForm>(URL, (url) => axios.get(url).then((res) => res.data), { fallbackData: initialForm });
+  const [isSending, setIsSending] = useState(false);
+  const [formSent, setFormSent] = useState(false);
 
   if (error) {
     console.error(error);
@@ -42,18 +44,26 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   }
 
   const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
+    setIsSending(true);
+
     const payload: Signup = {
       signupForm_id: signupForm.id,
       answer: formData,
     };
 
+    if (isSending === true) {
+      toast.error("Sign-up form already submitted! No need to spam send. 😟");
+      return;
+    }
+
     try {
       await SignupApi.createSignup(payload);
       toast.success("Sign-up submitted successfully 😎");
-      mutate(URL);
+      setFormSent(true);
     } catch (err) {
       console.error(err);
       toast.error("Uh oh! Sign-up failed! 😟");
+      setIsSending(false);
     }
   };
 
@@ -68,6 +78,7 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
           formData={{}}
           onChange={noop}
           onSubmit={onSubmit}
+          formSent={formSent}
         />
       </PageWrapper>
     </>

src/views/SignUpPage/SignUpPageView.tsx

@@ -23,6 +23,7 @@ interface SignUpPageViewProps {
   formData: any;
   onChange: (e: IChangeEvent<unknown>, es?: ErrorSchema) => unknown;
   onSubmit: (e: ISubmitEvent<unknown>) => unknown;
+  formSent: boolean;
 }
 
 const StyledSection = styled(TextSection)`
@@ -59,6 +60,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
   formData,
   onChange,
   onSubmit,
+  formSent,
 }) => {
   const { i18n, t } = useTranslation();
   const startDate = new Date(signUpForm?.start_time);
@@ -136,7 +138,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
         </h1>
 
         <div>
-          {form}
+          { formSent ? <p>{`${t("Ilmoittautuminen onnistui!")}`}</p> : form }
         </div>
         {signups}
       </StyledSection>