Use React Query

README.md

@@ -1,6 +1,12 @@
 # Code Review Tool
 
+## Getting Started
 1. Set the correct Node version via `nvm use`
 2. Start the Firebase Emulators via `npm run dev`
 3. In another Terminal, start the React development server by running `npm start` within the `hosting` directory
    - In order to authenticate locally, you will need to use `127.0.0.1` rather than `localhost`
+
+## Project Guidelines
+
+### React Query Usage
+We use the [React Query](https://tanstack.com/query/latest/docs/framework/react/overview) library for handling caching and synchronisation of our API calls. For consistency, we use the format `[<service-being-called>, <endpoint>, <parameter>]` for our [query keys](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) (for example: `["github", "repositories", "example-user"]`). We ask that you keep the implementation of [query functions](https://tanstack.com/query/latest/docs/framework/react/guides/query-functions) slim, placing most the logic in the service layer.

hosting/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^5.34.1",
     "@types/node": "^16.18.96",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",

hosting/src/components/pages/HomePage.tsx

@@ -1,23 +1,21 @@
-import React, { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { useUser } from "../../hooks/useUser";
-import { useGitHub } from "../../hooks/useGitHub";
-import { IGitHubUser } from "../../interfaces/github/IGitHubUser";
+import { githubService } from "../../services/GitHubService";
 import { IGitHubRepository } from "../../interfaces/github/IGitHubRepository";
 
 export function HomePage() {
     const [user] = useUser();
-    const [request] = useGitHub();
-    const [repositories, setRepositories] = useState<any[]>([]);
+    const { data: gitUser } = useQuery({
+        queryKey: ["github", "users", user?.providerData[0].uid],
+        queryFn: async () => githubService.getUserById(+user!.providerData[0].uid),
+        enabled: !!user
+    });
 
-    useEffect(() => {
-        if (!user) return;
-        (async () => {
-            const [gitUser] = await request<IGitHubUser[]>(`users?since=${+(user.providerData[0].uid) - 1}&per_page=1`);
-            const repos = await request<IGitHubRepository[]>(`users/${gitUser.login.toLowerCase()}/repos`);
-
-            setRepositories(repos);
-        })();
-    }, [user, request]);
+    const { data: gitRepositories } = useQuery({
+        queryKey: ["github", "repositories", gitUser?.login.toLowerCase()],
+        queryFn: async () => githubService.getUsersRepositories(gitUser!.login),
+        enabled: !!gitUser
+    });
 
     return (
         <main>
@@ -30,7 +28,7 @@ export function HomePage() {
                     <pre>{JSON.stringify(user)}</pre>
                     <h2>Repositories</h2>
                     <ul>
-                        {repositories?.map(repo => <li key={repo.id}>{repo.name}</li>)}
+                        {gitRepositories?.map((repo: IGitHubRepository) => <li key={repo.id}>{repo.name}</li>)}
                     </ul>
                 </div>
             )}

hosting/src/index.tsx

@@ -1,12 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { HomePage } from "./components/pages/HomePage";
 import { ErrorPage } from "./components/pages/ErrorPage";
 import { ProtectedPageTemplate } from "./components/templates/ProtectedPageTemplate";
 import reportWebVitals from "./reportWebVitals";
 import "./index.css";
 
+const queryClient = new QueryClient();
+
 const router = createBrowserRouter([
     {
         path: "/",
@@ -27,7 +30,9 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
   </React.StrictMode>
 );
 

hosting/src/services/GitHubService.ts

@@ -0,0 +1,24 @@
+import { IGitHubUser } from "../interfaces/github/IGitHubUser";
+import { IGitHubRepository } from "../interfaces/github/IGitHubRepository";
+
+export class GitHubService {
+	private static BASE_URL = "https://api.github.com";
+
+	private async makeRequest<T>(path: string): Promise<T> {
+		const res = await fetch(`${GitHubService.BASE_URL}/${path}`);
+
+		return res.json();
+	}
+
+	async getUserById(id: number): Promise<IGitHubUser> {
+		const [user] = await this.makeRequest<IGitHubUser[]>(`users?since=${id - 1}&per_page=1`);
+
+		return user;
+	}
+
+	async getUsersRepositories(username: string): Promise<IGitHubRepository[]> {
+		return this.makeRequest(`users/${username.toLowerCase()}/repos`);
+	}
+}
+
+export const githubService = new GitHubService();