chore: display year between blog posts

4 files changed, 31 insertions, 20 deletions

diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss
index d188b18..ccdae9b 100644
--- a/src/components/PostPreview/PostPreview.module.scss
+++ b/src/components/PostPreview/PostPreview.module.scss
@@ -101,6 +101,7 @@
     .header {
       grid-column: 1;
       grid-row: 1;
+      align-self: center;
     }
 
     .meta {
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index 8f3e0da..3dfef73 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -6,13 +6,17 @@ import ArrowRightIcon from '@assets/images/icon-arrow-right.svg';
 import styles from './PostPreview.module.scss';
 import Image from 'next/image';
 
+type TitleLevel = 2 | 3 | 4 | 5 | 6;
+
 const PostPreview = ({
   post,
-  TitleTag,
+  titleLevel,
 }: {
   post: ArticlePreview;
-  TitleTag: keyof JSX.IntrinsicElements;
+  titleLevel: TitleLevel;
 }) => {
+  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
+
   return (
     <article className={styles.wrapper}>
       {post.featuredImage && (
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index fe63cbc..0b9aa2d 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -1,6 +1,6 @@
 @use "@styles/abstracts/placeholders";
 
-.wrapper {
+.list {
   @extend %reset-ordered-list;
 
   margin: var(--spacing-md) auto;
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 31cdbf6..6e56c24 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -6,11 +6,11 @@ import { PostsList as PostsListData } from '@ts/types/blog';
 import styles from './PostsList.module.scss';
 import PostPreview from '@components/PostPreview/PostPreview';
 import { Button } from '@components/Buttons';
+import { Fragment } from 'react';
+import { sortPostsByYear } from '@utils/helpers/sort';
 
-type TitleLevel = 2 | 3 | 4 | 5 | 6;
-
-const PostsList = ({ titleLevel }: { titleLevel: TitleLevel }) => {
-  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
+const PostsList = ({ showYears }: { showYears: boolean }) => {
+  const titleLevel = showYears ? 3 : 2;
 
   const getKey = (pageIndex: number, previousData: PostsListData) => {
     if (previousData && !previousData.posts) return null;
@@ -40,18 +40,24 @@ const PostsList = ({ titleLevel }: { titleLevel: TitleLevel }) => {
   if (!data) return <div>{t`Loading...`}</div>;
 
   const getPostsList = () => {
-    return data.map((page) => {
-      if (page.posts.length === 0) {
-        return t`No results found.`;
-      } else {
-        return page.posts.map((post) => {
-          return (
-            <li key={post.id} className={styles.item}>
-              <PostPreview post={post} TitleTag={TitleTag} />
-            </li>
-          );
-        });
-      }
+    const posts = sortPostsByYear(data);
+    const years = Object.keys(posts).reverse();
+
+    return years.map((year) => {
+      return (
+        <Fragment key={year}>
+          {showYears && <h2>{year}</h2>}
+          <ol className={styles.list}>
+            {posts[year].map((post) => {
+              return (
+                <li key={post.id} className={styles.item}>
+                  <PostPreview post={post} titleLevel={titleLevel} />
+                </li>
+              );
+            })}
+          </ol>
+        </Fragment>
+      );
     });
   };
 
@@ -59,7 +65,7 @@ const PostsList = ({ titleLevel }: { titleLevel: TitleLevel }) => {
 
   return (
     <>
-      <ol className={styles.wrapper}>{getPostsList()}</ol>
+      {getPostsList()}
       {hasNextPage && (
         <Button
           isDisabled={isLoadingMore}