diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx index 4492612..bde1f6e 100644 --- a/src/components/Contact.jsx +++ b/src/components/Contact.jsx @@ -1,5 +1,6 @@ import React, { useState, useRef } from "react"; import { motion } from "framer-motion"; +import { toast } from "sonner"; import emailjs from "@emailjs/browser"; import { styles } from "../styles"; @@ -94,31 +95,22 @@ const Contact = () => { }, import.meta.env.VITE_APP_EMAILJS_KEY ) - .then( - () => { - // Success - setLoading(false); - alert("Thank You. I will get back to you as soon as possible."); - - setForm({ - name: "", - email: "", - message: "", - }); - }, - (error) => { - // Error handle - setLoading(false); - console.log(error); - alert("Sorry. Something went wrong."); - - setForm({ - name: "", - email: "", - message: "", - }); - } - ); + .then(() => + toast.success("Thank You. I will get back to you as soon as possible.") + ) + .catch((error) => { + // Error handle + console.log("[CONTACT_ERR]: ", error); + toast.error("Sorry. Something went wrong."); + }) + .finally(() => { + setLoading(false); + setForm({ + name: "", + email: "", + message: "", + }); + }); }; return ( diff --git a/src/main.jsx b/src/main.jsx index fde3fa6..e7bac85 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,11 +1,22 @@ import React from "react"; import ReactDOM from "react-dom/client"; +import { Toaster } from "sonner"; + import App from "./App"; + import "./index.css"; // Render react app ReactDOM.createRoot(document.getElementById("root")).render( + - , + );