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: "",
   });
 
+  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);
+    }
+  };
+
   return (
-    <>
-      <form
-        onSubmit={(e) =>
-          handleEmailSubmit(
-            e,
-            t,
-            setIsSending,
-            setResponseMessage,
-            values,
-            resetForm,
-          )
-        }
-        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"
-            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"
-            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"
-            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"
-            placeholder={t("messagePlaceholder")}
-            data-test="message-input"
-            required
-          ></textarea>
-        </div>
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <TextField
+          name="email"
+          label={t("emailLabel")}
+          placeholder={t("emailPlaceholder")}
+          required
+        />
+
+        <TextField
+          name="subject"
+          label={t("subjectLabel")}
+          placeholder={t("subjectPlaceholder")}
+          required
+        />
+
+        <TextAreaField
+          name="message"
+          rows={6}
+          label={t("messageLabel")}
+          placeholder={t("messagePlaceholder")}
+          required
+        />
+
         <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;
+    }
+  });