fix: impact area of url params reader

Signed-off-by: Neha Gupta <gneha21@yahoo.in>

Author: nehagup

README.md

@@ -46,7 +46,7 @@ npm i
 ```
 For development, we'll add the API URL as local keploy server url running at http://localhost:6789
 ```shell
-export GATSBY_API_URL=http://localhost:6879/api
+export GATSBY_API_URL=http://localhost:6789/api
 ```
 
 Now let's start the Gatsby Server 

src/components/testlist/tcs-detail.tsx

@@ -45,7 +45,6 @@ export default function TcsDetail(props: TcsDetailProps) {
   }
 
   const data = tc.testCase[0]
-
   const handleChange = (_: React.SyntheticEvent, newValue: number) => {
     setValue(newValue)
   }

src/components/testlist/test-list.tsx

@@ -14,7 +14,7 @@ import ErrorView from "../global/error"
 import { a11yProps, CustomTab, TabPanelBox } from "../global/tab-panel"
 import { Link,navigate } from "gatsby";
 
-import { useQueryParamString } from 'react-use-query-param-string';
+import { getQueryParams } from "react-use-query-param-string";
 // import {NumberParam, StringParam, useQueryParam} from "use-query-params"
 import { POLLING_INTERVAL } from "../../constants";
 
@@ -36,8 +36,9 @@ const useStyles = makeStyles(() => ({
 
 export default function TestList() {
   const classes = useStyles()
-  const [index=0]= useQueryParamString("index", '')
-  const [tcId=""]=useQueryParamString("tcId",'')
+  const params = getQueryParams()
+  const index= params["index"]?params["index"].toString(): '0'
+  const tcId=params["tcId"]?params["tcId"].toString(): ''
   const [value, setValue] = React.useState<number>(Number(index)? Number(index) : 0)
   const [tc, setTc] = React.useState(tcId)
 

src/components/testrun/test-tab.tsx

@@ -26,7 +26,7 @@ export interface TestTabProps {
   editMode: boolean
   tdId:string | null | undefined
   testRunID:string
-  index:string | null
+  index: number | null
   data: TestRunData
 }
 
@@ -162,6 +162,7 @@ export default function TestTab(props: TestTabProps) {
                 event.defaultMuiPrevented = true
                 let t = props.tests.filter((item) => item.id == params.id)
                 setTcData(t[0])
+                console.log("?id="+testRunID+"&index="+index+"&tdId="+t[0].id)
                 navigate("?id="+testRunID+"&index="+index+"&tdId="+t[0].id)
               }}
               components={{ Toolbar: CustomToolbar }} />
@@ -177,6 +178,7 @@ export default function TestTab(props: TestTabProps) {
               checkboxSelection={true}
               isRowSelectable={(params: GridRowParams) => params.row["status"] == TestStatus.FAILED}
               onRowClick={(params: GridRowParams, event: MuiEvent<React.MouseEvent>) => {
+                console.log(tdId)
                 event.defaultMuiPrevented = true
                 let t = props.tests.filter((item) => item.id == params.id)
                 setTcData(t[0])

src/pages/testlist/tc.tsx

@@ -1,6 +1,5 @@
 import { CLIENT } from "../../constants"
-// import { StringParam, useQueryParam } from "use-query-params"
-import { useQueryParamString } from 'react-use-query-param-string';
+import { getQueryParams } from 'react-use-query-param-string';
 import { navigate } from "gatsby"
 import { ApolloProvider } from "@apollo/client"
 import { ThemeProvider } from "@mui/material/styles"
@@ -15,7 +14,8 @@ export default function TestCase() {
     return null
   }
 
-  const [id] = useQueryParamString("id", '')
+  const params = getQueryParams()
+  const id = params["id"]? params["id"].toString(): ""
   if (id == null) {
     typeof window !== `undefined` && navigate("/testlist")
   }

src/pages/testruns/detail.tsx

@@ -4,8 +4,7 @@ import Layout from "../../components/global/layout"
 import SEO from "../../components/global/seo"
 import { navigate } from "gatsby"
 import React from "react"
-import { useQueryParamString } from 'react-use-query-param-string';
-// import { StringParam,NumberParam, useQueryParam } from "use-query-params"
+import { getQueryParams } from "react-use-query-param-string";
 import TestRunDetail from "../../components/testrun/testrun-detail"
 import { ThemeProvider } from "@mui/material/styles"
 import { theme } from "../../services/services"
@@ -15,9 +14,10 @@ export default function Detail() {
     return null
   }
 
-  const [id] = useQueryParamString("id", '')
-  const [index='0'] = useQueryParamString("index",'0' )
-  const [tdId=""]=useQueryParamString("tdId",'')
+  const params = getQueryParams();
+  const id = params['id']? params['id'].toString(): ""
+  const index = params['index']? params['index']: '0'
+  const tdId=  params['tdId']? params['tdId'].toString(): ""
 
   if (id == null) {
     typeof window !== `undefined` && navigate("/testruns")
@@ -27,7 +27,7 @@ export default function Detail() {
       <ThemeProvider theme={theme}>
         <Layout>
           <SEO title="Testrun Details" />
-          <TestRunDetail testRunID={id!} index={index.toString()} tdId={tdId} />
+          <TestRunDetail testRunID={id!} index={Number(index)} tdId={tdId} />
         </Layout>
       </ThemeProvider>
     </ApolloProvider>