feat(hooks): add useBoolean and useToggle hooks

3 files changed, 29 insertions, 22 deletions

diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx
index 9493095..2fea0a7 100644
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable max-statements */
-import { type FC, useState, useCallback } from 'react';
+import type { FC } from 'react';
 import { useIntl } from 'react-intl';
-import { useAckee } from '../../../../utils/hooks';
+import { useAckee, useBoolean } from '../../../../utils/hooks';
 import { Legend, List, ListItem } from '../../../atoms';
 import {
   Switch,
@@ -25,7 +25,11 @@ export type AckeeToggleProps = Omit<
 export const AckeeToggle: FC<AckeeToggleProps> = ({ direction, ...props }) => {
   const intl = useIntl();
   const [tracking, toggleTracking] = useAckee();
-  const [isTooltipOpened, setIsTooltipOpened] = useState(false);
+  const {
+    deactivate: closeTooltip,
+    state: isTooltipOpened,
+    toggle: toggleTooltip,
+  } = useBoolean(false);
 
   const ackeeLabel = intl.formatMessage({
     defaultMessage: 'Tracking:',
@@ -64,13 +68,6 @@ export const AckeeToggle: FC<AckeeToggleProps> = ({ direction, ...props }) => {
     { id: 'ackee-partial' as const, label: partialLabel, value: 'partial' },
   ] satisfies [SwitchOption, SwitchOption];
 
-  const closeTooltip = useCallback(() => {
-    setIsTooltipOpened(false);
-  }, []);
-  const toggleTooltip = useCallback(() => {
-    setIsTooltipOpened((prev) => !prev);
-  }, []);
-
   return (
     <Switch
       {...props}
diff --git a/src/components/organisms/forms/comment-form/comment-form.tsx b/src/components/organisms/forms/comment-form/comment-form.tsx
index b5f2d64..9059cbc 100644
--- a/src/components/organisms/forms/comment-form/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form/comment-form.tsx
@@ -10,6 +10,7 @@ import {
   useId,
 } from 'react';
 import { useIntl } from 'react-intl';
+import { useBoolean } from '../../../../utils/hooks';
 import {
   Button,
   Form,
@@ -77,15 +78,19 @@ export const CommentForm: FC<CommentFormProps> = ({
     };
   }, [parentId]);
   const [data, setData] = useState(emptyForm);
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(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 nameLabel = intl.formatMessage({
     defaultMessage: 'Name:',
@@ -160,10 +165,10 @@ export const CommentForm: FC<CommentFormProps> = ({
   const sendForm = useCallback(
     (e: FormEvent) => {
       e.preventDefault();
-      setIsSubmitting(true);
-      saveComment(data, resetForm).then(() => setIsSubmitting(false));
+      activateNotice();
+      saveComment(data, resetForm).then(() => deactivateNotice());
     },
-    [data, resetForm, saveComment]
+    [activateNotice, data, deactivateNotice, resetForm, saveComment]
   );
 
   return (
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<ContactFormProps> = ({
     };
   }, []);
   const [data, setData] = useState(emptyForm);
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(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<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -135,10 +140,10 @@ export const ContactForm: FC<ContactFormProps> = ({
   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 (