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 --- .../flipping-label/flipping-label.stories.tsx | 7 ++- .../organisms/forms/ackee-toggle/ackee-toggle.tsx | 17 +++---- .../organisms/forms/comment-form/comment-form.tsx | 17 ++++--- .../organisms/forms/contact-form/contact-form.tsx | 17 ++++--- src/components/organisms/layout/comment.tsx | 13 ++---- .../organisms/toolbar/main-nav.stories.tsx | 8 +--- .../organisms/toolbar/search.stories.tsx | 16 ++----- .../organisms/toolbar/settings.stories.tsx | 8 +--- src/components/organisms/toolbar/toolbar.tsx | 53 ++++++++++++---------- 9 files changed, 72 insertions(+), 84 deletions(-) (limited to 'src/components') diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx index c3c4f9a..906a488 100644 --- a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx +++ b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useCallback, useState } from 'react'; +import { useToggle } from '../../../../utils/hooks'; import { Button, Icon } from '../../../atoms'; import { FlippingLabel } from './flipping-label'; @@ -74,11 +74,10 @@ const Template: ComponentStory = ({ isActive, ...args }) => { - const [active, setActive] = useState(isActive); - const updateState = useCallback(() => setActive((prev) => !prev), []); + const [active, toggle] = useToggle(isActive); return ( - ); 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 = ({ 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 = ({ 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 ( = ({ }; }, [parentId]); 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 nameLabel = intl.formatMessage({ defaultMessage: 'Name:', @@ -160,10 +165,10 @@ export const CommentForm: FC = ({ 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 = ({ }; }, []); 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 ( diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx index db7cb3a..adbb2cc 100644 --- a/src/components/organisms/layout/comment.tsx +++ b/src/components/organisms/layout/comment.tsx @@ -1,11 +1,11 @@ /* eslint-disable max-statements */ import NextImage from 'next/image'; import Script from 'next/script'; -import { type FC, useCallback, useState } from 'react'; +import type { FC } from 'react'; import { useIntl } from 'react-intl'; import type { Comment as CommentSchema, WithContext } from 'schema-dts'; import type { SingleComment } from '../../../types'; -import { useSettings } from '../../../utils/hooks'; +import { useSettings, useToggle } from '../../../utils/hooks'; import { Button, Link, Time } from '../../atoms'; import { Card, @@ -49,12 +49,7 @@ export const UserComment: FC = ({ }) => { const intl = useIntl(); const { website } = useSettings(); - const [isReplying, setIsReplying] = useState(false); - - const handleReply = useCallback( - () => setIsReplying((prevState) => !prevState), - [] - ); + const [isReplying, toggleIsReplying] = useToggle(false); if (!approved) { return ( @@ -170,7 +165,7 @@ export const UserComment: FC = ({ {canReply ? ( - diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx index d79addf..31e2b65 100644 --- a/src/components/organisms/toolbar/main-nav.stories.tsx +++ b/src/components/organisms/toolbar/main-nav.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useCallback, useState } from 'react'; +import { useToggle } from '../../../utils/hooks'; import { MainNavItem } from './main-nav'; /** @@ -61,11 +61,7 @@ const Template: ComponentStory = ({ setIsActive: _setIsActive, ...args }) => { - const [isOpen, setIsOpen] = useState(isActive); - - const toggle = useCallback(() => { - setIsOpen((prevState) => !prevState); - }, []); + const [isOpen, toggle] = useToggle(isActive); return ; }; diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx index 2c8dd10..0f211bd 100644 --- a/src/components/organisms/toolbar/search.stories.tsx +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useToggle } from '../../../utils/hooks'; import { Search } from './search'; /** @@ -66,17 +66,9 @@ const Template: ComponentStory = ({ setIsActive: _setIsActive, ...args }) => { - const [isOpen, setIsOpen] = useState(isActive); + const [isOpen, toggle] = useToggle(isActive); - return ( - { - setIsOpen(!isOpen); - }} - {...args} - /> - ); + return ; }; /** diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index 793c521..c1fe37d 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -1,5 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useCallback, useState } from 'react'; +import { useToggle } from '../../../utils/hooks'; import { Settings } from './settings'; /** @@ -66,11 +66,7 @@ const Template: ComponentStory = ({ setIsActive: _setIsActive, ...args }) => { - const [isOpen, setIsOpen] = useState(isActive); - - const toggle = useCallback(() => { - setIsOpen((prevState) => !prevState); - }, []); + const [isOpen, toggle] = useToggle(isActive); return ; }; diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index c400285..c0be464 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -1,6 +1,10 @@ /* eslint-disable max-statements */ -import { type FC, useState, useCallback } from 'react'; -import { useOnClickOutside, useRouteChange } from '../../../utils/hooks'; +import type { FC } from 'react'; +import { + useBoolean, + useOnClickOutside, + useRouteChange, +} from '../../../utils/hooks'; import { MainNavItem, type MainNavItemProps } from './main-nav'; import { Search, type SearchProps } from './search'; import { Settings } from './settings'; @@ -27,54 +31,53 @@ export const Toolbar: FC = ({ nav, searchPage, }) => { - const [isNavOpened, setIsNavOpened] = useState(false); - const [isSearchOpened, setIsSearchOpened] = useState(false); - const [isSettingsOpened, setIsSettingsOpened] = useState(false); + const { + deactivate: deactivateMainNav, + state: isMainNavOpen, + toggle: toggleMainNav, + } = useBoolean(false); + const { + deactivate: deactivateSearch, + state: isSearchOpen, + toggle: toggleSearch, + } = useBoolean(false); + const { + deactivate: deactivateSettings, + state: isSettingsOpen, + toggle: toggleSettings, + } = useBoolean(false); const mainNavRef = useOnClickOutside( - () => isNavOpened && setIsNavOpened(false) + () => isMainNavOpen && deactivateMainNav() ); const searchRef = useOnClickOutside( - () => isSearchOpened && setIsSearchOpened(false) + () => isSearchOpen && deactivateSearch() ); const settingsRef = useOnClickOutside( - () => isSettingsOpened && setIsSettingsOpened(false) + () => isSettingsOpen && deactivateSettings() ); - const toggleMainNav = useCallback( - () => setIsNavOpened((prevState) => !prevState), - [] - ); - const toggleSearch = useCallback( - () => setIsSearchOpened((prevState) => !prevState), - [] - ); - const toggleSettings = useCallback( - () => setIsSettingsOpened((prevState) => !prevState), - [] - ); - - useRouteChange(() => setIsSearchOpened(false)); + useRouteChange(deactivateSearch); return (
-- cgit v1.2.3