import { GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; import { useIntl } from 'react-intl'; import { getLayout, LinksListWidget, Notice, PageLayout, PostsList, Spinner, } from '../../components'; import { getArticles, getThematicsPreview, getTopicsPreview, getTotalArticles, getTotalThematics, getTotalTopics, } from '../../services/graphql'; import { type NextPageWithLayout, type RawArticle, type RawThematicPreview, type RawTopicPreview, } from '../../types'; import { getBlogSchema, getLinksListItems, getPageLinkFromRawData, getPostsList, getSchemaJson, getWebPageSchema, } from '../../utils/helpers'; import { loadTranslation, type Messages } from '../../utils/helpers/server'; import { useBreadcrumb, useDataFromAPI, usePagination, useSettings, } from '../../utils/hooks'; type SearchPageProps = { thematicsList: RawThematicPreview[]; topicsList: RawTopicPreview[]; translation: Messages; }; /** * Search page. */ const SearchPage: NextPageWithLayout = ({ thematicsList, topicsList, }) => { const intl = useIntl(); const { asPath, query } = useRouter(); const title = query.s ? intl.formatMessage( { defaultMessage: 'Search results for {query}', description: 'SearchPage: SEO - Page title', id: 'ZNBhDP', }, { query: query.s as string } ) : intl.formatMessage({ defaultMessage: 'Search', description: 'SearchPage: SEO - Page title', id: 'WDwNDl', }); const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title, url: `/recherche`, }); const { blog, website } = useSettings(); const pageTitle = `${title} - ${website.name}`; const pageDescription = query.s ? intl.formatMessage( { defaultMessage: 'Discover search results for {query} on {websiteName}.', description: 'SearchPage: SEO - Meta description', id: 'pg26sn', }, { query: query.s as string, websiteName: website.name } ) : intl.formatMessage( { defaultMessage: 'Search for a post on {websiteName}.', description: 'SearchPage: SEO - Meta description', id: 'npisb3', }, { websiteName: website.name } ); const webpageSchema = getWebPageSchema({ description: pageDescription, locale: website.locales.default, slug: asPath, title: pageTitle, }); const blogSchema = getBlogSchema({ isSinglePage: false, locale: website.locales.default, slug: asPath, }); const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]); const { data, error, isLoadingInitialData, isLoadingMore, hasNextPage, setSize, } = usePagination({ fallbackData: [], fetcher: getArticles, perPage: blog.postsPerPage, search: query.s as string, }); const totalArticles = useDataFromAPI(() => getTotalArticles(query.s as string) ); /** * Load more posts handler. */ const loadMore = () => { setSize((prevSize) => prevSize + 1); }; const thematicsListTitle = intl.formatMessage({ defaultMessage: 'Thematics', description: 'SearchPage: thematics list widget title', id: 'Dq6+WH', }); const topicsListTitle = intl.formatMessage({ defaultMessage: 'Topics', description: 'SearchPage: topics list widget title', id: 'N804XO', }); return ( <> {pageTitle}