add live search

Author: Amir Sohel

src/Components/Extras/Loader.js

@@ -2,5 +2,4 @@ import React from "react"
 export default{
     text_loading: <i className="fa fa-spinner fa-pulse"></i>,
     section_loading: <div className="p-5"> <i className="fa fa-spinner fa-pulse"></i> Loading...</div>,
-    search_icon : <i class="fa fa-search" aria-hidden="true"></i>
 }

src/Components/Header.js

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import {ReactComponent as GitStatsLogo} from '../Images/logo.svg';
-import Loader from "../Components/Extras/Loader";
+import DataProvider from "../Data-provider/index"
 
 function Header() {
+    var users = []
     let [dayStatus, setTheme] = useState(true);
     let [imageUrl, setImageUrl] = useState("img/sun.png");
     const [searchString, setSearchString] = useState("")
@@ -19,8 +20,10 @@ function Header() {
         setTheme(!dayStatus);
     };
 
-    function search(){
-       window.location.href = searchString
+   async function search(event){
+    setSearchString(event.target.value)
+    let res = await DataProvider.getSearchUsers(event.target.value)
+    let users = res.map(item => console.log(item))
     }
 
     return (
@@ -52,10 +55,12 @@ function Header() {
                                         className="search"
                                         placeholder="Search..."
                                         value={searchString}
-                                        onChange={(event) => setSearchString(event.target.value)}
+                                        onChange={search}
                                     />
                                   {/* Search icon */}
-                                    <button className="search-icon" onClick={search}>{Loader.search_icon}</button>
+                                  <div className="Search-result">
+                                    
+                                  </div>
                                 </a>
                             </li>
                             <li>

src/Data-provider/index.js

@@ -25,6 +25,12 @@ async function getRepositoryInfo(username, id) {
   return repository_data
 };
 
+//Search 
+async function getSearchUsers(username){
+let response = await axios.get(`https://api.github.com/search/users?q=${username}`);
+return response.data.items
+}
+
 //Network CALL For Pinned Repository
 async function getPinnedRepo(username) {
   let response = await axios.get(`${API_BASE_URL}pinned/${username}`);
@@ -263,5 +269,6 @@ export default {
   languageGraphCaclulations,
   toReadableBytes,
   advancedRepoAnalysis,
-  repoBarGraphCalculation
+  repoBarGraphCalculation,
+  getSearchUsers
 }