From 9de459b95874050d669036ca098425e15d5acd98 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 22 Dec 2022 21:32:57 -0800
Subject: [PATCH] Update useQueryState to use history and shallow routing

---
 pages/[username].tsx | 20 ++++++++++++--------
 pages/saved.tsx      | 20 ++++++++++++--------
 pages/teams.tsx      | 20 ++++++++++++--------
 3 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/pages/[username].tsx b/pages/[username].tsx
index 3e13015a..3e64897c 100644
--- a/pages/[username].tsx
+++ b/pages/[username].tsx
@@ -63,16 +63,20 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
   // Recency is in seconds
   const [element, setElement] = useQueryState('element', {
     defaultValue: -1,
+    history: 'push',
     parse: (query: string) => parseElement(query),
     serialize: (value) => serializeElement(value),
   })
   const [raidSlug, setRaidSlug] = useQueryState('raid', {
     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
   function parseElement(query: string) {
@@ -203,16 +207,16 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
     raidSlug?: string
     recency?: number
   }) {
-    if (element == 0) setElement(0)
-    else if (element) setElement(element)
+    if (element == 0) setElement(0, { shallow: true })
+    else if (element) setElement(element, { shallow: true })
 
     if (raids && raidSlug) {
       const raid = raids.find((raid) => raid.slug === raidSlug)
       setRaid(raid)
-      setRaidSlug(raidSlug)
+      setRaidSlug(raidSlug, { shallow: true })
     }
 
-    if (recency) setRecency(recency)
+    if (recency) setRecency(recency, { shallow: true })
   }
 
   // Methods: Navigation
diff --git a/pages/saved.tsx b/pages/saved.tsx
index ff23db5a..66072d21 100644
--- a/pages/saved.tsx
+++ b/pages/saved.tsx
@@ -62,16 +62,20 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
   // Recency is in seconds
   const [element, setElement] = useQueryState('element', {
     defaultValue: -1,
+    history: 'push',
     parse: (query: string) => parseElement(query),
     serialize: (value) => serializeElement(value),
   })
   const [raidSlug, setRaidSlug] = useQueryState('raid', {
     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
   function parseElement(query: string) {
@@ -196,16 +200,16 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
     raidSlug?: string
     recency?: number
   }) {
-    if (element == 0) setElement(0)
-    else if (element) setElement(element)
+    if (element == 0) setElement(0, { shallow: true })
+    else if (element) setElement(element, { shallow: true })
 
     if (raids && raidSlug) {
       const raid = raids.find((raid) => raid.slug === raidSlug)
       setRaid(raid)
-      setRaidSlug(raidSlug)
+      setRaidSlug(raidSlug, { shallow: true })
     }
 
-    if (recency) setRecency(recency)
+    if (recency) setRecency(recency, { shallow: true })
   }
 
   // Methods: Favorites
diff --git a/pages/teams.tsx b/pages/teams.tsx
index 15839788..8c47365c 100644
--- a/pages/teams.tsx
+++ b/pages/teams.tsx
@@ -61,16 +61,20 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
   // Recency is in seconds
   const [element, setElement] = useQueryState('element', {
     defaultValue: -1,
+    history: 'push',
     parse: (query: string) => parseElement(query),
     serialize: (value) => serializeElement(value),
   })
   const [raidSlug, setRaidSlug] = useQueryState('raid', {
     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
   function parseElement(query: string) {
@@ -195,16 +199,16 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
     raidSlug?: string
     recency?: number
   }) {
-    if (element == 0) setElement(0)
-    else if (element) setElement(element)
+    if (element == 0) setElement(0, { shallow: true })
+    else if (element) setElement(element, { shallow: true })
 
     if (raids && raidSlug) {
       const raid = raids.find((raid) => raid.slug === raidSlug)
       setRaid(raid)
-      setRaidSlug(raidSlug)
+      setRaidSlug(raidSlug, { shallow: true })
     }
 
-    if (recency) setRecency(recency)
+    if (recency) setRecency(recency, { shallow: true })
   }
 
   // Methods: Favorites