refactor(hooks): rewrite usePagination hook

* replace `isLoadingInitialData` with `isLoading` & `isRefreshing`
* rename `fallbackData` prop to `fallback`
* replace `setSize` return with a `loadMore` callback
* add tests

2 files changed, 11 insertions, 22 deletions

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index accd314..d74124e 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -3,7 +3,6 @@ import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import {
   getLayout,
@@ -108,20 +107,17 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
   const {
     data,
     error,
-    isLoadingInitialData,
+    isLoading,
     isLoadingMore,
+    isRefreshing,
     hasNextPage,
-    setSize,
+    loadMore,
   } = usePagination<RawArticle>({
-    fallbackData: [articles],
+    fallback: [articles],
     fetcher: getArticles,
     perPage: blog.postsPerPage,
   });
 
-  const loadMore = useCallback(() => {
-    setSize((prevSize) => prevSize + 1);
-  }, [setSize]);
-
   const thematicsListTitle = intl.formatMessage({
     defaultMessage: 'Thematics',
     description: 'BlogPage: thematics list widget title',
@@ -214,7 +210,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
           <PostsList
             baseUrl={postsListBaseUrl}
             byYear={true}
-            isLoading={isLoadingMore ?? isLoadingInitialData}
+            isLoading={isLoading || isLoadingMore || isRefreshing}
             loadMore={loadMore}
             posts={getPostsList(data)}
             showLoadMoreBtn={hasNextPage}
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 12a482d..a0e5057 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -3,7 +3,6 @@ import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import {
   getLayout,
@@ -119,15 +118,16 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
   const {
     data,
     error,
-    isLoadingInitialData,
+    isLoading,
     isLoadingMore,
+    isRefreshing,
     hasNextPage,
-    setSize,
+    loadMore,
   } = usePagination<RawArticle>({
-    fallbackData: [],
+    fallback: [],
     fetcher: getArticles,
     perPage: blog.postsPerPage,
-    search: query.s as string,
+    searchQuery: query.s as string,
   });
 
   const totalArticles = useDataFromAPI<number>(async () =>
@@ -156,13 +156,6 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
       ]
     : [];
 
-  /**
-   * Load more posts handler.
-   */
-  const loadMore = useCallback(() => {
-    setSize((prevSize) => prevSize + 1);
-  }, [setSize]);
-
   const thematicsListTitle = intl.formatMessage({
     defaultMessage: 'Thematics',
     description: 'SearchPage: thematics list widget title',
@@ -238,7 +231,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
           <PostsList
             baseUrl={postsListBaseUrl}
             byYear={true}
-            isLoading={isLoadingMore ?? isLoadingInitialData}
+            isLoading={isLoading || isLoadingMore || isRefreshing}
             loadMore={loadMore}
             posts={getPostsList(data)}
             showLoadMoreBtn={hasNextPage}