Skip to content

Commit

Permalink
Adicionando repositórios
Browse files Browse the repository at this point in the history
  • Loading branch information
Tulio Gabriel committed Mar 18, 2020
1 parent bd99a41 commit cfa2ee8
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 24 deletions.
7 changes: 7 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/axios": "^0.14.0",
"axios": "^0.19.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-icons": "^3.9.0",
Expand All @@ -32,6 +34,11 @@
]
},
"devDependencies": {
"@types/react": "^16.9.23",
"@types/react-dom": "^16.9.5",
"@types/react-icons": "^3.0.0",
"@types/react-router-dom": "^5.1.3",
"@types/styled-components": "^5.0.1",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.0",
Expand Down
76 changes: 59 additions & 17 deletions src/pages/Main/index.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,63 @@
import React from 'react';
import { FaGithubAlt, FaPlus } from 'react-icons/fa';
/* eslint-disable react/state-in-constructor */
/* eslint-disable react/prefer-stateless-function */
import React, { Component } from 'react';
import { FaGithubAlt, FaPlus, FaSpinner } from 'react-icons/fa';

import { Container, Form, SubmitButton } from './styles';

export default function Main() {
return (
<Container>
<h1>
<FaGithubAlt /> Repositórios
</h1>

<Form onSubmit={() => {}}>
<input type="text" placeholder="Adicionar repositório" />
<SubmitButton disabled>
<FaPlus color="#FFF" size={14} />
</SubmitButton>
</Form>
</Container>
);
import api from '../../services/api';

export default class Main extends Component {
state = {
newRepo: '',
repositories: [],
loading: false,
};

handleInputChange = e => {
this.setState({ newRepo: e.target.value });
};

handleSubmit = async e => {
e.preventDefault();
this.setState({ loading: true });
const { newRepo, repositories } = this.state;
const response = await api.get(`/repos/${newRepo}`);
const data = {
name: response.data.full_name,
};

this.setState({
repositories: [...repositories, data],
newRepo: '',
loading: false,
});
};

render() {
const { newRepo, loading } = this.state;

return (
<Container>
<h1>
<FaGithubAlt /> Repositórios
</h1>
<Form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Adicionar repositório"
value={newRepo}
onChange={this.handleInputChange}
/>
<SubmitButton loading={loading}>
{loading ? (
<FaSpinner color="#FFF" size={14} />
) : (
<FaPlus color="#FFF" size={14} />
)}
</SubmitButton>
</Form>
</Container>
);
}
}
30 changes: 27 additions & 3 deletions src/pages/Main/styles.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { keyframes, css } from 'styled-components';

export const Container = styled.div`
max-width: 700px;
Expand Down Expand Up @@ -34,9 +34,20 @@ export const Form = styled.form`
}
`;

export const SubmitButton = styled.button.attrs({
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;

export const SubmitButton = styled.button.attrs(props => ({
type: 'submit',
})`
disabled: props.loading,
}))`
background-color: #7159c1;
border: 0;
padding: 0 15px;
Expand All @@ -46,4 +57,17 @@ export const SubmitButton = styled.button.attrs({
display: flex;
justify-content: center;
align-items: center;
&[disabled] {
cursor: not-allowed;
opacity: 0.6;
}
${props =>
props.loading &&
css`
svg {
animation: ${rotate} 2s linear infinite;
}
`}
`;
7 changes: 7 additions & 0 deletions src/services/api.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import axios from 'axios';

const api = axios.create({
baseURL: 'https://api.github.com',
});

export default api;
90 changes: 86 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1375,6 +1375,13 @@
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-7.2.1.tgz#2ad4e844175a3738cb9e7064be5ea070b8863a1c"
integrity sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==

"@types/axios@^0.14.0":
version "0.14.0"
resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
integrity sha1-7CMA++fX3d1+udOr+HmZlkyvzkY=
dependencies:
axios "*"

"@types/babel__core@^7.1.0":
version "7.1.6"
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.6.tgz#16ff42a5ae203c9af1c6e190ed1f30f83207b610"
Expand Down Expand Up @@ -1432,6 +1439,19 @@
"@types/minimatch" "*"
"@types/node" "*"

"@types/history@*":
version "4.7.5"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==

"@types/hoist-non-react-statics@*":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"

"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
Expand Down Expand Up @@ -1482,14 +1502,45 @@
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==

"@types/react-dom@*":
"@types/react-dom@*", "@types/react-dom@^16.9.5":
version "16.9.5"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.5.tgz#5de610b04a35d07ffd8f44edad93a71032d9aaa7"
integrity sha512-BX6RQ8s9D+2/gDhxrj8OW+YD4R+8hj7FEM/OJHGNR0KipE1h1mSsf39YeyC81qafkq+N3rU3h3RFbLSwE5VqUg==
dependencies:
"@types/react" "*"

