From 58cb40f031f395ca9efccff674ba0f2dae723f50 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 8 Jun 2022 12:07:08 +0200
Subject: fix(settings): close tooltip when modal is closing

The event was not captured so the tooltip remained open when the
settings was closed. It prevented to click on the toolbar buttons.
---
 .../organisms/modals/settings-modal.module.scss     |  1 -
 src/components/organisms/modals/settings-modal.tsx  |  1 -
 src/components/organisms/toolbar/toolbar.tsx        | 21 +++++++++++----------
 3 files changed, 11 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/organisms/modals/settings-modal.module.scss

(limited to 'src/components/organisms')

diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
deleted file mode 100644
index 70b786d..0000000
--- a/src/components/organisms/modals/settings-modal.module.scss
+++ /dev/null
@@ -1 +0,0 @@
-// TODO
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index 34f5619..0ab6b7a 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -4,7 +4,6 @@ import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { type SettingsFormProps } from '../forms/settings-form';
-import styles from './settings-modal.module.scss';
 
 const DynamicSettingsForm = dynamic(
   () => import('@components/organisms/forms/settings-form'),
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index c18b8ea..50fc7f2 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,9 +1,9 @@
-import useClickOutside from '@utils/hooks/use-click-outside';
+import useOnClickOutside from '@utils/hooks/use-on-click-outside';
 import useRouteChange from '@utils/hooks/use-route-change';
-import { FC, useRef, useState } from 'react';
+import { FC, useState } from 'react';
 import MainNav, { type MainNavProps } from '../toolbar/main-nav';
 import Search, { type SearchProps } from '../toolbar/search';
-import Settings, { SettingsProps } from '../toolbar/settings';
+import Settings, { type SettingsProps } from '../toolbar/settings';
 import styles from './toolbar.module.scss';
 
 export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
@@ -33,16 +33,17 @@ const Toolbar: FC<ToolbarProps> = ({
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
   const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
-  const mainNavRef = useRef<HTMLDivElement>(null);
-  const searchRef = useRef<HTMLDivElement>(null);
-  const settingsRef = useRef<HTMLDivElement>(null);
 
-  useClickOutside(mainNavRef, () => isNavOpened && setIsNavOpened(false));
-  useClickOutside(searchRef, () => isSearchOpened && setIsSearchOpened(false));
-  useClickOutside(
-    settingsRef,
+  const mainNavRef = useOnClickOutside<HTMLDivElement>(
+    () => isNavOpened && setIsNavOpened(false)
+  );
+  const searchRef = useOnClickOutside<HTMLDivElement>(
+    () => isSearchOpened && setIsSearchOpened(false)
+  );
+  const settingsRef = useOnClickOutside<HTMLDivElement>(
     () => isSettingsOpened && setIsSettingsOpened(false)
   );
+
   useRouteChange(() => setIsSearchOpened(false));
 
   return (
-- 
cgit v1.2.3