From aa4c9533aa80919f602ae7d9e44935dd672d14bf Mon Sep 17 00:00:00 2001
From: Timothy Carambat <rambat1010@gmail.com>
Date: Wed, 4 Sep 2024 16:42:40 -0700
Subject: [PATCH] Feature/use escape key to close documents modal (#2222)

* Add ability to use Esc keypress to close modal for documents

* move escape close to hook

---------

Co-authored-by: Mr Simon C <iamontheinternet@yahoo.com>
---
 .../Modals/ManageWorkspace/index.jsx          | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Modals/ManageWorkspace/index.jsx b/frontend/src/components/Modals/ManageWorkspace/index.jsx
index 2c6e658b0..fe3f539b9 100644
--- a/frontend/src/components/Modals/ManageWorkspace/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/index.jsx
@@ -127,19 +127,32 @@ const ModalTabSwitcher = ({ selectedTab, setSelectedTab }) => {
     </div>
   );
 };
+
 export function useManageWorkspaceModal() {
   const { user } = useUser();
   const [showing, setShowing] = useState(false);
 
-  const showModal = () => {
+  function showModal() {
     if (user?.role !== "default") {
       setShowing(true);
     }
-  };
+  }
 
-  const hideModal = () => {
+  function hideModal() {
     setShowing(false);
-  };
+  }
+
+  useEffect(() => {
+    function onEscape(event) {
+      if (!showing || event.key !== "Escape") return;
+      setShowing(false);
+    }
+
+    document.addEventListener("keydown", onEscape);
+    return () => {
+      document.removeEventListener("keydown", onEscape);
+    };
+  }, [showing]);
 
   return { showing, showModal, hideModal };
 }