From cfa2ee866d502c7b6f117e601b5dbdfb3cd50780 Mon Sep 17 00:00:00 2001 From: Tulio Gabriel Date: Wed, 18 Mar 2020 11:07:14 -0300 Subject: [PATCH] =?UTF-8?q?Adicionando=20reposit=C3=B3rios?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 7 ++++ src/pages/Main/index.js | 76 +++++++++++++++++++++++++-------- src/pages/Main/styles.js | 30 ++++++++++++-- src/services/api.js | 7 ++++ yarn.lock | 90 ++++++++++++++++++++++++++++++++++++++-- 5 files changed, 186 insertions(+), 24 deletions(-) create mode 100644 src/services/api.js diff --git a/package.json b/package.json index 3fc8a4a..f46f2ee 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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", diff --git a/src/pages/Main/index.js b/src/pages/Main/index.js index 6a7300b..56dfcaf 100644 --- a/src/pages/Main/index.js +++ b/src/pages/Main/index.js @@ -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 ( - -

- Repositórios -

- -
{}}> - - - - -
- - ); +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 ( + +

+ Repositórios +

+
+ + + {loading ? ( + + ) : ( + + )} + +
+ + ); + } } diff --git a/src/pages/Main/styles.js b/src/pages/Main/styles.js index 6fa2841..7308d25 100644 --- a/src/pages/Main/styles.js +++ b/src/pages/Main/styles.js @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { keyframes, css } from 'styled-components'; export const Container = styled.div` max-width: 700px; @@ -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; @@ -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; + } + `} `; diff --git a/src/services/api.js b/src/services/api.js new file mode 100644 index 0000000..2a524b2 --- /dev/null +++ b/src/services/api.js @@ -0,0 +1,7 @@ +import axios from 'axios'; + +const api = axios.create({ + baseURL: 'https://api.github.com', +}); + +export default api; diff --git a/yarn.lock b/yarn.lock index a333815..2a6c4ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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" @@ -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== @@ -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" @@ -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" @@ -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" @@ -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" @@ -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== @@ -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==