diff --git a/gatsby-config.js b/gatsby-config.js index 8dbd27854..b39273ce5 100644 --- 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 index 0cc2f3015..31afc2d8a 100644 --- 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 index c3f82c3a9..ba0e6a82d 100644 --- 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} />