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,17 +5,35 @@ 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)}
+        onSubmit={(e) =>
+          handleEmailSubmit(
+            e,
+            values,
+            setResponseMessage,
+            resetForm,
+            setIsSending
+          )
+        }
         className="space-y-8"
       >
         <div>
@@ -69,12 +87,15 @@ const ContactForm = () => {
           ></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"
+          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"
         >
-        Send message
+          {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;