Add form respose toast messages

salhotra · Jul 29, 2024 · e93ab03 · e93ab03
1 parent da11e0b
commit e93ab03
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
     "react-icons": "^5.2.1",
+    "react-toastify": "^10.0.5",
     "three": "^0.165.0",
     "three-orbit-controls": "^82.1.0",
     "three-stdlib": "^2.30.4"

diff --git a/src/app/components/Contact.tsx b/src/app/components/Contact.tsx
@@ -20,6 +20,7 @@ import {
 } from "react-hook-form";
 import { upperFirst } from "../utils/upperFirst";
 import Button from "../ui/Button";
+import { toast } from "react-toastify";
 
 interface ContactFormValues {
   name: string;
@@ -111,9 +112,15 @@ function ContactForm(): JSX.Element {
       );
 
       console.log({ response });
+
+      toast("Form submitted successfully!", {
+        type: "success",
+      });
     } catch (e) {
       console.error(e);
-      alert("Failed to submit form. Please try again later.");
+      toast("Failed to submit form. Please try again later.", {
+        type: "error",
+      });
     }
   };
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { ToastContainer } from "react-toastify";
+
+import "react-toastify/dist/ReactToastify.css";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -16,7 +19,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+        <ToastContainer />
+      </body>
     </html>
   );
 }