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

3 files changed, 83 insertions, 0 deletions

diff --git a/src/utils/hooks/use-article/index.ts b/src/utils/hooks/use-article/index.ts
new file mode 100644
index 0000000..459fc6d
--- /dev/null
+++ b/src/utils/hooks/use-article/index.ts
@@ -0,0 +1 @@
+export * from './use-article';
diff --git a/src/utils/hooks/use-article/use-article.test.ts b/src/utils/hooks/use-article/use-article.test.ts
new file mode 100644
index 0000000..7c9574c
--- /dev/null
+++ b/src/utils/hooks/use-article/use-article.test.ts
@@ -0,0 +1,54 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { renderHook, waitFor } from '@testing-library/react';
+import { wpPostsFixture } from '../../../../tests/fixtures';
+import { ROUTES } from '../../constants';
+import { useArticle } from './use-article';
+
+describe('useArticle', () => {
+  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 article', async () => {
+    const { result } = renderHook(() => useArticle(wpPostsFixture[0].slug));
+
+    // Inaccurate assertions count because of waitFor...
+    //expect.assertions(8);
+    expect.hasAssertions();
+
+    expect(result.current.article).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.article?.slug).toBe(
+        `${ROUTES.ARTICLE}/${wpPostsFixture[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-article/use-article.ts b/src/utils/hooks/use-article/use-article.ts
new file mode 100644
index 0000000..fbbc6bd
--- /dev/null
+++ b/src/utils/hooks/use-article/use-article.ts
@@ -0,0 +1,28 @@
+import useSWR from 'swr';
+import { convertPostToArticle, fetchPost } from '../../../services/graphql';
+import type { Article, Maybe, WPPost } from '../../../types';
+
+export type UseArticleReturn<T extends Maybe<WPPost>> = {
+  article: T extends undefined ? Maybe<Article> : Article;
+  isError: boolean;
+  isLoading: boolean;
+  isValidating: boolean;
+};
+
+export const useArticle = <T extends Maybe<WPPost>>(
+  slug: string,
+  fallback?: T
+): UseArticleReturn<T> => {
+  const { data, error, isLoading, isValidating } = useSWR(slug, fetchPost, {
+    fallbackData: fallback,
+  });
+
+  if (error) console.error(error);
+
+  return {
+    article: data ? convertPostToArticle(data) : undefined,
+    isError: !!error,
+    isLoading,
+    isValidating,
+  } as UseArticleReturn<T>;
+};