chore: Refactor Custom Route Component 'InsightsRoute' Before Upgradi…

…ng to React Router v6 (#378) * (feat): Refactor InsightsRoute Followed this guide: https://reactrouter.com/en/main/upgrading/v5#refactor-custom-routes * (chore): Convert Redirect to Route inside Switch https://reactrouter.com/en/main/upgrading/v5#remove-redirects-inside-switch * (chore): Add lint fixes
RedHatInsights · Feb 12, 2024 · a6764c9 · a6764c9
1 parent 175f8ae
commit a6764c9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -1,7 +1,7 @@
 import { getBaseName, getInsights } from '@redhat-cloud-services/insights-common-typescript';
 import * as React from 'react';
 import { useEffect } from 'react';
-import { matchPath, Redirect, Route, RouteProps, Switch, useHistory } from 'react-router';
+import { matchPath, Redirect, Route, Switch, useHistory } from 'react-router';
 
 import { ErrorPage } from './pages/Error/Page';
 import ListPage from './pages/ListPage/ListPage';
@@ -28,12 +28,14 @@ const pathRoutes: Path[] = [
     }
 ];
 
-type InsightsRouteProps = RouteProps;
+type InsightsElementProps = {
+    component: React.ComponentType;
+};
 
-const InsightsRoute: React.FunctionComponent<InsightsRouteProps> = (props: InsightsRouteProps) => {
+const InsightsElement: React.FunctionComponent<InsightsElementProps> = ({ component: PathRouteComponent }) => {
     return (
         <ErrorPage>
-            <Route { ...props } />
+            <PathRouteComponent />
         </ErrorPage>
     );
 };
@@ -78,14 +80,14 @@ export const Routes: React.FunctionComponent<unknown> = () => {
 
     return (
         <Switch>
-            { pathRoutes.map(pathRoute => (
-                <InsightsRoute
-                    key={ pathRoute.path }
-                    component={ pathRoute.component }
-                    path={ pathRoute.path }
+            { pathRoutes.map(({ path, component }) => (
+                <Route
+                    key={ path }
+                    render={ () => <InsightsElement component={ component } /> }
+                    path={ path }
                 />
             ))}
-            <Redirect to={ linkTo.listPage() } />
+            <Route render={ () => <Redirect to={ linkTo.listPage() } /> } />
         </Switch>
     );
 };
diff --git a/src/__tests__/Routes.test.tsx b/src/__tests__/Routes.test.tsx
@@ -18,15 +18,14 @@ const getWrapper = (path: string) => {
     const Wrapper: React.FunctionComponent = (props) => {
         return (
             <MemoryRouter initialEntries={ [ path ] }>
-                <Route
-                    path="*"
-                    render={ ({ location }) => {
+                <Route path="*">
+                    {({ location }) => {
                         data.location = location;
                         return null;
-                    } }
-                />
+                    }}
+                </Route>
                 {/* eslint-disable-next-line testing-library/no-node-access */}
-                <div id="root">{ props.children }</div>
+                <div id="root">{props.children}</div>
             </MemoryRouter>
         );
     };
@@ -38,7 +37,6 @@ const getWrapper = (path: string) => {
 };
 
 describe('src/Routes', () => {
-
     it('Should render the ListPage on /', async () => {
         jest.useFakeTimers();
         const { Wrapper, data } = getWrapper('/');