From 70efcfeaa0603415dd992cb662d8efb960e6e49a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 26 Sep 2023 15:54:28 +0200 Subject: 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. --- src/pages/blog/index.tsx | 71 +++++++++++++++++++++++----------------- src/pages/blog/page/[number].tsx | 51 ++++++++++++++++++----------- 2 files changed, 72 insertions(+), 50 deletions(-) (limited to 'src/pages/blog') diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 13a4c57..7f6c540 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/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, @@ -18,14 +20,15 @@ import { getTotalThematics, getTotalTopics, } from '../../services/graphql'; -import { - type EdgesResponse, - type NextPageWithLayout, - type RawArticle, - type RawThematicPreview, - type RawTopicPreview, +import type { + EdgesResponse, + NextPageWithLayout, + RawArticle, + RawThematicPreview, + RawTopicPreview, } from '../../types'; import { settings } from '../../utils/config'; +import { ROUTES } from '../../utils/constants'; import { getBlogSchema, getLinksListItems, @@ -62,19 +65,22 @@ const BlogPage: NextPageWithLayout = ({ }); const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ title, - url: '/blog', + url: ROUTES.BLOG, }); const { blog, website } = useSettings(); const { asPath } = useRouter(); - const pageTitle = intl.formatMessage( - { - defaultMessage: 'Blog: development, open source - {websiteName}', - description: 'BlogPage: SEO - Page title', - id: '+Y+tLK', - }, - { websiteName: website.name } - ); + const page = { + title: intl.formatMessage( + { + defaultMessage: 'Blog: development, open source - {websiteName}', + description: 'BlogPage: SEO - Page title', + id: '+Y+tLK', + }, + { websiteName: website.name } + ), + url: `${website.url}${asPath}`, + }; const pageDescription = intl.formatMessage( { defaultMessage: @@ -110,12 +116,9 @@ const BlogPage: NextPageWithLayout = ({ perPage: blog.postsPerPage, }); - /** - * Load more posts handler. - */ - const loadMore = () => { + const loadMore = useCallback(() => { setSize((prevSize) => prevSize + 1); - }; + }, [setSize]); const thematicsListTitle = intl.formatMessage({ defaultMessage: 'Thematics', @@ -128,20 +131,25 @@ const BlogPage: NextPageWithLayout = ({ description: 'BlogPage: topics list widget title', id: '2D9tB5', }); + const postsListBaseUrl = `${ROUTES.BLOG}/page/`; return ( <> - {pageTitle} + {page.title} + {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} - + + {/*eslint-disable-next-line react/jsx-no-literals -- Content allowed */}