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)

1 files changed, 24 insertions, 0 deletions

diff --git a/src/utils/hooks/use-posts-list/use-posts-list.test.ts b/src/utils/hooks/use-posts-list/use-posts-list.test.ts
new file mode 100644
index 0000000..1d11111
--- /dev/null
+++ b/src/utils/hooks/use-posts-list/use-posts-list.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from '@jest/globals';
+import { act, renderHook } from '@testing-library/react';
+import { getArticles } from '../../../services/graphql';
+import { usePostsList } from './use-posts-list';
+
+describe('usePostsList', () => {
+  it('can return the first new result index when loading more posts', async () => {
+    const perPage = 5;
+    const { result } = renderHook(() =>
+      usePostsList({ fetcher: getArticles, perPage })
+    );
+
+    expect.assertions(2);
+
+    expect(result.current.firstNewResultIndex).toBeUndefined();
+
+    await act(async () => {
+      await result.current.loadMore();
+    });
+
+    // Assuming there is more than one page.
+    expect(result.current.firstNewResultIndex).toBe(perPage + 1);
+  });
+});