aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/layout/posts-list.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-11-06 18:08:04 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:15:27 +0100
commitc9c1c90b30e243563bb4f731da15b3fe657556d2 (patch)
tree8263c176b4096e2893b9d9319bfa7edb01fce188 /src/components/organisms/layout/posts-list.tsx
parent2771de88f40a5f4ed7480bd8614532dda72deeda (diff)
refactor(components): replace Summary component with PostPreview
* rename component to PostPreview because Summary is an HTML element and it could lead to confusion * replace `title` and `titleLevel` with `heading` and `headingLvl` because `title` is a native attribute * rename `intro` prop to `excerpt` * extract `cover` from `meta` prop * rewrite meta type * extract meta logic into a new component
Diffstat (limited to 'src/components/organisms/layout/posts-list.tsx')
-rw-r--r--src/components/organisms/layout/posts-list.tsx32
1 files changed, 22 insertions, 10 deletions
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 36d3c87..40306a6 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -17,18 +17,30 @@ import {
type RenderPaginationItemAriaLabel,
type RenderPaginationLink,
} from '../nav';
+import {
+ PostPreview,
+ type PostPreviewMetaData,
+ type PostPreviewProps,
+} from '../post-preview';
import { NoResults } from './no-results';
import styles from './posts-list.module.scss';
-import { Summary, type SummaryProps } from './summary';
-export type Post = Omit<SummaryProps, 'titleLevel'> & {
+export type PostData = Pick<
+ PostPreviewProps,
+ 'cover' | 'excerpt' | 'heading' | 'url'
+> & {
/**
* The post id.
*/
id: string | number;
+ /**
+ * The post meta.
+ */
+ meta: PostPreviewMetaData &
+ Required<Pick<PostPreviewMetaData, 'publicationDate'>>;
};
-export type YearCollection = Record<string, Post[]>;
+export type YearCollection = Record<string, PostData[]>;
export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
/**
@@ -54,7 +66,7 @@ export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
/**
* The posts data.
*/
- posts: Post[];
+ posts: PostData[];
/**
* Determine if the load more button should be visible.
*/
@@ -72,14 +84,14 @@ export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
/**
* Create a collection of posts sorted by year.
*
- * @param {Posts[]} data - A collection of posts.
+ * @param {PostData[]} data - A collection of posts.
* @returns {YearCollection} The posts sorted by year.
*/
-const sortPostsByYear = (data: Post[]): YearCollection => {
+const sortPostsByYear = (data: PostData[]): YearCollection => {
const yearCollection: Partial<YearCollection> = {};
data.forEach((post) => {
- const postYear = new Date(post.meta.dates.publication)
+ const postYear = new Date(post.meta.publicationDate)
.getFullYear()
.toString();
yearCollection[postYear] = [...(yearCollection[postYear] ?? []), post];
@@ -116,12 +128,12 @@ export const PostsList: FC<PostsListProps> = ({
/**
* Retrieve the list of posts.
*
- * @param {Posts[]} allPosts - A collection fo posts.
+ * @param {PostData[]} allPosts - A collection fo posts.
* @param {HeadingLevel} [headingLevel] - The posts heading level (hn).
* @returns {JSX.Element} The list of posts.
*/
const getList = (
- allPosts: Post[],
+ allPosts: PostData[],
headingLevel: HeadingLevel = 2
): JSX.Element => (
<List
@@ -136,7 +148,7 @@ export const PostsList: FC<PostsListProps> = ({
{allPosts.map(({ id, ...post }) => (
<Fragment key={id}>
<ListItem className={styles.item}>
- <Summary {...post} titleLevel={headingLevel} />
+ <PostPreview {...post} headingLvl={headingLevel} />
</ListItem>
{id === lastPostId && (
<ListItem>