Stats page now stores the search query in url

application/src/pages/api/stats.ts

@@ -16,8 +16,6 @@ const CACHE_KEY = 'stats'
 
 const handleGetStats = async (req: NextApiRequest, res: NextApiResponse<StatsResponse>): Promise<void> => {
   const query = await statsRequestSchema.parseAsync(req.query)
-  query.sortBy = query.sortBy ?? 'nodeCount'
-  query.sortWay = query.sortWay ?? 'desc'
   const cacheKey = `${CACHE_KEY}_${query.sortWay}_${query.sortBy}`
   if (!cache.has(cacheKey)) {
     console.info('Retrieving new stats', { cacheKey, query })

application/src/pages/feeds.tsx

@@ -56,8 +56,8 @@ const Feeds: React.FC<InferGetServerSidePropsType<typeof getServerSideProps>> =
     setResults([])
     setHasMore(false)
     setLoaded(false)
-    router.query = query
+
-    router.push(router)
+    router.push({ query })
 
     if ((query.search ?? '').length < 1) {
       console.info('Query too short.')

application/src/pages/nodes.tsx

@@ -54,8 +54,7 @@ const Nodes: React.FC<InferGetServerSidePropsType<typeof getServerSideProps>> =
   const loadNewQueryResults = () => {
     console.info('Cancelling searches')
     source.cancel('New query on the way')
-    router.query = query
+    router.push({ query })
-    router.push(router)
     setResults([])
     setHasMore(false)
     setLoaded(false)

application/src/pages/stats.tsx

@@ -8,23 +8,24 @@ import axios from 'axios'
 import { StatsResponse, statsResponseSchema } from '../types/StatsResponse'
 import SoftwareBadge from '../components/badges/SoftwareBadge'
 import ProgressBar from '../components/ProgressBar'
-import { StatsRequestSortBy } from '../types/StatsRequest'
+import { StatsRequest, statsRequestSchema, StatsRequestSortBy } from '../types/StatsRequest'
 import SortToggle from '../components/SortToggle'
 import getMatomo from '../lib/getMatomo'
-import { Sort } from '../types/Sort'
+import { useRouter } from 'next/router'
 
 let source = axios.CancelToken.source()
 
 const Stats: React.FC<InferGetServerSidePropsType<typeof getServerSideProps>> = ({ matomoConfig }) => {
+  const router = useRouter()
+  const routerQuery = statsRequestSchema.parse(router.query)
+  console.log('Router query', routerQuery)
+  const [query, setQuery] = useState<StatsRequest>(routerQuery)
   const [loading, setLoading] = useState<boolean>(true)
   const [loaded, setLoaded] = useState<boolean>(false)
   const [stats, setStats] = useState<StatsResponse | null>(null)
-  const [sort, setSort] = useState<Sort>({
-    sortBy: 'nodeCount', sortWay: 'desc'
-  })
 
   const toggleSort = (sortBy: StatsRequestSortBy) => {
-    const sortWay = sort.sortBy === sortBy && sort.sortWay === 'asc' ? 'desc' : 'asc'
+    const sortWay = query.sortBy === sortBy && query.sortWay === 'asc' ? 'desc' : 'asc'
     getMatomo(matomoConfig).trackEvent({
       category: 'stats',
       action: 'sort',
@@ -35,19 +36,20 @@ const Stats: React.FC<InferGetServerSidePropsType<typeof getServerSideProps>> =
         }
       ]
     })
-    setSort({
+    const newQuery:StatsRequest = { ...query }
-      sortBy: sortBy,
+    newQuery.sortBy = sortBy
-      sortWay: sortWay
+    newQuery.sortWay = sortWay
-    })
+    setQuery(newQuery)
   }
 
   const retrieveStats = async () => {
-    console.info('Retrieving stats', { sort })
+    console.info('Retrieving stats', { query })
     source = axios.CancelToken.source()
     setLoading(true)
+    await router.push({ query })
     try {
       const response = await axios.get('/api/stats', {
-        params: sort,
+        params: query,
         cancelToken: source.token
       })
       const stats = await statsResponseSchema.parseAsync(response.data)
@@ -67,7 +69,7 @@ const Stats: React.FC<InferGetServerSidePropsType<typeof getServerSideProps>> =
   }
   useEffect(() => {
     loadStats()
-  }, [sort])
+  }, [query])
   const sum = {
     nodeCount: 0,
     accountCount: 0,
@@ -101,22 +103,22 @@ const Stats: React.FC<InferGetServerSidePropsType<typeof getServerSideProps>> =
                     <thead>
                     <tr>
                         <th>
-                            <SortToggle onToggle={toggleSort} field={'softwareName'} sort={sort}>
+                            <SortToggle onToggle={toggleSort} field={'softwareName'} sort={query}>
                                 Software name
                             </SortToggle>
                         </th>
                         <th className={'text-end'}>
-                            <SortToggle onToggle={toggleSort} field={'nodeCount'} sort={sort}>
+                            <SortToggle onToggle={toggleSort} field={'nodeCount'} sort={query}>
                                 Instance count
                             </SortToggle>
                         </th>
                         <th className={'text-end'}>
-                            <SortToggle onToggle={toggleSort} field={'accountCount'} sort={sort}>
+                            <SortToggle onToggle={toggleSort} field={'accountCount'} sort={query}>
                                 Account count
                             </SortToggle>
                         </th>
                         <th className={'text-end'}>
-                            <SortToggle onToggle={toggleSort} field={'channelCount'} sort={sort}>
+                            <SortToggle onToggle={toggleSort} field={'channelCount'} sort={query}>
                                 Channel count
                             </SortToggle>
                         </th>

application/src/types/StatsRequest.ts

@@ -1,9 +1,18 @@
 import { z } from 'zod'
+import { transform, undefinedToDefault } from '../lib/transform'
 export const statsRequestSortBySchema = z.enum(['nodeCount', 'accountCount', 'channelCount', 'softwareName'])
 export const statsRequestSortWaySchema = z.enum(['asc', 'desc'])
 export const statsRequestSchema = z.object({
-  sortBy: z.optional(statsRequestSortBySchema),
+  sortBy: transform(
-  sortWay: z.optional(statsRequestSortWaySchema)
+    z.optional(statsRequestSortBySchema),
+    undefinedToDefault<StatsRequestSortBy>('accountCount'),
+    z.optional(statsRequestSortBySchema)
+  ),
+  sortWay: transform(
+    z.optional(statsRequestSortWaySchema),
+    undefinedToDefault<StatsRequestSortWay>('desc'),
+    statsRequestSortWaySchema
+  )
 })
 
 export type StatsRequest = z.infer<typeof statsRequestSchema>