From 9308a6dce03bd0c616e0ba6fec227473aaa44b33 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 2 May 2022 12:55:13 +0200 Subject: refactor: rewrite API fetching method and GraphQL queries --- src/services/graphql/articles.query.ts | 174 +++++++++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 src/services/graphql/articles.query.ts (limited to 'src/services/graphql/articles.query.ts') diff --git a/src/services/graphql/articles.query.ts b/src/services/graphql/articles.query.ts new file mode 100644 index 0000000..e384aba --- /dev/null +++ b/src/services/graphql/articles.query.ts @@ -0,0 +1,174 @@ +/** + * Query the full article data using its slug. + */ +export const articleBySlugQuery = `query PostBy($slug: ID!) { + post(id: $slug, idType: SLUG) { + acfPosts { + postsInThematic { + ... on Thematic { + databaseId + slug + title + } + } + postsInTopic { + ... on Topic { + databaseId + slug + title + } + } + } + author { + node { + gravatarUrl + name + url + } + } + commentCount + contentParts { + afterMore + beforeMore + } + databaseId + date + featuredImage { + node { + altText + mediaDetails { + height + width + } + sourceUrl + title + } + } + info { + readingTime + wordsCount + } + modified + seo { + metaDesc + title + } + slug + title + } +}`; + +/** + * Query an array of partial articles. + */ +export const articlesQuery = `query Articles($after: String = "", $first: Int = 10, $search: String = "") { + posts( + after: $after + first: $first + where: {orderby: {field: DATE, order: DESC}, search: $search, status: PUBLISH} + ) { + edges { + cursor + node { + acfPosts { + postsInThematic { + ... on Thematic { + databaseId + slug + title + } + } + } + author { + node { + name + } + } + commentCount + contentParts { + beforeMore + } + databaseId + featuredImage { + node { + altText + mediaDetails { + height + width + } + sourceUrl + title + } + } + info { + readingTime + wordsCount + } + modified + slug + title + } + } + pageInfo { + endCursor + hasNextPage + total + } + } +}`; + +/** + * Query an array of articles with only the minimal data. + */ +export const articlesCardQuery = `query ArticlesCard($first: Int = 10) { + posts( + first: $first + where: {orderby: {field: DATE, order: DESC}, status: PUBLISH} + ) { + nodes { + databaseId + date + featuredImage { + node { + altText + mediaDetails { + height + width + } + sourceUrl + title + } + } + slug + title + } + } +}`; + +/** + * Query an array of articles slug. + */ +export const articlesSlugQuery = `query ArticlesSlug($first: Int = 10, $after: String = "") { + posts(after: $after, first: $first) { + edges { + cursor + node { + slug + } + } + pageInfo { + total + } + } +}`; + +/** + * Query the total number of articles. + */ +export const totalArticlesQuery = `query PostsTotal { + posts { + pageInfo { + total + } + } +}`; -- cgit v1.2.3 From ca921d7536cfe950b5a7d442977bbf900b48faf4 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 2 May 2022 18:36:09 +0200 Subject: chore: fetch posts for rss feed --- src/services/graphql/articles.query.ts | 1 + src/services/graphql/articles.ts | 104 +++++++++++++++++++++++++++++++++ src/ts/types/app.ts | 86 +++++++++++++++++++++++++++ src/ts/types/raw-data.ts | 103 ++++++++++++++++++++++++++++++++ src/utils/helpers/author.ts | 32 ++++++++++ src/utils/helpers/dates.ts | 55 +++++++++++++++++ src/utils/helpers/images.ts | 18 ++++++ src/utils/helpers/pages.ts | 26 +++++++++ src/utils/helpers/rss.ts | 44 ++++++++------ 9 files changed, 450 insertions(+), 19 deletions(-) create mode 100644 src/services/graphql/articles.ts create mode 100644 src/ts/types/app.ts create mode 100644 src/ts/types/raw-data.ts create mode 100644 src/utils/helpers/author.ts create mode 100644 src/utils/helpers/dates.ts create mode 100644 src/utils/helpers/images.ts create mode 100644 src/utils/helpers/pages.ts (limited to 'src/services/graphql/articles.query.ts') diff --git a/src/services/graphql/articles.query.ts b/src/services/graphql/articles.query.ts index e384aba..e62835d 100644 --- a/src/services/graphql/articles.query.ts +++ b/src/services/graphql/articles.query.ts @@ -89,6 +89,7 @@ export const articlesQuery = `query Articles($after: String = "", $first: Int = beforeMore } databaseId + date featuredImage { node { altText diff --git a/src/services/graphql/articles.ts b/src/services/graphql/articles.ts new file mode 100644 index 0000000..e5ce7a5 --- /dev/null +++ b/src/services/graphql/articles.ts @@ -0,0 +1,104 @@ +import { Article } from '@ts/types/app'; +import { RawArticle, TotalItems } from '@ts/types/raw-data'; +import { getAuthorFromRawData } from '@utils/helpers/author'; +import { getImageFromRawData } from '@utils/helpers/images'; +import { getPageLinkFromRawData } from '@utils/helpers/pages'; +import { EdgesVars, fetchAPI, getAPIUrl, PageInfo } from './api'; +import { articlesQuery, totalArticlesQuery } from './articles.query'; + +/** + * Retrieve the total number of articles. + * + * @returns {Promise} - The articles total number. + */ +export const getTotalArticles = async (): Promise => { + const response = await fetchAPI({ + api: getAPIUrl(), + query: totalArticlesQuery, + }); + + return response.posts.pageInfo.total; +}; + +export type GetArticlesReturn = { + articles: Article[]; + pageInfo: PageInfo; +}; + +/** + * Convert raw data to an Article object. + * + * @param {RawArticle} data - The page raw data. + * @returns {Article} The page data. + */ +export const getArticleFromRawData = (data: RawArticle): Article => { + const { + acfPosts, + author, + commentCount, + contentParts, + databaseId, + date, + featuredImage, + info, + modified, + slug, + title, + seo, + } = data; + + return { + content: contentParts.afterMore, + id: databaseId, + intro: contentParts.beforeMore, + meta: { + author: getAuthorFromRawData(author.node, 'page'), + commentsCount: commentCount || 0, + cover: featuredImage?.node + ? getImageFromRawData(featuredImage.node) + : undefined, + dates: { + publication: date, + update: modified, + }, + readingTime: info.readingTime, + seo: { + description: seo?.metaDesc || '', + title: seo?.title || '', + }, + thematics: acfPosts.postsInThematic?.map((thematic) => + getPageLinkFromRawData(thematic) + ), + topics: acfPosts.postsInTopic?.map((topic) => + getPageLinkFromRawData(topic) + ), + wordsCount: info.wordsCount, + }, + slug, + title, + }; +}; + +/** + * Retrieve the given number of articles from API. + * + * @param {EdgesVars} obj - An object. + * @param {number} obj.first - The number of articles. + * @returns {Promise} - The articles data. + */ +export const getArticles = async ({ + first, +}: EdgesVars): Promise => { + const response = await fetchAPI({ + api: getAPIUrl(), + query: articlesQuery, + variables: { first }, + }); + + return { + articles: response.posts.edges.map((edge) => + getArticleFromRawData(edge.node) + ), + pageInfo: response.posts.pageInfo, + }; +}; diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts new file mode 100644 index 0000000..b09f3d5 --- /dev/null +++ b/src/ts/types/app.ts @@ -0,0 +1,86 @@ +export type AuthorKind = 'page' | 'comment'; + +export type Author = { + avatar?: Image; + description?: T extends 'page' ? string | undefined : never; + name: string; + website?: string; +}; + +export type CommentMeta = { + author: Author<'comment'>; + date: string; +}; + +export type Comment = { + approved: boolean; + content: string; + id: number; + meta: CommentMeta; + parentId: number; + replies: Comment[]; +}; + +export type Dates = { + publication: string; + update: string; +}; + +export type Image = { + alt: string; + height: number; + src: string; + title?: string; + width: number; +}; + +export type Repos = { + github?: string; + gitlab?: string; +}; + +export type SEO = { + description: string; + title: string; +}; + +export type PageKind = 'article' | 'project' | 'thematic' | 'topic'; + +export type Meta = { + articles?: T extends 'thematic' | 'topic' ? Article[] : never; + author: Author<'page'>; + commentsCount?: T extends 'article' ? number : never; + cover?: Image; + dates: Dates; + license?: T extends 'projects' ? string : never; + readingTime: number; + repos?: T extends 'projects' ? Repos : never; + seo: SEO; + technologies?: T extends 'projects' ? string[] : never; + thematics?: T extends 'article' | 'topic' ? PageLink[] : never; + topics?: T extends 'article' | 'thematic' ? PageLink[] : never; + website?: T extends 'topic' ? string : never; + wordsCount: number; +}; + +export type Page = { + content: string; + id: number; + intro: string; + meta?: Meta; + slug: string; + title: string; +}; + +export type PageLink = { + id: number; + name: string; + slug: string; +}; + +export type Article = Page<'article'>; +export type ArticleCard = Pick & + Pick, 'cover' | 'dates'>; +export type Project = Page<'project'>; +export type Thematic = Page<'thematic'>; +export type Topic = Page<'topic'>; diff --git a/src/ts/types/raw-data.ts b/src/ts/types/raw-data.ts new file mode 100644 index 0000000..43a2453 --- /dev/null +++ b/src/ts/types/raw-data.ts @@ -0,0 +1,103 @@ +/** + * Types for raw data coming from GraphQL API. + */ + +import { NodeResponse, PageInfo } from '@services/graphql/api'; +import { AuthorKind } from './app'; + +export type ACFPosts = { + postsInThematic?: RawThematicPreview[]; + postsInTopic?: RawTopicPreview[]; +}; + +export type ACFThematics = { + postsInThematic: RawArticle[]; +}; + +export type ACFTopics = { + officialWebsite: string; + postsInTopic: RawArticle[]; +}; + +export type ContentParts = { + afterMore: string; + beforeMore: string; +}; + +export type Info = { + readingTime: number; + wordsCount: number; +}; + +export type RawAuthor = { + description?: T extends 'page' ? string | undefined : never; + gravatarUrl?: string; + name: string; + url?: string; +}; + +export type RawComment = { + approved: boolean; + author: NodeResponse>; + content: string; + databaseId: number; + date: string; + parentDatabaseId: number; +}; + +export type RawCover = { + altText: string; + mediaDetails: { + width: number; + height: number; + }; + sourceUrl: string; + title?: string; +}; + +export type RawArticle = RawPage & { + acfPosts: ACFPosts; + commentCount: number | null; +}; + +export type RawArticlePreview = Pick< + RawArticle, + 'databaseId' | 'date' | 'featuredImage' | 'slug' | 'title' +>; + +export type RawPage = { + author: NodeResponse>; + contentParts: ContentParts; + databaseId: number; + date: string; + featuredImage: NodeResponse | null; + info: Info; + modified: string; + seo?: RawSEO; + slug: string; + title: string; +}; + +export type RawSEO = { + metaDesc: string; + title: string; +}; + +export type RawThematic = RawPage & { + acfThematics: ACFThematics; +}; + +export type RawThematicPreview = Pick< + RawThematic, + 'databaseId' | 'slug' | 'title' +>; + +export type RawTopic = RawPage & { + acfTopics: ACFTopics; +}; + +export type RawTopicPreview = Pick; + +export type TotalItems = { + pageInfo: Pick; +}; diff --git a/src/utils/helpers/author.ts b/src/utils/helpers/author.ts new file mode 100644 index 0000000..cf125fc --- /dev/null +++ b/src/utils/helpers/author.ts @@ -0,0 +1,32 @@ +import { type Author, type AuthorKind } from '@ts/types/app'; +import { type RawAuthor } from '@ts/types/raw-data'; + +/** + * Convert author raw data to regular data. + * + * @param {RawAuthor} data - The author raw data. + * @param {AuthorKind} kind - The author kind. Either `page` or `comment`. + * @param {number} [avatarSize] - The author avatar size. + * @returns {Author} The author data. + */ +export const getAuthorFromRawData = ( + data: RawAuthor, + kind: AuthorKind, + avatarSize: number = 80 +): Author => { + const { name, description, gravatarUrl, url } = data; + + return { + name, + avatar: gravatarUrl + ? { + alt: `${name} avatar`, + height: avatarSize, + src: gravatarUrl, + width: avatarSize, + } + : undefined, + description, + website: url, + }; +}; diff --git a/src/utils/helpers/dates.ts b/src/utils/helpers/dates.ts new file mode 100644 index 0000000..fa167a7 --- /dev/null +++ b/src/utils/helpers/dates.ts @@ -0,0 +1,55 @@ +import { Dates } from '@ts/types/app'; +import { settings } from '@utils/config'; + +/** + * Format a date based on a locale. + * + * @param {string} date - The date. + * @param {string} [locale] - A locale. + * @returns {string} The locale date string. + */ +export const getFormattedDate = ( + date: string, + locale: string = settings.locales.defaultLocale +): string => { + const dateOptions: Intl.DateTimeFormatOptions = { + day: 'numeric', + month: 'long', + year: 'numeric', + }; + + return new Date(date).toLocaleDateString(locale, dateOptions); +}; + +/** + * Format a time based on a locale. + * + * @param {string} time - The time. + * @param {string} [locale] - A locale. + * @returns {string} The locale time string. + */ +export const getFormattedTime = ( + time: string, + locale: string = settings.locales.defaultLocale +): string => { + const formattedTime = new Date(time).toLocaleTimeString(locale, { + hour: 'numeric', + minute: 'numeric', + }); + + return locale === 'fr' ? formattedTime.replace(':', 'h') : formattedTime; +}; + +/** + * Retrieve a Dates object. + * + * @param publication - The publication date. + * @param update - The update date. + * @returns {Dates} A Dates object. + */ +export const getDates = (publication: string, update: string): Dates => { + return { + publication: getFormattedDate(publication), + update: getFormattedDate(update), + }; +}; diff --git a/src/utils/helpers/images.ts b/src/utils/helpers/images.ts new file mode 100644 index 0000000..30bb8be --- /dev/null +++ b/src/utils/helpers/images.ts @@ -0,0 +1,18 @@ +import { Image } from '@ts/types/app'; +import { RawCover } from '@ts/types/raw-data'; + +/** + * Retrieve an Image object from raw data. + * + * @param image - The cover raw data. + * @returns {Image} - An Image object. + */ +export const getImageFromRawData = (image: RawCover): Image => { + return { + alt: image.altText, + height: image.mediaDetails.height, + src: image.sourceUrl, + title: image.title, + width: image.mediaDetails.width, + }; +}; diff --git a/src/utils/helpers/pages.ts b/src/utils/helpers/pages.ts new file mode 100644 index 0000000..d757f8c --- /dev/null +++ b/src/utils/helpers/pages.ts @@ -0,0 +1,26 @@ +import { type PageLink } from '@ts/types/app'; +import { + type RawThematicPreview, + type RawTopicPreview, +} from '@ts/types/raw-data'; + +/** + * Convert raw data to a Link object. + * + * @param data - An object. + * @param {number} data.databaseId - The data id. + * @param {string} data.slug - The data slug. + * @param {string} data.title - The data name. + * @returns {PageLink} The link data (id, slug and title). + */ +export const getPageLinkFromRawData = ( + data: RawThematicPreview | RawTopicPreview +): PageLink => { + const { databaseId, slug, title } = data; + + return { + id: databaseId, + name: title, + slug, + }; +}; diff --git a/src/utils/helpers/rss.ts b/src/utils/helpers/rss.ts index 10a8e77..95d3b7b 100644 --- a/src/utils/helpers/rss.ts +++ b/src/utils/helpers/rss.ts @@ -1,20 +1,26 @@ -import { getPostsTotal, getPublishedPosts } from '@services/graphql/queries'; -import { ArticlePreview } from '@ts/types/articles'; -import { PostsList } from '@ts/types/blog'; +import { getArticles, getTotalArticles } from '@services/graphql/articles'; +import { Article } from '@ts/types/app'; import { settings } from '@utils/config'; import { Feed } from 'feed'; -const getAllPosts = async (): Promise => { - const totalPosts = await getPostsTotal(); - const posts: ArticlePreview[] = []; +/** + * Retrieve the data for all the articles. + * + * @returns {Promise} - All the articles. + */ +const getAllArticles = async (): Promise => { + const totalArticles = await getTotalArticles(); + const { articles } = await getArticles({ first: totalArticles }); - const postsList: PostsList = await getPublishedPosts({ first: totalPosts }); - posts.push(...postsList.posts); - - return posts; + return articles; }; -export const generateFeed = async () => { +/** + * Generate a new feed. + * + * @returns {Promise} - The feed. + */ +export const generateFeed = async (): Promise => { const author = { name: settings.name, email: process.env.APP_AUTHOR_EMAIL, @@ -38,16 +44,16 @@ export const generateFeed = async () => { title, }); - const posts = await getAllPosts(); + const articles = await getAllArticles(); - posts.forEach((post) => { + articles.forEach((article) => { feed.addItem({ - content: post.intro, - date: new Date(post.dates.publication), - description: post.intro, - id: post.id, - link: `${settings.url}/article/${post.slug}`, - title: post.title, + content: article.intro, + date: new Date(article.meta!.dates.publication), + description: article.intro, + id: `${article.id}`, + link: `${settings.url}/article/${article.slug}`, + title: article.title, }); }); -- 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/services/graphql/articles.query.ts') 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} + + + + + + +