React 18 useTransition and Create Contact Form

Author: 15Dkatz

app/connect/email-list/form.js

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import postContact from './post-contact';
+import Spinner from './spinner';
+
+export default function Form() {
+  const [message, setMessage] = useState('');
+  const [displayMessage, setDisplayMessage] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  const handleSubmit = (data) => {
+    const name = data.get('name');
+    const email = data.get('email');
+
+    startTransition(() => {
+      let message;
+
+      postContact({ name, email })
+        .then(json => {
+          console.log(`json`, json);
+  
+          const errorMessage = json.ErrorMessage;
+  
+          if (json.Count > 0) {
+            message = 'Success! Keep an eye out on your inbox updates';
+          } else if (errorMessage && errorMessage.includes('already exists')) {
+            message = 'Email is already subscribed';
+          } else if (errorMessage && errorMessage.includes('properties invalid')) {
+            message = 'Email is not formatted correctly';
+          } else {
+            message = 'Error. Try again or email [email protected] to be added manually.'
+          }
+  
+          setMessage(message);
+          setDisplayMessage(true);
+        });
+    });
+  }
+
+  return (
+    <form action={handleSubmit} className="indent grid gap-[2px] w-[270px]">
+      <label htmlFor="name">Name</label>
+      <input type="text" id="name" name="name" required />
+      <label htmlFor="email">Email</label>
+      <input type="email" id="email" name="email" required />
+      <button
+        type="submit"
+        disabled={isPending}
+        className={
+          `bg-blue-700 text-center text-white w-[130px] h-[36px] mt-[4px]
+          disabled:bg-slate-50 disabled:text-slate-500`
+        }
+      >
+        {
+        isPending
+          ? (
+            <span className="flex justify-center items-center h-[36px]">
+              <Spinner /> Sending
+            </span>
+          )
+          : 'Submit'
+        }
+      </button>
+      {displayMessage ? message : <></> }
+    </form>
+  )
+}

app/connect/email-list/spinner.js

@@ -0,0 +1,8 @@
+export default function Spinner() {
+  return (
+    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+  )
+}

app/connect/followers/index.js

@@ -16,7 +16,7 @@ export default function Followers() {
   }, []);
 
   return (
-    <div className="ml-[15px] lg:ml-[20px] mt-[5px]">
+    <div className="indent">
       Follower progress: {goalString}
     </div>
   )

app/connect/page.js

@@ -1,4 +1,4 @@
-// import Form from './email-list/form';
+import Form from './email-list/form';
 import Followers from './followers';
 
 export default function Page() {
@@ -30,7 +30,7 @@ export default function Page() {
         <div>
           3. Join my email list.
         </div>
-        {/* <Form /> */}
+        <Form />
         <br />
         <div>
           Reach out for inquiries at <span className="underline">[email protected]</span>

app/globals.css

@@ -8,3 +8,6 @@
 .link {
   @apply underline text-blue-800
 }
+.indent {
+  @apply ml-[15px] lg:ml-[20px] mt-[5px]
+}