Modal functionality abstracted in hook, esc to close the modal

nirnejak · Oct 24, 2024 · 7ccda27 · 7ccda27
1 parent 3049806
commit 7ccda27
Show file tree

Hide file tree

Showing 16 changed files with 58 additions and 15 deletions.
diff --git a/components/illustration/Alerts.tsx b/components/illustration/Alerts.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const Alerts: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/Dashboard.tsx b/components/illustration/Dashboard.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const Dashboard: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/DataChangeAlert.tsx b/components/illustration/DataChangeAlert.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const DataChangeAlert: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/DataExport.tsx b/components/illustration/DataExport.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const DataExport: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/DataSourceConnection.tsx b/components/illustration/DataSourceConnection.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const DataSourceConnection: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/DataThresholdAlert.tsx b/components/illustration/DataThresholdAlert.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const DataThresholdAlert: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/GroupDashboard.tsx b/components/illustration/GroupDashboard.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const GroupDashboard: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/Permissions.tsx b/components/illustration/Permissions.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const Permissions: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/QueryBuilder.tsx b/components/illustration/QueryBuilder.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const QueryBuilder: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/SavedQuery.tsx b/components/illustration/SavedQuery.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const SavedQuery: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/SetAlerts.tsx b/components/illustration/SetAlerts.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const SetAlerts: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/Sharing.tsx b/components/illustration/Sharing.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const Sharing: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/SlackAlert.tsx b/components/illustration/SlackAlert.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const SlackAlert: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/TimelyUpdates.tsx b/components/illustration/TimelyUpdates.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const TimelyUpdates: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/components/illustration/Visualize.tsx b/components/illustration/Visualize.tsx
@@ -4,10 +4,11 @@ import { motion, useAnimation } from "framer-motion"
 
 import ExpandButton from "components/ExpandButton"
 import PlayButton from "components/PlayButton"
+import useModal from "hooks/useModal"
 import classNames from "utils/classNames"
 
 const Visualize: React.FC = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const [isModalOpen, setIsModalOpen] = useModal()
 
   const controls = useAnimation()
 

diff --git a/hooks/useModal.tsx b/hooks/useModal.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+const useModal = (): [
+  boolean,
+  React.Dispatch<React.SetStateAction<boolean>>,
+] => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const handleEsc = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEsc)
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEsc)
+    }
+  }, [isOpen, setIsOpen])
+
+  return [isOpen, setIsOpen]
+}
+
+export default useModal