"@types/react@*":
"@types/react-icons@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/react-icons/-/react-icons-3.0.0.tgz#27ca2823a6add881d06a371bfff093afc1b9c829"
integrity sha512-Vefs6LkLqF61vfV7AiAqls+vpR94q67gunhMueDznG+msAkrYgRxl7gYjNem/kZ+as2l2mNChmF1jRZzzQQtMg==
dependencies:
react-icons "*"

"@types/react-native@*":
version "0.61.23"
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.61.23.tgz#bff4e0311c229a5203eb37aacd4febf59f3e2980"
integrity sha512-upHmySsrVBDBokWWhYIKkKnpvadsHdioSjbBTu4xl7fjN0yb94KR5ngUOBXsyqAYqQzF+hP6qpvobG9M7Jr6hw==
dependencies:
"@types/react" "*"

"@types/react-router-dom@^5.1.3":
version "5.1.3"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.3.tgz#b5d28e7850bd274d944c0fbbe5d57e6b30d71196"
integrity sha512-pCq7AkOvjE65jkGS5fQwQhvUp4+4PVD9g39gXLZViP2UqFiFzsEpB3PKf0O6mdbKsewSK8N14/eegisa/0CwnA==
dependencies:
"@types/history" "*"
"@types/react" "*"
"@types/react-router" "*"

"@types/react-router@*":
version "5.1.4"
resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.4.tgz#7d70bd905543cb6bcbdcc6bd98902332054f31a6"
integrity sha512-PZtnBuyfL07sqCJvGg3z+0+kt6fobc/xmle08jBiezLS8FrmGeiGkJnuxL/8Zgy9L83ypUhniV5atZn/L8n9MQ==
dependencies:
"@types/history" "*"
"@types/react" "*"

"@types/react@*", "@types/react@^16.9.23":
version "16.9.23"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.23.tgz#1a66c6d468ba11a8943ad958a8cb3e737568271c"
integrity sha512-SsGVT4E7L2wLN3tPYLiF20hmZTPGuzaayVunfgXzUn1x4uHVsKH6QDJQ/TdpHqwsTLd4CwrmQ2vOgxN7gE24gw==
Expand All @@ -1502,6 +1553,16 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==

"@types/styled-components@^5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.0.1.tgz#44d210b0a0218a70df998d1a8e1f69c82d9cc68b"
integrity sha512-1yRYO1dAE2MGEuYKF1yQFeMdoyerIQn6ZDnFFkxZamcs3rn8RQVn98edPsTROAxbTz81tqnVN4BJ3Qs1cm/tKg==
dependencies:
"@types/hoist-non-react-statics" "*"
"@types/react" "*"
"@types/react-native" "*"
csstype "^2.2.0"

"@types/testing-library__dom@*", "@types/testing-library__dom@^6.12.1":
version "6.14.0"
resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz#1aede831cb4ed4a398448df5a2c54b54a365644e"
Expand Down Expand Up @@ -2117,6 +2178,13 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==

axios@*, axios@^0.19.2:
version "0.19.2"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
dependencies:
follow-redirects "1.5.10"

axobject-query@^2.0.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.2.tgz#2bdffc0371e643e5f03ba99065d5179b9ca79799"
Expand Down Expand Up @@ -3470,6 +3538,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
dependencies:
ms "2.0.0"

debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"

debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
Expand Down Expand Up @@ -4600,6 +4675,13 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"

follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"

follow-redirects@^1.0.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"
Expand Down Expand Up @@ -5030,7 +5112,7 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"

hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0:
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
Expand Down Expand Up @@ -8672,7 +8754,7 @@ react-error-overlay@^6.0.6:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.6.tgz#ac4d9dc4c1b5c536c2c312bf66aa2b09bfa384e2"
integrity sha512-Yzpno3enVzSrSCnnljmr4b/2KUQSMZaPuqmS26t9k4nW7uwJk6STWmH9heNjPuvqUTO3jOSPkHoKgO4+Dw7uIw==

react-icons@^3.9.0:
react-icons@*, react-icons@^3.9.0:
version "3.9.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.9.0.tgz#89a00f20a0e02e6bfd899977eaf46eb4624239d5"
integrity sha512-gKbYKR+4QsD3PmIHLAM9TDDpnaTsr3XZeK1NTAb6WQQ+gxEdJ0xuCgLq0pxXdS7Utg2AIpcVhM1ut/jlDhcyNg==
Expand Down

0 comments on commit cfa2ee8

Please sign in to comment.