{siteTitle}

import Head from 'next/head' import React, { useEffect, useState } from 'react' import axios from 'axios' import { feedResponseSchema } from '../types/FeedResponse' import Loader from '../components/Loader' import Results from '../components/Results' import Layout, { siteTitle } from '../components/Layout' import { matomoConfig } from '../lib/matomoConfig' import getMatomo from '../lib/getMatomo' import { GetServerSideProps, InferGetServerSidePropsType } from 'next' let source = axios.CancelToken.source() const Home: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 search = async () => { setLoading(true) try { console.info('Retrieving results', { query, page }) source = axios.CancelToken.source() const response = await axios.get('/api/feed', { params: { search: query, page }, cancelToken: source.token }) const responseData = await feedResponseSchema.parseAsync(response.data) setHasMore(responseData.hasMore) setResults([ ...(page > 0 ? results : []), ...responseData.feeds ]) setLoaded(true) } catch (e) { console.warn('Search failed', e) setLoaded(true) } setLoading(false) } const loadNewQueryResults = () => { console.info('Cancelling searches') source.cancel('New query on the way') setResults([]) setHasMore(false) setLoaded(false) if (query.length < 3) { console.info('Query too short.') return } console.info('Loading new query search', { query, page }) setLoading(true) setTimeout(search) getMatomo(matomoConfig).trackEvent({ category: 'feeds', action: 'new-search' }) } const loadNextPageResults = () => { setHasMore(false) if (page === 0) { return } console.info('Loading next page', { query, page }) setTimeout(search) getMatomo(matomoConfig).trackEvent({ category: 'feeds', action: 'next-page', customDimensions: [ { value: page.toString(), id: 1 } ] }) } const handleQueryChange = (event) => { const value = event.target.value console.info('Query changed', { query: value }) setQuery(value) setPage(0) } const handleSearchSubmit = event => { event.preventDefault() setQuery(query) setSubmitted(new Date()) setPage(0) } const handleLoadMore = event => { event.preventDefault() setPage(page + 1) } useEffect(loadNewQueryResults, [query, submitted]) useEffect(loadNextPageResults, [page]) return ( {siteTitle} { loaded ? : '' } {hasMore && !loading ? ( ) : ''} ) } export const getServerSideProps:GetServerSideProps = async (context) => { console.info('Loading matomo config', matomoConfig) return { props: { matomoConfig } } } export default Home