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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
import { FC } from 'react';
import { useIntl } from 'react-intl';
import Summary, { type SummaryProps } from './summary';
import styles from './posts-list.module.scss';
export type Post = SummaryProps & {
/**
* The post id.
*/
id: string | number;
};
export type YearCollection = {
[key: string]: Post[];
};
export type PostsListProps = {
/**
* True to display the posts by year. Default: false.
*/
byYear?: boolean;
/**
* The posts data.
*/
posts: Post[];
/**
* The posts heading level (hn).
*/
titleLevel?: HeadingLevel;
};
/**
* Create a collection of posts sorted by year.
*
* @param {Posts[]} data - A collection of posts.
* @returns {YearCollection} The posts sorted by year.
*/
const sortPostsByYear = (data: Post[]): YearCollection => {
const yearCollection: YearCollection = {};
data.forEach((post) => {
const postYear = new Date(post.meta.publication!.date)
.getFullYear()
.toString();
yearCollection[postYear] = [...(yearCollection[postYear] || []), post];
});
return yearCollection;
};
/**
* PostsList component
*
* Render a list of post summaries.
*/
const PostsList: FC<PostsListProps> = ({
byYear = false,
posts,
titleLevel,
}) => {
const intl = useIntl();
/**
* Retrieve the list of posts.
*
* @param {Posts[]} data - A collection fo posts.
* @param {HeadingLevel} [headingLevel] - The posts heading level (hn).
* @returns {JSX.Element} The list of posts.
*/
const getList = (
data: Post[],
headingLevel: HeadingLevel = 2
): JSX.Element => {
return (
<ol className={styles.list}>
{data.map(({ id, ...post }) => (
<li key={id} className={styles.item}>
<Summary {...post} titleLevel={headingLevel} />
</li>
))}
</ol>
);
};
/**
* Retrieve the list of posts.
*
* @returns {JSX.Element | JSX.Element[]} - The posts list.
*/
const getPosts = (): JSX.Element | JSX.Element[] => {
if (!byYear) return getList(posts);
const postsPerYear = sortPostsByYear(posts);
const years = Object.keys(postsPerYear).reverse();
return years.map((year) => {
return (
<section key={year} className={styles.section}>
<Heading level={2} className={styles.year}>
{year}
</Heading>
{getList(postsPerYear[year], titleLevel)}
</section>
);
});
};
return posts.length === 0 ? (
<p>
{intl.formatMessage({
defaultMessage: 'No results found.',
description: 'PostsList: no results',
id: 'vK7Sxv',
})}
</p>
) : (
<>{getPosts()}</>
);
};
export default PostsList;
|
