fix: impact area of url params reader

Signed-off-by: Neha Gupta <[email protected]>

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>