improve github profile finder ui and adding aborcontorller to fetching

No0ne003 · May 16, 2024 · 69a81c2 · 69a81c2
1 parent aaf59d9
commit 69a81c2
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 37 deletions.
diff --git a/src/pages/GithubProfileFinder/GithubProfileFinder.jsx b/src/pages/GithubProfileFinder/GithubProfileFinder.jsx
@@ -1,17 +1,19 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useEffect, useState } from "react";
-import { User } from "./User";
 import Loading from "@/components/ui/Loading";
+import User from "./User";
 
 const GithubProfileFinder = () => {
   const [userName, setUserName] = useState("No0ne003");
   const [userData, setUserData] = useState(null);
   const [loading, setLoading] = useState(false);
 
-  async function fetchGithubUserData() {
+  async function fetchGithubUserData(signal) {
     setLoading(true);
-    const res = await fetch(`https://api.github.com/users/${userName}`);
+    const res = await fetch(`https://api.github.com/users/${userName}`, {
+      signal,
+    });
 
     const data = await res.json();
 
@@ -20,36 +22,51 @@ const GithubProfileFinder = () => {
       setLoading(false);
     }
 
-    console.log(data)
+    console.log(data);
   }
 
   function handleSumbit() {
     fetchGithubUserData();
   }
 
   useEffect(() => {
-    fetchGithubUserData();
+    const controller = new AbortController();
+    const signal = controller.signal;
+    fetchGithubUserData(signal);
+
+    return () => {
+      controller.abort();
+    };
   }, []);
 
   return (
-    <div className="flex flex-col gap-3 justify-start items-center py-3">
+    <div className="container flex flex-col gap-3 justify-start items-center py-3">
       <div id="input-warrper" className="flex gap-3">
         <Input
+          className="placeholder:text-foreground/70"
           name="search-by-username"
           type="text"
           placeholder="Search Github Username"
           value={userName}
           onChange={(event) => setUserName(event.target.value)}
         />
-        <Button onClick={handleSumbit} disabled={userName ? false : true} type='submit'>
+        <Button
+          onClick={handleSumbit}
+          disabled={userName ? false : true}
+          type="submit"
+        >
           Search
         </Button>
       </div>
-      {loading ? <Loading /> : userData !== null ? (
-        <User user={userData} />
+      {loading ? (
+        <Loading />
+      ) : userData !== null ? (
+        <div className="my-24">
+          <User user={userData} />
+        </div>
       ) : null}
     </div>
   );
 };
 
-export default GithubProfileFinder
+export default GithubProfileFinder;
diff --git a/src/pages/GithubProfileFinder/User.jsx b/src/pages/GithubProfileFinder/User.jsx
@@ -1,4 +1,4 @@
-export const User = ({ user }) => {
+const User = ({ user }) => {
   const {
     avatar_url,
     followers,
@@ -15,7 +15,7 @@ export const User = ({ user }) => {
   if (message) {
     return (
       <h1 className="text-3xl my-10">
-        <span className="font-bold hover:underline decoration-[2px] underline-offset-4">
+        <span className="font-bold hover:underline decoration-2 underline-offset-4">
           User
         </span>{" "}
         Not Found
@@ -24,39 +24,48 @@ export const User = ({ user }) => {
   }
 
   return (
-    <div className="flex flex-col justify-center items-center">
-      <div className="size-48 flex justify-center items-center">
-        <img className="rounded-lg" src={avatar_url} alt="User" />
-      </div>
-      <div className="flex justify-center items-center flex-col">
-        <a
-          className="underline hover:text-white"
-          href={`https://github.com/${login}`}
-          target="_blank"
-        >
-          {name || login}
-        </a>
-        <p className="text-sm">
-          User joined on{" "}
-          {`${createDate.getDate()} ${createDate.toLocaleString("en-us", {
-            month: "short",
-          })} ${createDate.getFullYear()}`}
-        </p>
+    <div className="bg-secondary-foreground/5 border border-primary/15 rounded-md flex flex-col justify-center items-center aspect-[3/1] gap-2 py-6 px-10">
+      <div className="flex gap-5">
+        <div className="size-20 flex justify-center items-center">
+          <img
+            className="rounded-lg"
+            src={avatar_url}
+            alt={`${name || login}'s avatar`}
+          />
+        </div>
+        <div className="flex flex-col justify-center items-start">
+          <a
+            href={`https://github.com/${login}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-bold text-lg"
+          >
+            {name || login}
+          </a>
+          <p className="text-xs text-foreground/70">
+            User joined on{" "}
+            {`${createDate.getDate()} ${createDate.toLocaleString("en-us", {
+              month: "short",
+            })} ${createDate.getFullYear()}`}
+          </p>
+        </div>
       </div>
-      <div className="flex flex-col my-4 space-y-2 justify-center items-center">
-        <div className="flex flex-col justify-center items-center">
-          <p>Public Repos</p>
+      <div className="flex gap-2 justify-start items-center w-full">
+        <div className="flex flex-col justify-center items-center w-full h-full">
           <p className="font-semibold">{public_repos}</p>
+          <p className="font-light text-xs text-foreground/70">Repos</p>
         </div>
-        <div className="flex flex-col justify-center items-center">
-          <p>Followers</p>
+        <div className="flex flex-col justify-center items-center w-full h-full">
           <p className="font-semibold">{followers}</p>
+          <p className="font-light text-xs text-foreground/60">Followers</p>
         </div>
-        <div className="flex flex-col justify-center items-center">
-          <p>Following</p>
+        <div className="flex flex-col justify-center items-center w-full h-full">
           <p className="font-semibold">{following}</p>
+          <p className="font-light text-xs text-foreground/60">Following</p>
         </div>
       </div>
     </div>
   );
 };
+
+export default User;