add user validation

frontend/hooks/useUser.ts

@@ -1,30 +1,53 @@
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
+import toast from "react-hot-toast";
+import getUser from "../services/getUsers";
 
 const useUser = () => {
   const [user, setUser] = useState("");
-  const [error, setError] = useState("");
+  const [loadUser, setLoadUser] = useState(false);
+  const previousUser = useRef(user);
 
   // Validate user
-  useEffect(() => {
+  const validateUser = (user: string) => {
     if (user === "") {
-      setError("Please enter a username");
-      return;
+      toast.error("Please enter a username");
+      return false;
     }
 
     if (user.match(/[^a-zA-Z0-9 ]/)) {
-      setError("Please enter only letters and numbers");
-      return;
+      toast.error("Please enter only letters and numbers");
+      return false;
     }
 
     if (user.length < 3) {
-      setError("Please enter at least 3 characters");
-      return;
+      toast.error("Please enter at least 3 characters");
+      return false;
     }
 
-    setError("");
-  }, [user]);
+    return true;
+  };
 
-  return { user, setUser, error, setError };
+  const getUserData = async (user: string): Promise<boolean> => {
+    // Get repos from services
+    try {
+      setLoadUser(true);
+      previousUser.current = user;
+      const response = await getUser({ user });
+
+      if (!response.name) {
+        toast.error("No user found");
+        return false;
+      }
+      return true;
+    } catch (error: any) {
+      toast.error(error.message);
+      return false;
+    } finally {
+      setLoadUser(false);
+    }
+  };
+
+  return { user, setUser, validateUser, getUserData, loadUser };
 };
 
 export default useUser;

frontend/pages/index.tsx

@@ -15,7 +15,7 @@ import useData from "../hooks/useData";
 import { Toaster } from "react-hot-toast";
 
 const Home: NextPage = () => {
-  const { user, setUser } = useUser();
+  const { user, setUser, validateUser, getUserData, loadUser } = useUser();
   const { getUserRepos, repo, setRepo, repos, setRepos, loadRepo } =
     useRepos(user);
   const {
@@ -55,9 +55,17 @@ const Home: NextPage = () => {
   const debouncedGetUserRepos = useMemo(
     () =>
       debounce(async (user: string) => {
-        const resRepo = await getUserRepos(user);
-        const resBranch = await getRepoBranches(user, resRepo);
-        getBranchCommits(user, resRepo, resBranch);
+        if (!validateUser(user)) return;
+        const foundUser = await getUserData(user);
+        if (foundUser) {
+          const resRepo = await getUserRepos(user);
+          const resBranch = await getRepoBranches(user, resRepo);
+          getBranchCommits(user, resRepo, resBranch);
+        } else {
+          setRepos([]);
+          setBranches([]);
+          setCommits([]);
+        }
       }, 500),
     []
   );
@@ -128,15 +136,15 @@ const Home: NextPage = () => {
           <Select
             id="repos"
             label="REPOSITORIES"
-            disabled={loadRepo || loadData}
+            disabled={loadUser || loadRepo || loadData}
             data={repos}
             option={repo}
             onChange={onChangeRepo}
           />
           <Select
             id="branches"
             label="BRANCHES"
-            disabled={loadBranch || loadRepo || loadData}
+            disabled={loadUser || loadBranch || loadRepo || loadData}
             data={branches}
             option={branch}
             onChange={onChangeBranch}
@@ -147,7 +155,9 @@ const Home: NextPage = () => {
         ) : (
           <Commit
             commits={commits}
-            loadCommit={loadCommit || loadRepo || loadBranch || loadData}
+            loadCommit={
+              loadUser || loadCommit || loadRepo || loadBranch || loadData
+            }
           />
         )}
       </main>

frontend/services/getUsers.ts

@@ -0,0 +1,46 @@
+import { toast } from "react-hot-toast";
+import { serverUrl, fetchMode, userUrl, headers } from "../utils/constants";
+
+interface IParams {
+  user: string;
+}
+
+interface IUser {
+  name: string;
+  avatar_url: string;
+  html_url: string;
+}
+
+/**
+ * Function that fetch repositories data from server
+ * @param user github username
+ * @returns an array with all repositories of a user
+ */
+export default async function getUser(params: IParams): Promise<IUser> {
+  let userData: IUser = { name: "", avatar_url: "", html_url: "" };
+  try {
+    const { user } = params;
+
+    if (fetchMode === "client") {
+      const rawData = await fetch(`${userUrl}/${user}`, headers);
+      const data = await rawData.json();
+      userData = {
+        name: data.name,
+        avatar_url: data.avatar_url,
+        html_url: data.html_url,
+      };
+    } else {
+      const response = await fetch(`${serverUrl}/api/users`, {
+        method: "POST",
+        body: JSON.stringify({ user: user }),
+        headers: { "Content-Type": "application/json" },
+      });
+      userData = await response.json();
+    }
+
+    return userData;
+  } catch (error: any) {
+    toast.error("No user found");
+    return userData;
+  }
+}