refactor(project): replace repo api call method with hook and swr

Instead of using post slug and an environment variable to fetch repo
data, I use the given repo in each project MDX file. It allows me to
fetch data from another user/organization if needed.
To make it work, I no longer provide the full URL in MDX file. The new
format is: "User/repo-slug".
I also replaced the fetch method with SWR to improve caching and to
avoid React complaining about cleanup useEffect.

1 files changed, 23 insertions, 0 deletions

diff --git a/src/utils/hooks/useGithubApi.tsx b/src/utils/hooks/useGithubApi.tsx
new file mode 100644
index 0000000..4b0b3b2
--- /dev/null
+++ b/src/utils/hooks/useGithubApi.tsx
@@ -0,0 +1,23 @@
+import { RepoData } from '@ts/types/repos';
+import useSWR, { Fetcher } from 'swr';
+
+const fetcher: Fetcher<RepoData, string> = (...args) =>
+  fetch(...args).then((res) => res.json());
+
+/**
+ * Retrieve data from Github API.
+ * @param repo The repo name. Format: "User/project-slug".
+ * @returns {object} The data and two booleans to determine if is loading/error.
+ */
+const useGithubApi = (repo: string) => {
+  const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null;
+  const { data, error } = useSWR<RepoData>(apiUrl, fetcher);
+
+  return {
+    data,
+    isLoading: !error && !data,
+    isError: error,
+  };
+};
+
+export default useGithubApi;