refactor(hooks): replace useGithubApi with useGithubRepoMeta

* use GraphQL API instead of REST (the inconvenient however is that we
now need an authorization token...)
* move fetcher in services
* add tests
* mock response using MSW

7 files changed, 105 insertions, 29 deletions

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 043a530..f9d6216 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,3 +1,7 @@
+export const GITHUB_API = 'https://api.github.com/graphql';
+
+export const GITHUB_PSEUDO = 'ArmandPhilippot';
+
 export const PERSONAL_LINKS = {
   GITHUB: 'https://github.com/ArmandPhilippot',
   GITLAB: 'https://gitlab.com/ArmandPhilippot',
diff --git a/src/utils/helpers/graphql.ts b/src/utils/helpers/graphql.ts
index e07b151..2d78e00 100644
--- a/src/utils/helpers/graphql.ts
+++ b/src/utils/helpers/graphql.ts
@@ -20,6 +20,7 @@ type GraphQLResponse<T extends GraphQLData<unknown>> = {
 };
 
 export type FetchGraphQLConfig = {
+  headers?: HeadersInit;
   query: string;
   url: string;
   variables?: Record<string, unknown>;
@@ -35,6 +36,7 @@ export type FetchGraphQLConfig = {
 export const fetchGraphQL = async <
   T extends GraphQLData<unknown> = GraphQLData<unknown>,
 >({
+  headers,
   query,
   url,
   variables,
@@ -42,6 +44,7 @@ export const fetchGraphQL = async <
   const response = await fetch(url, {
     method: 'POST',
     headers: {
+      ...headers,
       'content-type': 'application/json;charset=UTF-8',
     },
     body: JSON.stringify({
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
index 1ee513d..f4d1583 100644
--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -5,7 +5,7 @@ export * from './use-boolean';
 export * from './use-breadcrumb';
 export * from './use-comments';
 export * from './use-form';
-export * from './use-github-api';
+export * from './use-github-repo-meta';
 export * from './use-headings-tree';
 export * from './use-local-storage';
 export * from './use-match-media';
diff --git a/src/utils/hooks/use-github-api.tsx b/src/utils/hooks/use-github-api.tsx
deleted file mode 100644
index aa9e3f7..0000000
--- a/src/utils/hooks/use-github-api.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import useSWR, { Fetcher } from 'swr';
-import { SWRResult } from '../../types';
-
-export type RepoData = {
-  created_at: string;
-  updated_at: string;
-  stargazers_count: number;
-};
-
-const fetcher: Fetcher<RepoData, string> = (...args) =>
-  fetch(...args).then((res) => res.json());
-
-/**
- * Retrieve data from Github API.
- *
- * @param repo - The Github repo (`owner/repo-name`).
- * @returns The repository data.
- */
-export const useGithubApi = (repo: string): SWRResult<RepoData> => {
-  const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null;
-  const { data, error } = useSWR<RepoData>(apiUrl, fetcher);
-
-  return {
-    data,
-    isLoading: !error && !data,
-    isError: error,
-  };
-};
diff --git a/src/utils/hooks/use-github-repo-meta/index.ts b/src/utils/hooks/use-github-repo-meta/index.ts
new file mode 100644
index 0000000..352adc9
--- /dev/null
+++ b/src/utils/hooks/use-github-repo-meta/index.ts
@@ -0,0 +1 @@
+export * from './use-github-repo-meta';
diff --git a/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.test.ts b/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.test.ts
new file mode 100644
index 0000000..d796f69
--- /dev/null
+++ b/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.test.ts
@@ -0,0 +1,59 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { renderHook, waitFor } from '@testing-library/react';
+import { githubRepos } from '../../../../tests/fixtures';
+import { useGithubRepoMeta } from './use-github-repo-meta';
+
+describe('useGithubRepoMeta', () => {
+  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('fetches the requested repository', async () => {
+    const { result } = renderHook(() =>
+      useGithubRepoMeta({
+        name: githubRepos[0].name,
+        owner: githubRepos[0].owner,
+      })
+    );
+
+    // Inaccurate assertions count because of waitFor...
+    //expect.assertions(11);
+    expect.hasAssertions();
+
+    expect(result.current.meta).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.meta).toBeDefined());
+    expect(result.current.meta?.createdAt).toBe(githubRepos[0].createdAt);
+    expect(result.current.meta?.stargazerCount).toBe(
+      githubRepos[0].stargazerCount
+    );
+    expect(result.current.meta?.updatedAt).toBe(githubRepos[0].updatedAt);
+    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-github-repo-meta/use-github-repo-meta.ts b/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.ts
new file mode 100644
index 0000000..888682e
--- /dev/null
+++ b/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.ts
@@ -0,0 +1,37 @@
+import useSWR from 'swr';
+import {
+  type FetchGithubRepoMetaInput,
+  fetchGithubRepoMeta,
+} from '../../../services/github';
+import type { GithubRepositoryMeta, Maybe } from '../../../types';
+
+export type UseGithubRepoMetaReturn<T extends Maybe<GithubRepositoryMeta>> = {
+  isError: boolean;
+  isLoading: boolean;
+  isValidating: boolean;
+  meta: T extends undefined
+    ? Maybe<GithubRepositoryMeta>
+    : GithubRepositoryMeta;
+};
+
+export const useGithubRepoMeta = <T extends Maybe<GithubRepositoryMeta>>(
+  input: FetchGithubRepoMetaInput,
+  fallback?: T
+) => {
+  const { data, error, isLoading, isValidating } = useSWR(
+    input,
+    fetchGithubRepoMeta,
+    {
+      fallbackData: fallback,
+    }
+  );
+
+  if (error) console.error(error);
+
+  return {
+    isError: !!error,
+    isLoading,
+    isValidating,
+    meta: data,
+  } as UseGithubRepoMetaReturn<T>;
+};