10000 Added repository list of each dev · Note45/github-search-js@a28c725 · GitHub
[go: up one dir, main page]
Skip to content

Commit a28c725

Browse files
Note45Note45
committed
Added repository list of each dev
1 parent cddfb4d commit a28c725

File tree

6 files changed

+61
-8
lines changed

6 files changed

+61
-8
lines changed

‎github-search-app/src/components/Dev/index.js

Lines changed: 18 additions & 1 deletion
< 10000 /div>
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
2+
3+
import { getRepos} from '../../services/api';
4+
import Repositorio from '../../components/Repositorio'
25

36
import './styles.css';
47

58
function Dev({ data }){
9+
const [ repos, setRepos ] = useState([]);
10+
11+
async function load(callBack) {
12+
const repos = await getRepos(data.login);
13+
callBack(repos);
14+
return repos;
15+
}
16+
17+
useEffect(() => {load((value) => {setRepos(value)})}, []);
18+
619
return(
720
<div id='divContainer'>
821
<div id='containerImage'>
@@ -14,6 +27,10 @@ function Dev({ data }){
1427
<p id='bioElement'>{data.bio}</p>
1528
<button id='buttonElement' onClick={()=>{window.open(data.html_url, '_blank')}}>Acessar</button>
1629
</div>
30+
<div id='containerReposito'>
31+
<strong><p>Repositórios</p></strong>
32+
{repos.map((value) => (<Repositorio key={value.id} data={value} />))}
33+
</div>
1734
</div>)
1835
};
1936

‎github-search-app/src/components/Dev/styles.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,18 @@
2020
grid-row: 1 / span 2;
2121
}
2222

23+
#containerReposito {
24+
width: 100%;
25+
height: max-content;
26+
grid-row: 3;
27+
grid-column: 1 / span 2;
28+
}
29+
30+
#containerReposito p {
31+
padding: 10px;
32+
font-size: 32px;
33+
}
34+
2335
#imgAvatar {
2436
width: 200px;
2537
height: 210px;

‎github-search-app/src/components/Repositorio/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import './styles.css'
44

55
function Repositorio({ data }) {
66
return(
7-
<div>
8-
7+
<div id='repoElement'>
8+
<p id='name'>{data.name}</p>
9+
<p id='descricao'>{data.description}</p>
10+
<button onClick={()=>{window.open(data.html_url, '_blank')}}>Acessar</button>
911
</div>
1012
);
1113
};

‎github-search-app/src/components/Repositorio/styles.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
#name {
2+
font-size: 29px;
3+
}
4+
5+
#descricao {
6+
font-size: 24px;
7+
padding-bottom: 20px;
8+
}
9+
10+
#repoElement button{
11+
font-size: 16px;
12+
border:none;
13+
height:36px;
14+
width:300px;
15+
font-weight:bold;
16+
background:rgb(238, 169, 104);
17+
}
18+
19+
#repoElement button:hover {
20+
background:rgb(247, 206, 168);
21+
}

‎github-search-app/src/pages/main/index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from 'react';
22

3-
import { searchDevs, getRepos } from '../../services/api';
3+
import { searchDevs } from '../../services/api';
44
import Dev from '../../components/Dev';
55
import './styles.css';
66

@@ -21,11 +21,11 @@ export default class Main extends Component {
2121
return(
2222
<div>
2323
<div id="divBusca">
24-
<input type="text" id="txtBusca" placeholder="Buscar..."/>
25-
<button id="btnBusca" onClick={this.getDev}>Buscar</button>
24+
<input type="text" id="txtBusca" placeholder="Buscar..."/>
25+
<button id="btnBusca" onClick={this.getDev}>Buscar</button>
2626
</div>
2727
{this.state.dev ?
28-
this.state.dev.map((value) => (<Dev data={value}/>)) : null}
28+
this.state.dev.map((value) => (<Dev key={value.login} data={value}/>)) : null}
2929
</div>
3030
);
3131
}

‎github-search-app/src/services/api.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ export async function searchDevs(){
99

1010
return response.data;
1111
}
12+
1213
export async function getRepos(devName) {
13-
let response = await api.get(`/${devName}/repos`);
14+
let response = await api.get(`/${devName}/repos`).then((value) => value);
1415

1516
return response.data;
1617
}

0 commit comments

Comments
 (0)
0