fix: useURLQueryState parse the first key in search uri with question mark (#205)

* fix: `useURLQueryState` parse the first key in search uri with question mark

* tweak: use URLSearchParams instead of qs

Author: shhdgit

packages/uikit/package.json

@@ -66,7 +66,6 @@
     "google-libphonenumber": "^3.2.30",
     "lodash-es": "^4.17.21",
     "mantine-react-table": "0.9.5",
-    "qs": "^6.11.2",
     "rc-tree": "^5.8.2",
     "react-hook-form": "6.15.8",
     "react-phone-input-2": "^2.15.1",
@@ -84,7 +83,6 @@
     "@types/dompurify": "^2.3.4",
     "@types/google-libphonenumber": "^7.4.23",
     "@types/lodash-es": "^4.17.8",
-    "@types/qs": "^6.9.11",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/react-table": "^7.7.12",

packages/uikit/src/hooks/useURLQueryState.ts

@@ -1,4 +1,3 @@
-import qs from 'qs'
 import { useState } from 'react'
 
 type TQueryState = { [key: string]: any }
@@ -7,17 +6,20 @@ export function useURLQueryState(
   key: string,
   defaultValue?: TQueryState
 ): [TQueryState | undefined, (value: TQueryState) => void] {
-  const parsed = qs.parse(window.location.search)
+  const parsed = parse(window.location.search)
   const initialValue = parsed[key] ? JSON.parse(parsed[key] as string) : defaultValue
   const [formState, setFormState] = useState(initialValue)
   const value = formState
   const setValue = (partialValue: Partial<TQueryState>) => {
     const newFormState = { ...value, ...partialValue }
     setFormState(newFormState)
-    const curSearch = qs.parse(window.location.search)
+    const curSearch = parse(window.location.search)
     curSearch[key] = JSON.stringify(newFormState)
-    window.history.replaceState({}, document.title, `?${qs.stringify(curSearch).substring(3)}`)
+    const searchParams = new URLSearchParams(curSearch)
+    window.history.replaceState({}, document.title, `?${searchParams.toString()}`)
   }
 
   return [value, setValue]
 }
+
+const parse = (search: string) => Object.fromEntries(new URLSearchParams(search).entries())