template-react-app/src/configure.tsx

134 lines
3.6 KiB
TypeScript

/* eslint-disable react-refresh/only-export-components */
import { Suspense, lazy } from "react";
import { RouteObject } from "react-router-dom";
import Loader from "./components/Loader";
import AboutPage from "./features/About/AboutPage";
import App from "./features/App";
import LoginPage from "./features/Login/LoginPage";
import { flatternRoutingTable } from "./utils/RoutingTableUtils";
import Debugger from "./features/Debugger";
//----
const HomePageLazy = lazy(() => import("./features/Home/HomePage"));
export const viteEnv = import.meta.env;
// Based on https://reactrouter.com/en/main/start/overview#nested-routes with additional props
export const navigation: CustomRouteObject[] = [
// root page, mainframe for all pages, skipped in navigation tree generation (inly childs are used)
{
path: "/",
element: <App />,
additionalProps: {
name: "Root", // used for breadcrumbs and navigation tree
disableRedirect: false, //entry will not be included in the react-router redirect list, will cut out childs
disableInNavbar: true, //entry will not be rendered in the navbar
disableBreadcrumbBar: false, //entry will be directly under root in routing table
},
children: [
// home page
{
path: "/",
index: true, //if true will be used as a default route for parent, dont declare path if use this
element: (
<Suspense fallback={<Loader />}>
<HomePageLazy />
</Suspense>
),
additionalProps: {
name: "Home",
disableRedirect: false,
disableInNavbar: false,
disableBreadcrumbBar: false,
},
},
// about page
{
path: "about",
element: <AboutPage />,
additionalProps: {
name: "About",
disableRedirect: false,
disableInNavbar: false,
disableBreadcrumbBar: false,
},
children: [
{
path: "child",
element: <div>DUPA CHILD</div>,
additionalProps: {
name: "About Child",
disableRedirect: false,
disableInNavbar: false,
disableBreadcrumbBar: false,
},
},
],
},
// login page
{
path: "login",
element: <LoginPage />,
additionalProps: {
name: "Login",
disableRedirect: false,
disableInNavbar: false,
disableBreadcrumbBar: false,
},
},
],
},
];
// ---
if (viteEnv.DEV) {
// Add Test page
// Test page is outside of mainframe, will be rendered in root (withius App where is entire navigation frame)
navigation.push({
path: "/Test",
element: <div>Test</div>,
additionalProps: {
name: "Test",
disableRedirect: false,
disableInNavbar: false,
disableBreadcrumbBar: false,
},
});
// Add debugger page
navigation[0].children?.push({
path: "debug_variables",
element: <Debugger />,
additionalProps: {
name: "Debug Variables",
disableRedirect: false,
disableInNavbar: false,
disableBreadcrumbBar: false,
},
});
}
// ---
//Custom Route Object for handling custom behaviours on app navigation
export interface RouteObjectAdditionalProps {
name: string;
disableRedirect: boolean;
disableInNavbar: boolean;
disableBreadcrumbBar: boolean;
}
export interface CustomRouteObject extends Omit<RouteObject, "children"> {
additionalProps: RouteObjectAdditionalProps;
children?: CustomRouteObject[];
}
//----
//Main configuration, static data, mostly used here
export const main = {
program_name: viteEnv.VITE_APP_NAME,
program_version: "1.0.0",
};
//About page configuration
export const about = {
program_description: `This is a ${main.program_name} for <purpose>.`,
program_authors: [{ name: "Author Name", email: "email@example.com" }],
};
//----
export const flatRoutes = flatternRoutingTable(navigation);