From 0ef4f77954ba54b52b96c70a8bffe96804bd222d Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 16 Dec 2021 18:22:08 +0100
Subject: chore: display featuredImage and meta on posts list

---
 src/components/PostsList/PostsList.module.scss |  6 ++++
 src/components/PostsList/PostsList.tsx         | 47 +++++++++-----------------
 2 files changed, 22 insertions(+), 31 deletions(-)

(limited to 'src/components/PostsList')

diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index 9f78f68..fe63cbc 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -2,4 +2,10 @@
 
 .wrapper {
   @extend %reset-ordered-list;
+
+  margin: var(--spacing-md) auto;
+}
+
+li.item {
+  margin: var(--spacing-md) 0;
 }
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 55ca232..31cdbf6 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -1,23 +1,18 @@
-import Link from 'next/link';
 import useSWRInfinite from 'swr/infinite';
 import { t } from '@lingui/macro';
 import { config } from '@config/website';
 import { getPublishedPosts } from '@services/graphql/blog';
-import { ArticlePreview } from '@ts/types/articles';
-import { PageInfo } from '@ts/types/pagination';
+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';
 
 type TitleLevel = 2 | 3 | 4 | 5 | 6;
 
-type DataType = {
-  posts: ArticlePreview;
-  pageInfo: PageInfo;
-};
-
 const PostsList = ({ titleLevel }: { titleLevel: TitleLevel }) => {
   const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
 
-  const getKey = (pageIndex: number, previousData: DataType) => {
+  const getKey = (pageIndex: number, previousData: PostsListData) => {
     if (previousData && !previousData.posts) return null;
 
     const args =
@@ -41,27 +36,18 @@ const PostsList = ({ titleLevel }: { titleLevel: TitleLevel }) => {
     isLoadingInitialData ||
     (size > 0 && data !== undefined && typeof data[size - 1] === 'undefined');
 
-  const getPostsList = () => {
-    if (error) return <div>{t`Failed to load.`}</div>;
-    if (!data) return <div>{t`Loading...`}</div>;
+  if (error) return <div>{t`Failed to load.`}</div>;
+  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}>
-              <article>
-                <header>
-                  <TitleTag>
-                    <Link href={`/article/${post.slug}`}>
-                      <a>{post.title}</a>
-                    </Link>
-                  </TitleTag>
-                </header>
-                <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
-              </article>
+            <li key={post.id} className={styles.item}>
+              <PostPreview post={post} TitleTag={TitleTag} />
             </li>
           );
         });
@@ -72,16 +58,15 @@ const PostsList = ({ titleLevel }: { titleLevel: TitleLevel }) => {
   const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage;
 
   return (
-    <ol className={styles.wrapper}>
-      {getPostsList()}
+    <>
+      <ol className={styles.wrapper}>{getPostsList()}</ol>
       {hasNextPage && (
-        <button
-          disabled={isLoadingMore}
-          type="button"
-          onClick={() => setSize(size + 1)}
-        >{t`Load more?`}</button>
+        <Button
+          isDisabled={isLoadingMore}
+          clickHandler={() => setSize(size + 1)}
+        >{t`Load more?`}</Button>
       )}
-    </ol>
+    </>
   );
 };
 
-- 
cgit v1.2.3