add state

Author: vcapretz

app/lib/actions.ts

@@ -0,0 +1,25 @@
+"use server";
+
+import { Resend } from "resend";
+import { VercelInviteUserEmail } from "../../emails/vercel-invite-user";
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function send(prevState: string | undefined, formData: FormData) {
+  const email = formData.get("email") as string;
+
+  const { data, error } = await resend.emails.send({
+    from: "Vercel <[email protected]>",
+    to: [email],
+    subject: "Join team on Vercel",
+    react: VercelInviteUserEmail({}),
+  });
+
+  if (error) {
+    return error.message;
+  }
+
+  console.log(data);
+
+  return "Email sent!";
+}

app/page.tsx

@@ -1,41 +1,33 @@
-import { VercelInviteUserEmail } from '../emails/vercel-invite-user';
-import { Resend } from 'resend';
+"use client";
 
-export default function Page() {
-  async function send(formData: FormData) {
-    'use server';
-
-    const resend = new Resend(process.env.RESEND_API_KEY);
-    const email = formData.get('email') as string;
-
-    const { data, error } = await resend.emails.send({
-      from: 'Vercel <[email protected]>',
-      to: [email],
-      subject: 'Join team on Vercel',
-      react: VercelInviteUserEmail({}),
-    });
+import clsx from "clsx";
+import { useFormState, useFormStatus } from "react-dom";
+import { send } from "./lib/actions";
+import React from "react";
 
-    if (error) {
-      console.log(error);
-    }
-
-    console.log(data);
-  }
+export default function Page() {
+  const [, dispatch] = useFormState(send, undefined);
 
   return (
-    <div className="bg-zinc-950 py-16 sm:py-24 h-[100vh]">
-      <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
-        <div className="relative isolate overflow-hidden bg-gray-900 px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
-          <h2 className="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight text-white sm:text-4xl">
+    <div className="bg-zinc-950 p-8 min-h-screen flex justify-center items-center sm:items-start sm:p-24">
+      <div className="mx-auto w-full max-w-5xl sm:px-6 lg:px-8">
+        <div className="relative isolate overflow-hidden bg-gray-900 px-6 py-24 shadow-2xl rounded-lg sm:rounded-3xl sm:px-24 xl:py-32 flex items-center flex-col">
+          <h2 className="max-w-2xl text-center text-3xl font-bold tracking-tight text-white sm:text-4xl">
             Get invited to a team
           </h2>
-          <p className="mx-auto mt-2 max-w-xl text-center text-lg leading-8 text-gray-300">
+
+          <p className="mt-2 max-w-xl text-center text-lg leading-8 text-gray-300">
             Type your email address to get invited to a team.
           </p>
-          <form className="mx-auto mt-10 flex max-w-md gap-x-4" action={send}>
+
+          <form
+            className="mt-10 flex max-w-md gap-4 items-start w-full"
+            action={dispatch}
+          >
             <label htmlFor="email" className="sr-only">
               Email address
             </label>
+
             <input
               id="email"
               name="email"
@@ -44,21 +36,25 @@ export default function Page() {
               defaultValue="[email protected]"
               placeholder="[email protected]"
               autoComplete="email"
-              className="min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6"
+              className="w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6"
             />
-            <button
-              type="submit"
-              className="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-            >
-              Invite
-            </button>
+
+            <SubmitButton />
           </form>
+
           <svg
             viewBox="0 0 1024 1024"
             aria-hidden="true"
             className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
           >
-            <circle r={512} cx={512} cy={512} fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fillOpacity="0.7" />
+            <circle
+              r={512}
+              cx={512}
+              cy={512}
+              fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
+              fillOpacity="0.7"
+            />
+
             <defs>
               <radialGradient
                 r={1}
@@ -77,4 +73,20 @@ export default function Page() {
       </div>
     </div>
   );
-}
+}
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <button
+      type="submit"
+      className={clsx(
+        "flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",
+        pending && "opacity-50 cursor-not-allowed"
+      )}
+    >
+      Invite
+    </button>
+  );
+}

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@react-email/components": "0.0.22",
+    "clsx": "^2.1.1",
     "next": "14.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",