diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx index cf8788fb..2b2099e4 100644 --- a/src/pages/Tracker/Tracker.tsx +++ b/src/pages/Tracker/Tracker.tsx @@ -168,6 +168,28 @@ const Home: React.FC = () => { return ; }; +useEffect(() => { + if (!username) { + setSuggestions([]); + return; + } + + const fetchUsers = async () => { + try { + const res = await fetch( + `https://api.github.com/search/users?q=${username}` + ); + + const data = await res.json(); + + setSuggestions(data.items?.slice(0, 5) || []); + } catch (err) { + console.log(err); + } + }; + + fetchUsers(); +}, [username]); // Current data and filtered data according to tab and filters const currentRawData = tab === 0 ? issues : prs; @@ -179,14 +201,61 @@ const Home: React.FC = () => { {/* Auth Form */}
- - setUsername(e.target.value)} - required - sx={{ flex: 1, minWidth: 150 }} - /> + + + setUsername(e.target.value)} + required + /> + + {suggestions.length > 0 && ( + + {suggestions.map((user) => ( + { + setUsername(user.login); + setSuggestions([]); + }} + sx={{ + px: 2, + py: 1.5, + cursor: "pointer", + borderBottom: "1px solid #eee", + "&:hover": { + backgroundColor: "#f5f5f5", + }, + }} + > + {user.login} + + ))} + + )} + +