Add account related routes to router file

Author: DaneEveritt

resources/scripts/components/App.tsx

@@ -15,9 +15,9 @@ import { ServerContext } from '@/state/server';
 import '@/assets/tailwind.css';
 import Spinner from '@/components/elements/Spinner';
 
-const DashboardRouter = lazy(() => import(/* webpackChunkName: "dash" */'@/routers/DashboardRouter'));
-const ServerRouter = lazy(() => import('@/routers/ServerRouter'));
-const AuthenticationRouter = lazy(() => import('@/routers/AuthenticationRouter'));
+const DashboardRouter = lazy(() => import(/* webpackChunkName: "dashboard" */'@/routers/DashboardRouter'));
+const ServerRouter = lazy(() => import(/* webpackChunkName: "server" */'@/routers/ServerRouter'));
+const AuthenticationRouter = lazy(() => import(/* webpackChunkName: "auth" */'@/routers/AuthenticationRouter'));
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;

resources/scripts/routers/DashboardRouter.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import { NavLink, Route, Switch } from 'react-router-dom';
-import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
-import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
 import { NotFound } from '@/components/elements/ScreenBlock';
 import TransitionRouter from '@/TransitionRouter';
 import SubNavigation from '@/components/elements/SubNavigation';
-import AccountSSHContainer from '@/components/dashboard/ssh/AccountSSHContainer';
 import { useLocation } from 'react-router';
-import ActivityLogContainer from '@/components/dashboard/activity/ActivityLogContainer';
 import Spinner from '@/components/elements/Spinner';
+import routes from '@/routers/routes';
 
 export default () => {
     const location = useLocation();
@@ -21,10 +18,15 @@ export default () => {
             {location.pathname.startsWith('/account') &&
                 <SubNavigation>
                     <div>
-                        <NavLink to={'/account'} exact>Settings</NavLink>
-                        <NavLink to={'/account/api'}>API Credentials</NavLink>
-                        <NavLink to={'/account/ssh'}>SSH Keys</NavLink>
-                        <NavLink to={'/account/activity'}>Activity</NavLink>
+                        {routes.account.filter((route) => !!route.name).map(({ path, name, exact = false }) => (
+                            <NavLink
+                                key={path}
+                                to={`/account/${path}`.replace('//', '/')}
+                                exact={exact}
+                            >
+                                {name}
+                            </NavLink>
+                        ))}
                     </div>
                 </SubNavigation>
             }
@@ -34,18 +36,11 @@ export default () => {
                         <Route path={'/'} exact>
                             <DashboardContainer/>
                         </Route>
-                        <Route path={'/account'} exact>
-                            <AccountOverviewContainer/>
-                        </Route>
-                        <Route path={'/account/api'} exact>
-                            <AccountApiContainer/>
-                        </Route>
-                        <Route path={'/account/ssh'} exact>
-                            <AccountSSHContainer/>
-                        </Route>
-                        <Route path={'/account/activity'} exact>
-                            <ActivityLogContainer/>
-                        </Route>
+                        {routes.account.map(({ path, component: Component }) => (
+                            <Route key={path} path={`/account/${path}`.replace('//', '/')} exact>
+                                <Component/>
+                            </Route>
+                        ))}
                         <Route path={'*'}>
                             <NotFound/>
                         </Route>

resources/scripts/routers/routes.ts

@@ -8,27 +8,63 @@ import NetworkContainer from '@/components/server/network/NetworkContainer';
 import StartupContainer from '@/components/server/startup/StartupContainer';
 import FileManagerContainer from '@/components/server/files/FileManagerContainer';
 import SettingsContainer from '@/components/server/settings/SettingsContainer';
+import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
+import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
+import AccountSSHContainer from '@/components/dashboard/ssh/AccountSSHContainer';
+import ActivityLogContainer from '@/components/dashboard/activity/ActivityLogContainer';
 
+// Each of the router files is already code split out appropriately — so
+// all of the items above will only be loaded in when that router is loaded.
+//
+// These specific lazy loaded routes are to avoid loading in heavy screens
+// for the server dashboard when they're only needed for specific instances.
 const FileEditContainer = lazy(() => import('@/components/server/files/FileEditContainer'));
 const ScheduleEditContainer = lazy(() => import('@/components/server/schedules/ScheduleEditContainer'));
 
-interface ServerRouteDefinition {
+interface RouteDefinition {
     path: string;
-    permission: string | string[] | null;
     // If undefined is passed this route is still rendered into the router itself
     // but no navigation link is displayed in the sub-navigation menu.
     name: string | undefined;
     component: React.ComponentType;
-    // The default for "exact" is assumed to be "true" unless you explicitly
-    // pass it as false.
     exact?: boolean;
 }
 
+interface ServerRouteDefinition extends RouteDefinition {
+    permission: string | string[] | null;
+}
+
 interface Routes {
+    // All of the routes available under "/account"
+    account: RouteDefinition[];
+    // All of the routes available under "/server/:id"
     server: ServerRouteDefinition[];
 }
 
 export default {
+    account: [
+        {
+            path: '/',
+            name: 'Account',
+            component: AccountOverviewContainer,
+            exact: true,
+        },
+        {
+            path: '/api',
+            name: 'API Credentials',
+            component: AccountApiContainer,
+        },
+        {
+            path: '/ssh',
+            name: 'SSH Keys',
+            component: AccountSSHContainer,
+        },
+        {
+            path: '/activity',
+            name: 'Activity',
+            component: ActivityLogContainer,
+        },
+    ],
     server: [
         {
             path: '/',