mailer rest form and disable send

TODO

@@ -3,6 +3,8 @@ TESTS
     - map and table mounts in tournament page <- get data to send to map/table
 //TODO data fetching tests
 //TODO redo layer groups tests
+//TODO write tests for contact form
+//TODO dead link tests take too long, split them into separate tests per page
 
 -----------------------------------------------------------------
 BUGS
@@ -16,6 +18,9 @@ PAGES
 
 ----------------------------------------------------------------
 DESIGN CHANGES
+//TODO test entire site for english to french translations
+//TODO success and error messages into french - mailer
+//TODO disable send message button while sending - isSending = true
 //TODO font size on mobile screen
 //TODO bottom of map is a few pixels short
 //TODO mobile navbar is creeping into the page by a few pixels when hidden - move it to the right a bit. It is easier to see in light mode

app/api/send-mail/route.ts

@@ -8,7 +8,7 @@ export async function POST(req: Request) {
     const mailContent = {
       from: email,
       to: process.env.GMAIL_USER,
-      subject: subject,
+      subject: `${subject} from ${email}`,
       text: message,
       html: `<p>${message}</p>`,
     };

components/ContactForm.tsx

@@ -5,76 +5,97 @@ import { handleEmailSubmit } from "@/handlers/formSubmitHandlers";
 import useContactForm from "@/hooks/useContactForm";
 
 const ContactForm = () => {
-  const { values, handleChange } = useContactForm();
+  const { values, handleChange, resetForm } = useContactForm();
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
     message: "",
   });
+  const [isSending, setIsSending] = useState(false);
 
-  console.log(responseMessage);
+  const infoMessage = (
+    <p
+      className={`${
+        responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
+      } italic`}
+    >
+      {responseMessage.message}
+    </p>
+  );
 
   return (
-    <form
+    <>
-      onSubmit={(e) => handleEmailSubmit(e, values, setResponseMessage)}
+      <form
-      className="space-y-8"
+        onSubmit={(e) =>
-    >
+          handleEmailSubmit(
-      <div>
+            e,
-        <label
+            values,
-          htmlFor="email"
+            setResponseMessage,
-          className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+            resetForm,
-        >
+            setIsSending
-          Adresse e-mail
+          )
-        </label>
+        }
-        <input
+        className="space-y-8"
-          value={values.email}
-          onChange={handleChange}
-          type="email"
-          id="email"
-          className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
-          placeholder="nom@exemple.com"
-          required
-        />
-      </div>
-      <div>
-        <label
-          htmlFor="subject"
-          className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >
-          Sujet
-        </label>
-        <input
-          value={values.subject}
-          onChange={handleChange}
-          type="text"
-          id="subject"
-          className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
-          placeholder="Le motif de ma demande"
-          required
-        />
-      </div>
-      <div className="sm:col-span-2">
-        <label
-          htmlFor="message"
-          className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >
-          Votre message
-        </label>
-        <textarea
-          value={values.message}
-          onChange={handleChange}
-          id="message"
-          rows={6}
-          className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-          placeholder="Détaillez ici votre demande..."
-        ></textarea>
-      </div>
-      <button
-        type="submit"
-        className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-teal-600 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 dark:text-white"
       >
-        Send message
+        <div>
-      </button>
+          <label
-    </form>
+            htmlFor="email"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+          >
+            Adresse e-mail
+          </label>
+          <input
+            value={values.email}
+            onChange={handleChange}
+            type="email"
+            id="email"
+            className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+            placeholder="nom@exemple.com"
+            required
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="subject"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+          >
+            Sujet
+          </label>
+          <input
+            value={values.subject}
+            onChange={handleChange}
+            type="text"
+            id="subject"
+            className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+            placeholder="Le motif de ma demande"
+            required
+          />
+        </div>
+        <div className="sm:col-span-2">
+          <label
+            htmlFor="message"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+          >
+            Votre message
+          </label>
+          <textarea
+            value={values.message}
+            onChange={handleChange}
+            id="message"
+            rows={6}
+            className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+            placeholder="Détaillez ici votre demande..."
+          ></textarea>
+        </div>
+        <button
+          disabled={isSending}
+          type="submit"
+          className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-teal-600 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 dark:text-white disabled:opacity-25"
+        >
+          {isSending ? "Sending..." : "Send Message"}
+        </button>
+        {infoMessage}
+      </form>
+    </>
   );
 };
 

handlers/formSubmitHandlers.ts

@@ -1,14 +1,27 @@
-import sendMail from "@/lib/sendMail";
 import { Dispatch, FormEvent, SetStateAction } from "react";
+import sendMail from "@/lib/sendMail";
 
 export const handleEmailSubmit = async (
   e: FormEvent<HTMLFormElement>,
   values: Record<string, string>,
   setResponseMessage: Dispatch<
     SetStateAction<{ isSuccessful: boolean; message: string }>
-  >
+  >,
+  resetForm: () => void,
+  setIsSending: Dispatch<SetStateAction<boolean>>
 ) => {
   e.preventDefault();
+  setIsSending(true);
+
+  const clearMessage = () => {
+    setTimeout(() => {
+      setResponseMessage({
+        isSuccessful: false,
+        message: "",
+      });
+    }, 10000);
+  };
+
   try {
     const response = await sendMail(values);
     if (response.status === 250) {
@@ -16,12 +29,17 @@ export const handleEmailSubmit = async (
         isSuccessful: true,
         message: "Thank you for your message.",
       });
+      resetForm();
+      clearMessage();
+      setIsSending(false);
     }
   } catch (error) {
-    console.log(error);
+    console.log(error); //TODO add to logger
     setResponseMessage({
       isSuccessful: false,
       message: "Oops something went wrong. Please try again.",
     });
+    clearMessage();
+    setIsSending(false);
   }
 };

hooks/useContactForm.ts

@@ -17,7 +17,12 @@ const useContactForm = () => {
       };
     });
   };
-  return { values, handleChange };
+
+  const resetForm = () => {
+    setValues({ email: "", subject: "", message: "" });
+  };
+
+  return { values, handleChange, resetForm };
 };
 
 export default useContactForm;