From 8fb8f49c2126ab524e5e8cea2c380b52cde20004 Mon Sep 17 00:00:00 2001
From: Matthias Van Parijs <matvp91@gmail.com>
Date: Mon, 14 Oct 2024 16:34:56 +0200
Subject: [PATCH] Added route for stitcher API

---
 packages/dashboard/src/App.tsx           |  2 +-
 packages/dashboard/src/pages/ApiPage.tsx | 28 +++++++++---------------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/packages/dashboard/src/App.tsx b/packages/dashboard/src/App.tsx
index 0fff1f40..854491c0 100644
--- a/packages/dashboard/src/App.tsx
+++ b/packages/dashboard/src/App.tsx
@@ -32,7 +32,7 @@ const router = createBrowserRouter([
         element: <JobPage />,
       },
       {
-        path: "/api",
+        path: "/api/:service?",
         element: <ApiPage />,
       },
       {
diff --git a/packages/dashboard/src/pages/ApiPage.tsx b/packages/dashboard/src/pages/ApiPage.tsx
index 4a9589a3..8cadc6a6 100644
--- a/packages/dashboard/src/pages/ApiPage.tsx
+++ b/packages/dashboard/src/pages/ApiPage.tsx
@@ -1,22 +1,16 @@
 import { SelectObject } from "@/components/SelectObject";
-import { useEffect, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 export function ApiPage() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [service, setService] = useState(
-    () => searchParams.get("service") ?? "api",
-  );
-
-  useEffect(() => {
-    setSearchParams({ service });
-  }, [service]);
+  const navigate = useNavigate();
+  const { service } = useParams() as {
+    service?: string;
+  };
 
-  const baseUrl =
-    {
-      api: window.__ENV__.PUBLIC_API_ENDPOINT,
-      stitcher: window.__ENV__.PUBLIC_STITCHER_ENDPOINT,
-    }[service] ?? "api";
+  const baseUrl = {
+    api: window.__ENV__.PUBLIC_API_ENDPOINT,
+    stitcher: window.__ENV__.PUBLIC_STITCHER_ENDPOINT,
+  }[service ?? "api"];
 
   return (
     <>
@@ -36,9 +30,7 @@ export function ApiPage() {
             ]}
             value={service}
             onChange={(value) => {
-              if (value) {
-                setService(value);
-              }
+              navigate(value === "api" ? "/api" : `/api/${value}`);
             }}
           />
         </div>