owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

mailer rest form and disable send

Browse Source
This commit is contained in:
Owen Rees
2023-06-21 15:39:25 +02:00
parent b323d07d12
commit 65532531a0
10 changed files with 116 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO
+5
View File
@@ -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
+1 -1
View File
@@ -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
+83 -62
View File
@@ -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)}
className="space-y-8"
>
<div>
<label
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
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"
<>
<form
onSubmit={(e) =>
handleEmailSubmit(
e,
values,
setResponseMessage,
resetForm,
setIsSending
)
}
className="space-y-8"
>
Send message
</button>
</form>
<div>
<label
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>
</>
);
};
cypress/screenshots/links.cy.ts/Test all links -- Check navbar links point to correct pathname as a slug (failed).png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

cypress/videos/data.cy.tsx.mp4
BIN
View File
Binary file not shown.
cypress/videos/links.cy.ts.mp4
BIN
View File
Binary file not shown.
cypress/videos/navbar.cy.tsx.mp4
BIN
View File
Binary file not shown.
cypress/videos/scroll.cy.tsx.mp4
BIN
View File
Binary file not shown.
handlers/formSubmitHandlers.ts
+21 -3
View File
@@ -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
+6 -1
View File
@@ -17,7 +17,12 @@ const useContactForm = () => {
};
});
};
return { values, handleChange };
const resetForm = () => {
setValues({ email: "", subject: "", message: "" });
};
return { values, handleChange, resetForm };
};
export default useContactForm;