From 84a679b0e48ed76eee2fa44d3caac83591aa3c8c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 30 Oct 2023 11:18:11 +0100
Subject: feat(hooks): add useBoolean and useToggle hooks

---
 .../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 ++++++++++++----------
 4 files changed, 36 insertions(+), 49 deletions(-)

(limited to 'src/components/organisms/toolbar')

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<typeof MainNavItem> = ({
   setIsActive: _setIsActive,
   ...args
 }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(isActive);
-
-  const toggle = useCallback(() => {
-    setIsOpen((prevState) => !prevState);
-  }, []);
+  const [isOpen, toggle] = useToggle(isActive);
 
   return <MainNavItem isActive={isOpen} setIsActive={toggle} {...args} />;
 };
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<typeof Search> = ({
   setIsActive: _setIsActive,
   ...args
 }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(isActive);
+  const [isOpen, toggle] = useToggle(isActive);
 
-  return (
-    <Search
-      isActive={isOpen}
-      setIsActive={() => {
-        setIsOpen(!isOpen);
-      }}
-      {...args}
-    />
-  );
+  return <Search isActive={isOpen} setIsActive={toggle} {...args} />;
 };
 
 /**
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<typeof Settings> = ({
   setIsActive: _setIsActive,
   ...args
 }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(isActive);
-
-  const toggle = useCallback(() => {
-    setIsOpen((prevState) => !prevState);
-  }, []);
+  const [isOpen, toggle] = useToggle(isActive);
 
   return <Settings isActive={isOpen} setIsActive={toggle} {...args} />;
 };
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<ToolbarProps> = ({
   nav,
   searchPage,
 }) => {
-  const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
-  const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
-  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(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<HTMLDivElement>(
-    () => isNavOpened && setIsNavOpened(false)
+    () => isMainNavOpen && deactivateMainNav()
   );
   const searchRef = useOnClickOutside<HTMLDivElement>(
-    () => isSearchOpened && setIsSearchOpened(false)
+    () => isSearchOpen && deactivateSearch()
   );
   const settingsRef = useOnClickOutside<HTMLDivElement>(
-    () => 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 (
     <div className={`${styles.wrapper} ${className}`}>
       <MainNavItem
         className={styles.modal}
-        isActive={isNavOpened}
+        isActive={isMainNavOpen}
         items={nav}
         ref={mainNavRef}
         setIsActive={toggleMainNav}
       />
       <Search
         className={`${styles.modal} ${styles['modal--search']}`}
-        isActive={isSearchOpened}
+        isActive={isSearchOpen}
         ref={searchRef}
         searchPage={searchPage}
         setIsActive={toggleSearch}
       />
       <Settings
         className={`${styles.modal} ${styles['modal--settings']}`}
-        isActive={isSettingsOpened}
+        isActive={isSettingsOpen}
         ref={settingsRef}
         setIsActive={toggleSettings}
       />
-- 
cgit v1.2.3