feat: added url query params

For Search/Filter/Sort
newrelic · Jun 4, 2021 · eb53936 · eb53936
1 parent a87f22d
commit eb53936
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 0 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -205,5 +205,6 @@ module.exports = {
         environments: ['production', 'development'],
       },
     },
+    'gatsby-plugin-use-query-params',
   ],
 };
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "gatsby-plugin-sharp": "^3.3.1",
     "gatsby-plugin-sitemap": "^4.0.0-next.0",
     "gatsby-plugin-use-dark-mode": "^1.3.0",
+    "gatsby-plugin-use-query-params": "^1.0.1",
     "gatsby-remark-autolink-headers": "^2.9.0",
     "gatsby-remark-images": "^5.0.0",
     "gatsby-source-filesystem": "^3.3.0",
@@ -52,6 +53,7 @@
     "use-dark-mode": "^2.3.1",
     "use-media": "^1.4.0",
     "use-mobile-detect-hook": "^1.0.4",
+    "use-query-params": "^1.2.2",
     "warning": "^4.0.3",
     "xstate": "^4.14.0"
   },

diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js
@@ -6,6 +6,7 @@ import { css } from '@emotion/react';
 import PackTile from '../components/PackTile';
 import PackList from '../components/PackList';
 import { SearchInput, Button, Dropdown } from '@newrelic/gatsby-theme-newrelic';
+import { useQueryParam, NumberParam, StringParam } from 'use-query-params';
 
 const ObservabilityPacksPage = ({ data, location }) => {
   const {
@@ -17,6 +18,22 @@ const ObservabilityPacksPage = ({ data, location }) => {
   );
   const [sortState, setSortState] = useState('Alphabetical');
   const [searchTerm, setSearchTerm] = useState('');
+  const [querySearch, setQuerySearch] = useQueryParam('search', StringParam);
+  const [queryFilter, setQueryFilter] = useQueryParam('filter', StringParam);
+  const [querySort, setQuerySort] = useQueryParam('sort', StringParam);
+
+  useEffect(() => {
+    if (querySearch) {
+      setSearchTerm(querySearch);
+    }
+    if (queryFilter) {
+      setContainingFilterState(queryFilter);
+    }
+    if (querySort) {
+      setSortState(querySort);
+    }
+  }, []);
+
   useEffect(() => {
     let tempFilteredPacks = o11yPacks.filter(
       (pack) =>
@@ -39,6 +56,14 @@ const ObservabilityPacksPage = ({ data, location }) => {
         b.name.localeCompare(a.name)
       );
     }
+
+    if (searchTerm !== '') {
+      setQuerySearch(searchTerm);
+    } else {
+      setQuerySearch(undefined);
+    }
+    setQueryFilter(containingFilterState);
+    setQuerySort(sortState);
     setFilteredPacks(tempFilteredPacks);
   }, [o11yPacks, searchTerm, containingFilterState, sortState]);
 
@@ -56,6 +81,7 @@ const ObservabilityPacksPage = ({ data, location }) => {
         onChange={(e) => {
           setSearchTerm(e.target.value.toLowerCase());
         }}
+        defaultValue={querySearch}
       />
       <div
         css={css`

diff --git a/yarn.lock b/yarn.lock
@@ -8303,6 +8303,11 @@ gatsby-plugin-use-dark-mode@^1.3.0:
     prop-types "^15.7.2"
     terser "^4.0.0"
 
+gatsby-plugin-use-query-params@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-use-query-params/-/gatsby-plugin-use-query-params-1.0.1.tgz#5e4982580d2e9bad15d243186cff379afef8a207"
+  integrity sha512-k3xaKuf8VhLq6/arocYRZqiQMTQ84ZRY0JklsO4tuKsRqi64b94zGf6B8SZn6yo0fvtJ/zw684DpH77y/iKdbA==
+
 gatsby-plugin-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-utils/-/gatsby-plugin-utils-1.3.0.tgz#cd90c30627ac9fe8fe711f4540eafbb0a1607251"
@@ -16227,6 +16232,11 @@ serialize-javascript@^5.0.1:
   dependencies:
     randombytes "^2.1.0"
 
+serialize-query-params@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-1.3.4.tgz#21a6a1c6110ac46aa23a269a0e1517e4de3204ed"
+  integrity sha512-hSVbcw7DLktsgdbfcFrwIFDxM1m/EBvba/YJe/uYeN58FMHrhza9VgM5S4EruJnDlB2YShynfTgnYpVkN23rxA==
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -18733,6 +18743,13 @@ use-persisted-state@^0.3.0:
   dependencies:
     "@use-it/event-listener" "^0.1.2"
 
+use-query-params@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-1.2.2.tgz#4c4b274133d699605301510b5aa01047f92b5ce0"
+  integrity sha512-Uyfe+/TECsNNzCSkgUM1MM24OEGxGE4aeWvZEf0a14iQFp/m43wiqI1HZ9oTlrRSZwD5yABeLc9rN+wtiB5B3Q==
+  dependencies:
+    serialize-query-params "^1.3.3"
+
 use-subscription@^1.3.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-Original file line number
+Diff line change
@@ Expand Up / @@ -205,5 +205,6 @@ module.exports = { @@
             environments: ['production', 'development'],
           },
         },
+        'gatsby-plugin-use-query-params',
       ],
     };