8000 website done · DevKaliper/github-find-users@d8ac237 · GitHub
[go: up one dir, main page]
Skip to content

Commit d8ac237

Browse files
DevKaliperDevKaliper
committed
website done
1 parent cd64a52 commit d8ac237

File tree

3 files changed

+106
-58
lines changed

3 files changed

+106
-58
lines changed

‎src/App.jsx

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,45 @@
1-
import { useEffect, useState } from "react"
2-
import FindUser from "./components/FindUser"
3-
import Header from "./components/Header"
4-
import ShowUser from "./components/ShowUser"
1+
import { useState } from "react";
2+
import FindUser from "./components/FindUser";
3+
import Header from "./components/Header";
4+
import ShowUser from "./components/ShowUser";
55
import service from "./services/servicesUser";
66

77
function App() {
8-
const [user, setUser] = useState("")
9-
const [userData, setUserData] = useState({})
8+
const [user, setUser] = useState("");
9+
const [userData, setUserData] = useState("");
10+
const [errror, setError] = useState(false);
1011

1112
const handleSubmit = () => {
12-
service.getUser(user).then(usuarios => {setUserData(usuarios)
13-
console.log(userData)
14-
})
15-
}
13+
service
14+
.getUser(user)
15+
.then((usuarios) => {
16+
setUserData(usuarios);
17+
setError(false);
18+
19+
})
20+
.catch((error) => {
21+
setError(true);
22+
console.log(error);
23+
});
24+
};
1625

1726
return (
1827
<>
1928
<Header />
20-
<FindUser user={user} setUser={setUser} handleSubmit={handleSubmit}/>
21-
<ShowUser userData={userData} />
22-
29+
<FindUser
30+
user={user}
31+
setUser={setUser}
32+
handleSubmit={handleSubmit}
33+
/>
34+
{userData ? (
35+
<ShowUser userData={userData} errror={errror} />
36+
) : (
37+
<h1 className="text-center font-mono text-5xl ">
38+
No User to search...
39+
</h1>
40+
)}
2341
</>
24-
)
42+
);
2543
}
2644

27-
export default App
45+
export default App;

‎src/components/ShowUser.jsx

Lines changed: 62 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,69 @@
11

22

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>
3+
const ShowUser = ({userData, errror}) => {
374

38-
Repos
39-
</a>
40-
5+
if (errror === false){
6+
return (
417

42-
</div>
43-
</div>
44-
</div>
45-
)
8+
<div className="card w-96 min-h-fit bg-[#655E4A] relative 2xl:-top-52 shadow-xl glass mx-auto">
9+
<figure><img className="mt-3" src={userData.avatar_url} alt="Shoes" /></figure>
10+
<div className="card-body">
11+
<h2 className="card-title font-mono">
12+
{userData.name}
13+
<div className="badge badge-success font-bold">{userData.type}</div>
14+
</h2>
15+
<p className="font-mono">{userData.bio}</p>
16+
<div className="card-actions justify-end mt-4">
17+
<div className="badge badge-outline font-mono">Public Repos: {userData.public_repos}</div>
18+
<div className="badge font-mono badge-outline"> followers : {userData.followers}</div>
19+
</div>
20+
<div className="card-actions w-full justify-center mt-4">
21+
22+
{
23+
userData.blog &&
24+
<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">
25+
<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" />
26+
</svg> Blog
27+
</a>
28+
}
29+
{
30+
userData.twitter_username &&
31+
<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>
32+
Twitter
33+
</a>
34+
35+
36+
}
37+
<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">
38+
<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" />
39+
</svg>
40+
41+
Repos
42+
</a>
43+
44+
45+
</div>
46+
</div>
47+
</div>
48+
)
49+
50+
}
51+
else{
52+
return(
53+
<div className="card w-96 min-h-fit bg-[#655E4A] relative 2xl:-top-52 shadow-xl glass mx-auto">
54+
<figure><img className="mt-3" src="https://user-images.githubusercontent.com/24848110/33519396-7e56363c-d79d-11e7-969b-09782f5ccbab.png" alt="ERROR" /></figure>
55+
<div className="card-body">
56+
<h2 className="card-title font-mono">
57+
OOPS !! ERROR 404
58+
<div className="badge badge-success font-bold">Not Found</div>
59+
</h2>
60+
61+
62+
</div>
63+
</div>
64+
)
65+
}
66+
4667
}
4768

4869
export default ShowUser

‎src/services/servicesUser.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1+
class error404 extends Error {
2+
constructor(message) {
3+
super(message);
4+
this.name = "error404";
5+
}
6+
}
7+
18
const getUser = (user) => {
29
return fetch("https://api.github.com/users/" + user)
3-
.then((response) => response.json())
10+
.then((response) => {
11+
if(response.status === 404) {throw new error404("Usuario no encontrado")}
12+
return response.json()})
413
.then((data) => data)
5-
.catch((error) => console.log(error));
14+
615
};
716

817
export default { getUser };

0 commit comments

Comments
 (0)
0