From 3c4f5d97add6ee2a6421227e854d6d26b77afc88 Mon Sep 17 00:00:00 2001
From: StephenMP <1.stephen.porter@gmail.com>
Date: Wed, 20 Oct 2021 00:37:45 -0600
Subject: [PATCH] Fixes #16 by adding a new hook that can be utilized by
 Dropdown/Popover components

---
 components/Dropdowns/IndexDropdown.js        |  6 +++--
 components/Dropdowns/NotificationDropdown.js |  6 +++--
 components/Dropdowns/PagesDropdown.js        |  6 +++--
 components/Dropdowns/TableDropdown.js        |  6 +++--
 components/Dropdowns/UserDropdown.js         |  6 +++--
 hooks/usePopoverCloseEvents.js               | 28 ++++++++++++++++++++
 6 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 hooks/usePopoverCloseEvents.js

diff --git a/components/Dropdowns/IndexDropdown.js b/components/Dropdowns/IndexDropdown.js
index 87761c42..37d2c9ec 100644
--- a/components/Dropdowns/IndexDropdown.js
+++ b/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>
   );
 };
 
diff --git a/components/Dropdowns/NotificationDropdown.js b/components/Dropdowns/NotificationDropdown.js
index aef6d7d2..4c46be8b 100644
--- a/components/Dropdowns/NotificationDropdown.js
+++ b/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>
   );
 };
 
diff --git a/components/Dropdowns/PagesDropdown.js b/components/Dropdowns/PagesDropdown.js
index cabb6b72..d03a2e19 100644
--- a/components/Dropdowns/PagesDropdown.js
+++ b/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>
   );
 };
 
diff --git a/components/Dropdowns/TableDropdown.js b/components/Dropdowns/TableDropdown.js
index bf754c1d..bcd792bf 100644
--- a/components/Dropdowns/TableDropdown.js
+++ b/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>
   );
 };
 
diff --git a/components/Dropdowns/UserDropdown.js b/components/Dropdowns/UserDropdown.js
index 22271c77..f3e17177 100644
--- a/components/Dropdowns/UserDropdown.js
+++ b/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>
   );
 };
 
diff --git a/hooks/usePopoverCloseEvents.js b/hooks/usePopoverCloseEvents.js
new file mode 100644
index 00000000..7aec8fde
--- /dev/null
+++ b/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;
+}