diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-26 15:54:28 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:23:48 +0200 |
| commit | 70efcfeaa0603415dd992cb662d8efb960e6e49a (patch) | |
| tree | 5d37e98fae9aa7e5c3d8ef30a10db9fed9b63e36 /src/pages/recherche/index.tsx | |
| parent | 31695306bfed44409f03006ea717fd2cceff8f87 (diff) | |
refactor(routes): replace hardcoded routes with constants
It makes it easier to change a route if needed and it avoid typo
mistakes.
I also refactored a bit the concerned files to be complient with the
new ESlint config. However, I should rewrite the pages to reduce
the number of statements.
Diffstat (limited to 'src/pages/recherche/index.tsx')
| -rw-r--r-- | src/pages/recherche/index.tsx | 54 |
1 files changed, 34 insertions, 20 deletions
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx index 26cfd91..971d04a 100644 --- a/src/pages/recherche/index.tsx +++ b/src/pages/recherche/index.tsx @@ -1,7 +1,9 @@ -import { GetStaticProps } from 'next'; +/* eslint-disable max-statements */ +import type { GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; +import { useCallback } from 'react'; import { useIntl } from 'react-intl'; import { getLayout, @@ -19,12 +21,13 @@ import { getTotalThematics, getTotalTopics, } from '../../services/graphql'; -import { - type NextPageWithLayout, - type RawArticle, - type RawThematicPreview, - type RawTopicPreview, +import type { + NextPageWithLayout, + RawArticle, + RawThematicPreview, + RawTopicPreview, } from '../../types'; +import { ROUTES } from '../../utils/constants'; import { getBlogSchema, getLinksListItems, @@ -72,11 +75,14 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ }); const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title, - url: `/recherche`, + url: ROUTES.SEARCH, }); const { blog, website } = useSettings(); - const pageTitle = `${title} - ${website.name}`; + const page = { + title: `${title} - ${website.name}`, + url: `${website.url}${asPath}`, + }; const pageDescription = query.s ? intl.formatMessage( { @@ -99,7 +105,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ description: pageDescription, locale: website.locales.default, slug: asPath, - title: pageTitle, + title: page.title, }); const blogSchema = getBlogSchema({ isSinglePage: false, @@ -122,16 +128,16 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ search: query.s as string, }); - const totalArticles = useDataFromAPI<number>(() => + const totalArticles = useDataFromAPI<number>(async () => getTotalArticles(query.s as string) ); /** * Load more posts handler. */ - const loadMore = () => { + const loadMore = useCallback(() => { setSize((prevSize) => prevSize + 1); - }; + }, [setSize]); const thematicsListTitle = intl.formatMessage({ defaultMessage: 'Thematics', @@ -144,20 +150,25 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ description: 'SearchPage: topics list widget title', id: 'N804XO', }); + const postsListBaseUrl = `${ROUTES.SEARCH}/page/`; return ( <> <Head> - <title>{pageTitle}</title> + <title>{page.title}</title> + {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} <meta name="description" content={pageDescription} /> - <meta property="og:url" content={`${website.url}${asPath}`} /> + <meta property="og:url" content={page.url} /> + {/*eslint-disable-next-line react/jsx-no-literals -- Content allowed */} <meta property="og:type" content="website" /> <meta property="og:title" content={title} /> <meta property="og:description" content={pageDescription} /> </Head> <Script + // eslint-disable-next-line react/jsx-no-literals -- Id allowed id="schema-blog" type="application/ld+json" + // eslint-disable-next-line react/no-danger -- Necessary for schema dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> <PageLayout @@ -167,6 +178,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ headerMeta={{ total: totalArticles }} widgets={[ <LinksListWidget + // eslint-disable-next-line react/jsx-no-literals -- Key allowed key="thematics-list" items={getLinksListItems( thematicsList.map((thematic) => @@ -177,6 +189,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ level={2} />, <LinksListWidget + // eslint-disable-next-line react/jsx-no-literals -- Key allowed key="topics-list" items={getLinksListItems( topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic')) @@ -188,20 +201,21 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ > {data && data.length > 0 ? ( <PostsList - baseUrl="/recherche/page/" + baseUrl={postsListBaseUrl} byYear={true} - isLoading={isLoadingMore || isLoadingInitialData} + isLoading={isLoadingMore ?? isLoadingInitialData} loadMore={loadMore} posts={getPostsList(data)} - searchPage="/recherche/" + searchPage={ROUTES.SEARCH} showLoadMoreBtn={hasNextPage} - total={totalArticles || 0} + total={totalArticles ?? 0} /> ) : ( <Spinner /> )} - {error && ( + {error ? ( <Notice + // eslint-disable-next-line react/jsx-no-literals -- Kind allowed kind="error" message={intl.formatMessage({ defaultMessage: 'Failed to load.', @@ -209,7 +223,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ id: 'fOe8rH', })} /> - )} + ) : null} </PageLayout> </> ); |