Merge pull request #22 from danskernesdigitalebibliotek/with-visibility

With visibility
danskernesdigitalebibliotek · Oct 31, 2024 · 9d2617f · 9d2617f
2 parents b82b3a3 + 252cbe3
commit 9d2617f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${GTFlexa.variable} antialiased`}>
-        {getEnvironment() === "development" && <GridHelper />}
+        <GridHelper hideInProduction />
         <Theme>
           <ReactQueryProvider>
             <Header />

diff --git a/components/global/gridHelper/GridHelper.tsx b/components/global/gridHelper/GridHelper.tsx
@@ -1,19 +1,22 @@
-'use client'
-import { useEffect, useState } from 'react'
+"use client"
+
+import { useEffect, useState } from "react"
+
+import withVisibility from "@/lib/helpers/visibility"
 
 // This component is used to show a grid overlay on the screen when the user presses cmd + g
-export default function GridHelper() {
+function GridHelper() {
   const [isShowing, setIsShowing] = useState(false)
 
   useEffect(() => {
-    window.addEventListener('keydown', handleKeydown)
+    window.addEventListener("keydown", handleKeydown)
     return () => {
-      window.removeEventListener('keydown', handleKeydown)
+      window.removeEventListener("keydown", handleKeydown)
     }
   }, [])
 
   const handleKeydown = (event: KeyboardEvent) => {
-    if (event.metaKey && event.key === 'g') {
+    if (event.metaKey && event.key === "k") {
       setIsShowing(currentValue => !currentValue)
     }
   }
@@ -23,7 +26,7 @@ export default function GridHelper() {
   return (
     <>
       {isShowing ? (
-        <div className="content-container bg-transparent pointer-events-none fixed inset-0 z-[1000] mx-auto">
+        <div className="content-container pointer-events-none fixed inset-0 z-[1000] mx-auto bg-transparent">
           <div className="grid-go h-full">
             {Array.from({ length: columns }).map((e, index) => (
               <div
@@ -37,3 +40,5 @@ export default function GridHelper() {
     </>
   )
 }
+
+export default withVisibility(GridHelper)
diff --git a/lib/helpers/visibility.tsx b/lib/helpers/visibility.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+import { getEnvironment } from "@/lib/helpers/helper.env"
+
+interface WithVisibilityProps {
+  hideInProduction?: boolean
+}
+
+export default function withVisibility<P extends object>(WrappedComponent: React.ComponentType<P>) {
+  const ComponentWithVisibility = ({ hideInProduction, ...props }: P & WithVisibilityProps) => {
+    if (getEnvironment() === "production" && hideInProduction) {
+      return null
+    }
+    return <WrappedComponent {...(props as P)} />
+  }
+
+  return ComponentWithVisibility
+}