Justin Edmund
fc616aab01
This refactors the collection pages (teams, saved and profiles) into a bunch of hooks that handle various chunks of functionality. This way, the actual "pages" have significantly less logic and significantly less repeated code. * **useFavorites** handles favoriting teams * **useFilterState** handles the URL query filters * **usePaginationState** simply holds data pertaining to pagination * **useFetchTeams** handles fetching and parsing team data from the server * **useTeamFilter** pulls all other states together and handles some logic that is closest to the page Co-authored-by: Justin Edmund <383021+jedmund@users.noreply.github.com>
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { getCookie } from 'cookies-next'
|
|
import { useQueryState } from 'nuqs'
|
|
|
|
import { defaultFilterset } from '~utils/defaultFilters'
|
|
import { parseElement, serializeElement } from '~utils/parseElement'
|
|
|
|
import type { PageContextObj } from '~types'
|
|
|
|
export const useFilterState = (context?: PageContextObj) => {
|
|
const [element, setElement] = useQueryState('element', {
|
|
defaultValue: -1,
|
|
history: 'push',
|
|
parse: (query: string) => parseElement(query),
|
|
serialize: (value) => serializeElement(value),
|
|
})
|
|
|
|
const [raid, setRaid] = useQueryState('raid', {
|
|
defaultValue: 'all',
|
|
history: 'push',
|
|
parse: (query: string) => {
|
|
const raids = context?.raidGroups.flatMap((group) => group.raids)
|
|
const raid = raids?.find((r: Raid) => r.slug === query)
|
|
return raid ? raid.id : 'all'
|
|
},
|
|
serialize: (value) => value,
|
|
})
|
|
|
|
const [recency, setRecency] = useQueryState('recency', {
|
|
defaultValue: -1,
|
|
history: 'push',
|
|
parse: (query: string) => parseInt(query),
|
|
serialize: (value) => `${value}`,
|
|
})
|
|
|
|
const [advancedFilters, setAdvancedFilters] = useState(defaultFilterset)
|
|
|
|
useEffect(() => {
|
|
const filtersCookie = getCookie('filters')
|
|
const filters = filtersCookie
|
|
? JSON.parse(filtersCookie as string)
|
|
: defaultFilterset
|
|
setAdvancedFilters(filters)
|
|
}, [])
|
|
|
|
return {
|
|
element,
|
|
setElement,
|
|
raid,
|
|
setRaid,
|
|
recency,
|
|
setRecency,
|
|
advancedFilters,
|
|
setAdvancedFilters,
|
|
}
|
|
}
|