Skip to content

Commit 7f30542

Browse files
carlosthe19916carlosthe19916
committed
make the report to use hashroute
Signed-off-by: Carlos Feria <[email protected]>
1 parent 1b0b8c6 commit 7f30542

File tree

5 files changed

+84
-79
lines changed

5 files changed

+84
-79
lines changed

‎client/src/app/Routes.tsx‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { lazy, Suspense } from "react";
1+
import { lazy } from "react";
22
import { createBrowserRouter, useParams } from "react-router-dom";
33

4-
import { Bullseye, Spinner } from "@patternfly/react-core";
4+
import { LazyRouteElement } from "@app/components/LazyRouteElement";
55

6-
import { ErrorBoundary } from "react-error-boundary";
76
import App from "./App";
8-
import { ErrorFallback } from "./components/ErrorFallback";
97

108
const Home = lazy(() => import("./pages/home"));
119

@@ -57,65 +55,64 @@ export const Paths = {
5755
importers: "/importers",
5856
} as const;
5957

60-
const Lazy = ({ component }: { component: React.ReactNode }) => {
61-
return (
62-
<Suspense
63-
fallback={
64-
<Bullseye>
65-
<Spinner />
66-
</Bullseye>
67-
}
68-
>
69-
<ErrorBoundary FallbackComponent={ErrorFallback}>
70-
{component}
71-
</ErrorBoundary>
72-
</Suspense>
73-
);
74-
};
75-
7658
export const AppRoutes = createBrowserRouter([
7759
{
7860
path: "/",
7961
element: <App />,
8062
children: [
81-
{ path: "/", element: <Lazy component={<Home />} /> },
63+
{ path: "/", element: <LazyRouteElement component={<Home />} /> },
8264
{
8365
path: Paths.advisories,
84-
element: <Lazy component={<AdvisoryList />} />,
66+
element: <LazyRouteElement component={<AdvisoryList />} />,
8567
},
8668
{
8769
path: Paths.advisoryUpload,
88-
element: <Lazy component={<AdvisoryUpload />} />,
70+
element: <LazyRouteElement component={<AdvisoryUpload />} />,
8971
},
9072
{
9173
path: Paths.advisoryDetails,
92-
element: <Lazy component={<AdvisoryDetails />} />,
74+
element: <LazyRouteElement component={<AdvisoryDetails />} />,
9375
},
9476
{
9577
path: Paths.vulnerabilities,
96-
element: <Lazy component={<VulnerabilityList />} />,
78+
element: <LazyRouteElement component={<VulnerabilityList />} />,
9779
},
9880
{
9981
path: Paths.vulnerabilityDetails,
100-
element: <Lazy component={<VulnerabilityDetails />} />,
82+
element: <LazyRouteElement component={<VulnerabilityDetails />} />,
83+
},
84+
{
85+
path: Paths.packages,
86+
element: <LazyRouteElement component={<PackageList />} />,
10187
},
102-
{ path: Paths.packages, element: <Lazy component={<PackageList />} /> },
10388
{
10489
path: Paths.packageDetails,
105-
element: <Lazy component={<PackageDetails />} />,
90+
element: <LazyRouteElement component={<PackageDetails />} />,
91+
},
92+
{
93+
path: Paths.sboms,
94+
element: <LazyRouteElement component={<SBOMList />} />,
95+
},
96+
{
97+
path: Paths.sbomUpload,
98+
element: <LazyRouteElement component={<SBOMUpload />} />,
99+
},
100+
{
101+
path: Paths.sbomScan,
102+
element: <LazyRouteElement component={<SBOMScan />} />,
106103
},
107-
{ path: Paths.sboms, element: <Lazy component={<SBOMList />} /> },
108-
{ path: Paths.sbomUpload, element: <Lazy component={<SBOMUpload />} /> },
109-
{ path: Paths.sbomScan, element: <Lazy component={<SBOMScan />} /> },
110104
{
111105
path: Paths.sbomDetails,
112-
element: <Lazy component={<SBOMDetails />} />,
106+
element: <LazyRouteElement component={<SBOMDetails />} />,
113107
},
114108
{
115109
path: Paths.importers,
116-
element: <Lazy component={<ImporterList />} />,
110+
element: <LazyRouteElement component={<ImporterList />} />,
111+
},
112+
{
113+
path: Paths.search,
114+
element: <LazyRouteElement component={<Search />} />,
117115
},
118-
{ path: Paths.search, element: <Lazy component={<Search />} /> },
119116
],
120117
},
121118
]);

