Use React Router for search params

The existing functionality using this appears to be non-functional, but its behavior is preserved.
Azure · Sep 12, 2023 · 313b3ca · 313b3ca
1 parent 66fcc2f
commit 313b3ca
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 24 deletions.
diff --git a/portal/v2/src/App.tsx b/portal/v2/src/App.tsx
@@ -184,7 +184,7 @@ export interface IClusterDetail {
   clusterName: string
 }
 
-function App(props: { params: any }) {
+function App() {
   const [data, updateData] = useState({ location: "", csrf: "", elevated: false, username: "" })
   const [regions, setRegions] = useState<any>([])
   const [error, setError] = useState<AxiosResponse | null>(null)
@@ -325,7 +325,6 @@ function App(props: { params: any }) {
               sshBox={sshRef}
               setCurrentCluster={setCurrentCluster}
               csrfTokenAvailable={fetching}
-              params={props.params}
             />
           </Stack.Item>
           <Stack.Item grow>

diff --git a/portal/v2/src/ClusterList.tsx b/portal/v2/src/ClusterList.tsx
@@ -28,6 +28,7 @@ import { fetchClusters } from "./Request"
 import { ToolIcons } from "./ToolIcons"
 import { AxiosResponse } from "axios"
 import { ICluster, headerStyles } from "./App"
+import { useSearchParams } from "react-router-dom"
 
 const errorBarStyles: Partial<IMessageBarStyles> = { root: { marginBottom: 15 } }
 
@@ -370,13 +371,13 @@ export function ClusterList(props: {
   sshBox: MutableRefObject<any>
   setCurrentCluster: any
   csrfTokenAvailable: string
-  params: any
 }) {
   const [data, setData] = useState<any>([])
   const [error, setError] = useState<AxiosResponse | null>(null)
   const [isPopupVisible, { setTrue: showPopup, setFalse: hidePopup }] = useBoolean(false)
   const state = useRef<ClusterListComponent>(null)
   const [fetching, setFetching] = useState("")
+  const [searchParams] = useSearchParams()
 
   const errorBar = (): any => {
     return (
@@ -415,8 +416,8 @@ export function ClusterList(props: {
       fetchClusters().then(onData)
     }
 
-    if (props.params) {
-      const resourceID: string = props.params["resourceid"]
+    if (searchParams.has("resourceid")) {
+      const resourceID: string = searchParams.get("resourceid")!
       const clusterList = data as ICluster[]
       const currentCluster = clusterList.find(
         (item): item is ICluster => resourceID === item.resourceId

diff --git a/portal/v2/src/index.tsx b/portal/v2/src/index.tsx
@@ -15,28 +15,11 @@ mergeStyles({
   },
 })
 
-const searchParams = window.location.search
-
-const getURLParams = () : any => {
-  let urlParams = {}
-  const paramStringFromURL = searchParams.split('?')[1];
-  const paramsArr = paramStringFromURL.split('&');
-
-  for (let i = 0; i < paramsArr.length; i++) {
-      let pair = paramsArr[i].split('=');
-      urlParams = {[pair[0]]: pair[1]}
-  }
-
-  return urlParams
-}
-
 const router = createBrowserRouter([
   {
     path: "/",
-    element: (
-      <App params={ searchParams ? getURLParams(): undefined} />
-    )
+    element: (<App/>)
   }
 ])
 
-createRoot(document.getElementById("root")!).render(<RouterProvider router={router} />, )
+createRoot(document.getElementById("root")!).render(<RouterProvider router={router} />)