Move Signup Form over to its own file

components/SignupForm.module.scss

+.form {
+    h4 {
+        padding: 5px 0;
+    }
+
+    .signup {
+        display: flex;
+        margin-top: 2em;
+        border-radius: 4px;
+
+        background: rgba(0, 0, 0, 0.2);
+
+        input {
+            flex-grow: 1;
+            padding: 10px;
+
+            color: white;
+        }
+
+        button {
+            flex: 0 1;
+
+            padding: 10px;
+            background: rgba(0, 0, 0, 0.1);
+            white-space: nowrap;
+
+            color: white;
+        }
+    }
+}
\ No newline at end of file

components/SignupForm.tsx

+import styles from './SignupForm.module.scss';
+
+import { useState, FormEvent } from 'react';
+import axios from 'axios';
+
+enum Status {
+    NotSent = 1,
+    Sending,
+    Sent,
+    ServerError,
+    InvalidEmail,
+}
+
+export default function SignupForm() {
+    let [ status, setStatus ] = useState(Status.NotSent);
+    let [ email, setEmail ] = useState('');
+
+    function submit(e: FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        if (email === '') {
+            setStatus(Status.InvalidEmail);
+            return;
+        }
+
+        setStatus(Status.Sending);
+
+        axios.post('/api/send', { email }).then((response) => {
+            if (response.status === 200) {
+                setStatus(Status.Sent);
+            } else if (response.status === 400) setStatus(Status.InvalidEmail);
+            else setStatus(Status.ServerError);
+        }).catch(() => setStatus(Status.ServerError));
+    }
+
+    if (status === Status.Sending || status === Status.Sent) {
+        if (status === Status.Sending) return <div className={styles.form}><h4>Loading</h4></div>;
+        else return (
+            <div className={styles.form}>
+                <h4>Thanks! We'll keep you up to date.</h4>
+            </div>
+        );
+    } else return (
+        <div className={styles.form}>
+            <form className={styles.signup} onSubmit={submit}>
+                <input
+                    type="email"
+                    placeholder="Please enter your email."
+                    value={email}
+                    onChange={e => setEmail(e.currentTarget.value)}
+                />
+                <button>Join waiting list.</button>
+            </form>
+            { status === Status.ServerError && <h4>An error has occured, please try again later.</h4> }
+            { status === Status.InvalidEmail && <h4>Please provide a valid email</h4> }
+        </div>
+    );
+}

package.json

@@ -10,10 +10,12 @@
   "dependencies": {
     "axios": "^0.19.2",
     "classnames": "^2.2.6",
+    "js-cookie": "^2.2.1",
     "next": "9.4.4",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "sass": "^1.26.9"
+    "sass": "^1.26.9",
+    "shortid": "^2.2.15"
   },
   "devDependencies": {
     "@types/node": "^14.0.14",

pages/index.module.scss

@@ -34,35 +34,6 @@
         }
     }
 
-    h4 {
-        padding: 5px 0;
-    }
-
-    .signup {
-        display: flex;
-        margin-top: 2em;
-        border-radius: 4px;
-
-        background: rgba(0, 0, 0, 0.2);
-
-        input {
-            flex-grow: 1;
-            padding: 10px;
-
-            color: white;
-        }
-
-        button {
-            flex: 0 1;
-
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.1);
-            white-space: nowrap;
-
-            color: white;
-        }
-    }
-
     .heroFix {
         min-height: 128px;
     }

pages/index.tsx

@@ -3,21 +3,9 @@ import classNames from 'classnames';
 
 import styles from './index.module.scss';
 import flex from '../components/util/flex.module.scss';
-
-import { useState, FormEvent } from 'react';
-import axios from 'axios';
+import SignupForm from '../components/SignupForm';
 
 export default function Home() {
-    let [ sent, setSent ] = useState(false);
-    let [ email, setEmail ] = useState('');
-
-    function submit(e: FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-        setSent(true);
-
-        axios.post('/api/send', { email });
-    }
-
     return (
         <div>
             <Head>
@@ -45,18 +33,7 @@ export default function Home() {
                             <div className={styles.primary}>
                                 <h2>Don't bother with chat apps that don't respect your privacy.</h2>
                                 <h3>Communication is critical.<br/>Privacy is essential.</h3>
-                                {
-                                    sent ? <h4>Thanks! We'll keep you up to date.</h4> :
-                                    <form className={styles.signup} onSubmit={submit}>
-                                        <input
-                                            type="email"
-                                            placeholder="Please enter your email."
-                                            value={email}
-                                            onChange={e => setEmail(e.currentTarget.value)}
-                                        />
-                                        <button>Join waiting list.</button>
-                                    </form>
-                                }
+                                <SignupForm />
                             </div>
                         </div>
                         <div className={classNames(flex.column, styles.heroImage)}>

yarn.lock

@@ -3244,6 +3244,11 @@ jest-worker@24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3645,6 +3650,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -4920,6 +4930,13 @@ shell-quote@1.7.2:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shortid@^2.2.15:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
+  dependencies:
+    nanoid "^2.1.0"
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"