From 71942c86311a9d1ddf4ae486d811f8393786e855 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 25 Jan 2022 11:47:59 +0100
Subject: chore: display a progress bar before load more button

Since I'm using cursor pagination, users cannot know if there is a lot
of posts available. With this cursor, they can verify the progression.
---
 src/pages/blog/index.tsx      | 31 ++++++++++++++++++++++++++-----
 src/pages/recherche/index.tsx | 31 ++++++++++++++++++++++++++-----
 2 files changed, 52 insertions(+), 10 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index bd27c75..e0d1485 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -19,6 +19,7 @@ import { useEffect, useRef, useState } from 'react';
 import Spinner from '@components/Spinner/Spinner';
 import { Blog as BlogSchema, Graph, WebPage } from 'schema-dts';
 import { useRouter } from 'next/router';
+import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const lastPostRef = useRef<HTMLSpanElement>(null);
@@ -46,6 +47,20 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
     if (data) setTotalPostsCount(data[0].pageInfo.total);
   }, [data]);
 
+  const [loadedPostsCount, setLoadedPostsCount] = useState<number>(
+    config.postsPerPage
+  );
+
+  useEffect(() => {
+    if (data && data.length > 0) {
+      const newCount =
+        config.postsPerPage +
+        data[0].pageInfo.total -
+        data[data.length - 1].pageInfo.total;
+      setLoadedPostsCount(newCount);
+    }
+  }, [data]);
+
   const isLoadingInitialData = !data && !error;
   const isLoadingMore: boolean =
     isLoadingInitialData ||
@@ -122,11 +137,17 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
         <div className={styles.body}>
           {getPostsList()}
           {hasNextPage && (
-            <Button
-              isDisabled={isLoadingMore}
-              clickHandler={loadMorePosts}
-              position="center"
-            >{t`Load more?`}</Button>
+            <>
+              <PaginationCursor
+                current={loadedPostsCount}
+                total={totalPostsCount}
+              />
+              <Button
+                isDisabled={isLoadingMore}
+                clickHandler={loadMorePosts}
+                position="center"
+              >{t`Load more?`}</Button>
+            </>
           )}
         </div>
         <Sidebar position="right" title={t`Filter by`}>
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 771bd3b..f497ca3 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -17,6 +17,7 @@ import Sidebar from '@components/Sidebar/Sidebar';
 import { ThematicsList, TopicsList } from '@components/Widgets';
 import styles from '@styles/pages/Page.module.scss';
 import Spinner from '@components/Spinner/Spinner';
+import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
 
 const Search: NextPageWithLayout = () => {
   const [query, setQuery] = useState('');
@@ -53,6 +54,20 @@ const Search: NextPageWithLayout = () => {
     if (data) setTotalPostsCount(data[0].pageInfo.total);
   }, [data]);
 
+  const [loadedPostsCount, setLoadedPostsCount] = useState<number>(
+    config.postsPerPage
+  );
+
+  useEffect(() => {
+    if (data && data.length > 0) {
+      const newCount =
+        config.postsPerPage +
+        data[0].pageInfo.total -
+        data[data.length - 1].pageInfo.total;
+      setLoadedPostsCount(newCount);
+    }
+  }, [data]);
+
   const isLoadingInitialData = !data && !error;
   const isLoadingMore: boolean =
     isLoadingInitialData ||
@@ -104,11 +119,17 @@ const Search: NextPageWithLayout = () => {
         <div className={styles.body}>
           {getPostsList()}
           {hasNextPage && (
-            <Button
-              isDisabled={isLoadingMore}
-              clickHandler={loadMorePosts}
-              position="center"
-            >{t`Load more?`}</Button>
+            <>
+              <PaginationCursor
+                current={loadedPostsCount}
+                total={totalPostsCount}
+              />
+              <Button
+                isDisabled={isLoadingMore}
+                clickHandler={loadMorePosts}
+                position="center"
+              >{t`Load more?`}</Button>
+            </>
           )}
         </div>
         <Sidebar position="right">
-- 
cgit v1.2.3