Use tRPC for contact form

app/[locale]/contactez-nous/ContactForm.tsx

@@ -2,101 +2,90 @@
 
 import { useState } from "react";
 
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslations } from "next-intl";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
 
 import InfoMessage from "@/components/InfoMessage";
-import { handleEmailSubmit } from "@/handlers/formHandlers";
-import useContactForm from "@/hooks/useContactForm";
+import { clearMessage } from "@/components/InfoMessage";
+import { TextAreaField } from "@/components/form/TextAreaField";
+import { TextField } from "@/components/form/TextField";
+import { contactUsSchema } from "@/schemas";
+import { trpc } from "@/utils/trpc";
+
+type TournamentFormValues = z.infer<typeof contactUsSchema>;
 
 const ContactForm = () => {
   const t = useTranslations("Contact");
-  const { values, handleChange, resetForm } = useContactForm();
-  const [isSending, setIsSending] = useState(false);
+
+  const contactUs = trpc.contactUs.useMutation();
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
     message: "",
   });
 
-  return (
-    <>
-      <form
-        onSubmit={(e) =>
-          handleEmailSubmit(
-            e,
-            t,
-            setIsSending,
-            setResponseMessage,
-            values,
-            resetForm,
-          )
+  const form = useForm<TournamentFormValues>({
+    resolver: zodResolver(contactUsSchema),
+  });
+
+  const onSubmit = async (data: TournamentFormValues) => {
+    try {
+      await contactUs.mutateAsync(data);
+      setResponseMessage({
+        isSuccessful: true,
+        message: t("success"),
+      });
+
+      clearMessage(setResponseMessage);
+      form.reset();
+    } catch (err: unknown) {
+      console.log(err);
+      setResponseMessage({
+        isSuccessful: true,
+        message: t("failure"),
+      });
+
+      clearMessage(setResponseMessage);
     }
-        className="space-y-8"
-      >
-        <div>
-          <label
-            htmlFor="email"
-            className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-          >
-            {t("emailLabel")}
-          </label>
-          <input
-            value={values.email}
-            onChange={handleChange}
-            type="email"
-            id="email"
-            className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <TextField
+          name="email"
+          label={t("emailLabel")}
           placeholder={t("emailPlaceholder")}
           required
-            data-test="email-input"
         />
-        </div>
-        <div>
-          <label
-            htmlFor="subject"
-            className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-          >
-            {t("subjectLabel")}
-          </label>
-          <input
-            value={values.subject}
-            onChange={handleChange}
-            type="text"
-            id="subject"
-            className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+
+        <TextField
+          name="subject"
+          label={t("subjectLabel")}
           placeholder={t("subjectPlaceholder")}
           required
-            data-test="subject-input"
         />
-        </div>
-        <div className="sm:col-span-2">
-          <label
-            htmlFor="message"
-            className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-          >
-            {t("messageLabel")}
-          </label>
-          <textarea
-            value={values.message}
-            onChange={handleChange}
-            id="message"
+
+        <TextAreaField
+          name="message"
           rows={6}
-            className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+          label={t("messageLabel")}
           placeholder={t("messagePlaceholder")}
-            data-test="message-input"
           required
-          ></textarea>
-        </div>
+        />
+
         <button
-          disabled={isSending}
+          disabled={form.formState.isSubmitting}
           type="submit"
           className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-          data-test="submit-button"
         >
-          {isSending ? t("sending") : t("sendButton")}
+          {form.formState.isSubmitting ? t("sending") : t("sendButton")}
         </button>
+
         <InfoMessage responseMessage={responseMessage} />
       </form>
-    </>
+    </FormProvider>
   );
 };
 

app/api/send-mail/route.ts

@@ -1,37 +0,0 @@
-import { NextResponse } from "next/server";
-import NodeMailer from "nodemailer";
-
-import { errorLog, infoLog } from "@/utils/logger";
-
-export async function POST(req: Request) {
-  const { email, subject, message } = await req.json();
-
-  try {
-    const mailContent = {
-      from: email,
-      to: process.env.GMAIL_USER,
-      subject: `${subject} from ${email}`,
-      text: message,
-      html: `<p>${message}</p>`,
-    };
-
-    const transporter = NodeMailer.createTransport({
-      service: "gmail",
-      auth: {
-        user: process.env.GMAIL_USER,
-        pass: process.env.GMAIL_PASS,
-      },
-    });
-
-    const mailInfo = await transporter.sendMail(mailContent);
-    infoLog(mailInfo);
-
-    return NextResponse.json(
-      { success: `Message delivered to ${mailInfo.accepted}` },
-      { status: 250 },
-    );
-  } catch (error) {
-    errorLog(error);
-    return NextResponse.json({ error: `Connection refused` }, { status: 404 });
-  }
-}

app/server/appRouter.ts

@@ -1,8 +1,10 @@
 import { addTournament } from "./procedures/addTournament";
+import { contactUs } from "./procedures/contactUs";
 import { fetchTournamentResults } from "./procedures/fetchTournamentResults";
 import { router } from "./trpc";
 
 export const appRouter = router({
+  contactUs,
   addTournament,
   fetchTournamentResults,
 });

app/server/procedures/contactUs.ts

@@ -0,0 +1,38 @@
+import NodeMailer from "nodemailer";
+
+import { contactUsSchema } from "@/schemas";
+import { errorLog, infoLog } from "@/utils/logger";
+
+import { publicProcedure } from "../trpc";
+
+export const contactUs = publicProcedure
+  .input(contactUsSchema)
+  .mutation(async ({ input }) => {
+    try {
+      const { email, subject, message } = input;
+
+      const mailContent = {
+        from: email,
+        to: process.env.GMAIL_USER,
+        subject: `${subject} from ${email}`,
+        text: message,
+        html: `<p>${message}</p>`,
+      };
+
+      const transporter = NodeMailer.createTransport({
+        service: "gmail",
+        auth: {
+          user: process.env.GMAIL_USER,
+          pass: process.env.GMAIL_PASS,
+        },
+      });
+
+      const mailInfo = await transporter.sendMail(mailContent);
+      infoLog(mailInfo);
+
+      return true;
+    } catch (error) {
+      errorLog(error);
+      throw error;
+    }
+  });

handlers/formHandlers.ts

@@ -1,42 +0,0 @@
-import { Dispatch, FormEvent, SetStateAction } from "react";
-
-import { useTranslations } from "next-intl";
-
-import { clearMessage } from "@/components/InfoMessage";
-import sendMail from "@/lib/sendMail";
-import { ResponseMessage } from "@/types";
-import { errorLog } from "@/utils/logger";
-
-export const handleEmailSubmit = async (
-  e: FormEvent<HTMLFormElement>,
-  t: ReturnType<typeof useTranslations>,
-  setIsSending: Dispatch<SetStateAction<boolean>>,
-  setResponseMessage: Dispatch<SetStateAction<ResponseMessage>>,
-  values: Record<string, string>,
-  resetForm: () => void,
-) => {
-  e.preventDefault();
-  setIsSending(true);
-
-  try {
-    const response = await sendMail(values);
-    if (response.status === 250) {
-      setResponseMessage({
-        isSuccessful: true,
-        message: t("success"),
-      });
-
-      resetForm();
-      clearMessage(setResponseMessage);
-      setIsSending(false);
-    }
-  } catch (error) {
-    errorLog(error);
-    setResponseMessage({
-      isSuccessful: false,
-      message: t("failure"),
-    });
-    clearMessage(setResponseMessage);
-    setIsSending(false);
-  }
-};

hooks/useContactForm.ts

@@ -1,28 +0,0 @@
-import { ChangeEvent, useState } from "react";
-
-const useContactForm = () => {
-  const [values, setValues] = useState({
-    email: "",
-    subject: "",
-    message: "",
-  });
-
-  const handleChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    setValues((prevState) => {
-      return {
-        ...prevState,
-        [e.target.id]: e.target.value,
-      };
-    });
-  };
-
-  const resetForm = () => {
-    setValues({ email: "", subject: "", message: "" });
-  };
-
-  return { values, handleChange, resetForm };
-};
-
-export default useContactForm;

schemas.ts

@@ -2,6 +2,12 @@ import { z } from "zod";
 
 import { TimeControl } from "@/types";
 
+export const contactUsSchema = z.object({
+  email: z.string().email(),
+  subject: z.string().min(1, { message: "FormValidation.required" }),
+  message: z.string().min(1, { message: "FormValidation.required" }),
+});
+
 export const addTournamentSchema = z.object({
   name: z.string().min(1, { message: "FormValidation.required" }),
   email: z.string().email(),