2 files changed, 41 insertions, 16 deletions
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index c0f8062..6c3f93e 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -33,9 +33,12 @@
 }
 
 li.item {
-  margin: 0 0 var(--spacing-md) 0;
   border-bottom: fun.convert-px(1) solid var(--color-border-light);
 
+  &:not(:last-of-type) {
+    margin: 0 0 var(--spacing-md) 0;
+  }
+
   &:first-of-type {
     margin-top: var(--spacing-sm);
 
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index f401d83..df9dfe4 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -2,22 +2,31 @@ import { t } from '@lingui/macro';
 import { PostsList as PostsListData } from '@ts/types/blog';
 import styles from './PostsList.module.scss';
 import PostPreview from '@components/PostPreview/PostPreview';
-import { Fragment } from 'react';
+import { ForwardedRef, forwardRef, Fragment } from 'react';
 import { sortPostsByYear } from '@utils/helpers/sort';
 
-const PostsList = ({
-  data,
-  showYears,
-}: {
-  data: PostsListData[];
-  showYears: boolean;
-}) => {
+const PostsList = (
+  {
+    data,
+    showYears,
+  }: {
+    data: PostsListData[];
+    showYears: boolean;
+  },
+  ref: ForwardedRef<HTMLSpanElement>
+) => {
   const titleLevel = showYears ? 3 : 2;
 
   const getPostsListByYear = () => {
     const posts = sortPostsByYear(data);
     const years = Object.keys(posts).reverse();
 
+    const getLastPostId = () => {
+      const oldestYear = Object.keys(posts)[0];
+      const lastPost = posts[oldestYear][posts[oldestYear].length - 1];
+      return lastPost.id;
+    };
+
     return years.map((year) => {
       return (
         <section key={year} className={styles.section}>
@@ -29,10 +38,14 @@ const PostsList = ({
           )}
           <ol className={styles.list}>
             {posts[year].map((post) => {
+              const isLastPost = post.id === getLastPostId();
               return (
-                <li key={post.id} className={styles.item}>
-                  <PostPreview post={post} titleLevel={titleLevel} />
-                </li>
+                <Fragment key={post.id}>
+                  <li className={styles.item}>
+                    <PostPreview post={post} titleLevel={titleLevel} />
+                  </li>
+                  {isLastPost && <span ref={ref} tabIndex={-1} />}
+                </Fragment>
               );
             })}
           </ol>
@@ -43,6 +56,11 @@ const PostsList = ({
 
   const getPostsList = () => {
     return data.map((page) => {
+      const getLastPostId = () => {
+        const lastPost = page.posts[page.posts.length - 1];
+        return lastPost.id;
+      };
+
       if (page.posts.length === 0) {
         return <p key="no-result">{t`No results found.`}</p>;
       } else {
@@ -50,10 +68,14 @@ const PostsList = ({
           <Fragment key={page.pageInfo.endCursor}>
             <ol className={styles.list}>
               {page.posts.map((post) => {
+                const isLastPost = post.id === getLastPostId();
                 return (
-                  <li key={post.id} className={styles.item}>
-                    <PostPreview post={post} titleLevel={titleLevel} />
-                  </li>
+                  <Fragment key={post.id}>
+                    <li key={post.id} className={styles.item}>
+                      <PostPreview post={post} titleLevel={titleLevel} />
+                    </li>
+                    {isLastPost && <span ref={ref} tabIndex={-1} />}
+                  </Fragment>
                 );
               })}
             </ol>
@@ -66,4 +88,4 @@ const PostsList = ({
   return <div>{showYears ? getPostsListByYear() : getPostsList()}</div>;
 };
 
-export default PostsList;
+export default forwardRef(PostsList);