open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make useQueryAndSortParams machinery fast

Browse Source
This commit is contained in:
Marshall Polaris 2022-08-13 14:36:34 -07:00
parent 0085ffcb0b
commit bbdcd358df
1 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/hooks/use-sort-and-query-params.tsx
View File

@ -1,6 +1,5 @@
import { debounce } from 'lodash'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useState } from 'react'
import { DEFAULT_SORT } from 'web/components/contract-search' import { DEFAULT_SORT } from 'web/components/contract-search'
const MARKETS_SORT = 'markets_sort' const MARKETS_SORT = 'markets_sort'
@ -32,22 +31,38 @@ export interface QuerySortOptions {
disableQueryString?: boolean disableQueryString?: boolean
} }
function withQueryParams(
location: Location,
params: { [k: string]: string | null | undefined }
) {
const newParams = new URLSearchParams(location.search)
for (const [k, v] of Object.entries(params)) {
if (!v) {
newParams.delete(k)
} else {
newParams.set(k, v)
}
}
const newUrl = new URL(location.href)
newUrl.search = newParams.toString()
return newUrl
}
export function useQueryAndSortParams({ export function useQueryAndSortParams({
defaultSort = DEFAULT_SORT, defaultSort = DEFAULT_SORT,
shouldLoadFromStorage = true, shouldLoadFromStorage = true,
disableQueryString, disableQueryString,
}: QuerySortOptions = {}) { }: QuerySortOptions = {}) {
const router = useRouter() const router = useRouter()
const { s: sort, q: query } = router.query as { const { s: sort, q: query } = router.query as {
q?: string q?: string
s?: Sort s?: Sort
} }
const setSort = (sort: Sort | undefined) => { const setSort = (sort: Sort | undefined) => {
router.replace({ query: { ...router.query, s: sort } }, undefined, { const history = window.history
shallow: true, const url = withQueryParams(window.location, { s: sort }).toString()
}) history.replaceState({ ...history.state, as: url, url }, '', url)
if (shouldLoadFromStorage) { if (shouldLoadFromStorage) {
localStorage.setItem(MARKETS_SORT, sort || '') localStorage.setItem(MARKETS_SORT, sort || '')
} }
@ -60,17 +75,11 @@ export function useQueryAndSortParams({
}, [query]) }, [query])
// Debounce router query update. // Debounce router query update.
const pushQuery = useMemo( const pushQuery = (query: string | undefined) => {
() => const history = window.history
debounce((query: string | undefined) => { const url = withQueryParams(window.location, { q: query }).toString()
const queryObj = { ...router.query, q: query } history.replaceState({ ...history.state, as: url, url }, '', url)
if (!query) delete queryObj.q }
router.replace({ query: queryObj }, undefined, {
shallow: true,
})
}, 100),
[router]
)
const setQuery = (query: string | undefined) => { const setQuery = (query: string | undefined) => {
setQueryState(query) setQueryState(query)
@ -81,15 +90,15 @@ export function useQueryAndSortParams({
useEffect(() => { useEffect(() => {
// If there's no sort option, then set the one from localstorage // If there's no sort option, then set the one from localstorage
if (router.isReady && !sort && shouldLoadFromStorage) { if (!sort && shouldLoadFromStorage) {
const localSort = localStorage.getItem(MARKETS_SORT) as Sort const localSort = localStorage.getItem(MARKETS_SORT) as Sort
if (localSort && localSort !== defaultSort) { if (localSort && localSort !== defaultSort) {
// Use replace to not break navigating back. // Use replace to not break navigating back.
router.replace( const history = window.history
{ query: { ...router.query, s: localSort } }, const url = withQueryParams(window.location, {
undefined, s: localSort,
{ shallow: true } }).toString()
) history.replaceState({ ...history.state, as: url, url }, '', url)
} }
} }
}) })