From 76b4d3694cf3b3a1c826af24ef1a72a0d66ee903 Mon Sep 17 00:00:00 2001
From: Tejas Shekar <68545229+TejasShekar@users.noreply.github.com>
Date: Tue, 14 Jun 2022 15:45:01 +0530
Subject: [PATCH] feat: add full GitHub user search functionality

---
 .../github-user-search/GitHubUserSearch.jsx   | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/plays/github-user-search/GitHubUserSearch.jsx b/src/plays/github-user-search/GitHubUserSearch.jsx
index af0630ad9..00356f62a 100644
--- a/src/plays/github-user-search/GitHubUserSearch.jsx
+++ b/src/plays/github-user-search/GitHubUserSearch.jsx
@@ -13,12 +13,87 @@ function GitHubUserSearch(props) {
   const play = getPlayById(id);
 
   // Your Code Start below.
+  const [query, setQuery] = useState("");
+  const [resData, setData] = useState(null);
+  const [error, setError] = useState(false);
+  const [resetData, setResetData] = useState({
+    count: 0,
+    time: undefined,
+  });
+
+  const getResetTime = (time) => {
+    const newTime = new Date(time * 1000);
+    return newTime.toLocaleTimeString();
+  };
+
+  const getUsers = async () => {
+    try {
+      setError(false);
+      const res = await axios.get(
+        `https://api.github.com/search/users?q=${query}&per_page=20`
+      );
+      setData(res.data.items);
+    } catch (error) {
+      setError(true);
+      setData(null);
+    }
+  };
+
+  useEffect(() => {
+    (async function () {
+      const rate_limit = await axios.get("https://api.github.com/rate_limit");
+      const reset_time = getResetTime(rate_limit.data.resources.search.reset);
+      const reset_count = rate_limit.data.resources.search.remaining;
+      if (reset_count > 1) setError(false);
+      setResetData((prev) => {
+        return {...prev, count: reset_count, time: reset_time};
+      });
+    })();
+  }, [query, resData]);
+
   return (
     <>
       <div className="play-details">
         <PlayHeader play={play} />
         <div className="play-details-body">
           {/* Your Code Starts Here */}
+          <div className=" w-full flex items-center justify-center flex-col gap-4">
+            <input
+              className=" rounded-lg p-2 text-center"
+              type="search"
+              value={query}
+              placeholder="Enter query here"
+              onChange={(e) => setQuery(e.target.value)}
+            />
+            <button
+              className="bg-[#00f2fe] p-2 rounded-xl disabled:text-gray-500 disabled:cursor-not-allowed disabled:bg-[#00bbc5]"
+              onClick={getUsers}
+              disabled={query === "" || error ? true : false}
+            >
+              Search
+            </button>
+            {!resetData.count < 1 && (
+              <p>No. of searches remaining : {resetData.count}</p>
+            )}
+            {error && (
+              <h2>
+                You have exhausted your search limit. Please wait until{" "}
+                {resetData.time}
+              </h2>
+            )}
+            {!error && (
+              <div className="grid gap-2 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full place-items-center">
+                {resData?.map(({id, login, avatar_url, html_url}) => (
+                  <GitHubUserCard
+                    key={id}
+                    username={login}
+                    avatar={avatar_url}
+                    link={html_url}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
           {/* Your Code Ends Here */}
         </div>
       </div>