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

1 files changed, 31 insertions, 0 deletions

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>;
+};