diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-11-06 18:08:04 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:15:27 +0100 |
| commit | c9c1c90b30e243563bb4f731da15b3fe657556d2 (patch) | |
| tree | 8263c176b4096e2893b9d9319bfa7edb01fce188 /src/components/organisms/layout/posts-list.tsx | |
| parent | 2771de88f40a5f4ed7480bd8614532dda72deeda (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.tsx | 32 |
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> |
