diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-23 14:07:02 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-23 16:00:13 +0200 |
| commit | 34e216546151eaf8a0a3cbb0bc8b65dae4c63bf2 (patch) | |
| tree | bff34f8a1dc65f0559ddf851433f242edb092824 /src/pages | |
| parent | 0f8f963ba3eccd7fd94785bf7fb216b6287cec57 (diff) | |
refactor: reduce the number of data transformation
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/article/[slug].tsx | 43 | ||||
| -rw-r--r-- | src/pages/blog/index.tsx | 75 | ||||
| -rw-r--r-- | src/pages/blog/page/[number].tsx | 66 | ||||
| -rw-r--r-- | src/pages/projets/[slug].tsx | 14 | ||||
| -rw-r--r-- | src/pages/projets/index.tsx | 4 | ||||
| -rw-r--r-- | src/pages/recherche/index.tsx | 76 | ||||
| -rw-r--r-- | src/pages/sujet/[slug].tsx | 28 | ||||
| -rw-r--r-- | src/pages/thematique/[slug].tsx | 28 |
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} |
