From 5b762b1b669454a89899c4bdf6008027d9615acf Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 30 Nov 2023 19:30:43 +0100 Subject: 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 --- src/utils/hooks/use-article.ts | 35 --------------- src/utils/hooks/use-article/index.ts | 1 + src/utils/hooks/use-article/use-article.test.ts | 54 +++++++++++++++++++++++ src/utils/hooks/use-article/use-article.ts | 28 ++++++++++++ src/utils/hooks/use-comments.ts | 32 -------------- src/utils/hooks/use-comments/index.ts | 1 + src/utils/hooks/use-comments/use-comments.test.ts | 49 ++++++++++++++++++++ src/utils/hooks/use-comments/use-comments.ts | 42 ++++++++++++++++++ 8 files changed, 175 insertions(+), 67 deletions(-) delete mode 100644 src/utils/hooks/use-article.ts create mode 100644 src/utils/hooks/use-article/index.ts create mode 100644 src/utils/hooks/use-article/use-article.test.ts create mode 100644 src/utils/hooks/use-article/use-article.ts delete mode 100644 src/utils/hooks/use-comments.ts create mode 100644 src/utils/hooks/use-comments/index.ts create mode 100644 src/utils/hooks/use-comments/use-comments.test.ts create mode 100644 src/utils/hooks/use-comments/use-comments.ts (limited to 'src/utils/hooks') diff --git a/src/utils/hooks/use-article.ts b/src/utils/hooks/use-article.ts deleted file mode 100644 index 5e54ee4..0000000 --- a/src/utils/hooks/use-article.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { useEffect, useState } from 'react'; -import useSWR from 'swr'; -import { convertPostToArticle, fetchPost } from '../../services/graphql'; -import type { Article, Maybe } from '../../types'; - -export type UseArticleConfig = { - /** - * A fallback article - */ - fallback?: Article; - /** - * The article slug - */ - slug?: string; -}; - -/** - * Retrieve an article by slug. - * - * @param {UseArticleConfig} config - The config. - * @returns {Article|undefined} The matching article if it exists. - */ -export const useArticle = ({ - slug, - fallback, -}: UseArticleConfig): Article | undefined => { - const { data } = useSWR(slug, fetchPost, {}); - const [article, setArticle] = useState>(fallback); - - useEffect(() => { - if (data) convertPostToArticle(data).then((post) => setArticle(post)); - }, [data]); - - return article; -}; 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> = { + article: T extends undefined ? Maybe
: Article; + isError: boolean; + isLoading: boolean; + isValidating: boolean; +}; + +export const useArticle = >( + slug: string, + fallback?: T +): UseArticleReturn => { + 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; +}; diff --git a/src/utils/hooks/use-comments.ts b/src/utils/hooks/use-comments.ts deleted file mode 100644 index 94a2d7e..0000000 --- a/src/utils/hooks/use-comments.ts +++ /dev/null @@ -1,32 +0,0 @@ -import useSWR from 'swr'; -import { - type FetchCommentsListInput, - fetchCommentsList, - convertWPCommentToComment, - buildCommentsTree, -} from '../../services/graphql'; -import type { SingleComment } from '../../types'; - -export type UseCommentsConfig = FetchCommentsListInput & { - fallback?: SingleComment[]; -}; - -/** - * Retrieve the comments of a page/article. - * - * @param {string | number} contentId - A page/article id. - * @returns {SingleComment[]|undefined} - */ -export const useComments = ({ - fallback, - ...input -}: UseCommentsConfig): SingleComment[] | undefined => { - const { data } = useSWR(input, fetchCommentsList, {}); - - if (!data) return fallback; - - const comments = data.map(convertWPCommentToComment); - const commentsTree = buildCommentsTree(comments); - - return commentsTree; -}; diff --git a/src/utils/hooks/use-comments/index.ts b/src/utils/hooks/use-comments/index.ts new file mode 100644 index 0000000..8f69ffd --- /dev/null +++ b/src/utils/hooks/use-comments/index.ts @@ -0,0 +1 @@ +export * from './use-comments'; diff --git a/src/utils/hooks/use-comments/use-comments.test.ts b/src/utils/hooks/use-comments/use-comments.test.ts new file mode 100644 index 0000000..f05f9eb --- /dev/null +++ b/src/utils/hooks/use-comments/use-comments.test.ts @@ -0,0 +1,49 @@ +import { + afterEach, + beforeEach, + describe, + expect, + it, + jest, +} from '@jest/globals'; +import { renderHook, waitFor } from '@testing-library/react'; +import { useComments } from './use-comments'; + +describe('useComments', () => { + 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 comments', async () => { + const { result } = renderHook(() => useComments({})); + + // Inaccurate assertions count because of waitFor... + //expect.assertions(8); + expect.hasAssertions(); + + expect(result.current.comments).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.comments).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-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> = { + comments: T extends undefined ? Maybe : SingleComment[]; + isError: boolean; + isLoading: boolean; + isValidating: boolean; +}; + +export type UseCommentsConfig> = + FetchCommentsListInput & { + fallback?: T; + }; + +export const useComments = >({ + fallback, + ...input +}: UseCommentsConfig): UseCommentsReturn => { + 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; +}; -- cgit v1.2.3