diff --git a/app/(root)/contact/page.tsx b/app/(root)/contact/page.tsx index 24c6fd4..5a8b066 100644 --- a/app/(root)/contact/page.tsx +++ b/app/(root)/contact/page.tsx @@ -17,9 +17,13 @@ import { } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; -import { sendContactForm } from "@/lib/api/contact"; +import { useToast } from "@/components/ui/use-toast"; +import { useState } from "react"; const ContactUs = () => { + const { toast } = useToast(); + const [loading, setLoading] = useState(false); + const form = useForm>({ resolver: zodResolver(contactFormSchema), defaultValues: { @@ -30,7 +34,39 @@ const ContactUs = () => { }); async function onSubmit(values: z.infer) { - await sendContactForm(values); + setLoading(true); + try { + const res = await fetch("/api/contact", { + method: "POST", + body: JSON.stringify(values), + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + }); + + if (res.ok) { + form.reset(); + toast({ + description: "Your message has been sent.", + }); + setLoading(false); + } else { + toast({ + title: "Uh oh! Something went wrong.", + variant: "destructive", + }); + setLoading(false); + } + } catch (error) { + console.error(error); + toast({ + title: "Uh oh! Something went wrong.", + variant: "destructive", + }); + setLoading(false); + } + console.log(values); } @@ -89,7 +125,12 @@ const ContactUs = () => { )} /> -