refactor(pages): refine Article pages

* use rehype to update code blocks class names
* fix widget heading level (after a level 1 it should always be a level
2 and not 3)
* replace Spinner with LoadingPage and LoadingPageComments components to
keep layout coherent
* refactor useArticle and useComments hooks
* fix URLs in JSON LD schema
* add Cypress tests

1 files changed, 42 insertions, 0 deletions

diff --git a/src/utils/hooks/use-comments/use-comments.ts b/src/utils/hooks/use-comments/use-comments.ts
new file mode 100644
index 0000000..cb967a5
--- /dev/null
+++ b/src/utils/hooks/use-comments/use-comments.ts
@@ -0,0 +1,42 @@
+import useSWR from 'swr';
+import {
+  type FetchCommentsListInput,
+  buildCommentsTree,
+  convertWPCommentToComment,
+  fetchCommentsList,
+} from '../../../services/graphql';
+import type { Maybe, SingleComment, WPComment } from '../../../types';
+
+export type UseCommentsReturn<T extends Maybe<WPComment[]>> = {
+  comments: T extends undefined ? Maybe<SingleComment[]> : SingleComment[];
+  isError: boolean;
+  isLoading: boolean;
+  isValidating: boolean;
+};
+
+export type UseCommentsConfig<T extends Maybe<WPComment[]>> =
+  FetchCommentsListInput & {
+    fallback?: T;
+  };
+
+export const useComments = <T extends Maybe<WPComment[]>>({
+  fallback,
+  ...input
+}: UseCommentsConfig<T>): UseCommentsReturn<T> => {
+  const { data, error, isLoading, isValidating } = useSWR(
+    input,
+    fetchCommentsList,
+    { fallbackData: fallback }
+  );
+
+  if (error) console.error(error);
+
+  return {
+    comments: data
+      ? buildCommentsTree(data.map(convertWPCommentToComment))
+      : undefined,
+    isError: !!error,
+    isLoading,
+    isValidating,
+  } as UseCommentsReturn<T>;
+};