From dab72bb270ee2ee47a0b472d5e9e240cba7cbf0f Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 13 May 2022 15:39:55 +0200 Subject: chore: handle blog pagination --- src/utils/hooks/use-pagination.tsx | 116 +++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 src/utils/hooks/use-pagination.tsx (limited to 'src/utils/hooks/use-pagination.tsx') diff --git a/src/utils/hooks/use-pagination.tsx b/src/utils/hooks/use-pagination.tsx new file mode 100644 index 0000000..1e24b75 --- /dev/null +++ b/src/utils/hooks/use-pagination.tsx @@ -0,0 +1,116 @@ +import { type EdgesResponse, type EdgesVars } from '@services/graphql/api'; +import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite'; + +export type UsePaginationProps = { + /** + * The initial data. + */ + fallbackData: EdgesResponse[]; + /** + * A function to fetch more data. + */ + fetcher: (props: EdgesVars) => Promise>; + /** + * The number of results per page. + */ + perPage: number; + /** + * An optional search string. + */ + search?: string; +}; + +export type UsePaginationReturn = { + /** + * The data from the API. + */ + data?: EdgesResponse[]; + /** + * An error thrown by fetcher. + */ + error: any; + /** + * Determine if there's more data to fetch. + */ + hasNextPage?: boolean; + /** + * Determine if the initial data is loading. + */ + isLoadingInitialData: boolean; + /** + * Determine if more data is currently loading. + */ + isLoadingMore?: boolean; + /** + * Determine if the data is refreshing. + */ + isRefreshing?: boolean; + /** + * Determine if there's a request or revalidation loading. + */ + isValidating: boolean; + /** + * Set the number of pages that need to be fetched. + */ + setSize: ( + size: number | ((_size: number) => number) + ) => Promise[] | undefined>; +}; + +/** + * Handle data fetching with pagination. + * + * This hook is a wrapper of `useSWRInfinite` hook. + * + * @param {UsePaginationProps} props - The pagination configuration. + * @returns {UsePaginationReturn} An object with pagination data and helpers. + */ +const usePagination = ({ + fallbackData, + fetcher, + perPage, + search, +}: UsePaginationProps): UsePaginationReturn => { + const getKey: SWRInfiniteKeyLoader = ( + pageIndex: number, + previousData: EdgesResponse + ): EdgesVars | null => { + // Reached the end. + if (previousData && !previousData.edges.length) return null; + + // Fetch data using this parameters. + return pageIndex === 0 + ? { first: perPage, search } + : { + first: perPage, + after: previousData.pageInfo.endCursor, + search, + }; + }; + + const { data, error, isValidating, size, setSize } = useSWRInfinite( + getKey, + fetcher, + { fallbackData } + ); + + const isLoadingInitialData = !data && !error; + const isLoadingMore = + isLoadingInitialData || + (size > 0 && data && typeof data[size - 1] === 'undefined'); + const isRefreshing = isValidating && data && data.length === size; + const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage; + + return { + data, + error, + hasNextPage, + isLoadingInitialData, + isLoadingMore, + isRefreshing, + isValidating, + setSize, + }; +}; + +export default usePagination; -- cgit v1.2.3 From 235fe67d770f83131c9ec10b99012319440db690 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sun, 15 May 2022 16:36:58 +0200 Subject: chore: add Search page --- .../organisms/forms/search-form.stories.tsx | 9 +- .../organisms/forms/search-form.test.tsx | 4 +- src/components/organisms/forms/search-form.tsx | 14 +- src/components/organisms/layout/header.stories.tsx | 9 +- src/components/organisms/layout/header.test.tsx | 12 +- src/components/organisms/layout/header.tsx | 21 +- .../organisms/modals/search-modal.stories.tsx | 11 +- .../organisms/modals/search-modal.test.tsx | 2 +- src/components/organisms/modals/search-modal.tsx | 8 +- .../organisms/toolbar/search.stories.tsx | 10 +- src/components/organisms/toolbar/search.test.tsx | 6 +- src/components/organisms/toolbar/search.tsx | 12 +- .../organisms/toolbar/toolbar.stories.tsx | 11 +- src/components/organisms/toolbar/toolbar.test.tsx | 2 +- src/components/organisms/toolbar/toolbar.tsx | 7 +- src/components/templates/layout/layout.tsx | 3 +- src/pages/blog/index.tsx | 4 +- src/pages/recherche/index.tsx | 324 +++++++++++++++++++++ src/services/graphql/api.ts | 15 +- src/services/graphql/articles.query.ts | 4 +- src/services/graphql/articles.ts | 3 +- src/services/graphql/contact.ts | 4 +- src/utils/hooks/use-data-from-api.tsx | 23 ++ src/utils/hooks/use-pagination.tsx | 3 +- 24 files changed, 436 insertions(+), 85 deletions(-) create mode 100644 src/pages/recherche/index.tsx create mode 100644 src/utils/hooks/use-data-from-api.tsx (limited to 'src/utils/hooks/use-pagination.tsx') diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx index 7f4c7c0..6ea6122 100644 --- a/src/components/organisms/forms/search-form.stories.tsx +++ b/src/components/organisms/forms/search-form.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import SearchForm from './search-form'; /** @@ -10,6 +9,7 @@ export default { component: SearchForm, args: { hideLabel: false, + searchPage: '#', }, argTypes: { className: { @@ -40,13 +40,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - - - - ), - ], } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/organisms/forms/search-form.test.tsx b/src/components/organisms/forms/search-form.test.tsx index 4e3d285..59a2f68 100644 --- a/src/components/organisms/forms/search-form.test.tsx +++ b/src/components/organisms/forms/search-form.test.tsx @@ -3,14 +3,14 @@ import SearchForm from './search-form'; describe('SearchForm', () => { it('renders a search input', () => { - render(); + render(); expect( screen.getByRole('searchbox', { name: 'Search for:' }) ).toBeInTheDocument(); }); it('renders a submit button', () => { - render(); + render(); expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx index 18b7c08..56d3895 100644 --- a/src/components/organisms/forms/search-form.tsx +++ b/src/components/organisms/forms/search-form.tsx @@ -4,18 +4,24 @@ import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; import LabelledField, { type LabelledFieldProps, } from '@components/molecules/forms/labelled-field'; +import { useRouter } from 'next/router'; import { FC, useState } from 'react'; import { useIntl } from 'react-intl'; import styles from './search-form.module.scss'; -export type SearchFormProps = Pick; +export type SearchFormProps = Pick & { + /** + * The search page url. + */ + searchPage: string; +}; /** * SearchForm component * * Render a search form. */ -const SearchForm: FC = ({ hideLabel }) => { +const SearchForm: FC = ({ hideLabel, searchPage }) => { const intl = useIntl(); const fieldLabel = intl.formatMessage({ defaultMessage: 'Search for:', @@ -28,10 +34,12 @@ const SearchForm: FC = ({ hideLabel }) => { id: 'WMqQrv', }); + const router = useRouter(); const [value, setValue] = useState(''); const submitHandler = () => { - return; + router.push({ pathname: searchPage, query: { s: value } }); + setValue(''); }; return ( diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx index c58c344..98d6377 100644 --- a/src/components/organisms/layout/header.stories.tsx +++ b/src/components/organisms/layout/header.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import HeaderComponent from './header'; /** @@ -10,6 +9,7 @@ export default { component: HeaderComponent, args: { isHome: false, + searchPage: '#', withLink: false, }, argTypes: { @@ -95,13 +95,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - - - - ), - ], parameters: { layout: 'fullscreen', }, diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx index 05baaec..a9896f8 100644 --- a/src/components/organisms/layout/header.test.tsx +++ b/src/components/organisms/layout/header.test.tsx @@ -14,14 +14,22 @@ const title = 'Assumenda quis quod'; describe('Header', () => { it('renders the website title', () => { - render(
); + render( +
+ ); expect( screen.getByRole('heading', { level: 1, name: title }) ).toBeInTheDocument(); }); it('renders the main nav', () => { - render(
); + render(
); expect(screen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx index f6ebc9c..18ebb31 100644 --- a/src/components/organisms/layout/header.tsx +++ b/src/components/organisms/layout/header.tsx @@ -5,28 +5,25 @@ import { FC } from 'react'; import Toolbar, { type ToolbarProps } from '../toolbar/toolbar'; import styles from './header.module.scss'; -export type HeaderProps = BrandingProps & { - /** - * Set additional classnames to the header element. - */ - className?: string; - /** - * The main nav items. - */ - nav: ToolbarProps['nav']; -}; +export type HeaderProps = BrandingProps & + Pick & { + /** + * Set additional classnames to the header element. + */ + className?: string; + }; /** * Header component * * Render the website header. */ -const Header: FC = ({ className, nav, ...props }) => { +const Header: FC = ({ className, nav, searchPage, ...props }) => { return (
- +
); diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx index 3ad6abd..f40696c 100644 --- a/src/components/organisms/modals/search-modal.stories.tsx +++ b/src/components/organisms/modals/search-modal.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import SearchModal from './search-modal'; /** @@ -8,6 +7,9 @@ import SearchModal from './search-modal'; export default { title: 'Organisms/Modals', component: SearchModal, + args: { + searchPage: '#', + }, argTypes: { className: { control: { @@ -23,13 +25,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - - - - ), - ], } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/organisms/modals/search-modal.test.tsx b/src/components/organisms/modals/search-modal.test.tsx index 249c523..7ba08c0 100644 --- a/src/components/organisms/modals/search-modal.test.tsx +++ b/src/components/organisms/modals/search-modal.test.tsx @@ -3,7 +3,7 @@ import SearchModal from './search-modal'; describe('SearchModal', () => { it('renders a search modal', () => { - render(); + render(); expect(screen.getByText('Search')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx index 0e0ceed..866bc25 100644 --- a/src/components/organisms/modals/search-modal.tsx +++ b/src/components/organisms/modals/search-modal.tsx @@ -1,10 +1,10 @@ import Modal, { type ModalProps } from '@components/molecules/modals/modal'; import { FC } from 'react'; import { useIntl } from 'react-intl'; -import SearchForm from '../forms/search-form'; +import SearchForm, { SearchFormProps } from '../forms/search-form'; import styles from './search-modal.module.scss'; -export type SearchModalProps = { +export type SearchModalProps = Pick & { /** * Set additional classnames to modal wrapper. */ @@ -16,7 +16,7 @@ export type SearchModalProps = { * * Render a search form modal. */ -const SearchModal: FC = ({ className }) => { +const SearchModal: FC = ({ className, searchPage }) => { const intl = useIntl(); const modalTitle = intl.formatMessage({ defaultMessage: 'Search', @@ -26,7 +26,7 @@ const SearchModal: FC = ({ className }) => { return ( - + ); }; diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx index 0421c8c..c6063a0 100644 --- a/src/components/organisms/toolbar/search.stories.tsx +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -9,6 +9,9 @@ import Search from './search'; export default { title: 'Organisms/Toolbar/Search', component: Search, + args: { + searchPage: '#', + }, argTypes: { className: { control: { @@ -44,13 +47,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - - - - ), - ], } as ComponentMeta; const Template: ComponentStory = ({ diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx index 0ce09d8..a18b679 100644 --- a/src/components/organisms/toolbar/search.test.tsx +++ b/src/components/organisms/toolbar/search.test.tsx @@ -3,17 +3,17 @@ import Search from './search'; describe('Search', () => { it('renders a button to open search modal', () => { - render( null} />); + render( null} />); expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open search'); }); it('renders a button to close search modal', () => { - render( null} />); + render( null} />); expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close search'); }); it('renders a search form', () => { - render( null} />); + render( null} />); expect(screen.getByRole('searchbox')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index 72cd576..a1471ef 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -16,13 +16,22 @@ export type SearchProps = { * The button state. */ isActive: CheckboxProps['value']; + /** + * A callback function to execute search. + */ + searchPage: SearchModalProps['searchPage']; /** * A callback function to handle button state. */ setIsActive: CheckboxProps['setValue']; }; -const Search: FC = ({ className = '', isActive, setIsActive }) => { +const Search: FC = ({ + className = '', + isActive, + searchPage, + setIsActive, +}) => { const intl = useIntl(); const label = isActive ? intl.formatMessage({ @@ -53,6 +62,7 @@ const Search: FC = ({ className = '', isActive, setIsActive }) => { diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 4f9a3de..477cb55 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import ToolbarComponent from './toolbar'; /** @@ -8,6 +7,9 @@ import ToolbarComponent from './toolbar'; export default { title: 'Organisms/Toolbar', component: ToolbarComponent, + args: { + searchPage: '#', + }, argTypes: { className: { control: { @@ -31,13 +33,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - - - - ), - ], parameters: { layout: 'fullscreen', }, diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx index 4bfe8a8..05e84ff 100644 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ b/src/components/organisms/toolbar/toolbar.test.tsx @@ -10,7 +10,7 @@ const nav = [ describe('Toolbar', () => { it('renders a navigation menu', () => { - render(); + render(); expect(screen.getByRole('navigation')).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index f1ce530..6593055 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -1,10 +1,10 @@ import { FC, useState } from 'react'; import MainNav, { type MainNavProps } from '../toolbar/main-nav'; -import Search from '../toolbar/search'; +import Search, { type SearchProps } from '../toolbar/search'; import Settings from '../toolbar/settings'; import styles from './toolbar.module.scss'; -export type ToolbarProps = { +export type ToolbarProps = Pick & { /** * Set additional classnames to the toolbar wrapper. */ @@ -20,7 +20,7 @@ export type ToolbarProps = { * * Render the website toolbar. */ -const Toolbar: FC = ({ className = '', nav }) => { +const Toolbar: FC = ({ className = '', nav, searchPage }) => { const [isNavOpened, setIsNavOpened] = useState(false); const [isSettingsOpened, setIsSettingsOpened] = useState(false); const [isSearchOpened, setIsSearchOpened] = useState(false); @@ -34,6 +34,7 @@ const Toolbar: FC = ({ className = '', nav }) => { className={styles.modal} /> = ({ children, isHome, ...props }) => { baseline={baseline} photo={picture} nav={mainNav} + searchPage="/recherche" isHome={isHome} - className={styles.header} withLink={true} + className={styles.header} />
{children}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 3acf6a9..38fabd5 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -1,9 +1,7 @@ import Notice from '@components/atoms/layout/notice'; import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb'; import PostsList, { type Post } from '@components/organisms/layout/posts-list'; -import LinksListWidget, { - LinksListItems, -} from '@components/organisms/widgets/links-list-widget'; +import LinksListWidget from '@components/organisms/widgets/links-list-widget'; import PageLayout from '@components/templates/page/page-layout'; import { type EdgesResponse } from '@services/graphql/api'; import { diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx new file mode 100644 index 0000000..bf14861 --- /dev/null +++ b/src/pages/recherche/index.tsx @@ -0,0 +1,324 @@ +import Notice from '@components/atoms/layout/notice'; +import Spinner from '@components/atoms/loaders/spinner'; +import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb'; +import PostsList, { type Post } from '@components/organisms/layout/posts-list'; +import LinksListWidget from '@components/organisms/widgets/links-list-widget'; +import PageLayout from '@components/templates/page/page-layout'; +import { type EdgesResponse } from '@services/graphql/api'; +import { + getArticleFromRawData, + getArticles, + getTotalArticles, +} from '@services/graphql/articles'; +import { + getThematicsPreview, + getTotalThematics, +} from '@services/graphql/thematics'; +import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics'; +import { type Article, type Meta } from '@ts/types/app'; +import { + RawThematicPreview, + RawTopicPreview, + type RawArticle, +} from '@ts/types/raw-data'; +import { loadTranslation, type Messages } from '@utils/helpers/i18n'; +import { + getLinksListItems, + getPageLinkFromRawData, +} from '@utils/helpers/pages'; +import useDataFromAPI from '@utils/hooks/use-data-from-api'; +import usePagination from '@utils/hooks/use-pagination'; +import useSettings from '@utils/hooks/use-settings'; +import { GetStaticProps, NextPage } from 'next'; +import Head from 'next/head'; +import { useRouter } from 'next/router'; +import Script from 'next/script'; +import { useIntl } from 'react-intl'; +import { Blog, Graph, WebPage } from 'schema-dts'; + +type SearchPageProps = { + thematicsList: RawThematicPreview[]; + topicsList: RawTopicPreview[]; + translation: Messages; +}; + +/** + * Search page. + */ +const SearchPage: NextPage = ({ + 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 homeLabel = intl.formatMessage({ + defaultMessage: 'Home', + description: 'Breadcrumb: home label', + id: 'j5k9Fe', + }); + const blogLabel = intl.formatMessage({ + defaultMessage: 'Blog', + description: 'Breadcrumb: blog label', + id: 'Es52wh', + }); + const breadcrumb: BreadcrumbItem[] = [ + { id: 'home', name: homeLabel, url: '/' }, + { id: 'blog', name: blogLabel, url: '/blog' }, + { id: 'search', name: 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 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], + }; + + 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) + ); + + const postsCount = intl.formatMessage( + { + defaultMessage: + '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', + id: 'LtsVOx', + description: 'SearchPage: posts count meta', + }, + { postsCount: totalArticles || 0 } + ); + + /** + * 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)) + ); + }; + + /** + * 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} + + + + + + +