refactor(pages): refine Topic pages

* add useTopic and useTopicsList hooks to refresh data
* add a table of contents
* add Cypress tests

1 files changed, 46 insertions, 0 deletions

diff --git a/src/utils/hooks/use-topics-list/use-topics-list.ts b/src/utils/hooks/use-topics-list/use-topics-list.ts
new file mode 100644
index 0000000..7860486
--- /dev/null
+++ b/src/utils/hooks/use-topics-list/use-topics-list.ts
@@ -0,0 +1,46 @@
+import useSWR from 'swr';
+import {
+  type FetchTopicsListInput,
+  fetchTopicsList,
+} from '../../../services/graphql';
+import type { GraphQLConnection, Maybe, WPTopicPreview } from '../../../types';
+
+export type UseTopicsListReturn<
+  T extends Maybe<GraphQLConnection<WPTopicPreview>>,
+> = {
+  isError: boolean;
+  isLoading: boolean;
+  isValidating: boolean;
+  topics: T extends undefined
+    ? Maybe<GraphQLConnection<WPTopicPreview>>
+    : GraphQLConnection<WPTopicPreview>;
+};
+
+export type UseTopicsListConfig<
+  T extends Maybe<GraphQLConnection<WPTopicPreview>>,
+> = {
+  input?: FetchTopicsListInput;
+  fallback?: T;
+};
+
+export const useTopicsList = <
+  T extends Maybe<GraphQLConnection<WPTopicPreview>>,
+>(
+  config?: UseTopicsListConfig<T>
+): UseTopicsListReturn<T> => {
+  const { fallback, input } = config ?? {};
+  const { data, error, isLoading, isValidating } = useSWR(
+    input ?? {},
+    fetchTopicsList,
+    { fallbackData: fallback }
+  );
+
+  if (error) console.error(error);
+
+  return {
+    isError: !!error,
+    isLoading,
+    isValidating,
+    topics: data,
+  } as UseTopicsListReturn<T>;
+};