refactor: move SWR to blog page

This way I can reuse PostsList component with another posts fetcher.

1 files changed, 30 insertions, 45 deletions

diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 6e56c24..03e8834 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -1,45 +1,20 @@
-import useSWRInfinite from 'swr/infinite';
 import { t } from '@lingui/macro';
-import { config } from '@config/website';
-import { getPublishedPosts } from '@services/graphql/blog';
 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';
 
-const PostsList = ({ showYears }: { showYears: boolean }) => {
+const PostsList = ({
+  data,
+  showYears,
+}: {
+  data: PostsListData[];
+  showYears: boolean;
+}) => {
   const titleLevel = showYears ? 3 : 2;
 
-  const getKey = (pageIndex: number, previousData: PostsListData) => {
-    if (previousData && !previousData.posts) return null;
-
-    const args =
-      pageIndex === 0
-        ? { first: config.postsPerPage }
-        : {
-            first: config.postsPerPage,
-            after: previousData.pageInfo.endCursor,
-          };
-
-    return args;
-  };
-
-  const { data, error, size, setSize } = useSWRInfinite(
-    getKey,
-    getPublishedPosts
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore: boolean =
-    isLoadingInitialData ||
-    (size > 0 && data !== undefined && typeof data[size - 1] === 'undefined');
-
-  if (error) return <div>{t`Failed to load.`}</div>;
-  if (!data) return <div>{t`Loading...`}</div>;
-
-  const getPostsList = () => {
+  const getPostsListByYear = () => {
     const posts = sortPostsByYear(data);
     const years = Object.keys(posts).reverse();
 
@@ -61,19 +36,29 @@ const PostsList = ({ showYears }: { showYears: boolean }) => {
     });
   };
 
-  const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage;
+  const getPostsList = () => {
+    return data.map((page) => {
+      if (page.posts.length === 0) {
+        return <p>{t`No results found.`}</p>;
+      } else {
+        return (
+          <Fragment key={page.pageInfo.endCursor}>
+            <ol className={styles.list}>
+              {page.posts.map((post) => {
+                return (
+                  <li key={post.id} className={styles.item}>
+                    <PostPreview post={post} titleLevel={titleLevel} />
+                  </li>
+                );
+              })}
+            </ol>
+          </Fragment>
+        );
+      }
+    });
+  };
 
-  return (
-    <>
-      {getPostsList()}
-      {hasNextPage && (
-        <Button
-          isDisabled={isLoadingMore}
-          clickHandler={() => setSize(size + 1)}
-        >{t`Load more?`}</Button>
-      )}
-    </>
-  );
+  return <>{showYears ? getPostsListByYear() : getPostsList()}</>;
 };
 
 export default PostsList;