From 66fffcbeceb43bf867248b9c25347f5d6fdb21c4 Mon Sep 17 00:00:00 2001
From: Mr Simon C <iamontheinternet@yahoo.com>
Date: Wed, 4 Sep 2024 22:49:55 +0000
Subject: [PATCH 1/2] Add ability to use Esc keypress to close modal for
 documents

---
 .../components/Modals/ManageWorkspace/index.jsx    | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/components/Modals/ManageWorkspace/index.jsx b/frontend/src/components/Modals/ManageWorkspace/index.jsx
index 2c6e658b043..8371990a80c 100644
--- a/frontend/src/components/Modals/ManageWorkspace/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/index.jsx
@@ -32,6 +32,20 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
     fetchWorkspace();
   }, [providedSlug, slug]);
 
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        hideModal();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hideModal]);
+
   if (!workspace) return null;
 
   if (isMobile) {

From 190bf5a60281b9cc677ce8d1d894da590580fa48 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Wed, 4 Sep 2024 16:40:17 -0700
Subject: [PATCH 2/2] move escape close to hook

---
 .../Modals/ManageWorkspace/index.jsx          | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Modals/ManageWorkspace/index.jsx b/frontend/src/components/Modals/ManageWorkspace/index.jsx
index 8371990a80c..fe3f539b91c 100644
--- a/frontend/src/components/Modals/ManageWorkspace/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/index.jsx
@@ -32,20 +32,6 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
     fetchWorkspace();
   }, [providedSlug, slug]);
 
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        hideModal();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [hideModal]);
-
   if (!workspace) return null;
 
   if (isMobile) {
@@ -141,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 };
 }