This repository was archived by the owner on Apr 26, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1k
Expand file tree
/
Copy pathblog.tsx
More file actions
84 lines (75 loc) · 2.68 KB
/
blog.tsx
File metadata and controls
84 lines (75 loc) · 2.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { useMemo } from 'react';
import { injectIntl, WrappedComponentProps } from 'react-intl';
import DefaultLayout from '../layouts/default';
import { ArticleComponents, BlogComponents } from '../components';
import BlogNavigation from '../navigations/blog';
import { blogPath } from '../../pathPrefixes';
import { BlogCategory, BlogTemplateContext } from '../types';
import getPaginationPath from '../../util-node/getPaginationPath';
import styles from '../styles/templates/blog.module.scss';
const blogHomeSection = {
title: 'blog.categories.all',
slug: blogPath,
};
const getCategoryName = (category: string) =>
category.length ? `${blogPath}${category}/` : blogPath;
const parseNavigationData = (c: BlogCategory[]) =>
c.map(({ node }) => ({ title: node.slug, slug: `${blogPath}${node.name}/` }));
interface Props {
pageContext: BlogTemplateContext;
}
const BlogTemplate = ({
pageContext: { category, categories, pagination, posts },
intl,
}: Props & WrappedComponentProps): JSX.Element => {
const currentCategory = useMemo(() => {
if (category) {
return {
name: category.name,
slug: intl.formatMessage({ id: category.slug }),
description: intl.formatMessage({ id: category.description }),
};
}
return {
name: '',
slug: intl.formatMessage({ id: 'blog.title' }),
description: intl.formatMessage({ id: 'blog.description' }),
};
}, [category, intl]);
const shouldShowPagination = pagination.total > 1;
return (
<DefaultLayout title="Blogs at Nodejs">
<main className="grid-container">
<BlogNavigation
currentCategory={getCategoryName(currentCategory.name)}
categories={[blogHomeSection, ...parseNavigationData(categories)]}
/>
<div className={styles.blogGridContainer}>
<div className={styles.blogCategoryHeader}>
<h1>{currentCategory.slug}</h1>
<ArticleComponents.BlockQuote>
{currentCategory.description}
</ArticleComponents.BlockQuote>
</div>
<div className={styles.blogItems}>
{posts.map(edge => (
<BlogComponents.BlogCard
key={edge.node.fields.slug}
data={edge}
/>
))}
</div>
{shouldShowPagination && (
<BlogComponents.Pagination
currentPage={pagination.current}
hrefBuilder={getPaginationPath(blogPath, category?.name)}
pageCount={pagination.total}
wrapperClassName={styles.blogPaginationWrapper}
/>
)}
</div>
</main>
</DefaultLayout>
);
};
export default injectIntl(BlogTemplate);