116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import { useEffect, useState } from 'react'
|
|
import { DEFAULT_SORT } from 'web/components/contract-search'
|
|
|
|
const MARKETS_SORT = 'markets_sort'
|
|
|
|
export type Sort =
|
|
| 'newest'
|
|
| 'oldest'
|
|
| 'most-traded'
|
|
| '24-hour-vol'
|
|
| 'close-date'
|
|
| 'resolve-date'
|
|
| 'last-updated'
|
|
| 'score'
|
|
|
|
export function getSavedSort() {
|
|
// TODO: this obviously doesn't work with SSR, common sense would suggest
|
|
// that we should save things like this in cookies so the server has them
|
|
if (typeof window !== 'undefined') {
|
|
return localStorage.getItem(MARKETS_SORT) as Sort | null
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
|
|
export interface QuerySortOptions {
|
|
defaultSort?: Sort
|
|
shouldLoadFromStorage?: boolean
|
|
/** Use normal react state instead of url query string */
|
|
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({
|
|
defaultSort = DEFAULT_SORT,
|
|
shouldLoadFromStorage = true,
|
|
disableQueryString,
|
|
}: QuerySortOptions = {}) {
|
|
const router = useRouter()
|
|
const { s: sort, q: query } = router.query as {
|
|
q?: string
|
|
s?: Sort
|
|
}
|
|
|
|
const setSort = (sort: Sort | undefined) => {
|
|
const history = window.history
|
|
const url = withQueryParams(window.location, { s: sort }).toString()
|
|
history.replaceState({ ...history.state, as: url, url }, '', url)
|
|
if (shouldLoadFromStorage) {
|
|
localStorage.setItem(MARKETS_SORT, sort || '')
|
|
}
|
|
}
|
|
|
|
const [queryState, setQueryState] = useState(query)
|
|
|
|
useEffect(() => {
|
|
setQueryState(query)
|
|
}, [query])
|
|
|
|
// Debounce router query update.
|
|
const pushQuery = (query: string | undefined) => {
|
|
const history = window.history
|
|
const url = withQueryParams(window.location, { q: query }).toString()
|
|
history.replaceState({ ...history.state, as: url, url }, '', url)
|
|
}
|
|
|
|
const setQuery = (query: string | undefined) => {
|
|
setQueryState(query)
|
|
if (!disableQueryString) {
|
|
pushQuery(query)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
// If there's no sort option, then set the one from localstorage
|
|
if (!sort && shouldLoadFromStorage) {
|
|
const localSort = localStorage.getItem(MARKETS_SORT) as Sort
|
|
if (localSort && localSort !== defaultSort) {
|
|
// Use replace to not break navigating back.
|
|
const history = window.history
|
|
const url = withQueryParams(window.location, {
|
|
s: localSort,
|
|
}).toString()
|
|
history.replaceState({ ...history.state, as: url, url }, '', url)
|
|
}
|
|
}
|
|
})
|
|
|
|
// use normal state if querydisableQueryString
|
|
const [sortState, setSortState] = useState(defaultSort)
|
|
|
|
return {
|
|
sort: disableQueryString ? sortState : sort ?? defaultSort,
|
|
query: queryState ?? '',
|
|
setSort: disableQueryString ? setSortState : setSort,
|
|
setQuery,
|
|
}
|
|
}
|