‎client/src/app/components/LazyRouteElement.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type React from "react";
2+
import { Suspense } from "react";
3+
4+
import { ErrorBoundary } from "react-error-boundary";
5+
6+
import { Bullseye, Spinner } from "@patternfly/react-core";
7+
import { ErrorFallback } from "./ErrorFallback";
8+
9+
export const LazyRouteElement = ({
10+
component,
11+
}: {
12+
component: React.ReactNode;
13+
}) => {
14+
return (
15+
<Suspense
16+
fallback={
17+
<Bullseye>
18+
<Spinner />
19+
</Bullseye>
20+
}
21+
>
22+
<ErrorBoundary FallbackComponent={ErrorFallback}>
23+
{component}
24+
</ErrorBoundary>
25+
</Suspense>
26+
);
27+
};

‎client/src/static-report/App.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
import type React from "react";
2-
import { HashRouter as Router } from "react-router-dom";
2+
import { Outlet } from "react-router-dom";
33

4-
import { AppRoutes } from "./Routes";
54
import { NotificationsProvider } from "@app/components/NotificationsContext";
65
import { DefaultLayout } from "@static-report/layout";
76

8-
import "@patternfly/patternfly/patternfly.css";
97
import "@patternfly/patternfly/patternfly-addons.css";
8+
import "@patternfly/patternfly/patternfly.css";
109

1110
const App: React.FC = () => {
1211
return (
13-
<Router>
14-
<NotificationsProvider>
15-
<DefaultLayout>
16-
<AppRoutes />
17-
</DefaultLayout>
18-
</NotificationsProvider>
19-
</Router>
12+
<NotificationsProvider>
13+
<DefaultLayout>
14+
<Outlet />
15+
</DefaultLayout>
16+
</NotificationsProvider>
2017
);
2118
};
2219

‎client/src/static-report/Routes.tsx‎

Lines changed: 16 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { Suspense, lazy } from "react";
2-
import { ErrorBoundary } from "react-error-boundary";
3-
import { useParams, useRoutes } from "react-router-dom";
1+
import { lazy } from "react";
2+
import { createHashRouter } from "react-router-dom";
43

5-
import { Bullseye, Spinner } from "@patternfly/react-core";
4+
import { LazyRouteElement } from "@app/components/LazyRouteElement";
65

7-
import { ErrorFallback } from "@app/components/ErrorFallback";
6+
import App from "./App";
87

98
const Vulnerabilities = lazy(
109
() => import("@static-report/pages/vulnerabilities"),
@@ -14,31 +13,15 @@ export const Paths = {} as const;
1413

1514
export enum PathParam {}
1615

17-
export const AppRoutes = () => {
18-
const allRoutes = useRoutes([{ path: "/", element: <Vulnerabilities /> }]);
19-
20-
return (
21-
<Suspense
22-
fallback={
23-
<Bullseye>
24-
<Spinner />
25-
</Bullseye>
26-
}
27-
>
28-
<ErrorBoundary FallbackComponent={ErrorFallback} key={location.pathname}>
29-
{allRoutes}
30-
</ErrorBoundary>
31-
</Suspense>
32-
);
33-
};
34-
35-
export const useRouteParams = (pathParam: PathParam) => {
36-
const params = useParams();
37-
const value = params[pathParam];
38-
if (value === undefined) {
39-
throw new Error(
40-
`ASSERTION FAILURE: required path parameter not set: ${pathParam}`,
41-
);
42-
}
43-
return value;
44-
};
16+
export const AppRoutes = createHashRouter([
17+
{
18+
path: "/",
19+
element: <App />,
20+
children: [
21+
{
22+
path: "/",
23+
element: <LazyRouteElement component={<Vulnerabilities />} />,
24+
},
25+
],
26+
},
27+
]);

‎client/src/static-report/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from "react";
22

33
import { createRoot } from "react-dom/client";
4+
import { RouterProvider } from "react-router-dom";
45

56
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
67
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
78

8-
import App from "@static-report/App";
99
import "@app/dayjs";
10+
import { AppRoutes } from "@static-report/Routes";
1011

1112
const queryClient = new QueryClient();
1213

@@ -19,7 +20,7 @@ const renderApp = () => {
1920
return root.render(
2021
<React.StrictMode>
2122
<QueryClientProvider client={queryClient}>
22-
<App />
23+
<RouterProvider router={AppRoutes} />
2324
<ReactQueryDevtools initialIsOpen={false} />
2425
</QueryClientProvider>
2526
</React.StrictMode>,

0 commit comments

Comments
 (0)