From a0d90aaf7906c08aa313d7369a89e326a4975098 Mon Sep 17 00:00:00 2001 From: Igor Barcik Date: Wed, 6 Dec 2023 12:44:56 +0100 Subject: [PATCH] Working functions that generates routing. --- README.md | 2 - src/consts.ts | 1 + src/features/SettingsAdvancedPage.tsx | 8 +++ .../DebugNavigationButtonsGenerator.tsx | 56 +++++++++++++------ src/routes/RouteStructureGenerator.tsx | 45 ++++++++++++--- src/routes/routes.tsx | 35 ++++++++++-- src/utils/README.md | 25 +++++++++ 7 files changed, 141 insertions(+), 31 deletions(-) create mode 100644 src/features/SettingsAdvancedPage.tsx create mode 100644 src/utils/README.md diff --git a/README.md b/README.md index a27e801..cabe7b4 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,4 @@ If you have any suggestions/opinions, please let me know in issues #### Dev notes -[notes](docs/notes.md) - > UI inspiration: diff --git a/src/consts.ts b/src/consts.ts index 2ca849c..da384cc 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1 +1,2 @@ export const ADMINISTRATION = "administration"; +export const SETTINGS = "settings"; diff --git a/src/features/SettingsAdvancedPage.tsx b/src/features/SettingsAdvancedPage.tsx new file mode 100644 index 0000000..576bb8d --- /dev/null +++ b/src/features/SettingsAdvancedPage.tsx @@ -0,0 +1,8 @@ +import { useParams } from "wouter"; + +const SettingsAdvancedPage = () => { + const params = useParams(); + return
SettingsAdvancedPage {params.id}
; +}; + +export default SettingsAdvancedPage; diff --git a/src/routes/DebugNavigationButtonsGenerator.tsx b/src/routes/DebugNavigationButtonsGenerator.tsx index 7ef9afd..a69bab8 100644 --- a/src/routes/DebugNavigationButtonsGenerator.tsx +++ b/src/routes/DebugNavigationButtonsGenerator.tsx @@ -1,26 +1,50 @@ import React from "react"; import * as R from "../routes/routes"; import { Link } from "wouter"; +import { Routes } from "../routes/routes"; +import inDev from "../utils/inDebug"; + +const routesCrawler = ( + parentPath?: string, + routesPack: Routes[] = R.routesRoot, +): JSX.Element[] => { + // Roll through routes and generate Route for each + return routesPack.map((route, index): JSX.Element => { + // Debug log shows generated routes + inDev(() => + console.log( + "routesCrawler", + parentPath ? parentPath + route.path : route.path, + ), + ); + return ( +
+ {/* Check does route have children and perform routing generation for children */} + + {/* Render icon */} + {route.icon && React.createElement(route.icon, { className: "h-6 w-6" })} + {/* Makes first letter uppercase */} + {route.name[0].toUpperCase() + route.name.slice(1)} + + {route.children + ? routesCrawler(parentPath ?? "" + route.path, route.children) + : null} +
+ ); + }); +}; + /** * This component is used to generate buttons for debug navigation - * UNFINISHED */ const DebugNavigationButtonsGenerator = () => { - return ( -
- - Home - - - {R.routesRoot[1].icon && - React.createElement(R.routesRoot[1].icon, { className: "h-6 w-6" })} - {R.routesRoot[1].name} - -
- ); + return
{routesCrawler()}
; }; export default DebugNavigationButtonsGenerator; diff --git a/src/routes/RouteStructureGenerator.tsx b/src/routes/RouteStructureGenerator.tsx index 230febb..dfa8c5b 100644 --- a/src/routes/RouteStructureGenerator.tsx +++ b/src/routes/RouteStructureGenerator.tsx @@ -1,19 +1,48 @@ import { Route, Switch } from "wouter"; +import { Routes } from "./routes"; import * as R from "./routes"; +import inDev from "../utils/inDebug"; -const SwitchRoutesGenerator = () => { - const routesCrawler = (parentPath?: string): JSX.Element[] => { - return R.routesRoot.map((route, index) => { - return ( +const routesCrawler = ( + parentPath?: string, + routesPack: Routes[] = R.routesRoot, +): JSX.Element[] => { + // Roll through routes and generate Route for each + return routesPack.map((route, index): JSX.Element => { + // Debug log shows generated routes + inDev(() => + console.log( + "routesCrawler", + parentPath ? parentPath + route.path : route.path, + ), + ); + return ( + <> + {/* Check does route have children and perform routing generation for children */} + + {route.children + ? routesCrawler(parentPath ?? "" + route.path, route.children) + : null} - ); - }); - }; - return {routesCrawler()}; + + ); + }); +}; + +/** + * This component is used to generate Switch with Routes for given routes object + */ +const SwitchRoutesGenerator = () => { + return ( + + {routesCrawler()} + <>404} /> + + ); }; export default SwitchRoutesGenerator; diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx index 645b3ab..59e136b 100644 --- a/src/routes/routes.tsx +++ b/src/routes/routes.tsx @@ -6,18 +6,19 @@ import { FaUsers } from "react-icons/fa"; import AdministrationPage from "../features/AdministrationPage"; import HomePage from "../features/HomePage"; // ----- IMPORT CONSTS ----- -import { ADMINISTRATION } from "../consts"; +import { ADMINISTRATION, SETTINGS } from "../consts"; +import SettingsAdvancedPage from "../features/SettingsAdvancedPage"; // ----- TYPE DEFINITIONS ----- -type Route = { +export type Routes = { name: string; path: string; component: () => JSX.Element; icon?: () => JSX.Element; - children?: Route[]; + children?: Routes[]; }; type RoutesObject = { - [key: string]: Route[]; + [key: string]: Routes[]; }; // ----- ROUTES DEFINITIONS ----- @@ -46,9 +47,26 @@ const routesFirstLevel: RoutesObject = { component: () => <>Permissions, }, ], + [SETTINGS]: [ + { + name: "General", + path: "/general", + component: () => <>General, + }, + { + name: "Appearance", + path: "/appearance", + component: () => <>Appearance, + }, + { + name: "Advanced", + path: "/:id", + component: SettingsAdvancedPage, + }, + ], }; -export const routesRoot: Route[] = [ +export const routesRoot: Routes[] = [ { name: "Home", path: "/", @@ -62,4 +80,11 @@ export const routesRoot: Route[] = [ icon: IoMdOptions, children: routesFirstLevel[ADMINISTRATION], }, + { + name: SETTINGS, + path: "settings", + component: () => <>Settings, + icon: IoMdOptions, + children: routesFirstLevel[SETTINGS], + }, ]; diff --git a/src/utils/README.md b/src/utils/README.md new file mode 100644 index 0000000..e554032 --- /dev/null +++ b/src/utils/README.md @@ -0,0 +1,25 @@ +# ๐Ÿ› ๏ธ Utils Directory + +## What's This? + +This is our `utils` folder, where we keep all the cool TypeScript files that do the behind-the-scenes work. ๐ŸŽฉ No fancy UI stuff here, just the code that makes things tick! + +## What's Inside? + +- A bunch of `.ts` files, each with its own special magic. +- Everything's about doing stuff, like calculations, data fetching... you name it! + +## How to Use + +- Need a function? Grab it from here. ๐Ÿ“ฅ +- Added something new? Awesome, just drop a line here about what it does. โœ๏ธ + +## Just a Heads Up + +- Try to keep things simple and clean. ๐Ÿงน +- No strict rules, but let's not make a mess. ๐Ÿ™ˆ +- Testing? Cool if you do, no sweat if you don't. ๐Ÿคท + +--- + +Remember, this folder is like our utility belt โ€“ always evolving! Feel free to tweak this README as we go. ๐Ÿ‘