From b3f421cde9d2953afd0bdd5fb1ba497218243817 Mon Sep 17 00:00:00 2001
From: Tindo Arsel <devtnga@gmail.com>
Date: Thu, 20 Apr 2023 15:35:51 +0100
Subject: [PATCH] refactor: Add hideOnClickOutside feature to reuse code (#240)

* remove console log

* refactor: Add hideOnClickOutside feature to reuse code

This change abstracts the code repetition in three different files and promote the DRY principle by adding the hideOnClickOutside feature to the handleClickOutside function. The feature is designed to hide an element when clicking outside of its area.

* refactor: hooks

---------

Co-authored-by: Jing Hua <tohjinghua123@gmail.com>
---
 .../Message/CommandPrompt/CommandPrompt.tsx   | 30 ++++------------
 .../Chat/ChatContent/Message/RoleSelector.tsx | 26 ++------------
 src/components/Menu/ChatFolder.tsx            | 27 +++-----------
 src/hooks/useHideOnOutsideClick.ts            | 36 +++++++++++++++++++
 4 files changed, 49 insertions(+), 70 deletions(-)
 create mode 100644 src/hooks/useHideOnOutsideClick.ts

diff --git a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
index 47cf653..e4c67e6 100644
--- a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
+++ b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
@@ -1,9 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import useStore from '@store/store';
+
 import { useTranslation } from 'react-i18next';
 import { matchSorter } from 'match-sorter';
 import { Prompt } from '@type/prompt';
 
+import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
+
 const CommandPrompt = ({
   _setContent,
 }: {
@@ -11,10 +14,10 @@ const CommandPrompt = ({
 }) => {
   const { t } = useTranslation();
   const prompts = useStore((state) => state.prompts);
-  const [dropDown, setDropDown] = useState<boolean>(false);
   const [_prompts, _setPrompts] = useState<Prompt[]>(prompts);
   const [input, setInput] = useState<string>('');
-  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
 
   useEffect(() => {
     const filteredPrompts = matchSorter(useStore.getState().prompts, input, {
@@ -28,29 +31,8 @@ const CommandPrompt = ({
     setInput('');
   }, [prompts]);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setDropDown(false);
-      }
-    };
-
-    if (dropDown) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [dropdownRef, dropDown]);
-
   return (
-    <div className='relative max-wd-sm' ref={dropdownRef}>
+    <div className='relative max-wd-sm' ref={dropDownRef}>
       <button
         className='btn btn-neutral btn-small'
         onClick={() => setDropDown(!dropDown)}
diff --git a/src/components/Chat/ChatContent/Message/RoleSelector.tsx b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
index a5f43cc..8e3ac67 100644
--- a/src/components/Chat/ChatContent/Message/RoleSelector.tsx
+++ b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
@@ -5,6 +5,8 @@ import useStore from '@store/store';
 import DownChevronArrow from '@icon/DownChevronArrow';
 import { ChatInterface, Role, roles } from '@type/chat';
 
+import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
+
 const RoleSelector = React.memo(
   ({
     role,
@@ -20,29 +22,7 @@ const RoleSelector = React.memo(
     const setChats = useStore((state) => state.setChats);
     const currentChatIndex = useStore((state) => state.currentChatIndex);
 
-    const [dropDown, setDropDown] = useState<boolean>(false);
-    const dropDownRef = useRef<HTMLDivElement>(null);
-
-    const handleClickOutside = useCallback(
-      (event: any) => {
-        if (dropDownRef.current && !dropDownRef.current.contains(event.target))
-          setDropDown(false);
-      },
-      [dropDownRef, setDropDown, messageIndex]
-    );
-
-    useEffect(() => {
-      // Bind the event listener only if the dropdown is open.
-      if (dropDown) {
-        document.addEventListener('mousedown', handleClickOutside);
-      } else {
-        document.removeEventListener('mousedown', handleClickOutside);
-      }
-
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [dropDownRef, dropDown]);
+    const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
 
     return (
       <div className='prose dark:prose-invert relative'>
diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index 9e1f6d2..383e7c2 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -20,6 +20,8 @@ import RefreshIcon from '@icon/RefreshIcon';
 
 import { folderColorOptions } from '@constants/color';
 
+import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
+
 const ChatFolder = ({
   folderChats,
   folderId,
@@ -37,13 +39,13 @@ const ChatFolder = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const folderRef = useRef<HTMLDivElement>(null);
   const gradientRef = useRef<HTMLDivElement>(null);
-  const paletteRef = useRef<HTMLDivElement>(null);
 
   const [_folderName, _setFolderName] = useState<string>(folderName);
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [isDelete, setIsDelete] = useState<boolean>(false);
   const [isHover, setIsHover] = useState<boolean>(false);
-  const [showPalette, setShowPalette] = useState<boolean>(false);
+
+  const [showPalette, setShowPalette, paletteRef] = useHideOnOutsideClick();
 
   const editTitle = () => {
     const updatedFolders: FolderCollection = JSON.parse(
@@ -145,27 +147,6 @@ const ChatFolder = ({
     if (inputRef && inputRef.current) inputRef.current.focus();
   }, [isEdit]);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        paletteRef.current &&
-        !paletteRef.current.contains(event.target as Node)
-      ) {
-        setShowPalette(false);
-      }
-    };
-
-    if (showPalette) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [paletteRef, showPalette]);
-
   return (
     <div
       className={`w-full transition-colors group/folder ${
diff --git a/src/hooks/useHideOnOutsideClick.ts b/src/hooks/useHideOnOutsideClick.ts
new file mode 100644
index 0000000..261aeb2
--- /dev/null
+++ b/src/hooks/useHideOnOutsideClick.ts
@@ -0,0 +1,36 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const useHideOnOutsideClick = (): [
+  boolean,
+  React.Dispatch<React.SetStateAction<boolean>>,
+  React.RefObject<HTMLDivElement>
+] => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [showElement, setShowElement] = useState<boolean>(false);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      elementRef.current &&
+      !elementRef.current.contains(event.target as Node)
+    ) {
+      setShowElement(false);
+    }
+  };
+
+  useEffect(() => {
+    // Bind the event listener only if the element is show.
+    if (showElement) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showElement, elementRef]);
+
+  return [showElement, setShowElement, elementRef];
+};
+
+export default useHideOnOutsideClick;