8000 fetching properly · DevKaliper/github-find-users@cd64a52 · GitHub
[go: up one dir, main page]
Skip to content

Commit cd64a52

Browse files
DevKaliperDevKaliper
committed
fetching properly
1 parent bd4cee2 commit cd64a52

File tree

6 files changed

+119
-9
lines changed

6 files changed

+119
-9
lines changed

‎README.md

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,2 @@
1-
# React + Vite
21

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
92
# github-find-users

‎src/App.jsx

Lines changed: 15 additions & 1 deletion
< 8000 /tr>
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
1+
import { useEffect, useState } from "react"
2+
import FindUser from "./components/FindUser"
13
import Header from "./components/Header"
4+
import ShowUser from "./components/ShowUser"
5+
import service from "./services/servicesUser";
26

37
function App() {
8+
const [user, setUser] = useState("")
9+
const [userData, setUserData] = useState({})
10+
11+
const handleSubmit = () => {
12+
service.getUser(user).then(usuarios => {setUserData(usuarios)
13+
console.log(userData)
14+
})
15+
}
16+
417
return (
518
<>
619
<Header />
7-
20+
<FindUser user={user} setUser={setUser} handleSubmit={handleSubmit}/>
21+
<ShowUser userData={userData} />
822

923
</>
1024
)

‎src/components/FindUser.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* eslint-disable react/no-unescaped-entities */
2+
3+
4+
5+
const FindUser = ({user, setUser, handleSubmit}) => {// eslint-disable-line no-unused-vars
6+
const handleChange = (e, setSomething) => {
7+
setSomething(e.target.value)
8+
9+
}
10+
return (
11+
<div className="mockup-code font-bold text-white glass relative my-14 ml-14 w-1/4 shadow-2xl overflow-visible bg-[#655E4A] ">
12+
<pre
13+
data-prefix="$"
14+
className="mb-5">
15+
<code>Look for any Github's user</code>
16+
</pre>
17+
<pre
18+
data-prefix=">"
19+
className="text-white">
20+
<input
21+
type="text"
22+
placeholder="Type here"
23+
value={user}
24+
onChange={(e) => handleChange(e, setUser)}
25+
className="input input-bordered w-auto 2xl:max-w-xs bg-transparent"
26+
/>
27+
</pre>
28+
<button onClick={handleSubmit} className="btn w-fit h-fit glass absolute -right-4 shadow-xl bg-white hover:text-white text-black">
29+
<svg
30+
xmlns="http://www.w3.org/2000/svg"
31+
fill="none"
32+
viewBox="0 0 24 24"
33+
strokeWidth={1.5}
34+
stroke="currentColor"
35+
className="h-5 w-5 2xl:w-6 2xl:h-6 ">
36+
<path
37+
strokeLinecap="round"
38+
strokeLinejoin="round"
39+
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
40+
/>
41+
</svg>
42+
</button>
43+
</div>
44+
);
45+
};
46+
47+
export default FindUser;

‎src/components/Header.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const Header = () => {
22
return (
3-
<div className="navbar gap-10 px-32 bg-[#988E6F]">
3+
<div className="navbar glass gap-10 px-32 bg-[#655E4A]">
44
<div className="flex-1 btn btn-ghost normal-case text-xl relative ">
55
<a className="invisible md:visible">Intergrated with </a>
66
<img src="./src/img/GitHub_Logo_White.png" className="absolute md:relative" alt="github" width={150} />

‎src/components/ShowUser.jsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
3+
const ShowUser = ({userData}) => {
4+
return (
5+
<div className="card w-96 bg-[#655E4A] shadow-xl glass mx-auto">
6+
<figure><img className="mt-3" src={userData.avatar_url} alt="Shoes" /></figure>
7+
<div className="card-body">
8+
<h2 className="card-title font-mono">
9+
{userData.name}
10+
<div className="badge badge-success font-bold">{userData.type}</div>
11+
</h2>
12+
<p className="font-mono">{userData.bio}</p>
13+
<div className="card-actions justify-end mt-4">
14+
<div className="badge badge-outline font-mono">Public Repos: {userData.public_repos}</div>
15+
<div className="badge font-mono badge-outline"> followers : {userData.followers}</div>
16+
</div>
17+
<div className="card-actions w-full justify-center mt-4">
18+
19+
{
20+
userData.blog &&
21+
<a href={userData.blog} target="_blank" rel="noreferrer" className="btn btn-ghost font-mono"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
22+
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
23+
</svg> Blog
24+
</a>
25+
}
26+
{
27+
userData.twitter_username &&
28+
<a href={`https://twitter.com/${userData.twitter_username}`} target="_blank" rel="noreferrer" className="btn btn-ghost font-mono"><svg className="invert" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
29+
Twitter
30+
</a>
31+
32+
33+
}
34+
<a href={userData.repos_url} target="_blank" rel="noreferrer" className="btn btn-ghost font-mono"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
35+
<path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
36+
</svg>
37+
38+
Repos
39+
</a>
40+
41+
42+
</div>
43+
</div>
44+
</div>
45+
)
46+
}
47+
48+
export default ShowUser

‎src/services/servicesUser.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const getUser = (user) => {
2+
return fetch("https://api.github.com/users/" + user)
3+
.then((response) => response.json())
4+
.then((data) => data)
5+
.catch((error) => console.log(error));
6+
};
7+
8+
export default { getUser };

0 commit comments

Comments
 (0)
0