From 3a68d155afd4559e141bcb6c1ca3d833d3bd4667 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 21 Apr 2022 17:58:36 +0200 Subject: chore: add a Pagination component --- src/components/molecules/nav/pagination.tsx | 220 ++++++++++++++++++++++++++++ 1 file changed, 220 insertions(+) create mode 100644 src/components/molecules/nav/pagination.tsx (limited to 'src/components/molecules/nav/pagination.tsx') diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx new file mode 100644 index 0000000..38f6841 --- /dev/null +++ b/src/components/molecules/nav/pagination.tsx @@ -0,0 +1,220 @@ +import ButtonLink from '@components/atoms/buttons/button-link'; +import { FC, Fragment, ReactNode } from 'react'; +import { useIntl } from 'react-intl'; +import styles from './pagination.module.scss'; + +export type PaginationProps = { + /** + * An accessible name for the pagination. + */ + 'aria-label'?: string; + /** + * The url part before page number. Default: /page/ + */ + baseUrl?: string; + /** + * Set additional classnames to the pagination wrapper. + */ + className?: string; + /** + * The current page number. + */ + current: number; + /** + * The number of items per page. + */ + perPage: number; + /** + * The number of siblings on one side of the current page. Default: 1. + */ + siblings?: number; + /** + * The total number of items. + */ + total: number; +}; + +/** + * Pagination component + * + * Render a page-based navigation. + */ +const Pagination: FC = ({ + baseUrl = '/page/', + className = '', + current, + perPage, + siblings = 1, + total, + ...props +}) => { + const intl = useIntl(); + const totalPages = Math.ceil(total / perPage); + const hasPreviousPage = current > 1; + const previousPageName = intl.formatMessage( + { + defaultMessage: '{icon} Previous page', + description: 'Pagination: previous page link', + id: 'aMFqPH', + }, + { icon: '←' } + ); + const previousPageUrl = `${baseUrl}${current - 1}`; + const hasNextPage = current < totalPages; + const nextPageName = intl.formatMessage( + { + defaultMessage: 'Next page {icon}', + description: 'Pagination: Next page link', + id: 'R4yaW6', + }, + { icon: '→' } + ); + const nextPageUrl = `${baseUrl}${current + 1}`; + + /** + * Create an array with a range of values from start value to end value. + * + * @param {number} start - The first value. + * @param {number} end - The last value. + * @returns {number[]} An array from start value to end value. + */ + const range = (start: number, end: number): number[] => { + const length = end - start + 1; + + return Array.from({ length }, (_, index) => index + start); + }; + + /** + * Get the pagination range. + * + * @param currentPage - The current page number. + * @param maxPages - The total pages number. + * @returns {(number|string)[]} An array of page numbers with or without dots. + */ + const getPaginationRange = ( + currentPage: number, + maxPages: number + ): (number | string)[] => { + const dots = '\u2026'; + + /** + * Show left dots if current page less left siblings is greater than the + * first two pages. + */ + const hasLeftDots = currentPage - siblings > 2; + + /** + * Show right dots if current page plus right siblings is lower than the + * total of pages less the last page. + */ + const hasRightDots = currentPage + siblings < maxPages - 1; + + if (hasLeftDots && hasRightDots) { + const middleItems = range(currentPage - siblings, currentPage + siblings); + return [1, dots, ...middleItems, dots, maxPages]; + } + + if (hasLeftDots) { + const rightItems = range(currentPage - siblings, maxPages); + return [1, dots, ...rightItems]; + } + + if (hasRightDots) { + const leftItems = range(1, currentPage + siblings); + return [...leftItems, dots, maxPages]; + } + + return range(1, maxPages); + }; + + /** + * Get a link or a span wrapped in a list item. + * + * @param {string} id - The item id. + * @param {ReactNode} body - The link body. + * @param {string} [link] - An URL. + * @returns {JSX.Element} The list item. + */ + const getItem = (id: string, body: ReactNode, link?: string): JSX.Element => { + const linkModifier = id.startsWith('page') ? 'link--number' : ''; + const kind = id === 'previous' || id === 'next' ? 'tertiary' : 'secondary'; + + return ( +
  • + {link ? ( + + {body} + + ) : ( + + {body} + + )} +
    • + ); + }; + + /** + * Get the list of pages. + * + * @param {number} currentPage - The current page number. + * @param {number} maxPages - The total of pages. + * @returns {JSX.Element[]} The list items. + */ + const getPages = (currentPage: number, maxPages: number): JSX.Element[] => { + const pagesRange = getPaginationRange(currentPage, maxPages); + + return pagesRange.map((page, index) => { + const id = typeof page === 'string' ? `dots-${index}` : `page-${page}`; + const currentPagePrefix = intl.formatMessage({ + defaultMessage: 'You are here:', + description: 'Pagination: current page indication', + id: 'yE/Jdz', + }); + const body = + typeof page === 'string' + ? '\u2026' + : intl.formatMessage( + { + defaultMessage: 'Page {number}', + description: 'Pagination: page number', + id: 'TSXPzr', + }, + { + number: page, + a11y: (chunks: ReactNode) => ( + + {page === currentPage && currentPagePrefix} + {chunks} + + ), + } + ); + const url = + page === currentPage || typeof page === 'string' + ? undefined + : `${baseUrl}${page}`; + + return {getItem(id, body, url)}; + }); + }; + + return ( + + ); +}; + +export default Pagination; -- cgit v1.2.3 From f4c7ab4e306d2f04324853e67032d370abd65d0c Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 20 May 2022 15:37:08 +0200 Subject: chore: handle blog pagination when JS is disabled --- .../molecules/nav/pagination.module.scss | 2 +- src/components/molecules/nav/pagination.tsx | 10 +- src/components/organisms/layout/posts-list.tsx | 95 +++++-- src/pages/blog/index.tsx | 1 + src/pages/blog/page/[number].tsx | 311 +++++++++++++++++++++ src/pages/recherche/index.tsx | 1 + src/pages/sujet/[slug].tsx | 1 + src/pages/thematique/[slug].tsx | 1 + src/services/graphql/api.ts | 9 + src/services/graphql/articles.query.ts | 12 + src/services/graphql/articles.ts | 28 +- src/utils/hooks/use-breadcrumb.tsx | 3 +- src/utils/hooks/use-redirection.tsx | 33 +++ 13 files changed, 472 insertions(+), 35 deletions(-) create mode 100644 src/pages/blog/page/[number].tsx create mode 100644 src/utils/hooks/use-redirection.tsx (limited to 'src/components/molecules/nav/pagination.tsx') diff --git a/src/components/molecules/nav/pagination.module.scss b/src/components/molecules/nav/pagination.module.scss index a8cef47..56c5bfc 100644 --- a/src/components/molecules/nav/pagination.module.scss +++ b/src/components/molecules/nav/pagination.module.scss @@ -13,7 +13,7 @@ &--pages { column-gap: var(--spacing-2xs); - margin-top: var(--spacing-sm); + margin-bottom: var(--spacing-sm); } } diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx index 38f6841..934b50a 100644 --- a/src/components/molecules/nav/pagination.tsx +++ b/src/components/molecules/nav/pagination.tsx @@ -44,12 +44,12 @@ const Pagination: FC = ({ className = '', current, perPage, - siblings = 1, + siblings = 2, total, ...props }) => { const intl = useIntl(); - const totalPages = Math.ceil(total / perPage); + const totalPages = Math.round(total / perPage); const hasPreviousPage = current > 1; const previousPageName = intl.formatMessage( { @@ -205,14 +205,14 @@ const Pagination: FC = ({ return ( ); }; diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx index 9dfe254..50192dd 100644 --- a/src/components/organisms/layout/posts-list.tsx +++ b/src/components/organisms/layout/posts-list.tsx @@ -2,6 +2,11 @@ import Button from '@components/atoms/buttons/button'; import Heading, { type HeadingLevel } from '@components/atoms/headings/heading'; import ProgressBar from '@components/atoms/loaders/progress-bar'; import Spinner from '@components/atoms/loaders/spinner'; +import Pagination, { + PaginationProps, +} from '@components/molecules/nav/pagination'; +import useIsMounted from '@utils/hooks/use-is-mounted'; +import useSettings from '@utils/hooks/use-settings'; import { FC, Fragment, useRef } from 'react'; import { useIntl } from 'react-intl'; import styles from './posts-list.module.scss'; @@ -18,7 +23,7 @@ export type YearCollection = { [key: string]: Post[]; }; -export type PostsListProps = { +export type PostsListProps = Pick & { /** * True to display the posts by year. Default: false. */ @@ -31,6 +36,10 @@ export type PostsListProps = { * Load more button handler. */ loadMore?: () => void; + /** + * The current page number. Default: 1. + */ + pageNumber?: number; /** * The posts data. */ @@ -74,16 +83,22 @@ const sortPostsByYear = (data: Post[]): YearCollection => { * Render a list of post summaries. */ const PostsList: FC = ({ + baseUrl, byYear = false, isLoading = false, loadMore, + pageNumber = 1, posts, showLoadMoreBtn = false, + siblings, titleLevel, total, }) => { const intl = useIntl(); + const listRef = useRef(null); const lastPostRef = useRef(null); + const isMounted = useIsMounted(listRef); + const { blog } = useSettings(); /** * Retrieve the list of posts. @@ -99,7 +114,7 @@ const PostsList: FC = ({ const lastPostId = allPosts[allPosts.length - 1].id; return ( -
      +
        {allPosts.map(({ id, ...post }) => (
      1. @@ -168,34 +183,60 @@ const PostsList: FC = ({ loadMore && loadMore(); }; - return posts.length === 0 ? ( -

        - {intl.formatMessage({ - defaultMessage: 'No results found.', - description: 'PostsList: no results', - id: 'vK7Sxv', - })} -

        - ) : ( + const getProgressBar = () => { + return ( + <> + + {showLoadMoreBtn && ( + + )} + + ); + }; + + const getPagination = () => { + return posts.length <= blog.postsPerPage ? ( + + ) : ( + <> + ); + }; + + if (posts.length === 0) { + return ( +

        + {intl.formatMessage({ + defaultMessage: 'No results found.', + description: 'PostsList: no results', + id: 'vK7Sxv', + })} +

        + ); + } + + return ( <> {getPosts()} {isLoading && } - - {showLoadMoreBtn && ( - - )} + {isMounted ? getProgressBar() : getPagination()} ); }; diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 2676305..90f56be 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -250,6 +250,7 @@ const BlogPage: NextPageWithLayout = ({ > {data && ( ; + pageNumber: number; + thematicsList: RawThematicPreview[]; + topicsList: RawTopicPreview[]; + totalArticles: number; + translation: Messages; +}; + +/** + * Blog index page. + */ +const BlogPage: NextPageWithLayout = ({ + articles, + pageNumber, + thematicsList, + topicsList, + totalArticles, +}) => { + useRedirection({ + query: { param: 'number', value: '1' }, + redirectTo: '/blog', + }); + + const intl = useIntl(); + const title = intl.formatMessage({ + defaultMessage: 'Blog', + description: 'BlogPage: page title', + id: '7TbbIk', + }); + const pageNumberTitle = intl.formatMessage( + { + defaultMessage: 'Page {number}', + id: 'zbzlb1', + description: 'BlogPage: page number', + }, + { + number: pageNumber, + } + ); + const pageTitleWithPageNumber = `${title} - ${pageNumberTitle}`; + const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({ + title: pageNumberTitle, + url: `/blog/page/${pageNumber}`, + }); + + const { website } = useSettings(); + const { asPath } = useRouter(); + const pageTitle = `${pageTitleWithPageNumber} - ${website.name}`; + const pageDescription = intl.formatMessage( + { + defaultMessage: + "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.", + description: 'BlogPage: SEO - Meta description', + id: '18h/t0', + }, + { websiteName: website.name } + ); + const pageUrl = `${website.url}${asPath}`; + + const webpageSchema: WebPage = { + '@id': `${pageUrl}`, + '@type': 'WebPage', + breadcrumb: { '@id': `${website.url}/#breadcrumb` }, + name: pageTitle, + description: pageDescription, + inLanguage: website.locales.default, + reviewedBy: { '@id': `${website.url}/#branding` }, + url: `${website.url}`, + isPartOf: { + '@id': `${website.url}`, + }, + }; + + const blogSchema: Blog = { + '@id': `${website.url}/#blog`, + '@type': 'Blog', + author: { '@id': `${website.url}/#branding` }, + creator: { '@id': `${website.url}/#branding` }, + editor: { '@id': `${website.url}/#branding` }, + inLanguage: website.locales.default, + license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr', + mainEntityOfPage: { '@id': `${pageUrl}` }, + }; + + const schemaJsonLd: Graph = { + '@context': 'https://schema.org', + '@graph': [webpageSchema, blogSchema], + }; + + /** + * Retrieve the formatted meta. + * + * @param {Meta<'article'>} meta - The article meta. + * @returns {Post['meta']} The formatted meta. + */ + const getPostMeta = (meta: Meta<'article'>): Post['meta'] => { + const { commentsCount, dates, thematics, wordsCount } = meta; + + return { + commentsCount, + dates, + readingTime: { wordsCount: wordsCount || 0, onlyMinutes: true }, + thematics: thematics?.map((thematic) => { + return { ...thematic, url: `/thematique/${thematic.slug}` }; + }), + }; + }; + + /** + * Retrieve the formatted posts. + * + * @param {Article[]} posts - An array of articles. + * @returns {Post[]} An array of formatted posts. + */ + const getPosts = (posts: Article[]): Post[] => { + return posts.map((post) => { + return { + ...post, + cover: post.meta.cover, + excerpt: post.intro, + meta: getPostMeta(post.meta), + url: `/article/${post.slug}`, + }; + }); + }; + + /** + * Retrieve the posts list from raw data. + * + * @param {EdgesResponse[]} rawData - The raw data. + * @returns {Post[]} An array of posts. + */ + const getPostsList = (rawData: EdgesResponse[]): Post[] => { + const articlesList: RawArticle[] = []; + rawData.forEach((articleData) => + articleData.edges.forEach((edge) => { + articlesList.push(edge.node); + }) + ); + + return getPosts( + articlesList.map((article) => getArticleFromRawData(article)) + ); + }; + + const thematicsListTitle = intl.formatMessage({ + defaultMessage: 'Thematics', + description: 'BlogPage: thematics list widget title', + id: 'HriY57', + }); + + const topicsListTitle = intl.formatMessage({ + defaultMessage: 'Topics', + description: 'BlogPage: topics list widget title', + id: '2D9tB5', + }); + + return ( + <> + + {pageTitle} + + + + + + +