useModal moved inside modal component

components/DetailsGallery.tsx

@@ -3,14 +3,13 @@ import * as React from "react"
 
 import { motion } from "framer-motion"
 
-import Modal from "./Modal"
+import Modal, { useModal } from "./Modal"
 import ExpandButton from "components/ExpandButton"
 import DataChangeAlertIllustration from "components/illustration/DataChangeAlert"
 import DataSourceConnectionIllustration from "components/illustration/DataSourceConnection"
 import DataThresholdAlertIllustration from "components/illustration/DataThresholdAlert"
 import GroupDashboardIllustration from "components/illustration/GroupDashboard"
 import TimelyUpdatesIllustration from "components/illustration/TimelyUpdates"
-import useModal from "hooks/useModal"
 import { gridContainerVariants, gridItemVariants } from "utils/animationConfig"
 
 const DetailsGallery: React.FC = () => {

components/HomeGallery.tsx

@@ -3,7 +3,7 @@ import * as React from "react"
 
 import { motion } from "framer-motion"
 
-import Modal from "./Modal"
+import Modal, { useModal } from "./Modal"
 import ExpandButton from "components/ExpandButton"
 import AlertsIllustration from "components/illustration/Alerts"
 import DashboardIllustration from "components/illustration/Dashboard"
@@ -13,7 +13,6 @@ import QueryBuilderIllustration from "components/illustration/QueryBuilder"
 import SavedQueryIllustration from "components/illustration/SavedQuery"
 import SharingIllustration from "components/illustration/Sharing"
 import VisualizeIllustration from "components/illustration/Visualize"
-import useModal from "hooks/useModal"
 import { gridContainerVariants, gridItemVariants } from "utils/animationConfig"
 
 const HomeGallery: React.FC = () => {

components/Modal.tsx

@@ -38,3 +38,34 @@ const Modal: React.FC<Props> = ({ isOpen, onClose, children }) => {
 }
 
 export default Modal
+
+export const useModal = (): [
+  boolean,
+  React.Dispatch<React.SetStateAction<boolean>>,
+  React.ReactNode,
+  React.Dispatch<React.SetStateAction<React.ReactNode>>,
+] => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [content, setContent] = React.useState<React.ReactNode>(null)
+
+  React.useEffect(() => {
+    const handleEsc = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        setIsOpen(false)
+        setContent(null)
+      }
+    }
+
+    if (isOpen) {
+      document.body.style.overflowY = "hidden"
+      document.addEventListener("keydown", handleEsc)
+    }
+
+    return () => {
+      document.body.style.overflowY = "unset"
+      document.removeEventListener("keydown", handleEsc)
+    }
+  }, [isOpen, setIsOpen])
+
+  return [isOpen, setIsOpen, content, setContent]
+}

components/OthersGallery.tsx

@@ -3,11 +3,10 @@ import * as React from "react"
 
 import { motion } from "framer-motion"
 
-import Modal from "./Modal"
+import Modal, { useModal } from "./Modal"
 import ExpandButton from "components/ExpandButton"
 import SetAlertsIllustration from "components/illustration/SetAlerts"
 import SlackAlertIllustration from "components/illustration/SlackAlert"
-import useModal from "hooks/useModal"
 import { gridContainerVariants, gridItemVariants } from "utils/animationConfig"
 
 const OthersGallery: React.FC = () => {