fixing search error by replacing 'use-query-params' with 'react-use-query-param-string'

Author: sergey-orangit

package.json

@@ -60,6 +60,7 @@
     "react-i18next": "11.12.0",
     "react-instantsearch-dom": "6.40.4",
     "react-player": "2.9.0",
+    "react-use-query-param-string": "^2.1.5",
     "striptags": "3.2.0",
     "use-query-params": "1.2.3",
     "uuid": "8.3.2"

src/components/search/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { useQueryParam, encodeJson, decodeJson } from 'use-query-params';
+import { encodeJson } from 'use-query-params';
+import { useQueryParamString } from 'react-use-query-param-string';
 import clsx from 'clsx';
 import { InstantSearch, Index, Configure } from 'react-instantsearch-dom';
 import { client } from '../../utils/algolia';
@@ -17,26 +18,19 @@ const environment = process.env.GATSBY_ALGOLIA_ENVIRONMENT;
 
 const DEBOUNCE_TIME = 400;
 
-const NullJsonParam = {
-  encode: (obj: any | null | undefined) => {
-    if (!obj) return undefined;
-    return encodeJson(obj);
-  },
-  decode: (str: string | (string | null)[] | null | undefined) => {
-    if (!str) return undefined;
-    return decodeJson(str);
-  },
-};
-
 const Search = (): React.ReactElement | null => {
   const { state, dispatch } = useSearchContext();
   const [debouncedSetState, setDebouncedSetState] = useState<any | null>(null);
-
-  const [searchStateQS, setSearchStateQS] = useQueryParam('search', NullJsonParam);
+  const [searchText, setSearchText, initialized] = useQueryParamString('search', '');
   const locale = currentLocale();
   const { t } = useTranslation();
   const searchScrollPosition = 'searchscrollposition';
 
+  const encodeSearchState = (obj: any | null | undefined) => {
+    if (!obj) return undefined;
+    return encodeJson(obj);
+  }
+
   useEffect(() => {
     const scrollpos = sessionStorage.getItem(searchScrollPosition);
     if (scrollpos) {
@@ -51,7 +45,8 @@ const Search = (): React.ReactElement | null => {
     setDebouncedSetState(
       setTimeout(() => {
         sessionStorage.setItem(searchScrollPosition, window.scrollY.toString());
-        setSearchStateQS(updatedSearchState, 'replaceIn');
+        const nextSearchText = encodeSearchState(state.searchState) as string;
+        setSearchText(nextSearchText);
       }, DEBOUNCE_TIME),
     );
     dispatch({ type: 'set-search-state', payload: updatedSearchState });
@@ -64,12 +59,13 @@ const Search = (): React.ReactElement | null => {
   };
 
   useEffect(() => {
-    setSearchStateQS(state.searchActive ? state.searchState : null, 'replaceIn');
+    const nextSearchText = state.searchActive ? encodeSearchState(state.searchState) as string : '';
+    setSearchText(nextSearchText);
   }, [state.searchActive]);
 
   useEffect(() => {
-    if (searchStateQS) {
-      dispatch({ type: 'set-search-state', payload: searchStateQS });
+    if (searchText && initialized) {
+      dispatch({ type: 'set-search-state', payload: { query: searchText } });
       dispatch({ type: 'set-search-active', payload: true });
     }
     document.addEventListener('keydown', handleEsc);

yarn.lock

@@ -5003,7 +5003,7 @@ decamelize@^1.2.0:
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
-decode-uri-component@^0.2.0:
+decode-uri-component@^0.2.0, decode-uri-component@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz"
   integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
@@ -10929,6 +10929,16 @@ query-string@^6.14.1:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
+query-string@^7.1.1:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
+  integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==
+  dependencies:
+    decode-uri-component "^0.2.2"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
@@ -11142,6 +11152,19 @@ react-side-effect@^2.1.0:
   resolved "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz"
   integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
 
+react-sub-unsub@^2.1.6:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/react-sub-unsub/-/react-sub-unsub-2.2.7.tgz#d755ea40ab61ff64bc8c73a9013efa910472629d"
+  integrity sha512-b2o0mIW8G4Yb3aaKxFB9iiCCHxCDGmogy+493oQpEJHjBy/hl6uf+6RhAinqKWRwi1fvO6mGIMVGsf2XYLL38g==
+
+react-use-query-param-string@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/react-use-query-param-string/-/react-use-query-param-string-2.1.5.tgz#d0b43d87e43fd64067b23009f78be85351d6bd09"
+  integrity sha512-h9UbTwDrVUlZ2m1iBJOWrBN/dWJ48dT0YKs45xrouxr73b7aBDQ8QRT6XhEpY6I9buy5YR+O5k/eHh5Aewte1g==
+  dependencies:
+    query-string "^7.1.1"
+    react-sub-unsub "^2.1.6"
+
 [email protected]:
   version "17.0.1"
   resolved "https://registry.npmjs.org/react/-/react-17.0.1.tgz"