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/topics.query.ts | 117 +++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 src/services/graphql/topics.query.ts (limited to 'src/services/graphql/topics.query.ts') diff --git a/src/services/graphql/topics.query.ts b/src/services/graphql/topics.query.ts new file mode 100644 index 0000000..8783799 --- /dev/null +++ b/src/services/graphql/topics.query.ts @@ -0,0 +1,117 @@ +/** + * Query the full topic data using its slug. + */ +export const topicBySlugQuery = `query TopicBy($slug: ID!) { + topic(id: $slug, idType: SLUG) { + acfTopics { + officialWebsite + postsInTopic { + ... on Post { + acfPosts { + postsInThematic { + ... on Thematic { + databaseId + slug + title + } + } + } + commentCount + contentParts { + beforeMore + } + databaseId + date + featuredImage { + node { + altText + mediaDetails { + height + width + } + sourceUrl + title + } + } + info { + readingTime + wordsCount + } + modified + slug + title + } + } + } + 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 topics. + */ +export const topicsListQuery = `query TopicsList($after: String = "", $first: Int = 10) { + topics( + after: $after + first: $first + where: {orderby: {field: TITLE, order: ASC}, status: PUBLISH} + ) { + edges { + cursor + node { + databaseId + slug + title + } + } + pageInfo { + endCursor + hasNextPage + total + } + } +}`; + +/** + * Query an array of topics slug. + */ +export const topicsSlugQuery = `query TopicsSlug($first: Int = 10, $after: String = "") { + topics(after: $after, first: $first) { + edges { + cursor + node { + slug + } + } + pageInfo { + total + } + } +}`; -- cgit v1.2.3 From 06ea295857e508a830669cb402d2156204309b1e Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 13 May 2022 16:28:06 +0200 Subject: chore: add blog page widgets --- src/pages/blog/index.tsx | 90 +++++++++++++++++++++++++++++---- src/services/graphql/api.ts | 10 +++- src/services/graphql/thematics.query.ts | 11 ++++ src/services/graphql/thematics.ts | 34 +++++++++++++ src/services/graphql/topics.query.ts | 11 ++++ src/services/graphql/topics.ts | 42 +++++++++++++++ 6 files changed, 188 insertions(+), 10 deletions(-) create mode 100644 src/services/graphql/thematics.ts create mode 100644 src/services/graphql/topics.ts (limited to 'src/services/graphql/topics.query.ts') diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 1e7581c..05e73db 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -1,5 +1,9 @@ +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 PageLayout from '@components/templates/page/page-layout'; import { type EdgesResponse } from '@services/graphql/api'; import { @@ -7,8 +11,17 @@ import { 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 { type RawArticle } from '@ts/types/raw-data'; +import { + RawThematicPreview, + RawTopicPreview, + type RawArticle, +} from '@ts/types/raw-data'; import { settings } from '@utils/config'; import { loadTranslation, type Messages } from '@utils/helpers/i18n'; import usePagination from '@utils/hooks/use-pagination'; @@ -22,6 +35,8 @@ import { Blog, Graph, WebPage } from 'schema-dts'; type BlogPageProps = { articles: EdgesResponse; + thematicsList: RawThematicPreview[]; + topicsList: RawTopicPreview[]; totalArticles: number; translation: Messages; }; @@ -29,7 +44,12 @@ type BlogPageProps = { /** * Blog index page. */ -const BlogPage: NextPage = ({ articles, totalArticles }) => { +const BlogPage: NextPage = ({ + articles, + thematicsList, + topicsList, + totalArticles, +}) => { const intl = useIntl(); const title = intl.formatMessage({ defaultMessage: 'Blog', @@ -183,6 +203,32 @@ const BlogPage: NextPage = ({ articles, totalArticles }) => { setSize((prevSize) => prevSize + 1); }; + const getLinksListItems = ( + rawData: RawThematicPreview[] | RawTopicPreview[], + kind: 'thematic' | 'topic' + ): LinksListItems[] => { + const baseUrl = kind === 'thematic' ? '/thematique/' : '/sujet/'; + + return rawData.map((taxonomy) => { + return { + name: taxonomy.title, + url: `${baseUrl}${taxonomy.slug}`, + }; + }); + }; + + 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 ( <> @@ -202,6 +248,20 @@ const BlogPage: NextPage = ({ articles, totalArticles }) => { title={title} breadcrumb={breadcrumb} headerMeta={{ total: postsCount }} + widgets={[ + , + , + ]} > {data && ( = ({ articles, totalArticles }) => { total={totalArticles} /> )} - {error && - intl.formatMessage({ - defaultMessage: 'Failed to load.', - description: 'BlogPage: failed to load text', - id: 'C/XGkH', - })} + {error && ( + + )} ); }; -export const getStaticProps: GetStaticProps = async ({ locale }) => { +export const getStaticProps: GetStaticProps = async ({ + locale, +}) => { const articles = await getArticles({ first: settings.postsPerPage }); const totalArticles = await getTotalArticles(); + const totalThematics = await getTotalThematics(); + const thematics = await getThematicsPreview({ first: totalThematics }); + const totalTopics = await getTotalTopics(); + const topics = await getTopicsPreview({ first: totalTopics }); const translation = await loadTranslation(locale); return { props: { articles: JSON.parse(JSON.stringify(articles)), + thematicsList: thematics.edges.map((edge) => edge.node), + topicsList: topics.edges.map((edge) => edge.node), totalArticles, translation, }, diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts index 9811d86..5bed9f9 100644 --- a/src/services/graphql/api.ts +++ b/src/services/graphql/api.ts @@ -12,11 +12,13 @@ import { thematicBySlugQuery, thematicsListQuery, thematicsSlugQuery, + totalThematicsQuery, } from './thematics.query'; import { topicBySlugQuery, topicsListQuery, topicsSlugQuery, + totalTopicsQuery, } from './topics.query'; export type Mutations = typeof sendMailMutation; @@ -33,7 +35,9 @@ export type Queries = | typeof topicBySlugQuery | typeof topicsListQuery | typeof topicsSlugQuery - | typeof totalArticlesQuery; + | typeof totalArticlesQuery + | typeof totalThematicsQuery + | typeof totalTopicsQuery; export type ArticleResponse = { post: T; @@ -105,6 +109,8 @@ export type ResponseMap = { [topicsListQuery]: TopicsResponse>; [topicsSlugQuery]: TopicsResponse>; [totalArticlesQuery]: ArticlesResponse; + [totalThematicsQuery]: ThematicsResponse; + [totalTopicsQuery]: TopicsResponse; }; export type GraphQLResponse< @@ -162,6 +168,8 @@ export type VariablesMap = { [topicsListQuery]: EdgesVars; [topicsSlugQuery]: EdgesVars; [totalArticlesQuery]: null; + [totalThematicsQuery]: null; + [totalTopicsQuery]: null; }; export type FetchAPIProps = { diff --git a/src/services/graphql/thematics.query.ts b/src/services/graphql/thematics.query.ts index 76949ad..db8e751 100644 --- a/src/services/graphql/thematics.query.ts +++ b/src/services/graphql/thematics.query.ts @@ -114,3 +114,14 @@ export const thematicsSlugQuery = `query ThematicsSlug($first: Int = 10, $after: } } }`; + +/** + * Query the total number of thematics. + */ +export const totalThematicsQuery = `query ThematicsTotal { + thematics { + pageInfo { + total + } + } +}`; diff --git a/src/services/graphql/thematics.ts b/src/services/graphql/thematics.ts new file mode 100644 index 0000000..7003e08 --- /dev/null +++ b/src/services/graphql/thematics.ts @@ -0,0 +1,34 @@ +import { RawThematicPreview, TotalItems } from '@ts/types/raw-data'; +import { EdgesResponse, EdgesVars, fetchAPI, getAPIUrl } from './api'; +import { thematicsListQuery, totalThematicsQuery } from './thematics.query'; + +/** + * Retrieve the total number of thematics. + * + * @returns {Promise} - The thematics total number. + */ +export const getTotalThematics = async (): Promise => { + const response = await fetchAPI({ + api: getAPIUrl(), + query: totalThematicsQuery, + }); + + return response.thematics.pageInfo.total; +}; + +/** + * Retrieve the given number of thematics from API. + * + * @param {EdgesVars} props - An object of GraphQL variables. + * @returns {Promise>} The thematics data. + */ +export const getThematicsPreview = async ( + props: EdgesVars +): Promise> => { + const response = await fetchAPI< + RawThematicPreview, + typeof thematicsListQuery + >({ api: getAPIUrl(), query: thematicsListQuery, variables: props }); + + return response.thematics; +}; diff --git a/src/services/graphql/topics.query.ts b/src/services/graphql/topics.query.ts index 8783799..6cc525e 100644 --- a/src/services/graphql/topics.query.ts +++ b/src/services/graphql/topics.query.ts @@ -115,3 +115,14 @@ export const topicsSlugQuery = `query TopicsSlug($first: Int = 10, $after: Strin } } }`; + +/** + * Query the total number of topics. + */ +export const totalTopicsQuery = `query TopicsTotal { + topics { + pageInfo { + total + } + } +}`; diff --git a/src/services/graphql/topics.ts b/src/services/graphql/topics.ts new file mode 100644 index 0000000..0f59bad --- /dev/null +++ b/src/services/graphql/topics.ts @@ -0,0 +1,42 @@ +import { RawTopicPreview, TotalItems } from '@ts/types/raw-data'; +import { EdgesResponse, EdgesVars, fetchAPI, getAPIUrl } from './api'; +import { topicsListQuery, totalTopicsQuery } from './topics.query'; + +/** + * Retrieve the total number of topics. + * + * @returns {Promise} - The topics total number. + */ +export const getTotalTopics = async (): Promise => { + const response = await fetchAPI({ + api: getAPIUrl(), + query: totalTopicsQuery, + }); + + return response.topics.pageInfo.total; +}; + +/** + * Retrieve the given number of topics from API. + * + * @param {EdgesVars} props - An object of GraphQL variables. + * @returns {Promise>} The topics data. + */ +export const getTopicsPreview = async ( + props: EdgesVars +): Promise> => { + const response = await fetchAPI({ + api: getAPIUrl(), + query: topicsListQuery, + variables: props, + }); + + return response.topics; +}; + +export const getAllTopicsLinks = async () => { + const allTopics = []; + const initialTopics = await getTopicsPreview({ first: 1 }); + + if (!initialTopics.pageInfo.hasNextPage) return initialTopics; +}; -- cgit v1.2.3 From fe2252ced2bb895e26179640553b5a6c02957d54 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 13 May 2022 22:41:39 +0200 Subject: chore: add Topic pages --- src/pages/sujet/[slug].tsx | 244 +++++++++++++++++++++++++++++++++++ src/services/graphql/topics.query.ts | 7 + src/services/graphql/topics.ts | 135 ++++++++++++++++++- 3 files changed, 380 insertions(+), 6 deletions(-) create mode 100644 src/pages/sujet/[slug].tsx (limited to 'src/services/graphql/topics.query.ts') diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx new file mode 100644 index 0000000..22fb531 --- /dev/null +++ b/src/pages/sujet/[slug].tsx @@ -0,0 +1,244 @@ +import Heading from '@components/atoms/headings/heading'; +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, { + type PageLayoutProps, +} from '@components/templates/page/page-layout'; +import { + getAllTopicsSlugs, + getTopicBySlug, + getTopicsPreview, + getTotalTopics, +} from '@services/graphql/topics'; +import { type Article, type PageLink, type Topic } from '@ts/types/app'; +import { loadTranslation, type Messages } from '@utils/helpers/i18n'; +import { + getLinksListItems, + getPageLinkFromRawData, + getPostMeta, +} from '@utils/helpers/pages'; +import useSettings from '@utils/hooks/use-settings'; +import { GetStaticPaths, GetStaticProps, NextPage } from 'next'; +import Head from 'next/head'; +import { useRouter } from 'next/router'; +import Script from 'next/script'; +import { ParsedUrlQuery } from 'querystring'; +import { useIntl } from 'react-intl'; +import { Article as ArticleSchema, Graph, WebPage } from 'schema-dts'; + +export type TopicPageProps = { + currentTopic: Topic; + topics: PageLink[]; + translation: Messages; +}; + +const TopicPage: NextPage = ({ currentTopic, topics }) => { + const { content, intro, meta, slug, title } = currentTopic; + const { articles, dates, seo, thematics } = meta; + const intl = useIntl(); + 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: 'topic', name: title, url: `/sujet/${slug}` }, + ]; + + const headerMeta: PageLayoutProps['headerMeta'] = { + publication: { date: dates.publication }, + update: dates.update ? { date: dates.update } : undefined, + }; + + const { website } = useSettings(); + const { asPath } = useRouter(); + const pageUrl = `${website.url}${asPath}`; + const pagePublicationDate = new Date(dates.publication); + const pageUpdateDate = dates.update ? new Date(dates.update) : undefined; + + const webpageSchema: WebPage = { + '@id': `${pageUrl}`, + '@type': 'WebPage', + breadcrumb: { '@id': `${website.url}/#breadcrumb` }, + name: seo.title, + description: seo.description, + inLanguage: website.locales.default, + reviewedBy: { '@id': `${website.url}/#branding` }, + url: `${website.url}`, + }; + + const articleSchema: ArticleSchema = { + '@id': `${website.url}/#topic`, + '@type': 'Article', + name: title, + description: intro, + author: { '@id': `${website.url}/#branding` }, + copyrightYear: pagePublicationDate.getFullYear(), + creator: { '@id': `${website.url}/#branding` }, + dateCreated: pagePublicationDate.toISOString(), + dateModified: pageUpdateDate && pageUpdateDate.toISOString(), + datePublished: pagePublicationDate.toISOString(), + editor: { '@id': `${website.url}/#branding` }, + headline: title, + inLanguage: website.locales.default, + isPartOf: { '@id': `${website.url}/blog` }, + license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr', + mainEntityOfPage: { '@id': `${pageUrl}` }, + subjectOf: { '@id': `${website.url}/blog` }, + }; + + const schemaJsonLd: Graph = { + '@context': 'https://schema.org', + '@graph': [webpageSchema, articleSchema], + }; + + const getPosts = (array: Article[]): Post[] => { + return array.map((article) => { + const { + intro: articleIntro, + meta: articleMeta, + slug: articleSlug, + ...remainingData + } = article; + + const { cover, ...remainingMeta } = articleMeta; + + return { + cover, + excerpt: articleIntro, + meta: getPostMeta(remainingMeta), + url: `/article/${articleSlug}`, + ...remainingData, + }; + }); + }; + + const topicsListTitle = intl.formatMessage({ + defaultMessage: 'Other topics', + description: 'TopicPage: other topics list widget title', + id: 'JpC3JH', + }); + + const thematicsListTitle = intl.formatMessage({ + defaultMessage: 'Related thematics', + description: 'TopicPage: related thematics list widget title', + id: '/sRqPT', + }); + + return ( + <> + + {seo.title} + + + + + + +