From 84a679b0e48ed76eee2fa44d3caac83591aa3c8c Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 30 Oct 2023 11:18:11 +0100 Subject: feat(hooks): add useBoolean and useToggle hooks --- .../organisms/forms/contact-form/contact-form.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'src/components/organisms/forms/contact-form') diff --git a/src/components/organisms/forms/contact-form/contact-form.tsx b/src/components/organisms/forms/contact-form/contact-form.tsx index 89fd331..ed23aad 100644 --- a/src/components/organisms/forms/contact-form/contact-form.tsx +++ b/src/components/organisms/forms/contact-form/contact-form.tsx @@ -9,6 +9,7 @@ import { useMemo, } from 'react'; import { useIntl } from 'react-intl'; +import { useBoolean } from '../../../../utils/hooks'; import { Button, Form, Input, Label, Spinner, TextArea } from '../../../atoms'; import { LabelledField } from '../../../molecules'; import styles from './contact-form.module.scss'; @@ -56,15 +57,19 @@ export const ContactForm: FC = ({ }; }, []); const [data, setData] = useState(emptyForm); - const [isSubmitting, setIsSubmitting] = useState(false); + const { + activate: activateNotice, + deactivate: deactivateNotice, + state: isSubmitting, + } = useBoolean(false); /** * Reset all the form fields. */ const resetForm = useCallback(() => { setData(emptyForm); - setIsSubmitting(false); - }, [emptyForm]); + deactivateNotice(); + }, [deactivateNotice, emptyForm]); const updateForm = useCallback( (e: ChangeEvent) => { @@ -135,10 +140,10 @@ export const ContactForm: FC = ({ const submitHandler = useCallback( async (e: FormEvent) => { e.preventDefault(); - setIsSubmitting(true); - await sendMail(data, resetForm).then(() => setIsSubmitting(false)); + activateNotice(); + await sendMail(data, resetForm).then(() => deactivateNotice()); }, - [data, resetForm, sendMail] + [activateNotice, data, deactivateNotice, resetForm, sendMail] ); return ( -- cgit v1.2.3