feat routes: make some progress on custom extension routes

resources/scripts/blueprint/extends/routers/DashboardRouter.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { NavLink, Route, Switch } from 'react-router-dom';
+import { useLocation } from 'react-router';
+import { NotFound } from '@/components/elements/ScreenBlock';
+import TransitionRouter from '@/TransitionRouter';
+import DashboardContainer from '@/components/dashboard/DashboardContainer';
+import Spinner from '@/components/elements/Spinner';
+
+import routes from '@/routers/routes';
+import blueprintRoutes from './routes';
+
+export const NavigationLinks = () => {
+  return (
+    <>
+
+      {/* Pterodactyl routes */}
+      {routes.account
+        .filter((route) => !!route.name)
+        .map(({ path, name, exact = false }) => (
+          <NavLink key={path} to={`/account/${path}`.replace('//', '/')} exact={exact}>
+            {name}
+          </NavLink>
+        ))}
+
+      {/* Blueprint routes */}
+      {blueprintRoutes.account
+        .filter((route) => !!route.name)
+        .map(({ path, name, exact = false }) => (
+          <NavLink key={path} to={`/account/${path}`.replace('//', '/')} exact={exact}>
+            {name}
+          </NavLink>
+        ))}
+
+    </>
+  );
+};
+
+export const NavigationRouter = () => {
+  const location = useLocation();
+  return (
+    <>
+      <TransitionRouter>
+        <React.Suspense fallback={<Spinner centered />}>
+          <Switch location={location}>
+            <Route path={'/'} exact>
+              <DashboardContainer />
+            </Route>
+
+            {/* Pterodactyl routes */}
+            {routes.account.map(({ path, component: Component }) => (
+              <Route key={path} path={`/account/${path}`.replace('//', '/')} exact>
+                <Component />
+              </Route>
+            ))}
+
+            {/* Blueprint routes */}
+            {blueprintRoutes.account.map(({ path, component: Component }) => (
+              <Route key={path} path={`/account/${path}`.replace('//', '/')} exact>
+                <Component />
+              </Route>
+            ))}
+            
+            <Route path={'*'}>
+              <NotFound />
+            </Route>
+          </Switch>
+        </React.Suspense>
+      </TransitionRouter>
+    </>
+  );
+};

resources/scripts/blueprint/extends/routers/ExampleComponent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+
+const ExampleContainer = () => {
+    return (
+      <PageContentBlock title={'Example'}>
+              <>
+                  <p>hello</p>
+              </>
+      </PageContentBlock>
+    );
+};
+
+export default ExampleContainer;

resources/scripts/blueprint/extends/routers/ServerRouter.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <>
+    </>
+  );
+};

resources/scripts/blueprint/extends/routers/routes.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import ExampleContainer from './ExampleComponent';
+
+interface ExtendedRouteDefinition {
+  path: string;
+  name: string | undefined;
+  component: React.ComponentType;
+  exact?: boolean;
+}
+
+interface ExtendedServerRouteDefinition extends ExtendedRouteDefinition {
+  permission: string | string[] | null;
+}
+
+interface Routes {
+  account: ExtendedRouteDefinition[];
+  server: ExtendedServerRouteDefinition[];
+}
+
+export default {
+  account: [
+    {
+      path: '/example',
+      name: 'Example',
+      component: ExampleContainer,
+    },
+  ],
+  server: [
+    {
+      path: '/example',
+      permission: null,
+      name: 'Example',
+      component: ExampleContainer,
+    },
+  ],
+} as Routes;

resources/scripts/routers/DashboardRouter.tsx

@@ -1,17 +1,12 @@
 import React from 'react';
-import { NavLink, Route, Switch } from 'react-router-dom';
 import NavigationBar from '@/components/NavigationBar';
-import DashboardContainer from '@/components/dashboard/DashboardContainer';
-import { NotFound } from '@/components/elements/ScreenBlock';
-import TransitionRouter from '@/TransitionRouter';
 import SubNavigation from '@/components/elements/SubNavigation';
 import { useLocation } from 'react-router';
-import Spinner from '@/components/elements/Spinner';
-import routes from '@/routers/routes';
 
-import BeforeSubNavigation      from '@/blueprint/components/Navigation/SubNavigation/BeforeSubNavigation';
+import { NavigationLinks, NavigationRouter } from '@/blueprint/extends/routers/DashboardRouter';
-import AdditionalAccountItems   from '@/blueprint/components/Navigation/SubNavigation/AdditionalAccountItems';
+import BeforeSubNavigation                   from '@/blueprint/components/Navigation/SubNavigation/BeforeSubNavigation';
-import AfterSubNavigation       from '@/blueprint/components/Navigation/SubNavigation/AfterSubNavigation';
+import AdditionalAccountItems                from '@/blueprint/components/Navigation/SubNavigation/AdditionalAccountItems';
+import AfterSubNavigation                    from '@/blueprint/components/Navigation/SubNavigation/AfterSubNavigation';
 
 export default () => {
     const location = useLocation();
@@ -23,35 +18,13 @@ export default () => {
                 <SubNavigation>
                     <BeforeSubNavigation />
                     <div>
-                        {routes.account
+                        <NavigationLinks />
-                            .filter((route) => !!route.name)
-                            .map(({ path, name, exact = false }) => (
-                                <NavLink key={path} to={`/account/${path}`.replace('//', '/')} exact={exact}>
-                                    {name}
-                                </NavLink>
-                            ))}
                         <AdditionalAccountItems />
                     </div>
                     <AfterSubNavigation />
                 </SubNavigation>
             )}
-            <TransitionRouter>
+            <NavigationRouter />
-                <React.Suspense fallback={<Spinner centered />}>
-                    <Switch location={location}>
-                        <Route path={'/'} exact>
-                            <DashboardContainer />
-                        </Route>
-                        {routes.account.map(({ path, component: Component }) => (
-                            <Route key={path} path={`/account/${path}`.replace('//', '/')} exact>
-                                <Component />
-                            </Route>
-                        ))}
-                        <Route path={'*'}>
-                            <NotFound />
-                        </Route>
-                    </Switch>
-                </React.Suspense>
-            </TransitionRouter>
         </>
     );
 };

resources/scripts/routers/ServerRouter.tsx

@@ -21,6 +21,7 @@ import ConflictStateRenderer from '@/components/server/ConflictStateRenderer';
 import PermissionRoute from '@/components/elements/PermissionRoute';
 import routes from '@/routers/routes';
 
+import BlueprintRouter       from '@/blueprint/extends/routers/ServerRouter';
 import BeforeSubNavigation   from '@/blueprint/components/Navigation/SubNavigation/BeforeSubNavigation';
 import AdditionalServerItems from '@/blueprint/components/Navigation/SubNavigation/AdditionalServerItems';
 import AfterSubNavigation    from '@/blueprint/components/Navigation/SubNavigation/AfterSubNavigation';