Finalizado

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,28 +1,11 @@
-# Avaliação Pleno
-Olá desenvolvedor!\
-Tudo bem?! 😊\
-\
-Seja bem-vindo, o intuito do teste não é reprovar e sim conhecer seu melhor estilo de programar e resolver problemas.
+# Como executar:
+Acesse o repositório e execute o comando abaixo para instalar as dependências necessárias.
 
-## O que fazer
-1. Fazer um fork desse repositório e trabalhar no seu ambiente.
-2. Replicar o layout do link abaixo:\
-[Link para o layout](https://xd.adobe.com/view/c715f110-fbd4-4323-be0c-0e453c1450db-9246/?fullscreen&hints=off)
-2. Utilizar a [PokeAPI](https://pokeapi.co/) para trazer os itens e renderizar nos cards da melhor forma possível. Você pode escolher quais informações e imagens vão aparecer no card.
-3. Implementar a funcionalidade de busca na melhor forma possível.
-4. Implementar a funcionalidade de paginação(carregar mais) dos cards na melhor forma possível.
-5. Os cliques nos botões de editar/excluir/novo card podem exibir um alerta de que a funcionalidade não foi implementada.
-6. Ao finalizar a avaliação modifique esse README com as instruções de como podemos fazer o seu código rodar na nossa máquina. Ou seja, passo a passo do que instalar e de quais comandos rodar para podermos visualizar o seu trabalho!
-7. Realizar um Pull Request para o nosso repositório e mandar um e-mail para pedro.paradella@impar.com.br com o assunto "Avaliação Pleno", informando que finalizou a avaliação e colocando o link do Pull Request. 
+# npm install
+# npm install bootstrap
+# npm install styled-components
+# npm start
+Abra http://localhost:3000 para executar no navegador
 
-## Dicas
-* Não foi definido limite de linhas e colunas, portanto fique à vontade para tal escolha.
-* Gostamos de interfaces limpas e elegantes.
-
-## Quais tecnologias usar
-* Deixaremos a seu critério qual tecnologia utilizar no entanto você terá mais pontos conosco se utilizar React para criação da interface e também o uso de pré-processadores/styled-components para o CSS.
-
-## Desafios se você se sentir confiante
-* Colocar em algum lugar do site uma integração com o clima tempo. Deixaremos a seu critério de onde colocar e quais funcionalidades terá.
-* Precisa ser criada uma conta free para o consumo da API clima tempo.
-* [Link da API clima tempo](https://advisor.climatempo.com.br/)
+# Observação
+Fiz no tempo que eu tinha disponivel, infelimente por conta do feriado estou indo vaiajar, ficarei fora até semana que vem. Não consegui terminar todas as funções que solicitaram. Qualquer duvida fico a disposição, ficou faltando o filtro, e terminar o restinho da função para aparecer a Modal.

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "teste",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.1",
+    "babel": "^6.23.0",
+    "bootstrap": "^5.1.0",
+    "jquery": "^3.6.0",
+    "popper.js": "^1.16.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "styled": "^1.0.0",
+    "styled-components": "^5.3.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.css

@@ -0,0 +1,38 @@
+.App {
+    padding-top: 6rem;
+    min-height: 100vh;
+}
+
+.navbar {
+    background-image: linear-gradient(-90deg, #a83279, #5e2255) !important;
+}
+
+.modal-bg {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 5%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s opacity 0,5s;
+}
+
+.bg-active{
+    visibility: visible;
+    opacity: 1;
+}
+
+.modal {
+    background-color: white;
+    width: 100%;
+    height: 30%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column-reverse;
+}

src/App.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import './App.css';
+import NavBar from './NavigationBar';
+import Dashboard from './Dashboard';
+
+
+class App extends Component {
+  render () {
+    return (<div className="App" >
+      <NavBar />
+      <div className="container"> 
+      <div class="input-group rounded">
+        <input type="search" class="form-control rounded" placeholder="Digite aqui sua busca..." aria-label="Search"
+          aria-describedby="search-addon" />
+      </div>
+        <Dashboard/>   
+      </div>
+    </div>
+    );
+  }
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/CartaoPokemon.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+
+import styled from 'styled-components';
+
+const Sprite = styled.img`
+  width: 5em;
+  height: 5em;
+`;
+
+export default class CartaoPokemon extends Component {
+  state = {
+    name:'',
+    imageUrl:'',
+    pokemonIndex:'',
+    imageLoading: true,
+    toManyRequests: false
+  };
+
+  componentDidMount() {
+    const { name, url } = this.props;
+    const pokemonIndex = url.split('/')[url.split('/').length - 2];
+    const imageUrl = `https://github.com/PokeAPI/sprites/blob/master/sprites/pokemon/${pokemonIndex}.png?raw=true`;
+
+    this.setState({
+      name,
+      imageUrl,
+      pokemonIndex
+    });
+  }
+
+
+  render () {
+    return (
+        <div className='col-md-3 col-sm-6 mb-5'>
+            <div className="card">
+                <h5 className="card-header">{this.state.pokemonIndex}</h5>
+                <Sprite
+                  className="card-img-top rounded mx-auto mt-2"
+                  onLoad={() => this.setState({ imageLoading: false })}
+                  onError={() => this.setState({ toManyRequests: true })}
+                  src={this.state.imageUrl}
+                  />
+                  <div className="card-body mx-auto">
+                      <h6 className="card-title ">
+                        {this.state.name
+                          .toLowerCase()
+                          .split(' ')
+                          .map(
+                            letter => letter.charAt(0).toUpperCase() + letter.substring(1)
+                          )
+                          .join(' ')}               
+                      </h6>
+                </div>
+            <button class="modal-btn">Editar</button>
+            <button class="modal-btn">Excluir</button>
+            </div>
+            <div class="modal-bg">
+              <div class="modal">
+                <h2>Não está funcionando este botão !</h2>
+              </div>
+            </div>
+        </div>
+    );
+  }
+}

src/Dashboard.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import ListadePokemon from './ListadePokemon';
+
+export default class Dashboard extends Component {
+  render () {
+    return (
+        <div className="row">
+            <div className="col">
+                <ListadePokemon/>
+            </div>
+        </div>
+    );
+  }
+}

src/ListadePokemon.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+
+import CartaoPokemon from './CartaoPokemon';
+
+export default class ListadePokemon extends Component {
+  state = {
+    url: 'https://pokeapi.co/api/v2/pokemon/',
+    pokemon: null
+  };
+
+async componentDidMount() {
+    const res = await axios.get(this.state.url);
+    this.setState({ pokemon: res.data['results'] });
+}
+
+
+  render () {
+    return (
+      <React.Fragment>
+        {this.state.pokemon ? (
+        <div className="row">
+          {this.state.pokemon.map(pokemon => (
+            <CartaoPokemon
+            key={pokemon.name}
+            name={pokemon.name}
+            url={pokemon.url}
+            />
+          ))}
+        </div>
+      ) : (
+        <h1>Carregando...</h1>
+      )} 
+      </React.Fragment>
+    );
+  }
+}

src/NavigationBar.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+export default class NavBar extends Component {
+  render () {
+    return (
+    <div>
+        <nav className="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+          <a className="navbar-brand col-sm-3 col-md-2 mr-0 align-items-center">
+          <img src="logoImpar.png" class="light" alt=""></img>
+          </a>
+        </nav>
+    </div>
+    );
+  }
+}

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}