From 95c910b392c0fd472cf3348f3e51bbc6ad83ba3c Mon Sep 17 00:00:00 2001 From: Mumtahin Farabi Date: Sun, 8 Sep 2024 12:18:08 -0400 Subject: [PATCH] feat(ui/contact): add confirmation toasts when submit button is clicked --- src/app/(home)/layout.tsx | 2 ++ src/components/sections/home/contact/contact.tsx | 16 ++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx index 088529d..3c35f11 100644 --- a/src/app/(home)/layout.tsx +++ b/src/app/(home)/layout.tsx @@ -6,6 +6,7 @@ import { Open_Sans } from 'next/font/google' import type { Metadata, Viewport } from 'next' import '@/app/(home)/globals.css' +import { Toaster } from '@/components/shadcn/ui/sonner/sonner' const openSans = Open_Sans({ subsets: ['latin'] }) @@ -30,6 +31,7 @@ export default function Layout({ children }: { children: ReactNode }) { > {children} + diff --git a/src/components/sections/home/contact/contact.tsx b/src/components/sections/home/contact/contact.tsx index 35cb1ca..798c0c9 100644 --- a/src/components/sections/home/contact/contact.tsx +++ b/src/components/sections/home/contact/contact.tsx @@ -1,7 +1,3 @@ -// TODO: Remove these ESLint disables after Shadcn migration is complete -/* eslint-disable no-alert */ -/* eslint-disable no-console */ - 'use client' import { zodResolver } from '@hookform/resolvers/zod' @@ -10,6 +6,7 @@ import { useForm } from 'react-hook-form' import { EnvelopeOpenIcon } from '@radix-ui/react-icons' import { Loader2 } from 'lucide-react' import { useState } from 'react' +import { toast } from 'sonner' import { Input } from '@/components/aceternity/input' import { Textarea } from '@/components/aceternity/text-area' import { Label as FormLabel } from '@/components/aceternity/label' @@ -60,6 +57,9 @@ export function Contact() { const onSubmit = async (values: z.infer) => { setIsSubmitting(true) + toast('✉️ Sending message...', { + description: `Please be patient and don\'t refresh the page, otherwise your email will be lost to the void.🙏`, + }) try { const response = await fetch('/api/send', { method: 'POST', @@ -69,18 +69,18 @@ export function Contact() { body: JSON.stringify(values), }) const result = await response.json() - console.log(result) if (result.error) { - alert('Error sending message. Please try again.') + toast('Error sending message. Please try again.') } else { - alert('Message sent successfully!') + toast('🥳 Message sent successfully!', { + description: `Confirmation email has been sent to ${values.email}. ✅`, + }) form.reset() } } catch (error) { console.error('Error:', error) - alert('Error sending message. Please try again.') } finally { setIsSubmitting(false) } }