summaryrefslogtreecommitdiffstats
path: root/src/pages
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-05-23 14:07:02 +0200
committerArmand Philippot <git@armandphilippot.com>2022-05-23 16:00:13 +0200
commit34e216546151eaf8a0a3cbb0bc8b65dae4c63bf2 (patch)
treebff34f8a1dc65f0559ddf851433f242edb092824 /src/pages
parent0f8f963ba3eccd7fd94785bf7fb216b6287cec57 (diff)
refactor: reduce the number of data transformation
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/article/[slug].tsx43
-rw-r--r--src/pages/blog/index.tsx75
-rw-r--r--src/pages/blog/page/[number].tsx66
-rw-r--r--src/pages/projets/[slug].tsx14
-rw-r--r--src/pages/projets/index.tsx4
-rw-r--r--src/pages/recherche/index.tsx76
-rw-r--r--src/pages/sujet/[slug].tsx28
-rw-r--r--src/pages/thematique/[slug].tsx28
8 files changed, 39 insertions, 295 deletions
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 812fffe..2878538 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -18,11 +18,8 @@ import {
type NextPageWithLayout,
} from '@ts/types/app';
import { loadTranslation, type Messages } from '@utils/helpers/i18n';
-import useAddClassName from '@utils/hooks/use-add-classname';
-import useAttributes from '@utils/hooks/use-attributes';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import usePrism, { type OptionalPrismPlugin } from '@utils/hooks/use-prism';
-import useQuerySelectorAll from '@utils/hooks/use-query-selector-all';
import useReadingTime from '@utils/hooks/use-reading-time';
import useSettings from '@utils/hooks/use-settings';
import { GetStaticPaths, GetStaticProps } from 'next';
@@ -66,12 +63,15 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
title,
url: `/article/${slug}`,
});
- const readingTime = useReadingTime(wordsCount || 0, true);
+ const readingTime = useReadingTime(wordsCount, true);
const headerMeta: PageLayoutProps['headerMeta'] = {
author: author?.name,
publication: { date: dates.publication },
- update: dates.update ? { date: dates.update } : undefined,
+ update:
+ dates.update && dates.publication !== dates.update
+ ? { date: dates.update }
+ : undefined,
readingTime,
thematics:
thematics &&
@@ -167,35 +167,6 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
'@graph': [webpageSchema, blogSchema, blogPostSchema],
};
- /**
- * Convert the comments list to the right format.
- *
- * @param {Comment[]} list - The comments list.
- * @returns {PageLayoutProps['comments']} - The formatted comments list.
- */
- const getCommentsList = (list: Comment[]): PageLayoutProps['comments'] => {
- return list.map((comment) => {
- const {
- content: commentBody,
- id: commentId,
- meta: commentMeta,
- parentId,
- replies,
- } = comment;
- const { author: commentAuthor, date } = commentMeta;
- const { name, avatar, website: authorUrl } = commentAuthor;
-
- return {
- author: { name, avatar: avatar!.src, url: authorUrl },
- content: commentBody,
- id: commentId,
- publication: date,
- child: getCommentsList(replies),
- parentId,
- };
- });
- };
-
const prismPlugins: OptionalPrismPlugin[] = ['command-line', 'line-numbers'];
const { attributes, className } = usePrism({ plugins: prismPlugins });
const lineNumbersClassName = className
@@ -254,7 +225,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
bodyClassName={styles.body}
breadcrumb={breadcrumbItems}
breadcrumbSchema={breadcrumbSchema}
- comments={data && getCommentsList(data)}
+ comments={data}
footerMeta={footerMeta}
headerMeta={headerMeta}
id={id as number}
@@ -314,7 +285,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
return {
paths,
- fallback: true,
+ fallback: false,
};
};
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 90f56be..dd04fad 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,34 +1,27 @@
import Notice from '@components/atoms/layout/notice';
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
import LinksListWidget from '@components/organisms/widgets/links-list-widget';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout from '@components/templates/page/page-layout';
import { type EdgesResponse } from '@services/graphql/api';
-import {
- getArticleFromRawData,
- getArticles,
- getTotalArticles,
-} from '@services/graphql/articles';
+import { getArticles, getTotalArticles } from '@services/graphql/articles';
import {
getThematicsPreview,
getTotalThematics,
} from '@services/graphql/thematics';
import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
+import { type NextPageWithLayout } from '@ts/types/app';
import {
- type Article,
- type Meta,
- type NextPageWithLayout,
-} from '@ts/types/app';
-import {
- RawThematicPreview,
- RawTopicPreview,
type RawArticle,
+ type RawThematicPreview,
+ type RawTopicPreview,
} from '@ts/types/raw-data';
import { settings } from '@utils/config';
import { loadTranslation, type Messages } from '@utils/helpers/i18n';
import {
getLinksListItems,
getPageLinkFromRawData,
+ getPostsList,
} from '@utils/helpers/pages';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import usePagination from '@utils/hooks/use-pagination';
@@ -119,62 +112,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
'@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<RawArticle>[]} rawData - The raw data.
- * @returns {Post[]} An array of posts.
- */
- const getPostsList = (rawData: EdgesResponse<RawArticle>[]): Post[] => {
- const articlesList: RawArticle[] = [];
- rawData.forEach((articleData) =>
- articleData.edges.forEach((edge) => {
- articlesList.push(edge.node);
- })
- );
-
- return getPosts(
- articlesList.map((article) => getArticleFromRawData(article))
- );
- };
-
const {
data,
error,
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index e8c93f7..8f50ddd 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -1,10 +1,9 @@
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
import LinksListWidget from '@components/organisms/widgets/links-list-widget';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout from '@components/templates/page/page-layout';
import { type EdgesResponse } from '@services/graphql/api';
import {
- getArticleFromRawData,
getArticles,
getArticlesEndCursor,
getTotalArticles,
@@ -14,11 +13,7 @@ import {
getTotalThematics,
} from '@services/graphql/thematics';
import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
-import {
- type Article,
- type Meta,
- type NextPageWithLayout,
-} from '@ts/types/app';
+import { type NextPageWithLayout } from '@ts/types/app';
import {
type RawArticle,
type RawThematicPreview,
@@ -29,6 +24,7 @@ import { loadTranslation, type Messages } from '@utils/helpers/i18n';
import {
getLinksListItems,
getPageLinkFromRawData,
+ getPostsList,
} from '@utils/helpers/pages';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import useRedirection from '@utils/hooks/use-redirection';
@@ -131,62 +127,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
'@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<RawArticle>[]} rawData - The raw data.
- * @returns {Post[]} An array of posts.
- */
- const getPostsList = (rawData: EdgesResponse<RawArticle>[]): 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',
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index e9b36fa..27c715d 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -1,14 +1,18 @@
import Link from '@components/atoms/links/link';
-import SocialLink, { SocialWebsite } from '@components/atoms/links/social-link';
+import SocialLink, {
+ type SocialWebsite,
+} from '@components/atoms/links/social-link';
import Spinner from '@components/atoms/loaders/spinner';
import ResponsiveImage from '@components/molecules/images/responsive-image';
import Code from '@components/molecules/layout/code';
import Gallery from '@components/organisms/images/gallery';
-import Overview, { OverviewMeta } from '@components/organisms/layout/overview';
+import Overview, {
+ type OverviewMeta,
+} from '@components/organisms/layout/overview';
import Sharing from '@components/organisms/widgets/sharing';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout, {
- PageLayoutProps,
+ type PageLayoutProps,
} from '@components/templates/page/page-layout';
import styles from '@styles/pages/project.module.scss';
import {
@@ -16,11 +20,11 @@ import {
type ProjectPreview,
type Repos,
} from '@ts/types/app';
-import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
import { getProjectData, getProjectFilenames } from '@utils/helpers/projects';
import { capitalize } from '@utils/helpers/strings';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
-import useGithubApi, { RepoData } from '@utils/hooks/use-github-api';
+import useGithubApi, { type RepoData } from '@utils/hooks/use-github-api';
import useSettings from '@utils/hooks/use-settings';
import { MDXComponents, NestedMDXComponents } from 'mdx/types';
import { GetStaticPaths, GetStaticProps } from 'next';
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index d500b6b..9ca289a 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -1,13 +1,13 @@
import Link from '@components/atoms/links/link';
import CardsList, {
- CardsListItem,
+ type CardsListItem,
} from '@components/organisms/layout/cards-list';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout from '@components/templates/page/page-layout';
import PageContent, { meta } from '@content/pages/projects.mdx';
import styles from '@styles/pages/projects.module.scss';
import { type NextPageWithLayout, type ProjectCard } from '@ts/types/app';
-import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
import { getProjectsCard } from '@utils/helpers/projects';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import useSettings from '@utils/hooks/use-settings';
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 8895015..c69d931 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -1,34 +1,26 @@
import Notice from '@components/atoms/layout/notice';
import Spinner from '@components/atoms/loaders/spinner';
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
import LinksListWidget from '@components/organisms/widgets/links-list-widget';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout from '@components/templates/page/page-layout';
-import { type EdgesResponse } from '@services/graphql/api';
-import {
- getArticleFromRawData,
- getArticles,
- getTotalArticles,
-} from '@services/graphql/articles';
+import { getArticles, getTotalArticles } from '@services/graphql/articles';
import {
getThematicsPreview,
getTotalThematics,
} from '@services/graphql/thematics';
import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
+import { type NextPageWithLayout } from '@ts/types/app';
import {
- type Article,
- type Meta,
- type NextPageWithLayout,
-} from '@ts/types/app';
-import {
- RawThematicPreview,
- RawTopicPreview,
type RawArticle,
+ type RawThematicPreview,
+ type RawTopicPreview,
} from '@ts/types/raw-data';
import { loadTranslation, type Messages } from '@utils/helpers/i18n';
import {
getLinksListItems,
getPageLinkFromRawData,
+ getPostsList,
} from '@utils/helpers/pages';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import useDataFromAPI from '@utils/hooks/use-data-from-api';
@@ -146,62 +138,6 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
);
/**
- * 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<RawArticle>[]} rawData - The raw data.
- * @returns {Post[]} An array of posts.
- */
- const getPostsList = (rawData: EdgesResponse<RawArticle>[]): 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 = () => {
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index b4845eb..95843cd 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -1,6 +1,6 @@
import Heading from '@components/atoms/headings/heading';
import ResponsiveImage from '@components/molecules/images/responsive-image';
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
import LinksListWidget from '@components/organisms/widgets/links-list-widget';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout, {
@@ -14,7 +14,6 @@ import {
} from '@services/graphql/topics';
import styles from '@styles/pages/topic.module.scss';
import {
- type Article,
type NextPageWithLayout,
type PageLink,
type Topic,
@@ -23,7 +22,7 @@ import { loadTranslation, type Messages } from '@utils/helpers/i18n';
import {
getLinksListItems,
getPageLinkFromRawData,
- getPostMeta,
+ getPostsWithUrl,
} from '@utils/helpers/pages';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import useSettings from '@utils/hooks/use-settings';
@@ -109,27 +108,6 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
'@graph': [webpageSchema, articleSchema],
};
- const getPosts = (array: Article[]): Post[] => {
- return array.map((article) => {
- const {
- intro: articleIntro,
- meta: articleMeta,
- slug: articleSlug,
- ...remainingData
- } = article;
-
- const { cover: articleCover, ...remainingMeta } = articleMeta;
-
- return {
- cover: articleCover,
- excerpt: articleIntro,
- meta: getPostMeta(remainingMeta),
- url: `/article/${articleSlug}`,
- ...remainingData,
- };
- });
- };
-
const topicsListTitle = intl.formatMessage({
defaultMessage: 'Other topics',
description: 'TopicPage: other topics list widget title',
@@ -206,7 +184,7 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
</Heading>
<PostsList
baseUrl="/sujet/page/"
- posts={getPosts(articles)}
+ posts={getPostsWithUrl(articles)}
total={articles.length}
titleLevel={3}
byYear={true}
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index ce4eccf..a91483e 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -1,5 +1,5 @@
import Heading from '@components/atoms/headings/heading';
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
import LinksListWidget from '@components/organisms/widgets/links-list-widget';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout, {
@@ -12,7 +12,6 @@ import {
getTotalThematics,
} from '@services/graphql/thematics';
import {
- type Article,
type NextPageWithLayout,
type PageLink,
type Thematic,
@@ -21,7 +20,7 @@ import { loadTranslation, type Messages } from '@utils/helpers/i18n';
import {
getLinksListItems,
getPageLinkFromRawData,
- getPostMeta,
+ getPostsWithUrl,
} from '@utils/helpers/pages';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import useSettings from '@utils/hooks/use-settings';
@@ -99,27 +98,6 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
'@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 thematicsListTitle = intl.formatMessage({
defaultMessage: 'Other thematics',
description: 'ThematicPage: other thematics list widget title',
@@ -187,7 +165,7 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
</Heading>
<PostsList
baseUrl="/thematique/page/"
- posts={getPosts(articles)}
+ posts={getPostsWithUrl(articles)}
total={articles.length}
titleLevel={3}
byYear={true}