make basic account routing work

linode · Sep 26, 2024 · 28511f5 · 28511f5
1 parent becf94a
commit 28511f5
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 52 deletions.
diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx
@@ -22,6 +22,8 @@ import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnaly
 import AccountLogins from './AccountLogins';
 import { SwitchAccountButton } from './SwitchAccountButton';
 import { SwitchAccountDrawer } from './SwitchAccountDrawer';
+import { createLazyRoute, createRoute, Outlet } from '@tanstack/react-router';
+import { accountRoute } from 'src/routes/account';
 
 const Billing = React.lazy(() =>
   import('src/features/Billing/BillingDetail').then((module) => ({
@@ -184,29 +186,11 @@ const AccountLanding = () => {
 
       <Tabs index={getDefaultTabIndex()} onChange={handleTabChange}>
         <TabLinkList tabs={tabs} />
-
-        <React.Suspense fallback={<SuspenseLoader />}>
-          <TabPanels>
-            <SafeTabPanel index={idx}>
-              <Billing />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <Users />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <AccountLogins />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <EntityTransfersLanding />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <MaintenanceLanding />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <GlobalSettings />
-            </SafeTabPanel>
-          </TabPanels>
-        </React.Suspense>
+        <TabPanels>
+          <React.Suspense fallback={<SuspenseLoader />}>
+            <Outlet />
+          </React.Suspense>
+        </TabPanels>
       </Tabs>
       <SwitchAccountDrawer
         onClose={() => setIsDrawerOpen(false)}
@@ -217,4 +201,44 @@ const AccountLanding = () => {
   );
 };
 
-export default AccountLanding;
+export const accountIndexRoute = createRoute({
+  component: AccountLanding,
+  getParentRoute: () => accountRoute,
+  path: '/',
+});
+
+export const accountBillingRoute = createRoute({
+  component: Billing,
+  getParentRoute: () => accountIndexRoute,
+  path: 'billing'
+});
+
+export const accountUsersRoute = createRoute({
+  component: Users,
+  getParentRoute: () => accountIndexRoute,
+  path: 'users',
+});
+
+export const accountLoginHistoryRoute = createRoute({
+  component: AccountLogins,
+  getParentRoute: () => accountIndexRoute,
+  path: 'login-history',
+});
+
+export const accountServiceTransfersRoute = createRoute({
+  component: EntityTransfersLanding,
+  getParentRoute: () => accountIndexRoute,
+  path: 'service-transfers',
+});
+
+export const accountMaintenanceRoute = createRoute({
+  component: MaintenanceLanding,
+  getParentRoute: () => accountIndexRoute,
+  path: 'maintenance',
+});
+
+export const accountSettingsRoute = createRoute({
+  component: GlobalSettings,
+  getParentRoute: () => accountIndexRoute,
+  path: 'settings',
+});
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
@@ -3,6 +3,15 @@ import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import {
+  accountBillingRoute,
+  accountIndexRoute,
+  accountLoginHistoryRoute,
+  accountMaintenanceRoute,
+  accountServiceTransfersRoute,
+  accountSettingsRoute,
+  accountUsersRoute,
+} from 'src/features/Account/AccountLanding';
 
 import { rootRoute } from './root';
 import { strictLazyRouteComponent } from './utils';
@@ -16,20 +25,12 @@ export const AccountRoutes = () => {
   );
 };
 
-const accountRoute = createRoute({
+export const accountRoute = createRoute({
   component: AccountRoutes,
   getParentRoute: () => rootRoute,
   path: 'account',
 });
 
-const accountIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
-  getParentRoute: () => accountRoute,
-  path: '/',
-});
-
 const accountUsersUsernameRoute = createRoute({
   component: strictLazyRouteComponent(
     () => import('src/features/Users/UserDetail'),
@@ -56,22 +57,6 @@ const accountUsersUsernamePermissionsRoute = createRoute({
   path: 'users/$username/permissions',
 });
 
-const accountBillingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
-  getParentRoute: () => accountRoute,
-  path: 'billing',
-});
-
-const accountBillingEditRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
-  getParentRoute: () => accountRoute,
-  path: 'billing/edit',
-});
-
 const accountInvoicesInvoiceIdRoute = createRoute({
   component: strictLazyRouteComponent(
     () => import('src/features/Billing/InvoiceDetail/InvoiceDetail'),
@@ -97,13 +82,18 @@ const accountEntityTransfersCreateRoute = createRoute({
 });
 
 export const accountRouteTree = accountRoute.addChildren([
-  accountIndexRoute,
   accountUsersUsernameRoute.addChildren([
     accountUsersUsernameProfileRoute,
     accountUsersUsernamePermissionsRoute,
   ]),
-  accountBillingRoute,
-  accountBillingEditRoute,
+  accountIndexRoute.addChildren([
+    accountBillingRoute,
+    accountUsersRoute,
+    accountLoginHistoryRoute,
+    accountServiceTransfersRoute,
+    accountMaintenanceRoute,
+    accountSettingsRoute,
+  ]),
   accountInvoicesInvoiceIdRoute,
   accountEntityTransfersCreateRoute,
 ]);