import Head from 'next/head' import React, { ReactElement, useEffect, useState } from 'react' import Loader from '../components/Loader' import FeedResults from '../components/FeedResults' import Layout, { siteTitle } from '../components/Layout' import { matomoConfig } from '../lib/matomoConfig' import { GetServerSideProps, InferGetServerSidePropsType } from 'next' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faSearch, faAngleDoubleDown, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons' import { useRouter } from 'next/router' import { useQuery } from '@apollo/client' import { ListFeedsQuery, ListFeedsResult } from '../graphql/client/queries/ListFeedsQuery' import getMatomo from '../lib/getMatomo' import { feedQueryInputSchema, FeedQueryInputType } from '../graphql/common/types/FeedQueryInput' import { ListFeedsVariables } from '../graphql/common/queries/listFeeds' const Feeds: React.FC> = ({ matomoConfig }): ReactElement => { const router = useRouter() const routerQuery = feedQueryInputSchema.parse(router.query) const [page, setPage] = useState(0) const [query, setQuery] = useState(routerQuery) const [pageLoading, setPageLoading] = useState(false) const { loading, data, error, fetchMore, refetch } = useQuery(ListFeedsQuery, { variables: { paging: { page: 0 }, query } }) useEffect((): void => { router.push({ query }) .catch((error) => console.error(error)) getMatomo(matomoConfig).trackEvent({ category: 'feeds', action: 'new-search' }) }, [query]) useEffect(() => { getMatomo(matomoConfig).trackEvent({ category: 'feeds', action: 'next-page', customDimensions: [ { value: page.toString(), id: 1 } ] }) }, [page]) const handleQueryChange = (event): void => { const inputElement = event.target const value = inputElement.value const name = inputElement.name const newQuery = { ...query } newQuery[name] = value setQuery(newQuery) setPage(0) } const handleSearchSubmit = async (event): Promise => { event.preventDefault() setPageLoading(true) setPage(0) await refetch({ paging: { page: 0 } }) setPageLoading(false) } const handleLoadMore = async (event): Promise => { event.preventDefault() setPageLoading(true) await fetchMore({ variables: { paging: { page: page + 1 } }, updateQuery: (previousData, { fetchMoreResult }) => { fetchMoreResult.listFeeds.items = [ ...previousData.listFeeds.items, ...fetchMoreResult.listFeeds.items ] return fetchMoreResult } }) setPageLoading(false) setPage(page + 1) } return ( {siteTitle}

People

{ (data != null) && query.search.length > 0 ? : '' } {!loading && !pageLoading && data?.listFeeds?.paging?.hasNext !== undefined && data?.listFeeds?.paging?.hasNext ? (

) : ''} {(error != null) ? (

{error.message}

) : ''} ) } export const getServerSideProps: GetServerSideProps = async () => { return { props: { matomoConfig } } } export default Feeds