From 75c9fd63e71752b1c5ef06ddca50dd3bb3ad7ab1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20=C5=A0korpil?= Date: Sun, 15 May 2022 12:57:18 +0200 Subject: [PATCH] Stats page now stores the search query in url --- application/src/pages/api/stats.ts | 2 -- application/src/pages/feeds.tsx | 4 +-- application/src/pages/nodes.tsx | 3 +-- application/src/pages/stats.tsx | 36 ++++++++++++++------------- application/src/types/StatsRequest.ts | 13 ++++++++-- 5 files changed, 33 insertions(+), 25 deletions(-) diff --git a/application/src/pages/api/stats.ts b/application/src/pages/api/stats.ts index a353418..f6c5220 100644 --- a/application/src/pages/api/stats.ts +++ b/application/src/pages/api/stats.ts @@ -16,8 +16,6 @@ const CACHE_KEY = 'stats' const handleGetStats = async (req: NextApiRequest, res: NextApiResponse): Promise => { 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 }) diff --git a/application/src/pages/feeds.tsx b/application/src/pages/feeds.tsx index fa7ec0e..aec087f 100644 --- a/application/src/pages/feeds.tsx +++ b/application/src/pages/feeds.tsx @@ -56,8 +56,8 @@ const Feeds: React.FC> = setResults([]) setHasMore(false) setLoaded(false) - router.query = query - router.push(router) + + router.push({ query }) if ((query.search ?? '').length < 1) { console.info('Query too short.') diff --git a/application/src/pages/nodes.tsx b/application/src/pages/nodes.tsx index 9a4e710..7cff3fe 100644 --- a/application/src/pages/nodes.tsx +++ b/application/src/pages/nodes.tsx @@ -54,8 +54,7 @@ const Nodes: React.FC> = const loadNewQueryResults = () => { console.info('Cancelling searches') source.cancel('New query on the way') - router.query = query - router.push(router) + router.push({ query }) setResults([]) setHasMore(false) setLoaded(false) diff --git a/application/src/pages/stats.tsx b/application/src/pages/stats.tsx index 92ac0cd..b39e651 100644 --- a/application/src/pages/stats.tsx +++ b/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> = ({ matomoConfig }) => { + const router = useRouter() + const routerQuery = statsRequestSchema.parse(router.query) + console.log('Router query', routerQuery) + const [query, setQuery] = useState(routerQuery) const [loading, setLoading] = useState(true) const [loaded, setLoaded] = useState(false) const [stats, setStats] = useState(null) - const [sort, setSort] = useState({ - 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> = } ] }) - setSort({ - sortBy: sortBy, - sortWay: sortWay - }) + const newQuery:StatsRequest = { ...query } + newQuery.sortBy = sortBy + 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> = } useEffect(() => { loadStats() - }, [sort]) + }, [query]) const sum = { nodeCount: 0, accountCount: 0, @@ -101,22 +103,22 @@ const Stats: React.FC> = - + Software name - + Instance count - + Account count - + Channel count diff --git a/application/src/types/StatsRequest.ts b/application/src/types/StatsRequest.ts index 9d92c70..0b214cd 100644 --- a/application/src/types/StatsRequest.ts +++ b/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), - sortWay: z.optional(statsRequestSortWaySchema) + sortBy: transform( + z.optional(statsRequestSortBySchema), + undefinedToDefault('accountCount'), + z.optional(statsRequestSortBySchema) + ), + sortWay: transform( + z.optional(statsRequestSortWaySchema), + undefinedToDefault('desc'), + statsRequestSortWaySchema + ) }) export type StatsRequest = z.infer