From 2ff898626c5c0abc6b8195224067b992403e313b Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 18 Dec 2021 16:07:44 +0100 Subject: chore: add subject view --- src/pages/sujet/[slug].tsx | 96 ++++++++++++++++++ src/services/graphql/taxonomies.ts | 186 ++++++++++++++++++++++++++++++++++- src/styles/pages/Subject.module.scss | 26 +++++ src/ts/types/taxonomies.ts | 41 +++++++- 4 files changed, 344 insertions(+), 5 deletions(-) create mode 100644 src/pages/sujet/[slug].tsx create mode 100644 src/styles/pages/Subject.module.scss (limited to 'src') diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx new file mode 100644 index 0000000..a6acf2b --- /dev/null +++ b/src/pages/sujet/[slug].tsx @@ -0,0 +1,96 @@ +import Layout from '@components/Layouts/Layout'; +import PostPreview from '@components/PostPreview/PostPreview'; +import { t } from '@lingui/macro'; +import { + fetchAllSubjectsSlug, + getSubjectBySlug, +} from '@services/graphql/taxonomies'; +import { NextPageWithLayout } from '@ts/types/app'; +import { SubjectProps } from '@ts/types/taxonomies'; +import { loadTranslation } from '@utils/helpers/i18n'; +import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; +import Image from 'next/image'; +import { ParsedUrlQuery } from 'querystring'; +import { ReactElement } from 'react'; +import styles from '@styles/pages/Subject.module.scss'; + +const Subject: NextPageWithLayout = ({ subject }) => { + const getPostsList = () => { + return subject.posts.reverse().map((post) => ( +
  • + +
    • + )); + }; + + return ( +
    +
    +

    + {subject.featuredImage && ( + + {subject.featuredImage.altText} + + )} + {subject.title} +

    + {subject.officialWebsite && ( +
    +
    {t`Official website:`}
    +
    {subject.officialWebsite}
    +
    + )} +
    +
    +
    + {subject.posts.length > 0 && ( +
    +

    {t`All posts in ${subject.title}`}

    +
      {getPostsList()}
    +
    + )} +
    + ); +}; + +Subject.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +interface PostParams extends ParsedUrlQuery { + slug: string; +} + +export const getStaticProps: GetStaticProps = async ( + context: GetStaticPropsContext +) => { + console.log(context); + const translation = await loadTranslation( + context.locale!, + process.env.NODE_ENV === 'production' + ); + const { slug } = context.params as PostParams; + const subject = await getSubjectBySlug(slug); + + return { + props: { + subject, + translation, + }, + }; +}; + +export const getStaticPaths: GetStaticPaths = async () => { + const allSlugs = await fetchAllSubjectsSlug(); + + return { + paths: allSlugs.map((post) => `/sujet/${post.slug}`), + fallback: true, + }; +}; + +export default Subject; diff --git a/src/services/graphql/taxonomies.ts b/src/services/graphql/taxonomies.ts index a14b7cb..ee73dc8 100644 --- a/src/services/graphql/taxonomies.ts +++ b/src/services/graphql/taxonomies.ts @@ -1,9 +1,12 @@ import { ArticlePreview } from '@ts/types/articles'; import { - AllTaxonomiesSlugResponse, + AllSubjectsSlugResponse, + AllThematicsSlugResponse, FetchAllTaxonomiesSlugReturn, + FetchSubjectByReturn, FetchThematicByReturn, GetTaxonomyByReturn, + Subject, Taxonomy, } from '@ts/types/taxonomies'; import { gql } from 'graphql-request'; @@ -157,10 +160,189 @@ export const fetchAllThematicsSlug: FetchAllTaxonomiesSlugReturn = async () => { `; try { - const response: AllTaxonomiesSlugResponse = await client.request(query); + const response: AllThematicsSlugResponse = await client.request(query); return response.thematics.nodes; } catch (error) { console.error(error, undefined, 2); process.exit(1); } }; + +export const fetchSubjectBySlug: FetchSubjectByReturn = async ( + slug: string +) => { + const client = getGraphQLClient(); + const query = gql` + query SubjectBySlug($slug: String!) { + subjectBy(slug: $slug) { + acfSubjects { + officialWebsite + postsInSubject { + ... on Post { + acfPosts { + postsInSubject { + ... on Subject { + databaseId + featuredImage { + node { + altText + sourceUrl + title + } + } + id + slug + title + } + } + postsInThematic { + ... on Thematic { + databaseId + id + slug + title + } + } + } + id + commentCount + contentParts { + beforeMore + } + databaseId + date + featuredImage { + node { + altText + sourceUrl + title + } + } + modified + slug + title + } + } + } + contentParts { + afterMore + beforeMore + } + date + featuredImage { + node { + altText + sourceUrl + title + } + } + modified + seo { + metaDesc + opengraphAuthor + opengraphDescription + opengraphImage { + altText + sourceUrl + srcSet + } + opengraphModifiedTime + opengraphPublishedTime + opengraphPublisher + opengraphSiteName + opengraphTitle + opengraphType + opengraphUrl + readingTime + title + } + title + } + } + `; + + const variables = { slug }; + + try { + const response = client.request(query, variables); + return response; + } catch (error) { + console.error(error, undefined, 2); + process.exit(1); + } +}; + +export const getSubjectBySlug: GetTaxonomyByReturn = async (slug: string) => { + const rawSubject = await fetchSubjectBySlug(slug); + + const content = rawSubject.subjectBy.contentParts.afterMore; + const cover = rawSubject.subjectBy.featuredImage + ? rawSubject.subjectBy.featuredImage.node + : null; + const intro = rawSubject.subjectBy.contentParts.beforeMore; + const rawPosts = rawSubject.subjectBy.acfSubjects.postsInSubject; + console.log(rawPosts); + + // WP GraphQL return empty objects instead of filtering posts that do not + // belong to the queried post type so I need to filter them. + const formattedPosts: ArticlePreview[] = rawPosts + .filter((post) => Object.getOwnPropertyNames(post).length > 0) + .map((post) => { + const content = post.contentParts.beforeMore; + const cover = post.featuredImage ? post.featuredImage.node : null; + const dates = { publication: post.date, update: post.modified }; + const subjects = + post.acfPosts.postsInSubject && post.acfPosts.postsInSubject?.length > 0 + ? post.acfPosts.postsInSubject + : []; + const thematics = + post.acfPosts.postsInThematic && + post.acfPosts.postsInThematic?.length > 0 + ? post.acfPosts.postsInThematic + : []; + + return { + ...post, + content, + featuredImage: cover, + date: dates, + subjects, + thematics, + }; + }); + + const formattedSubject: Subject = { + ...rawSubject.subjectBy, + content, + featuredImage: cover, + intro, + posts: formattedPosts, + }; + + console.log(formattedSubject); + + return formattedSubject; +}; + +export const fetchAllSubjectsSlug: FetchAllTaxonomiesSlugReturn = async () => { + const client = getGraphQLClient(); + + // 10 000 is an arbitrary number for small websites. + const query = gql` + query AllSubjectsSlug { + subjects(first: 10000) { + nodes { + slug + } + } + } + `; + + try { + const response: AllSubjectsSlugResponse = await client.request(query); + return response.subjects.nodes; + } catch (error) { + console.error(error, undefined, 2); + process.exit(1); + } +}; diff --git a/src/styles/pages/Subject.module.scss b/src/styles/pages/Subject.module.scss new file mode 100644 index 0000000..01c3cb8 --- /dev/null +++ b/src/styles/pages/Subject.module.scss @@ -0,0 +1,26 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/placeholders"; + +.title { + display: flex; + flex-flow: row wrap; + align-items: center; + gap: var(--spacing-sm); +} + +.cover { + display: block; + width: fun.convert-px(50); + height: fun.convert-px(50); + position: relative; +} + +.list { + @extend %reset-ordered-list; + + margin: var(--spacing-md) auto; +} + +li.item { + margin: var(--spacing-md) 0; +} diff --git a/src/ts/types/taxonomies.ts b/src/ts/types/taxonomies.ts index d090e2d..a8c372c 100644 --- a/src/ts/types/taxonomies.ts +++ b/src/ts/types/taxonomies.ts @@ -1,5 +1,5 @@ import { ArticlePreview, ArticlePreviewResponse } from './articles'; -import { Cover } from './cover'; +import { Cover, CoverResponse } from './cover'; type TaxonomyPreview = { databaseId: number; @@ -17,7 +17,7 @@ export type Taxonomy = TaxonomyPreview & { }; export type SubjectPreview = TaxonomyPreview & { - cover: Cover; + featuredImage: Cover; }; export type ThematicPreview = TaxonomyPreview; @@ -42,7 +42,7 @@ export type AllTaxonomiesSlug = { slug: string; }; -export type AllTaxonomiesSlugResponse = { +export type AllThematicsSlugResponse = { thematics: { nodes: AllTaxonomiesSlug[]; }; @@ -59,3 +59,38 @@ export type FetchThematicByReturn = ( export type GetTaxonomyByReturn = (slug: string) => Promise; export type FetchAllTaxonomiesSlugReturn = () => Promise; + +export type Subject = Taxonomy & { + featuredImage: Cover; + officialWebsite: string; +}; + +export type SubjectResponse = SubjectPreview & { + acfSubjects: { + postsInSubject: ArticlePreviewResponse[]; + }; + contentParts: { + afterMore: string; + beforeMore: string; + }; + date: string; + featuredImage: CoverResponse; + modified: string; + officialWebsite: string; +}; + +export type SubjectProps = { + subject: Subject; +}; + +export type SubjectByResponse = { + subjectBy: SubjectResponse; +}; + +export type FetchSubjectByReturn = (slug: string) => Promise; + +export type AllSubjectsSlugResponse = { + subjects: { + nodes: AllTaxonomiesSlug[]; + }; +}; -- cgit v1.2.3