From 56878f647ea0f1066fa3e222d7aa0d83057f496d Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 13 Nov 2023 17:45:59 +0100
Subject: refactor(components): rewrite PostsList component

* remove NoResults component and move logic to Search page
* add a usePostsList hook
* remove Pagination from PostsList (it is only used if javascript is
disabled and not on every posts list)
* replace `byYear` prop with `sortByYear`
* replace `loadMore` prop with `onLoadMore`
* remove `showLoadMoreBtn` (we can use `loadMore` prop instead to
determine if we need to display the button)
* replace `titleLevel` prop with `headingLvl`
* add `firstNewResult` prop to handle focus on the new results when
loading more article (we should not focus a useless span but the item
directly)
---
 src/utils/hooks/use-posts-list/use-posts-list.ts | 66 ++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/utils/hooks/use-posts-list/use-posts-list.ts

(limited to 'src/utils/hooks/use-posts-list/use-posts-list.ts')

diff --git a/src/utils/hooks/use-posts-list/use-posts-list.ts b/src/utils/hooks/use-posts-list/use-posts-list.ts
new file mode 100644
index 0000000..661727f
--- /dev/null
+++ b/src/utils/hooks/use-posts-list/use-posts-list.ts
@@ -0,0 +1,66 @@
+import { useCallback, useState } from 'react';
+import type { PostData } from '../../../components';
+import type { Maybe, RawArticle } from '../../../types';
+import { getPostsList } from '../../helpers';
+import {
+  type UsePaginationConfig,
+  usePagination,
+  type UsePaginationReturn,
+} from '../use-pagination';
+
+export type usePostsListReturn = Omit<
+  UsePaginationReturn<RawArticle>,
+  'data'
+> & {
+  /**
+   * The index of the first new result when loading more posts.
+   */
+  firstNewResultIndex: Maybe<number>;
+  /**
+   * The posts list.
+   */
+  posts: Maybe<PostData[]>;
+};
+
+export const usePostsList = (
+  config: UsePaginationConfig<RawArticle>
+): usePostsListReturn => {
+  const {
+    data,
+    error,
+    hasNextPage,
+    isEmpty,
+    isError,
+    isLoading,
+    isLoadingMore,
+    isRefreshing,
+    isValidating,
+    loadMore,
+    size,
+  } = usePagination(config);
+  const [firstNewResultIndex, setFirstNewResultIndex] =
+    useState<Maybe<number>>(undefined);
+
+  const posts = data ? getPostsList(data) : undefined;
+
+  const handleLoadMore = useCallback(async () => {
+    setFirstNewResultIndex(size * config.perPage + 1);
+
+    await loadMore();
+  }, [config.perPage, loadMore, size]);
+
+  return {
+    error,
+    firstNewResultIndex,
+    hasNextPage,
+    isEmpty,
+    isError,
+    isLoading,
+    isLoadingMore,
+    isRefreshing,
+    isValidating,
+    loadMore: handleLoadMore,
+    posts,
+    size,
+  };
+};
-- 
cgit v1.2.3