Add input user name to search

src/App.tsx

@@ -1,26 +1,40 @@
+import { ChangeEvent, useState } from "react";
 import Card from "./components/Card";
 import { useFetchRepositories } from "./hooks/useRepos";
 import { useFavoriteReposStore } from "./store/favoriteRepos";
 
 function App() {
-  const { data, isLoading } = useFetchRepositories();
+  const [userName, setUserName] = useState("sagoma-dev");
+  const { data, isLoading, isError } = useFetchRepositories(userName);
   const { favoriteReposIds } = useFavoriteReposStore();
-  if (isLoading) {
-    return <h1>Loading...</h1>;
-  }
+
+  const handleUserChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setUserName(e.target.value);
+  };
 
   return (
     <main>
-      <ul>
-        <h2>Repositorios</h2>
-        {data?.map((repository) => (
-          <Card
-            key={repository.id}
-            repository={repository}
-            isFavorite={favoriteReposIds.includes(repository.id)}
-          />
-        ))}
-      </ul>
+      <h1>
+        Repositorios de:
+        <input
+          type="text"
+          onChange={(e) => handleUserChange(e)}
+          value={userName}
+        />
+      </h1>
+      {isLoading && <h2>Cargando Repos...</h2>}
+      {isError && <h2>{userName} no existe</h2>}
+      {data && (
+        <ul>
+          {data.map((repository) => (
+            <Card
+              key={repository.id}
+              repository={repository}
+              isFavorite={favoriteReposIds.includes(repository.id)}
+            />
+          ))}
+        </ul>
+      )}
     </main>
   );
 }

src/hooks/useRepos.ts

@@ -1,12 +1,13 @@
-import { useQuery } from "@tanstack/react-query";
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
 import api from "../api/github";
 import { Repository } from "./types";
 
-async function fetchRepos() {
-  const { data } = await api.get<Repository[]>("/users/sagoma-dev/repos");
+async function fetchRepos(ctx: QueryFunctionContext) {
+  const [, githubUser] = ctx.queryKey;
+  const { data } = await api.get<Repository[]>(`/users/${githubUser}/repos`);
   return data;
 }
 
-export function useFetchRepositories() {
-  return useQuery(["repos"], fetchRepos);
+export function useFetchRepositories(user: string) {
+  return useQuery(["repos", user], fetchRepos);
 }