fix: replace nextjs router by react-router-dom (#61)

carlosthe19916 · carlosthe19916 · commit b6f1ccea67a8 · 2025-10-24T13:33:32.000+02:00
Signed-off-by: Carlos Feria &lt;2582866+carlosthe19916@users.noreply.github.com&gt;
diff --git a/client/package.json b/client/package.json
@@ -32,7 +32,6 @@
     "dayjs": "^1.11.7",
     "file-saver": "^2.0.5",
     "js-yaml": "^4.1.0",
-    "next": "^14.2.29",
     "oidc-client-ts": "^2.4.0",
     "pvtsutils": "^1.3.6",
     "react": "^18.2.0",
diff --git a/client/src/app/Routes.tsx b/client/src/app/Routes.tsx
@@ -8,11 +8,16 @@ import { ErrorFallback } from "./components/ErrorFallback";
 const TrustRoot = lazy(() => import("./pages/TrustRoot"));
 const RekorSearch = lazy(() => import("./pages/RekorSearch"));
 
+export const Paths = {
+  trustRoot: "/trust-root",
+  rekorSearch: "/rekor-search",
+} as const;
+
 export const AppRoutes = () => {
   const allRoutes = useRoutes([
-    { path: "/", element: <Navigate to="/trust-root" /> },
-    { path: "/trust-root", element: <TrustRoot /> },
-    { path: "/rekor-search", element: <RekorSearch /> },
+    { path: "/", element: <Navigate to={Paths.trustRoot} /> },
+    { path: Paths.trustRoot, element: <TrustRoot /> },
+    { path: Paths.rekorSearch, element: <RekorSearch /> },
   ]);
 
   return (
diff --git a/client/src/app/layout/sidebar.tsx b/client/src/app/layout/sidebar.tsx
@@ -4,6 +4,7 @@ import { NavLink } from "react-router-dom";
 import { Nav, NavList, PageSidebar, PageSidebarBody } from "@patternfly/react-core";
 import { css } from "@patternfly/react-styles";
 import nav from "@patternfly/react-styles/css/components/Nav/nav";
+import { Paths } from "@app/Routes";
 
 const LINK_CLASS = nav.navLink;
 const ACTIVE_LINK_CLASS = nav.modifiers.current;
@@ -15,7 +16,7 @@ export const SidebarApp: React.FC = () => {
         <NavList>
           <li className={nav.navItem}>
             <NavLink
-              to="/trust-root"
+              to={Paths.trustRoot}
               className={({ isActive }) => {
                 return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
               }}
@@ -25,7 +26,7 @@ export const SidebarApp: React.FC = () => {
           </li>
           <li className={nav.navItem}>
             <NavLink
-              to="/rekor-search"
+              to={Paths.rekorSearch}
               className={({ isActive }) => {
                 return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
               }}
diff --git a/client/src/app/pages/RekorSearch/Template/Intoto001.tsx b/client/src/app/pages/RekorSearch/Template/Intoto001.tsx
@@ -1,10 +1,11 @@
 import { dump } from "js-yaml";
-import NextLink from "next/link";
+import { Link } from "react-router-dom";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { type IntotoV001Schema } from "rekor";
 import { decodex509 } from "./x509/decode";
 import { Panel } from "@patternfly/react-core";
+import { Paths } from "@app/Routes";
 
 export function IntotoViewer001({ intoto }: { intoto: IntotoV001Schema }) {
   const certContent = window.atob(intoto.publicKey || "");
@@ -24,12 +25,14 @@ export function IntotoViewer001({ intoto }: { intoto: IntotoV001Schema }) {
   return (
     <Panel>
       <h5 style={{ paddingTop: "1.5em", paddingBottom: "1.5em" }}>
-        <NextLink
-          href={`/?hash=${intoto.content.payloadHash?.algorithm}:${intoto.content.payloadHash?.value}`}
-          passHref
+        <Link
+          to={{
+            pathname: Paths.rekorSearch,
+            search: `?hash=${intoto.content.payloadHash?.algorithm}:${intoto.content.payloadHash?.value}`,
+          }}
         >
           Hash
-        </NextLink>
+        </Link>
       </h5>
 
       <SyntaxHighlighter language="text" style={atomDark}>
diff --git a/client/src/app/pages/RekorSearch/Template/Intoto002.tsx b/client/src/app/pages/RekorSearch/Template/Intoto002.tsx
@@ -1,10 +1,11 @@
 import { dump } from "js-yaml";
-import Link from "next/link";
+import { Link } from "react-router-dom";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { type IntotoV002Schema } from "rekor";
 import { decodex509 } from "./x509/decode";
 import { Panel } from "@patternfly/react-core";
+import { Paths } from "@app/Routes";
 
 export function IntotoViewer002({ intoto }: { intoto: IntotoV002Schema }) {
   const signature = intoto.content.envelope?.signatures[0];
@@ -25,7 +26,14 @@ export function IntotoViewer002({ intoto }: { intoto: IntotoV002Schema }) {
   return (
     <Panel>
       <h5 style={{ paddingTop: "1.5em", paddingBottom: "1.5em" }}>
-        <Link href={`/?hash=${intoto.content.payloadHash?.algorithm}:${intoto.content.payloadHash?.value}`}>Hash</Link>
+        <Link
+          to={{
+            pathname: Paths.rekorSearch,
+            search: `?hash=${intoto.content.payloadHash?.algorithm}:${intoto.content.payloadHash?.value}`,
+          }}
+        >
+          Hash
+        </Link>
       </h5>
 
       <SyntaxHighlighter language="text" style={atomDark}>
diff --git a/client/src/app/pages/RekorSearch/components/DSSEViewer.tsx b/client/src/app/pages/RekorSearch/components/DSSEViewer.tsx
@@ -1,10 +1,11 @@
 import { dump } from "js-yaml";
-import Link from "next/link";
+import { Link } from "react-router-dom";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { type DSSEV001Schema } from "rekor";
 import { Panel } from "@patternfly/react-core";
 import { decodex509 } from "../Template/x509/decode";
+import { Paths } from "@app/Routes";
 
 export function DSSEViewer({ dsse }: { dsse: DSSEV001Schema }) {
   const sig = dsse.signatures?.[0];
@@ -25,7 +26,12 @@ export function DSSEViewer({ dsse }: { dsse: DSSEV001Schema }) {
   return (
     <Panel>
       <h5 style={{ paddingTop: "1em" }}>
-        <Link href={`/?hash=${dsse.payloadHash?.algorithm}:${dsse.payloadHash?.value}`} passHref>
+        <Link
+          to={{
+            pathname: Paths.rekorSearch,
+            search: `?hash=${dsse.payloadHash?.algorithm}:${dsse.payloadHash?.value}`,
+          }}
+        >
           Hash
         </Link>
       </h5>
diff --git a/client/src/app/pages/RekorSearch/components/Entry.tsx b/client/src/app/pages/RekorSearch/components/Entry.tsx
@@ -1,5 +1,4 @@
 import { dump, load } from "js-yaml";
-import Link from "next/link";
 import { Convert } from "pvtsutils";
 import { Fragment, type ReactNode, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -30,6 +29,8 @@ import { IntotoViewer001 } from "../Template/Intoto001";
 import { IntotoViewer002 } from "../Template/Intoto002";
 import { DSSEViewer } from "./DSSEViewer";
 import { HashedRekordViewer } from "./HashedRekord";
+import { Link } from "react-router-dom";
+import { Paths } from "@app/Routes";
 
 const DUMP_OPTIONS: jsyaml.DumpOptions = {
   replacer: (_key, value: string) => {
@@ -154,10 +155,7 @@ export function Entry({ entry }: { entry: LogEntry }) {
             textOverflow: "ellipsis",
           }}
         >
-          Entry UUID:{" "}
-          <Link href={`/?uuid=${uuid}`} passHref>
-            {uuid}
-          </Link>
+          Entry UUID: <Link to={{ pathname: Paths.rekorSearch, search: `?uuid=${uuid}` }}>{uuid}</Link>
         </h2>
         <Divider />
         <Grid hasGutter={true}>
@@ -168,9 +166,7 @@ export function Entry({ entry }: { entry: LogEntry }) {
             <EntryCard
               title="Log Index"
               content={
-                <Link href={`/?logIndex=${obj.logIndex}`} passHref>
-                  {obj.logIndex}
-                </Link>
+                <Link to={{ pathname: Paths.rekorSearch, search: `?logIndex=${obj.logIndex}` }}>{obj.logIndex}</Link>
               }
             />
           </GridItem>
diff --git a/client/src/app/pages/RekorSearch/components/Explorer.tsx b/client/src/app/pages/RekorSearch/components/Explorer.tsx
@@ -1,6 +1,7 @@
-import { Fragment, useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Fragment, useCallback, useEffect, useState } from "react";
 import { ApiError, type RekorError } from "rekor";
-import { type RekorEntries, type SearchQuery, useRekorSearch } from "../../../api/rekor-api";
+import { isAttribute, type RekorEntries, type SearchQuery, useRekorSearch } from "../../../api/rekor-api";
 import { type FormInputs, SearchForm } from "./SearchForm";
 import { Alert, Flex, Spinner, Pagination } from "@patternfly/react-core";
 import { Entry } from "./Entry";
@@ -94,7 +95,9 @@ function LoadingIndicator() {
 }
 
 export function Explorer() {
-  const [formInputs, _setFormInputs] = useState<FormInputs>();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [formInputs, setFormInputs] = useState<FormInputs>();
   const [query, setQuery] = useState<SearchQuery>();
   const search = useRekorSearch();
 
@@ -121,35 +124,28 @@ export function Explorer() {
     fetch();
   }, [query, page, search]);
 
-  //   const setQueryParams = useCallback(
-  //     (formInputs: FormInputs) => {
-  //       setPage(1);
-
-  //       router.push(
-  //         {
-  //           pathname: router.pathname,
-  //           query: {
-  //             [formInputs.attribute]: formInputs.value,
-  //           },
-  //         },
-  //         `/?${formInputs.attribute}=${formInputs.value}`,
-  //         { shallow: true }
-  //       );
-  //     },
-  //     [router]
-  //   );
-
-  //   useEffect(() => {
-  //     const attribute = Object.keys(router.query).find((key) => isAttribute(key)) as Attribute | undefined;
-  //     const value = attribute && router.query[attribute];
-
-  //     if (!value || Array.isArray(value)) {
-  //       return;
-  //     }
-  //     setFormInputs({ attribute, value });
-  //   }, [router.query]);
-
-  const setQueryParams = () => {};
+  const setQueryParams = useCallback(
+    (formInputs: FormInputs) => {
+      setPage(1);
+
+      navigate({
+        pathname: location.pathname,
+        search: `?${formInputs.attribute}=${formInputs.value}`,
+      });
+    },
+    [navigate, location.pathname]
+  );
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const attribute = Array.from(searchParams.keys()).find((key) => isAttribute(key));
+    const value = attribute && searchParams.get(attribute);
+
+    if (!value || Array.isArray(value)) {
+      return;
+    }
+    setFormInputs({ attribute, value });
+  }, [location.search]);
 
   useEffect(() => {
     if (formInputs) {
diff --git a/client/src/app/pages/RekorSearch/components/HashedRekord.tsx b/client/src/app/pages/RekorSearch/components/HashedRekord.tsx
@@ -1,10 +1,11 @@
 import { dump } from "js-yaml";
-import Link from "next/link";
+import { Link } from "react-router-dom";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { type RekorSchema } from "rekor";
 import { decodex509 } from "../Template/x509/decode";
 import { Panel } from "@patternfly/react-core";
+import { Paths } from "@app/Routes";
 
 export function HashedRekordViewer({ hashedRekord }: { hashedRekord: RekorSchema }) {
   const certContent = window.atob(hashedRekord.signature.publicKey?.content ?? "");
@@ -24,7 +25,12 @@ export function HashedRekordViewer({ hashedRekord }: { hashedRekord: RekorSchema
   return (
     <Panel style={{ marginTop: "1.25em" }}>
       <h5 style={{ margin: "1em auto" }}>
-        <Link href={`/?hash=${hashedRekord.data.hash?.algorithm}:${hashedRekord.data.hash?.value}`} passHref>
+        <Link
+          to={{
+            pathname: Paths.rekorSearch,
+            search: `?hash=${hashedRekord.data.hash?.algorithm}:${hashedRekord.data.hash?.value}`,
+          }}
+        >
           Hash
         </Link>
       </h5>
diff --git a/package-lock.json b/package-lock.json
