diff --git a/TODO b/TODO index 06ac2d6..6724f3e 100644 --- a/TODO +++ b/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 diff --git a/app/api/send-mail/route.ts b/app/api/send-mail/route.ts index fe16e80..882df1c 100644 --- a/app/api/send-mail/route.ts +++ b/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: `

${message}

`, }; diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx index 8f3ddbe..d80148a 100644 --- a/components/ContactForm.tsx +++ b/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 = ( +

+ {responseMessage.message} +

+ ); return ( -
handleEmailSubmit(e, values, setResponseMessage)} - className="space-y-8" - > -
- - -
-
- - -
-
- - -
- -
+
+ + +
+
+ + +
+
+ + +
+ + {infoMessage} + + ); }; diff --git a/cypress/screenshots/links.cy.ts/Test all links -- Check navbar links point to correct pathname as a slug (failed).png b/cypress/screenshots/links.cy.ts/Test all links -- Check navbar links point to correct pathname as a slug (failed).png new file mode 100644 index 0000000..b7a9591 Binary files /dev/null and b/cypress/screenshots/links.cy.ts/Test all links -- Check navbar links point to correct pathname as a slug (failed).png differ diff --git a/cypress/videos/data.cy.tsx.mp4 b/cypress/videos/data.cy.tsx.mp4 index da8a0bd..7d5e483 100644 Binary files a/cypress/videos/data.cy.tsx.mp4 and b/cypress/videos/data.cy.tsx.mp4 differ diff --git a/cypress/videos/links.cy.ts.mp4 b/cypress/videos/links.cy.ts.mp4 index 6702f32..85a1e19 100644 Binary files a/cypress/videos/links.cy.ts.mp4 and b/cypress/videos/links.cy.ts.mp4 differ diff --git a/cypress/videos/navbar.cy.tsx.mp4 b/cypress/videos/navbar.cy.tsx.mp4 index 9c8c0e7..63f71ca 100644 Binary files a/cypress/videos/navbar.cy.tsx.mp4 and b/cypress/videos/navbar.cy.tsx.mp4 differ diff --git a/cypress/videos/scroll.cy.tsx.mp4 b/cypress/videos/scroll.cy.tsx.mp4 index 84b62b8..e82e785 100644 Binary files a/cypress/videos/scroll.cy.tsx.mp4 and b/cypress/videos/scroll.cy.tsx.mp4 differ diff --git a/handlers/formSubmitHandlers.ts b/handlers/formSubmitHandlers.ts index 29b9407..8a4692e 100644 --- a/handlers/formSubmitHandlers.ts +++ b/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, values: Record, setResponseMessage: Dispatch< SetStateAction<{ isSuccessful: boolean; message: string }> - > + >, + resetForm: () => void, + setIsSending: Dispatch> ) => { 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); } }; diff --git a/hooks/useContactForm.ts b/hooks/useContactForm.ts index 54b6128..f917a5c 100644 --- a/hooks/useContactForm.ts +++ b/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;