refactor(pages): refine Thematic pages

* add a table of contents (however posts heading are
not included)
* rename posts list section title
* add a useThematic hook to refresh thematic contents
* add a useThematicLists hook to refresh thematics list
* add a `notIn` filter in thematics list fetcher to directly
remove unwanted thematics
* add Cypress tests

7 files changed, 189 insertions, 0 deletions

diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
index f3bfd75..3fb0ad4 100644
--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -22,6 +22,8 @@ export * from './use-scroll-lock';
 export * from './use-scroll-position';
 export * from './use-scrollbar-width';
 export * from './use-system-color-scheme';
+export * from './use-thematic';
+export * from './use-thematics-list';
 export * from './use-theme';
 export * from './use-timeout';
 export * from './use-toggle';
diff --git a/src/utils/hooks/use-thematic/index.ts b/src/utils/hooks/use-thematic/index.ts
new file mode 100644
index 0000000..319f4b5
--- /dev/null
+++ b/src/utils/hooks/use-thematic/index.ts
@@ -0,0 +1 @@
+export * from './use-thematic';
diff --git a/src/utils/hooks/use-thematic/use-thematic.test.ts b/src/utils/hooks/use-thematic/use-thematic.test.ts
new file mode 100644
index 0000000..43d0a57
--- /dev/null
+++ b/src/utils/hooks/use-thematic/use-thematic.test.ts
@@ -0,0 +1,56 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { renderHook, waitFor } from '@testing-library/react';
+import { wpThematicsFixture } from '../../../../tests/fixtures';
+import { ROUTES } from '../../constants';
+import { useThematic } from './use-thematic';
+
+describe('useThematic', () => {
+  beforeEach(() => {
+    /* Not sure why it is needed, but without it Jest was complaining with
+     * `Jest worker encountered 4 child process exceptions`... Maybe because of
+     * useSWR? */
+    jest.useFakeTimers({
+      doNotFake: ['queueMicrotask'],
+    });
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  /* eslint-disable max-statements */
+  it('fetch the requested thematic', async () => {
+    const { result } = renderHook(() =>
+      useThematic(wpThematicsFixture[0].slug)
+    );
+
+    // Inaccurate assertions count because of waitFor...
+    //expect.assertions(8);
+    expect.hasAssertions();
+
+    expect(result.current.thematic).toBeUndefined();
+    expect(result.current.isError).toBe(false);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isValidating).toBe(true);
+
+    jest.advanceTimersToNextTimer();
+
+    await waitFor(() =>
+      expect(result.current.thematic?.slug).toBe(
+        `${ROUTES.THEMATICS}/${wpThematicsFixture[0].slug}`
+      )
+    );
+    expect(result.current.isError).toBe(false);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isValidating).toBe(false);
+  });
+  /* eslint-enable max-statements */
+});
diff --git a/src/utils/hooks/use-thematic/use-thematic.ts b/src/utils/hooks/use-thematic/use-thematic.ts
new file mode 100644
index 0000000..68127d2
--- /dev/null
+++ b/src/utils/hooks/use-thematic/use-thematic.ts
@@ -0,0 +1,31 @@
+import useSWR from 'swr';
+import {
+  convertWPThematicToThematic,
+  fetchThematic,
+} from '../../../services/graphql';
+import type { Maybe, Thematic, WPThematic } from '../../../types';
+
+export type UseThematicReturn<T extends Maybe<WPThematic>> = {
+  isError: boolean;
+  isLoading: boolean;
+  isValidating: boolean;
+  thematic: T extends undefined ? Maybe<Thematic> : Thematic;
+};
+
+export const useThematic = <T extends Maybe<WPThematic>>(
+  slug: string,
+  fallback?: T
+): UseThematicReturn<T> => {
+  const { data, error, isLoading, isValidating } = useSWR(slug, fetchThematic, {
+    fallbackData: fallback,
+  });
+
+  if (error) console.error(error);
+
+  return {
+    isError: !!error,
+    isLoading,
+    isValidating,
+    thematic: data ? convertWPThematicToThematic(data) : undefined,
+  } as UseThematicReturn<T>;
+};
diff --git a/src/utils/hooks/use-thematics-list/index.ts b/src/utils/hooks/use-thematics-list/index.ts
new file mode 100644
index 0000000..a886017
--- /dev/null
+++ b/src/utils/hooks/use-thematics-list/index.ts
@@ -0,0 +1 @@
+export * from './use-thematics-list';
diff --git a/src/utils/hooks/use-thematics-list/use-thematics-list.test.ts b/src/utils/hooks/use-thematics-list/use-thematics-list.test.ts
new file mode 100644
index 0000000..0e19c2d
--- /dev/null
+++ b/src/utils/hooks/use-thematics-list/use-thematics-list.test.ts
@@ -0,0 +1,48 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useThematicsList } from './use-thematics-list';
+
+describe('useThematicsList', () => {
+  beforeEach(() => {
+    /* Not sure why it is needed, but without it Jest was complaining with
+     * `Jest worker encountered 4 child process exceptions`... Maybe because of
+     * useSWR? */
+    jest.useFakeTimers({
+      doNotFake: ['queueMicrotask'],
+    });
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  /* eslint-disable max-statements */
+  it('fetch the requested thematics list', async () => {
+    const { result } = renderHook(() => useThematicsList());
+
+    // Inaccurate assertions count because of waitFor...
+    //expect.assertions(8);
+    expect.hasAssertions();
+
+    expect(result.current.thematics).toBeUndefined();
+    expect(result.current.isError).toBe(false);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isValidating).toBe(true);
+
+    jest.advanceTimersToNextTimer();
+
+    await waitFor(() => expect(result.current.thematics).toBeDefined());
+    expect(result.current.isError).toBe(false);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isValidating).toBe(false);
+  });
+  /* eslint-enable max-statements */
+});
diff --git a/src/utils/hooks/use-thematics-list/use-thematics-list.ts b/src/utils/hooks/use-thematics-list/use-thematics-list.ts
new file mode 100644
index 0000000..f63815a
--- /dev/null
+++ b/src/utils/hooks/use-thematics-list/use-thematics-list.ts
@@ -0,0 +1,50 @@
+import useSWR from 'swr';
+import {
+  type FetchThematicsListInput,
+  fetchThematicsList,
+} from '../../../services/graphql';
+import type {
+  GraphQLConnection,
+  Maybe,
+  WPThematicPreview,
+} from '../../../types';
+
+export type UseThematicsListReturn<
+  T extends Maybe<GraphQLConnection<WPThematicPreview>>,
+> = {
+  isError: boolean;
+  isLoading: boolean;
+  isValidating: boolean;
+  thematics: T extends undefined
+    ? Maybe<GraphQLConnection<WPThematicPreview>>
+    : GraphQLConnection<WPThematicPreview>;
+};
+
+export type UseThematicsListConfig<
+  T extends Maybe<GraphQLConnection<WPThematicPreview>>,
+> = {
+  input?: FetchThematicsListInput;
+  fallback?: T;
+};
+
+export const useThematicsList = <
+  T extends Maybe<GraphQLConnection<WPThematicPreview>>,
+>(
+  config?: UseThematicsListConfig<T>
+): UseThematicsListReturn<T> => {
+  const { fallback, input } = config ?? {};
+  const { data, error, isLoading, isValidating } = useSWR(
+    input ?? {},
+    fetchThematicsList,
+    { fallbackData: fallback }
+  );
+
+  if (error) console.error(error);
+
+  return {
+    isError: !!error,
+    isLoading,
+    isValidating,
+    thematics: data,
+  } as UseThematicsListReturn<T>;
+};