Added routes props to retrieve route list

cher-ami · Sep 12, 2023 · f19a263 · f19a263
1 parent 8373473
commit f19a263
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 9 deletions.
diff --git a/apps/front/src/components/devMenu/DevMenu.module.less b/apps/front/src/components/devMenu/DevMenu.module.less
@@ -11,3 +11,26 @@
   height: 48rem;
   background-color: red;
 }
+
+.navigation {
+  position: fixed;
+  top: 16rem;
+  right: 16rem;
+  width: 200rem;
+  height: auto;
+  background-color: black;
+}
+
+.navigationList {
+}
+
+.navigationItem {
+}
+
+.navigationLink {
+  color: white;
+
+  &.active {
+    text-decoration: underline;
+  }
+}
diff --git a/apps/front/src/components/devMenu/DevMenu.tsx b/apps/front/src/components/devMenu/DevMenu.tsx
@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import css from "./DevMenu.module.less"
 import { cls } from "@cher-ami/utils"
 import debug from "@wbe/debug"
+import { routes } from "~/routes"
+import { Link, useRouter } from "@cher-ami/router"
 
 interface IProps {
   className?: string
@@ -16,6 +18,38 @@ const log = debug(`front:${componentName}`)
 function DevMenu(props: IProps) {
   const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false)
 
+  const { currentRoute } = useRouter()
+
+  useEffect(() => {
+    console.log(currentRoute.name)
+  }, [currentRoute])
+
+  // ------------------------------------------------------------------------------- RETRIEVE ROUTES TO SHOW
+
+  const routeList = useMemo(() => {
+    const local = []
+    const getRoutesToShow = (r) => {
+      for (let route of r) {
+        if (route.props?.showInDevMenu) {
+          local.push(route)
+          if (route.children) {
+            getRoutesToShow(route.children)
+          }
+        } else {
+          if (route.children) {
+            getRoutesToShow(route.children)
+          }
+        }
+      }
+    }
+
+    getRoutesToShow(routes)
+
+    return local
+  }, [routes])
+
+  // ------------------------------------------------------------------------------- TOGGLE MENU
+
   const toggleMenuVisibility = (): void => {
     setIsMenuVisible(!isMenuVisible)
   }
@@ -26,20 +60,17 @@ function DevMenu(props: IProps) {
     toggleMenuVisibility()
   }
 
-  const onKeyDownHandler = (event): void => {
-    // Press shift + D
-    if (event.shiftKey && event.keyCode === 68) {
-      toggleMenuVisibility()
-    }
+  const onKeyPressHandler = ({ key }): void => {
+    if (key === "m") toggleMenuVisibility()
   }
 
   // ------------------------------------------------------------------------------- LISTENERS
 
   useEffect(() => {
-    window.addEventListener("keydown", onKeyDownHandler)
+    window.addEventListener("keypress", onKeyPressHandler)
 
     return () => {
-      window.removeEventListener("keydown", onKeyDownHandler)
+      window.removeEventListener("keypress", onKeyPressHandler)
     }
   }, [isMenuVisible])
 
@@ -48,7 +79,25 @@ function DevMenu(props: IProps) {
   return (
     <div className={cls(css.root, props.className)}>
       <button className={css.button} onClick={onButtonClickHandler} />
-      {isMenuVisible && <div className={css.wrapper}>Menu</div>}
+
+      {isMenuVisible && (
+        <nav className={css.navigation}>
+          <ul className={css.navigationList}>
+            {routeList
+              .filter((route) => route.props?.showInDevMenu)
+              .map((route, index) => (
+                <li
+                  className={cls(css.navigationItem, css.navigationItemActive)}
+                  key={index}
+                >
+                  <Link className={css.navigationLink} to={{ name: route.name }}>
+                    {route.name}
+                  </Link>
+                </li>
+              ))}
+          </ul>
+        </nav>
+      )}
     </div>
   )
 }

diff --git a/apps/front/src/routes.ts b/apps/front/src/routes.ts
@@ -16,6 +16,9 @@ export const routes: TRoute[] = [
     path: "/",
     component: HomePage,
     name: EPages.HOME,
+    props: {
+      showInDevMenu: true,
+    },
     getStaticProps: async (props, currentLang: TLanguage) => {
       const res = await fetch("https://worldtimeapi.org/api/ip")
       const time = await res.json()
@@ -31,6 +34,9 @@ export const routes: TRoute[] = [
     path: "/work/:slug?",
     name: EPages.WORK,
     component: WorkPage,
+    props: {
+      showInDevMenu: true,
+    },
     getStaticProps: async (props, currentLang: TLanguage) => {
       const meta: TMetaTags = {
         title: `Work - ${props.params.slug}`,