From dfdbf6cac1fe3719dc71e130129d28e04ba4e225 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 1 Dec 2023 13:26:44 +0100 Subject: 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 --- src/utils/hooks/index.ts | 2 + src/utils/hooks/use-thematic/index.ts | 1 + src/utils/hooks/use-thematic/use-thematic.test.ts | 56 ++++++++++++++++++++++ src/utils/hooks/use-thematic/use-thematic.ts | 31 ++++++++++++ src/utils/hooks/use-thematics-list/index.ts | 1 + .../use-thematics-list/use-thematics-list.test.ts | 48 +++++++++++++++++++ .../hooks/use-thematics-list/use-thematics-list.ts | 50 +++++++++++++++++++ 7 files changed, 189 insertions(+) create mode 100644 src/utils/hooks/use-thematic/index.ts create mode 100644 src/utils/hooks/use-thematic/use-thematic.test.ts create mode 100644 src/utils/hooks/use-thematic/use-thematic.ts create mode 100644 src/utils/hooks/use-thematics-list/index.ts create mode 100644 src/utils/hooks/use-thematics-list/use-thematics-list.test.ts create mode 100644 src/utils/hooks/use-thematics-list/use-thematics-list.ts (limited to 'src/utils') diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts index f3bfd75..3fb0ad4 100644 --- a/src/utils/hooks/index.ts +++ b/src/utils/hooks/index.ts @@ -22,6 +22,8 @@ export * from './use-scroll-lock'; export * from './use-scroll-position'; export * from './use-scrollbar-width'; export * from './use-system-color-scheme'; +export * from './use-thematic'; +export * from './use-thematics-list'; export * from './use-theme'; export * from './use-timeout'; export * from './use-toggle'; diff --git a/src/utils/hooks/use-thematic/index.ts b/src/utils/hooks/use-thematic/index.ts new file mode 100644 index 0000000..319f4b5 --- /dev/null +++ b/src/utils/hooks/use-thematic/index.ts @@ -0,0 +1 @@ +export * from './use-thematic'; diff --git a/src/utils/hooks/use-thematic/use-thematic.test.ts b/src/utils/hooks/use-thematic/use-thematic.test.ts new file mode 100644 index 0000000..43d0a57 --- /dev/null +++ b/src/utils/hooks/use-thematic/use-thematic.test.ts @@ -0,0 +1,56 @@ +import { + afterEach, + beforeEach, + describe, + expect, + it, + jest, +} from '@jest/globals'; +import { renderHook, waitFor } from '@testing-library/react'; +import { wpThematicsFixture } from '../../../../tests/fixtures'; +import { ROUTES } from '../../constants'; +import { useThematic } from './use-thematic'; + +describe('useThematic', () => { + 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 thematic', async () => { + const { result } = renderHook(() => + useThematic(wpThematicsFixture[0].slug) + ); + + // Inaccurate assertions count because of waitFor... + //expect.assertions(8); + expect.hasAssertions(); + + expect(result.current.thematic).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.thematic?.slug).toBe( + `${ROUTES.THEMATICS}/${wpThematicsFixture[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-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> = { + isError: boolean; + isLoading: boolean; + isValidating: boolean; + thematic: T extends undefined ? Maybe : Thematic; +}; + +export const useThematic = >( + slug: string, + fallback?: T +): UseThematicReturn => { + 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; +}; diff --git a/src/utils/hooks/use-thematics-list/index.ts b/src/utils/hooks/use-thematics-list/index.ts new file mode 100644 index 0000000..a886017 --- /dev/null +++ b/src/utils/hooks/use-thematics-list/index.ts @@ -0,0 +1 @@ +export * from './use-thematics-list'; diff --git a/src/utils/hooks/use-thematics-list/use-thematics-list.test.ts b/src/utils/hooks/use-thematics-list/use-thematics-list.test.ts new file mode 100644 index 0000000..0e19c2d --- /dev/null +++ b/src/utils/hooks/use-thematics-list/use-thematics-list.test.ts @@ -0,0 +1,48 @@ +import { + afterEach, + beforeEach, + describe, + expect, + it, + jest, +} from '@jest/globals'; +import { renderHook, waitFor } from '@testing-library/react'; +import { useThematicsList } from './use-thematics-list'; + +describe('useThematicsList', () => { + 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 thematics list', async () => { + const { result } = renderHook(() => useThematicsList()); + + // Inaccurate assertions count because of waitFor... + //expect.assertions(8); + expect.hasAssertions(); + + expect(result.current.thematics).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.thematics).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-thematics-list/use-thematics-list.ts b/src/utils/hooks/use-thematics-list/use-thematics-list.ts new file mode 100644 index 0000000..f63815a --- /dev/null +++ b/src/utils/hooks/use-thematics-list/use-thematics-list.ts @@ -0,0 +1,50 @@ +import useSWR from 'swr'; +import { + type FetchThematicsListInput, + fetchThematicsList, +} from '../../../services/graphql'; +import type { + GraphQLConnection, + Maybe, + WPThematicPreview, +} from '../../../types'; + +export type UseThematicsListReturn< + T extends Maybe>, +> = { + isError: boolean; + isLoading: boolean; + isValidating: boolean; + thematics: T extends undefined + ? Maybe> + : GraphQLConnection; +}; + +export type UseThematicsListConfig< + T extends Maybe>, +> = { + input?: FetchThematicsListInput; + fallback?: T; +}; + +export const useThematicsList = < + T extends Maybe>, +>( + config?: UseThematicsListConfig +): UseThematicsListReturn => { + const { fallback, input } = config ?? {}; + const { data, error, isLoading, isValidating } = useSWR( + input ?? {}, + fetchThematicsList, + { fallbackData: fallback } + ); + + if (error) console.error(error); + + return { + isError: !!error, + isLoading, + isValidating, + thematics: data, + } as UseThematicsListReturn; +}; -- cgit v1.2.3