improve useQueryString hook

smartcontractkit · Aug 9, 2023 · f7eb792 · f7eb792
1 parent d896655
commit f7eb792
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/src/features/feeds/components/FeedList.tsx b/src/features/feeds/components/FeedList.tsx
@@ -30,9 +30,6 @@ export const FeedList = ({
   function handleNetworkSelect(chain: Chain) {
     setSelectedChain(chain.page)
   }
-  useEffect(() => {
-    setSelectedChain("ethereum")
-  }, [])
 
   useEffect(() => {
     updateTableOfContents()

diff --git a/src/features/vrf/v2/components/CostTable.tsx b/src/features/vrf/v2/components/CostTable.tsx
@@ -180,15 +180,12 @@ export const CostTable = ({ method }: Props) => {
   }
 
   useEffect(() => {
-    if (typeof network === "string" && network !== "") {
-      setNetworkName(network.split("-")[1])
-      const { chain, chainNetwork } = getNetworkFromQueryString(network)
-      setMainChain(chain)
-      setChain(chainNetwork)
-    }
-    if (!mainChain || !chain) {
-      return
-    }
+    if (typeof network !== "string" || network === "") return
+
+    setNetworkName(network.split("-")[1])
+    const { chain, chainNetwork } = getNetworkFromQueryString(network)
+    setMainChain(chain)
+    setChain(chainNetwork)
 
     dispatch({ type: "SET_LOADING", payload: true })
     const fillInputs = async () => {

diff --git a/src/features/vrf/v2/components/Dropdown.tsx b/src/features/vrf/v2/components/Dropdown.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "preact/hooks"
 import "./dropdown.css"
 import { RefObject } from "preact"
-import { CHAINS, Chain, ChainNetwork } from "~/features/data/chains"
+import { Chain, ChainNetwork } from "~/features/data/chains"
 import useQueryString from "~/hooks/useQueryString"
 
 interface Props {

diff --git a/src/hooks/useQueryString.ts b/src/hooks/useQueryString.ts
@@ -1,45 +1,61 @@
 import { useState, useCallback, useEffect } from "preact/hooks"
+type SearchParamValue = string | string[]
 
-const setQueryStringWithoutPageReload = (qsValue) => {
+export const setQueryStringValue = (searchParamKey: string, value: SearchParamValue): SearchParamValue | undefined => {
   if (typeof window === "undefined") return
 
-  const newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + qsValue
+  const currentSearchParams = new URLSearchParams(window.location.search)
+  if (typeof value !== "string") {
+    currentSearchParams.delete(searchParamKey)
+    value.forEach((val) => {
+      currentSearchParams.append(searchParamKey, val)
+    })
+  } else {
+    currentSearchParams.set(searchParamKey, value)
+  }
+  const newurl =
+    window.location.protocol +
+    "//" +
+    window.location.host +
+    window.location.pathname +
+    `?${currentSearchParams.toString()}`
 
   window.history.replaceState({ path: newurl }, "", newurl)
-}
-const setQueryStringValue = (searchParamKey, value) => {
-  if (typeof window === "undefined") return
-
-  const currentSearchParams = new URLSearchParams(window.location.search)
-  currentSearchParams.set(searchParamKey, value)
 
-  setQueryStringWithoutPageReload(`?${currentSearchParams.toString()}`)
+  return getQueryStringValue(searchParamKey)
 }
-const getQueryStringValue = (searchParamKey) => {
-  if (typeof window === "undefined") return
-  return new URLSearchParams(window.location.search).get(searchParamKey)
+export const getQueryStringValue = (searchParamKey: string): SearchParamValue | undefined => {
+  if (typeof window === "undefined") return undefined
+  const values = new URLSearchParams(window.location.search).getAll(searchParamKey)
+  return values.length > 1 ? values : values[0]
 }
 
-type SearchParamValue = string | string[]
-
 function useQueryString(
   searchParamKey: string,
   initialValue?: SearchParamValue
-): [SearchParamValue, (newValue: SearchParamValue) => void] {
-  const [value, setValue] = useState(getQueryStringValue(searchParamKey) || initialValue)
+): [SearchParamValue | undefined, (newValue: SearchParamValue) => void] {
+  const [value, setValue] = useState<SearchParamValue | undefined>(getQueryStringValue(searchParamKey) || initialValue)
+  // Keep URL in sync when memory is updated using initial value.
+  useEffect(() => {
+    if (initialValue && !getQueryStringValue(searchParamKey)) {
+      setQueryStringValue(searchParamKey, initialValue)
+    }
+  }, [])
+
   const onSetValue = useCallback(
-    (newValue: string | string[]) => {
+    (newValue: SearchParamValue) => {
       setValue(newValue)
       setQueryStringValue(searchParamKey, newValue)
     },
     [searchParamKey]
   )
-
+  // Keep memory in sync when search params are updated.
   useEffect(() => {
     const body = document.querySelector("body")
+    if (!body) return
     const observer = new MutationObserver(() => {
       const newQueryStringValue = getQueryStringValue(searchParamKey)
-      if (newQueryStringValue !== value) {
+      if (newQueryStringValue !== value && newQueryStringValue) {
         setValue(newQueryStringValue)
       }
     })