From 5b6639a3cf9b6c63045cb82e6ef1a43b0742c367 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 9 Mar 2022 00:38:02 +0100
Subject: feat: provide pagination for users with js disabled (#13)

* chore: add a Pagination component

* chore: add blog pages

* chore: fallback to page number based navigation if JS disabled

* chore: update translation
---
 src/pages/blog/index.tsx | 59 +++++++++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 28 deletions(-)

(limited to 'src/pages/blog/index.tsx')

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 543fad9..366fc28 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@components/Buttons';
 import { getLayout } from '@components/Layouts/Layout';
+import Pagination from '@components/Pagination/Pagination';
 import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
 import PostHeader from '@components/PostHeader/PostHeader';
 import PostsList from '@components/PostsList/PostsList';
@@ -29,12 +30,17 @@ import useSWRInfinite from 'swr/infinite';
 const Blog: NextPageWithLayout<BlogPageProps> = ({
   allThematics,
   allTopics,
-  firstPosts,
+  posts,
   totalPosts,
 }) => {
   const intl = useIntl();
   const lastPostRef = useRef<HTMLSpanElement>(null);
   const router = useRouter();
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (typeof window !== undefined) setIsMounted(true);
+  }, []);
 
   const getKey = (pageIndex: number, previousData: PostsListData) => {
     if (previousData && !previousData.posts) return null;
@@ -50,7 +56,7 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({
   const { data, error, size, setSize } = useSWRInfinite(
     getKey,
     getPublishedPosts,
-    { fallbackData: [firstPosts] }
+    { fallbackData: [posts] }
   );
   const [totalPostsCount, setTotalPostsCount] = useState<number>(totalPosts);
 
@@ -171,31 +177,28 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({
         <PostHeader title={title} meta={{ results: totalPostsCount }} />
         <div className={styles.body}>
           {getPostsList()}
-          {hasNextPage && (
-            <>
-              <PaginationCursor
-                current={loadedPostsCount}
-                total={totalPostsCount}
-              />
-              <Button
-                isDisabled={isLoadingMore}
-                clickHandler={loadMorePosts}
-                position="center"
-                spacing={true}
-              >
-                {intl.formatMessage({
-                  defaultMessage: 'Load more?',
-                  description: 'BlogPage: load more text',
-                })}
-              </Button>
-              <noscript>
-                {intl.formatMessage({
-                  defaultMessage: 'Javascript is required to load more posts.',
-                  description: 'BlogPage: noscript tag',
-                })}
-              </noscript>
-            </>
-          )}
+          {hasNextPage &&
+            (isMounted ? (
+              <>
+                <PaginationCursor
+                  current={loadedPostsCount}
+                  total={totalPostsCount}
+                />
+                <Button
+                  isDisabled={isLoadingMore}
+                  clickHandler={loadMorePosts}
+                  position="center"
+                  spacing={true}
+                >
+                  {intl.formatMessage({
+                    defaultMessage: 'Load more?',
+                    description: 'BlogPage: load more text',
+                  })}
+                </Button>
+              </>
+            ) : (
+              <Pagination baseUrl="/blog" total={totalPostsCount} />
+            ))}
         </div>
         <Sidebar
           position="right"
@@ -246,8 +249,8 @@ export const getStaticProps: GetStaticProps = async (
       allThematics,
       allTopics,
       breadcrumbTitle,
-      firstPosts,
       locale,
+      posts: firstPosts,
       totalPosts,
       translation,
     },
-- 
cgit v1.2.3