diff --git a/application/src/pages/api/feed.ts b/application/src/pages/api/feed.ts index 0362b2e..b3cc599 100644 --- a/application/src/pages/api/feed.ts +++ b/application/src/pages/api/feed.ts @@ -8,7 +8,7 @@ const handleFeedSearch = async (req: NextApiRequest, res: NextApiResponse { diff --git a/application/src/pages/feeds.tsx b/application/src/pages/feeds.tsx index 73f765f..fa7ec0e 100644 --- a/application/src/pages/feeds.tsx +++ b/application/src/pages/feeds.tsx @@ -1,7 +1,7 @@ import Head from 'next/head' import React, { useEffect, useState } from 'react' import axios from 'axios' -import { feedResponseSchema } from '../types/FeedResponse' +import { FeedResponseItem, feedResponseSchema } from '../types/FeedResponse' import Loader from '../components/Loader' import FeedResults from '../components/FeedResults' import Layout, { siteTitle } from '../components/Layout' @@ -10,17 +10,22 @@ import getMatomo from '../lib/getMatomo' import { GetServerSideProps, InferGetServerSidePropsType } from 'next' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faSearch, faAngleDoubleDown } from '@fortawesome/free-solid-svg-icons' +import { useRouter } from 'next/router' +import { FeedRequestQuery, feedRequestQuerySchema } from '../types/FeedRequest' let source = axios.CancelToken.source() const Feeds: React.FC> = ({ matomoConfig }) => { - const [query, setQuery] = useState('') - const [submitted, setSubmitted] = useState(null) - const [loading, setLoading] = useState(false) - const [results, setResults] = useState([]) - const [page, setPage] = useState(0) - const [hasMore, setHasMore] = useState(false) - const [loaded, setLoaded] = useState(false) + const router = useRouter() + const routerQuery = feedRequestQuerySchema.parse(router.query) + console.log('Router query', routerQuery) + const [query, setQuery] = useState(routerQuery) + const [submitted, setSubmitted] = useState(null) + const [loading, setLoading] = useState(false) + const [results, setResults] = useState([]) + const [page, setPage] = useState(0) + const [hasMore, setHasMore] = useState(false) + const [loaded, setLoaded] = useState(false) const search = async () => { setLoading(true) @@ -28,7 +33,7 @@ const Feeds: React.FC> = console.info('Retrieving results', { query, page }) source = axios.CancelToken.source() const response = await axios.get('/api/feed', { - params: { search: query, page }, + params: { ...query, page }, cancelToken: source.token }) const responseData = await feedResponseSchema.parseAsync(response.data) @@ -51,7 +56,10 @@ const Feeds: React.FC> = setResults([]) setHasMore(false) setLoaded(false) - if (query.length < 1) { + router.query = query + router.push(router) + + if ((query.search ?? '').length < 1) { console.info('Query too short.') return } @@ -84,9 +92,15 @@ const Feeds: React.FC> = } const handleQueryChange = (event) => { - const value = event.target.value - console.info('Query changed', { query: value }) - setQuery(value) + const inputElement = event.target + const value = inputElement.value + const name = inputElement.name + const newQuery = { + ...query + } + newQuery[name] = value + console.info('Query changed', { name, value }) + setQuery(newQuery) setPage(0) } @@ -114,12 +128,12 @@ const Feeds: React.FC> =
> = ) } -export const getServerSideProps: GetServerSideProps = async (context) => { +export const getServerSideProps: GetServerSideProps = async () => { console.info('Loading matomo config', matomoConfig) return { props: { diff --git a/application/src/types/FeedRequest.ts b/application/src/types/FeedRequest.ts index b2f3752..118581a 100644 --- a/application/src/types/FeedRequest.ts +++ b/application/src/types/FeedRequest.ts @@ -1,13 +1,8 @@ import { z } from 'zod' import { preserveUndefined, stringToInt, transform } from '../lib/transform' -export const feedRequestSchema = z.object({ - search: z.string(), - page: transform( - z.string().optional(), - preserveUndefined(stringToInt), - z.number().gte(0).optional() - ) +export const feedRequestQuerySchema = z.object({ + search: z.string().optional() /* softwareName: z.string().optional(), domain: z.string().optional(), @@ -40,4 +35,13 @@ export const feedRequestSchema = z.object({ */ }) +export const feedRequestSchema = feedRequestQuerySchema.extend({ + page: transform( + z.string().optional(), + preserveUndefined(stringToInt), + z.number().gte(0).optional() + ) +}) + export type FeedRequest = z.infer +export type FeedRequestQuery = z.infer