granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update useQueryState to use history and shallow routing

Browse source
This commit is contained in:
Justin Edmund 2022-12-22 21:32:57 -08:00
parent 908e807f00
commit 9de459b958
3 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
pages/[username].tsx
View file

@ -63,16 +63,20 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
// Recency is in seconds // Recency is in seconds
const [element, setElement] = useQueryState('element', { const [element, setElement] = useQueryState('element', {
defaultValue: -1, defaultValue: -1,
history: 'push',
parse: (query: string) => parseElement(query), parse: (query: string) => parseElement(query),
serialize: (value) => serializeElement(value), serialize: (value) => serializeElement(value),
}) })
const [raidSlug, setRaidSlug] = useQueryState('raid', { const [raidSlug, setRaidSlug] = useQueryState('raid', {
defaultValue: 'all', defaultValue: 'all',
history: 'push',
})
const [recency, setRecency] = useQueryState('recency', {
defaultValue: -1,
history: 'push',
parse: (query: string) => parseInt(query),
serialize: (value) => `${value}`,
}) })
const [recency, setRecency] = useQueryState(
'recency',
queryTypes.integer.withDefault(-1)
)
// Define transformers for element // Define transformers for element
function parseElement(query: string) { function parseElement(query: string) {
@ -203,16 +207,16 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
raidSlug?: string raidSlug?: string
recency?: number recency?: number
}) { }) {
if (element == 0) setElement(0) if (element == 0) setElement(0, { shallow: true })
else if (element) setElement(element) else if (element) setElement(element, { shallow: true })
if (raids && raidSlug) { if (raids && raidSlug) {
const raid = raids.find((raid) => raid.slug === raidSlug) const raid = raids.find((raid) => raid.slug === raidSlug)
setRaid(raid) setRaid(raid)
setRaidSlug(raidSlug) setRaidSlug(raidSlug, { shallow: true })
} }
if (recency) setRecency(recency) if (recency) setRecency(recency, { shallow: true })
} }
// Methods: Navigation // Methods: Navigation

20
pages/saved.tsx
View file

@ -62,16 +62,20 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
// Recency is in seconds // Recency is in seconds
const [element, setElement] = useQueryState('element', { const [element, setElement] = useQueryState('element', {
defaultValue: -1, defaultValue: -1,
history: 'push',
parse: (query: string) => parseElement(query), parse: (query: string) => parseElement(query),
serialize: (value) => serializeElement(value), serialize: (value) => serializeElement(value),
}) })
const [raidSlug, setRaidSlug] = useQueryState('raid', { const [raidSlug, setRaidSlug] = useQueryState('raid', {
defaultValue: 'all', defaultValue: 'all',
history: 'push',
})
const [recency, setRecency] = useQueryState('recency', {
defaultValue: -1,
history: 'push',
parse: (query: string) => parseInt(query),
serialize: (value) => `${value}`,
}) })
const [recency, setRecency] = useQueryState(
'recency',
queryTypes.integer.withDefault(-1)
)
// Define transformers for element // Define transformers for element
function parseElement(query: string) { function parseElement(query: string) {
@ -196,16 +200,16 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
raidSlug?: string raidSlug?: string
recency?: number recency?: number
}) { }) {
if (element == 0) setElement(0) if (element == 0) setElement(0, { shallow: true })
else if (element) setElement(element) else if (element) setElement(element, { shallow: true })
if (raids && raidSlug) { if (raids && raidSlug) {
const raid = raids.find((raid) => raid.slug === raidSlug) const raid = raids.find((raid) => raid.slug === raidSlug)
setRaid(raid) setRaid(raid)
setRaidSlug(raidSlug) setRaidSlug(raidSlug, { shallow: true })
} }
if (recency) setRecency(recency) if (recency) setRecency(recency, { shallow: true })
} }
// Methods: Favorites // Methods: Favorites

20
pages/teams.tsx
View file

@ -61,16 +61,20 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
// Recency is in seconds // Recency is in seconds
const [element, setElement] = useQueryState('element', { const [element, setElement] = useQueryState('element', {
defaultValue: -1, defaultValue: -1,
history: 'push',
parse: (query: string) => parseElement(query), parse: (query: string) => parseElement(query),
serialize: (value) => serializeElement(value), serialize: (value) => serializeElement(value),
}) })
const [raidSlug, setRaidSlug] = useQueryState('raid', { const [raidSlug, setRaidSlug] = useQueryState('raid', {
defaultValue: 'all', defaultValue: 'all',
history: 'push',
})
const [recency, setRecency] = useQueryState('recency', {
defaultValue: -1,
history: 'push',
parse: (query: string) => parseInt(query),
serialize: (value) => `${value}`,
}) })
const [recency, setRecency] = useQueryState(
'recency',
queryTypes.integer.withDefault(-1)
)
// Define transformers for element // Define transformers for element
function parseElement(query: string) { function parseElement(query: string) {
@ -195,16 +199,16 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
raidSlug?: string raidSlug?: string
recency?: number recency?: number
}) { }) {
if (element == 0) setElement(0) if (element == 0) setElement(0, { shallow: true })
else if (element) setElement(element) else if (element) setElement(element, { shallow: true })
if (raids && raidSlug) { if (raids && raidSlug) {
const raid = raids.find((raid) => raid.slug === raidSlug) const raid = raids.find((raid) => raid.slug === raidSlug)
setRaid(raid) setRaid(raid)
setRaidSlug(raidSlug) setRaidSlug(raidSlug, { shallow: true })
} }
if (recency) setRecency(recency) if (recency) setRecency(recency, { shallow: true })
} }
// Methods: Favorites // Methods: Favorites