add feedback

resend · Aug 20, 2024 · 6b660b0 · 6b660b0
1 parent 2b12202
commit 6b660b0
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 13 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,18 +1,22 @@
-import './ui/global.css'
+import "./ui/global.css";
+import { Toaster } from "./ui/toaster";
 
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-}
+  title: "Next.js",
+  description: "Generated by Next.js",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        {children}
+        <Toaster />
+      </body>
     </html>
-  )
+  );
 }
diff --git a/app/lib/actions.ts b/app/lib/actions.ts
@@ -5,7 +5,9 @@ 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) {
+type State = { error: string } | { data: string };
+
+export async function send(prevState: State, formData: FormData) {
   const email = formData.get("email") as string;
 
   const { data, error } = await resend.emails.send({
@@ -16,10 +18,10 @@ export async function send(prevState: string | undefined, formData: FormData) {
   });
 
   if (error) {
-    return error.message;
+    return { error: error.message };
   }
 
   console.log(data);
 
-  return "Email sent!";
+  return { data: "Email sent!" };
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -3,10 +3,23 @@
 import clsx from "clsx";
 import { useFormState, useFormStatus } from "react-dom";
 import { send } from "./lib/actions";
-import React from "react";
+import * as React from "react";
+import { toast } from "sonner";
 
 export default function Page() {
-  const [, dispatch] = useFormState(send, undefined);
+  const [state, dispatch] = useFormState(send, undefined);
+
+  React.useEffect(() => {
+    if (!state) {
+      return;
+    }
+
+    if ("data" in state) {
+      toast(state.data);
+    } else if ("error" in state) {
+      toast(`Error when sending email: ${state.error}`);
+    }
+  }, [state]);
 
   return (
     <div className="bg-zinc-950 p-8 min-h-screen flex justify-center items-center sm:items-start sm:p-24">

diff --git a/app/ui/toaster.tsx b/app/ui/toaster.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme="dark"
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-email": "2.1.6",
-    "resend": "4.0.0"
+    "resend": "4.0.0",
+    "sonner": "^1.5.0"
   },
   "devDependencies": {
     "@types/node": "22.4.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml