Replace useGitHub hook with React Query implementation

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();