Fixes #16 : Add New Hook That Can Be Used By Dropdown/Popover Components

components/Dropdowns/IndexDropdown.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import { createPopper } from "@popperjs/core";
+import usePopoverCloseEvents from "hooks/usePopoverCloseEvents";
 
 const IndexDropdown = () => {
   // dropdown props
@@ -16,8 +17,9 @@ const IndexDropdown = () => {
   const closeDropdownPopover = () => {
     setDropdownPopoverShow(false);
   };
+  const componentRef = usePopoverCloseEvents(closeDropdownPopover)
   return (
-    <>
+    <div ref={componentRef}>
       <a
         className="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
         href="#pablo"
@@ -140,7 +142,7 @@ const IndexDropdown = () => {
           </a>
         </Link>
       </div>
-    </>
+    </div>
   );
 };
 

components/Dropdowns/NotificationDropdown.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { createPopper } from "@popperjs/core";
+import usePopoverCloseEvents from "hooks/usePopoverCloseEvents";
 
 const NotificationDropdown = () => {
   // dropdown props
@@ -15,8 +16,9 @@ const NotificationDropdown = () => {
   const closeDropdownPopover = () => {
     setDropdownPopoverShow(false);
   };
+  const componentRef = usePopoverCloseEvents(closeDropdownPopover)
   return (
-    <>
+    <div ref={componentRef}>
       <a
         className="text-blueGray-500 block py-1 px-3"
         href="#pablo"
@@ -73,7 +75,7 @@ const NotificationDropdown = () => {
           Seprated link
         </a>
       </div>
-    </>
+    </div>
   );
 };
 

components/Dropdowns/PagesDropdown.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import { createPopper } from "@popperjs/core";
+import usePopoverCloseEvents from "hooks/usePopoverCloseEvents";
 
 const PagesDropdown = () => {
   // dropdown props
@@ -16,8 +17,9 @@ const PagesDropdown = () => {
   const closeDropdownPopover = () => {
     setDropdownPopoverShow(false);
   };
+  const componentRef = usePopoverCloseEvents(closeDropdownPopover)
   return (
-    <>
+    <div ref={componentRef}>
       <a
         className="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
         href="#pablo"
@@ -140,7 +142,7 @@ const PagesDropdown = () => {
           </a>
         </Link>
       </div>
-    </>
+    </div>
   );
 };
 

components/Dropdowns/TableDropdown.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { createPopper } from "@popperjs/core";
+import usePopoverCloseEvents from "hooks/usePopoverCloseEvents";
 
 const NotificationDropdown = () => {
   // dropdown props
@@ -15,8 +16,9 @@ const NotificationDropdown = () => {
   const closeDropdownPopover = () => {
     setDropdownPopoverShow(false);
   };
+  const componentRef = usePopoverCloseEvents(closeDropdownPopover)
   return (
-    <>
+    <div ref={componentRef}>
       <a
         className="text-blueGray-500 py-1 px-3"
         href="#pablo"
@@ -63,7 +65,7 @@ const NotificationDropdown = () => {
           Something else here
         </a>
       </div>
-    </>
+    </div>
   );
 };
 

components/Dropdowns/UserDropdown.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { createPopper } from "@popperjs/core";
+import usePopoverCloseEvents from "hooks/usePopoverCloseEvents";
 
 const UserDropdown = () => {
   // dropdown props
@@ -15,8 +16,9 @@ const UserDropdown = () => {
   const closeDropdownPopover = () => {
     setDropdownPopoverShow(false);
   };
+  const componentRef = usePopoverCloseEvents(closeDropdownPopover)
   return (
-    <>
+    <div ref={componentRef}>
       <a
         className="text-blueGray-500 block"
         href="#pablo"
@@ -81,7 +83,7 @@ const UserDropdown = () => {
           Seprated link
         </a>
       </div>
-    </>
+    </div>
   );
 };
 

hooks/usePopoverCloseEvents.js

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react";
+
+export default function usePopoverCloseEvents(closeFunction) {
+    const ref = useRef(null)
+
+    const handleHideDropdown = (event) => {
+        if (event.key === 'Escape') {
+            closeFunction();
+        }
+    };
+
+    const handleClickOutside = (event) => {
+        if (ref.current && !ref.current.contains(event.target)) {
+            closeFunction();
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('keydown', handleHideDropdown, true);
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('keydown', handleHideDropdown, true);
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    });
+
+    return ref;
+}