From 15ea16eba4a194dae8d3e9eed5e8a7e735a9cbd5 Mon Sep 17 00:00:00 2001
From: theoplawinski <hello@theoplawinski.com>
Date: Tue, 12 Sep 2023 18:30:23 +0200
Subject: [PATCH] Added routes props to retrieve route list

---
 .../components/devMenu/DevMenu.module.less    | 19 ++++++
 apps/front/src/components/devMenu/DevMenu.tsx | 58 ++++++++++++++++---
 apps/front/src/routes.ts                      |  6 ++
 3 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/apps/front/src/components/devMenu/DevMenu.module.less b/apps/front/src/components/devMenu/DevMenu.module.less
index d04121b0..40e8620e 100644
--- a/apps/front/src/components/devMenu/DevMenu.module.less
+++ b/apps/front/src/components/devMenu/DevMenu.module.less
@@ -11,3 +11,22 @@
   height: 48rem;
   background-color: red;
 }
+
+.navigation {
+  position: fixed;
+  top: 16rem;
+  right: 16rem;
+  width: 200rem;
+  height: auto;
+  background-color: black;
+}
+
+.navigationList {
+}
+
+.navigationItem {
+}
+
+.navigationLink {
+  color: white;
+}
diff --git a/apps/front/src/components/devMenu/DevMenu.tsx b/apps/front/src/components/devMenu/DevMenu.tsx
index 6cdb17a2..60cdd78e 100644
--- 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 } from "@cher-ami/router"
 
 interface IProps {
   className?: string
@@ -16,6 +18,32 @@ const log = debug(`front:${componentName}`)
 function DevMenu(props: IProps) {
   const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false)
 
+  // ------------------------------------------------------------------------------- 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 +54,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 +73,22 @@ 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={css.navigationItem} 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
index 0b9a1c16..d4fc1bc6 100644
--- 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}`,