refactor: move SWR to blog page

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

2 files changed, 70 insertions, 50 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;
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 1c3a5d9..29e7770 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -7,12 +7,43 @@ import { seo } from '@config/seo';
 import { config } from '@config/website';
 import { getPublishedPosts } from '@services/graphql/blog';
 import { NextPageWithLayout } from '@ts/types/app';
-import { BlogPageProps } from '@ts/types/blog';
+import { BlogPageProps, PostsList as PostsListData } from '@ts/types/blog';
 import { loadTranslation } from '@utils/helpers/i18n';
 import PostsList from '@components/PostsList/PostsList';
-import { SWRConfig } from 'swr';
+import useSWRInfinite from 'swr/infinite';
+import { Button } from '@components/Buttons';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
+  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,
+    { fallback }
+  );
+
+  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 hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage;
+
   return (
     <>
       <Head>
@@ -20,9 +51,13 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
         <meta name="description" content={seo.blog.description} />
       </Head>
       <h1>{t`Blog`}</h1>
-      <SWRConfig value={{ fallback }}>
-        <PostsList showYears={true} />
-      </SWRConfig>
+      <PostsList data={data} showYears={true} />
+      {hasNextPage && (
+        <Button
+          isDisabled={isLoadingMore}
+          clickHandler={() => setSize(size + 1)}
+        >{t`Load more?`}</Button>
+      )}
     </>
   );
 };