Working functions that generates routing.

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: <https://demo.themesberg.com/windster-pro/#>

src/consts.ts

@@ -1 +1,2 @@
 export const ADMINISTRATION = "administration";
+export const SETTINGS = "settings";

src/features/SettingsAdvancedPage.tsx

@@ -0,0 +1,8 @@
+import { useParams } from "wouter";
+
+const SettingsAdvancedPage = () => {
+	const params = useParams();
+	return <div>SettingsAdvancedPage {params.id}</div>;
+};
+
+export default SettingsAdvancedPage;

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 (
+			<div className="join">
+				{/* Check does route have children and perform routing generation for children */}
+				<Link
+					key={index}
+					className={`btn join-item hover:btn-primary duration-75 `}
+					href={
+						parentPath ? parentPath + route.path : route.path != "/" ? route.path : ""
+					}
+				>
+					{/* 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)}
+				</Link>
+				{route.children
+					? routesCrawler(parentPath ?? "" + route.path, route.children)
+					: null}
+			</div>
+		);
+	});
+};
+
 /**
  * This component is used to generate buttons for debug navigation
- * UNFINISHED
  */
 const DebugNavigationButtonsGenerator = () => {
-	return (
+	return <div className="space-y-2 space-x-2 mb-6">{routesCrawler()}</div>;
-		<div className="flex join mb-4">
-			<Link className={`btn join-item hover:btn-primary duration-75 `} href="">
-				Home
-			</Link>
-			<Link
-				className={`btn join-item hover:btn-primary duration-75 `}
-				href={R.routesRoot[1].path}
-			>
-				{R.routesRoot[1].icon &&
-					React.createElement(R.routesRoot[1].icon, { className: "h-6 w-6" })}
-				{R.routesRoot[1].name}
-			</Link>
-		</div>
-	);
 };
 
 export default DebugNavigationButtonsGenerator;

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 = (
-	const routesCrawler = (parentPath?: string): JSX.Element[] => {
+	parentPath?: string,
-		return R.routesRoot.map((route, index) => {
+	routesPack: Routes[] = R.routesRoot,
-			return (
+): 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}
 				<Route
 					key={index}
 					path={parentPath ? parentPath + route.path : route.path}
 					component={route.component}
 				/>
-			);
+			</>
-		});
+		);
-	};
+	});
-	return <Switch>{routesCrawler()}</Switch>;
+};
+
+/**
+ * This component is used to generate Switch with Routes for given routes object
+ */
+const SwitchRoutesGenerator = () => {
+	return (
+		<Switch>
+			{routesCrawler()}
+			<Route component={() => <>404</>} />
+		</Switch>
+	);
 };
 
 export default SwitchRoutesGenerator;

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],
+	},
 ];

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. 👍