route level error handling

linode · Oct 30, 2024 · bd64614 · bd64614
1 parent 5ca095e
commit bd64614
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 3 deletions.
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
+import { useQueryClient } from '@tanstack/react-query';
 import { RouterProvider } from '@tanstack/react-router';
 import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
@@ -199,6 +200,7 @@ export const MainContent = () => {
   const { classes, cx } = useStyles();
   const { data: preferences } = usePreferences();
   const { mutateAsync: updatePreferences } = useMutatePreferences();
+  const queryClient = useQueryClient();
 
   const globalErrors = useGlobalErrors();
 
@@ -370,6 +372,7 @@ export const MainContent = () => {
                            */}
                           <Route path="*">
                             <RouterProvider
+                              context={{ queryClient }}
                               router={migrationRouter as AnyRouter}
                             />
                           </Route>

diff --git a/packages/manager/src/Router.tsx b/packages/manager/src/Router.tsx
@@ -1,3 +1,4 @@
+import { QueryClient } from '@tanstack/react-query';
 import { RouterProvider } from '@tanstack/react-router';
 import * as React from 'react';
 
@@ -24,6 +25,7 @@ export const Router = () => {
       isACLPEnabled,
       isDatabasesEnabled,
       isPlacementGroupsEnabled,
+      queryClient: new QueryClient(),
     },
   });
 

diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
@@ -1,3 +1,4 @@
+import { QueryClient } from '@tanstack/react-query';
 import { createRoute, createRouter, redirect } from '@tanstack/react-router';
 import React from 'react';
 
@@ -62,7 +63,9 @@ export const routeTree = rootRoute.addChildren([
 ]);
 
 export const router = createRouter({
-  context: {},
+  context: {
+    queryClient: new QueryClient(),
+  },
   defaultNotFoundComponent: () => <NotFound />,
   routeTree,
 });
@@ -89,7 +92,9 @@ export const migrationRouter = createRouter({
   Wrap: ({ children }) => {
     return <div data-testid="migration-router">{children}</div>;
   },
-  context: {},
+  context: {
+    queryClient: new QueryClient(),
+  },
   defaultNotFoundComponent: () => <NotFound />,
   routeTree: migrationRouteTree,
 });
diff --git a/packages/manager/src/routes/types.ts b/packages/manager/src/routes/types.ts
@@ -1,4 +1,5 @@
 import type { AccountSettings } from '@linode/api-v4';
+import type { QueryClient } from '@tanstack/react-query';
 
 export type RouterContext = {
   accountSettings?: AccountSettings;
@@ -8,6 +9,7 @@ export type RouterContext = {
   isACLPEnabled?: boolean;
   isDatabasesEnabled?: boolean;
   isPlacementGroupsEnabled?: boolean;
+  queryClient: QueryClient;
 };
 
 export interface TableSearchParams {

diff --git a/packages/manager/src/routes/volumes/index.ts b/packages/manager/src/routes/volumes/index.ts
@@ -1,5 +1,7 @@
 import { createRoute, redirect } from '@tanstack/react-router';
 
+import { volumeQueries } from 'src/queries/volumes/volumes';
+
 import { rootRoute } from '../root';
 import { VolumesRoot } from './VolumesRoot';
 
@@ -46,14 +48,36 @@ const volumesCreateRoute = createRoute({
 );
 
 const volumeActionRoute = createRoute({
-  beforeLoad: ({ params }) => {
+  beforeLoad: async ({ context, params, search }) => {
     if (!(params.action in volumeAction)) {
       throw redirect({
         search: () => ({}),
         to: '/volumes',
       });
     }
+
+    const volumes = await context.queryClient.fetchQuery(
+      volumeQueries.lists._ctx.paginated(
+        {
+          page: 1,
+          page_size: 25,
+        },
+        {
+          '+order': search?.order ?? 'asc',
+          '+order_by': search?.orderBy ?? 'label',
+        }
+      )
+    );
+
+    // if the volume is not found, redirect to the volumes landing page
+    if (!volumes.data.find((v) => v.id === params.volumeId)) {
+      throw redirect({
+        search: () => ({}),
+        to: '/volumes',
+      });
+    }
   },
+
   getParentRoute: () => volumesRoute,
   parseParams: ({
     action,
@@ -66,6 +90,7 @@ const volumeActionRoute = createRoute({
     volumeId: Number(volumeId),
   }),
   path: '$volumeId/$action',
+  validateSearch: (search: VolumesSearchParams) => search,
 }).lazy(() =>
   import('src/routes/volumes/volumesLazyRoutes').then(
     (m) => m.volumesLandingLazyRoute