From d55c7af538febb75d64d05a9071bf792729089eb Mon Sep 17 00:00:00 2001 From: SILVIO DIAS Date: Fri, 13 Sep 2024 10:20:05 -0400 Subject: [PATCH 1/4] Desafio 2 exibir repositorio git --- src/components/Button/styles.js | 7 ++-- src/components/Input/index.js | 2 +- src/components/Input/styles.js | 8 ++-- src/components/ItemRepo/index.js | 10 ++--- src/components/ItemRepo/styles.js | 19 +++++++-- src/pages/App.js | 70 ++++++++++++++----------------- src/services/api.js | 2 +- 7 files changed, 59 insertions(+), 59 deletions(-) diff --git a/src/components/Button/styles.js b/src/components/Button/styles.js index b6f3d74..bcba6b0 100644 --- a/src/components/Button/styles.js +++ b/src/components/Button/styles.js @@ -6,10 +6,11 @@ export const ButtonContainer = styled.button` border: 1px solid #FAFAFA; border-radius: 20px; - height: 62px; - width: 80%; + width: 150px; + padding: 20px 0; + margin-bottom: 30px; - margin: 20px; + font-size: 25px; &: hover { background-color: #FAFAFA40; diff --git a/src/components/Input/index.js b/src/components/Input/index.js index 1d2bc38..03bdfd2 100644 --- a/src/components/Input/index.js +++ b/src/components/Input/index.js @@ -5,7 +5,7 @@ import { InputContainer } from './styles'; function Input({value, onChange}) { return ( - + ) } diff --git a/src/components/Input/styles.js b/src/components/Input/styles.js index 6e2bb16..de82203 100644 --- a/src/components/Input/styles.js +++ b/src/components/Input/styles.js @@ -6,15 +6,13 @@ export const InputContainer = styled.div` border-radius: 20px; height: 62px; - width: 80%; - - margin: 20px; - + width: 600px; + margin: 10px 0; input { background: transparent; border: 0; - width: 90%; + width: 560px; height: 62px; padding: 0 20px; color: #FFFFFF; diff --git a/src/components/ItemRepo/index.js b/src/components/ItemRepo/index.js index c878a6e..2dabe30 100644 --- a/src/components/ItemRepo/index.js +++ b/src/components/ItemRepo/index.js @@ -2,18 +2,14 @@ import React from 'react' import { ItemContainer } from './styles'; -function ItemRepo({repo, handleRemoveRepo}) { - - const handleRemove = () => { - handleRemoveRepo(repo.id) - } +function ItemRepo({repo, handleRemoveRepo}) { return ( - +

{repo.name}

{repo.full_name}

Ver repositório
- Remover +
) diff --git a/src/components/ItemRepo/styles.js b/src/components/ItemRepo/styles.js index 2925c6c..a299cea 100644 --- a/src/components/ItemRepo/styles.js +++ b/src/components/ItemRepo/styles.js @@ -6,17 +6,28 @@ export const ItemContainer = styled.div` h3 { font-size: 32px; color: #FAFAFA; + margin-bottom: 10px; + font-size: 30px; } p { - font-size:16px; color: #FAFAFA60; - margin-bottom:20px; + margin-bottom:30px; + font-size: 20px; + } - a.remover { + a { + background-Color: #e3ebdd; + padding: 13px 19px; + } + + button.remover { color: #FF0000; - margin-top:20px; + background-Color: #e3ebdd; + margin-top: 30px; + padding: 10px 25px; + font-size: 20px; } hr { diff --git a/src/pages/App.js b/src/pages/App.js index b1fec98..f4ec7fb 100644 --- a/src/pages/App.js +++ b/src/pages/App.js @@ -1,51 +1,45 @@ - -import { useState } from 'react'; -import gitLogo from '../assets/github.png' -import Input from '../components/Input'; -import Button from '../components/Button'; -import ItemRepo from '../components/ItemRepo'; -import { api } from '../services/api'; - -import { Container } from './styles'; +import { useState } from "react"; +import gitLogo from "../assets/github.png"; +import Input from "../components/Input"; +import Button from "../components/Button"; +import ItemRepo from "../components/ItemRepo"; +import { api } from "../services/api"; +import { Container } from "./styles"; function App() { - - const [currentRepo, setCurrentRepo] = useState(''); + const [currentRepo, setCurrentRepo] = useState(""); const [repos, setRepos] = useState([]); - const handleSearchRepo = async () => { - - const {data} = await api.get(`repos/${currentRepo}`) - - if(data.id){ - - const isExist = repos.find(repo => repo.id === data.id); - - if(!isExist){ - setRepos(prev => [...prev, data]); - setCurrentRepo('') - return - } - + try { + const { data } = await api.get(`${currentRepo}/repos`); + console.log(data); + setRepos(data); + setCurrentRepo(""); + } catch (error) { + alert("Repositório não encontrado"); } - alert('Repositório não encontrado') - - } - - const handleRemoveRepo = (id) => { - console.log('Removendo registro', id); - - // utilizar filter. - } + }; + const handleRemoveRepo = (repoId) => { + setRepos(repos.filter((repo) => repo.id !== repoId)); + }; return ( - github logo - setCurrentRepo(e.target.value)} /> -