PR de correção

package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,38 +1,12 @@
-.App {
-  text-align: center;
+* {
+  padding: 0;
+  margin: 0;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.ContainerGrid{
+  height: 400px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.ContainerFlex{
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+}

src/App.js

@@ -1,26 +1,54 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import listaProdutos from './db/dbProdutos'
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import ComponentFiltros from './components/ComponentFiltros/ComponentFiltros';
+import GridProdutos from './components/gridprodutos/gridprodutos'
+
+class App extends React.Component {
+
+  state = {
+    produtos: listaProdutos,
+    valorMinimo: 0,
+    valorMaximo: 200000,
+    filtraNome: ''
+  }
+
+  onChangeMinimo = (event) => {
+    this.setState({ valorMinimo: event.target.value })
+  }
+
+  onChangeMaximo = (event) => {
+    this.setState({ valorMaximo: event.target.value })
+  }
+
+  render() {
+
+    const listaFiltrada = this.state.produtos.filter((item) =>
+      this.state.valorMinimo > 0 ? (item.precoProduto >= this.state.valorMinimo) : true).filter((item) => 
+      this.state.valorMaximo > 0 ? (item.precoProduto <= this.state.valorMaximo) : true) 
+
+      console.log(listaFiltrada)
+
+    return (
+      <div className="ContainerFlex">
+        <div>
+          <ComponentFiltros
+            inputMinimo={this.state.valorMinimo} atualizaValorMinimo={this.onChangeMinimo}
+            inputMaximo={this.state.valorMaximo} atualizaValorMaximo={this.onChangeMaximo}
+            inputNome={this.state.filtraNome}
+          />
+        </div>
+        <div className='ContainerGrid'>
+
+          <GridProdutos
+          listaDeProdutos={listaFiltrada}
+          />
+        </div>
+        <div>Area Carrinho</div>
+      </div>
+    );
+  }
 }
 
 export default App;

src/components/ComponentFiltros/ComponentFiltros.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const ContainerFiltros = styled.div`
+    display: flex;
+    flex-direction: column;
+    /* justify-content:space-evenly; */
+    align-items: center;
+    width: 250px;
+    height: 300px;
+`
+
+export default class ComponentFiltros extends React.Component {    
+
+    render() {        
+
+        return (
+            <ContainerFiltros>
+                <h2>Filtros</h2>
+                <div>
+                    <p>Valor minimo</p>
+                    <input placeholder='R$' type='number'
+                        value={this.props.inputMinimo} onChange={this.props.atualizaValorMinimo}
+                    />
+                </div>
+                <div>
+                    <p>Valor maximo</p>
+                    <input placeholder='R$' type='number'
+                        value={this.props.inputMaximo} onChange={this.props.atualizaValorMaximo}
+                    />
+                </div>
+                <div>
+                    <p>Filtrar por nome</p>
+                    <input />
+                </div>
+            </ContainerFiltros>
+        )
+    }
+}

src/components/gridprodutos/gridprodutos.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import styled from 'styled-components'
+import Produto from '../produto/produto'
+import listaProdutos from '../../db/dbProdutos'
+
+const GridMain = styled.div`
+  display: grid;
+  width: 100%;
+  height: 100%;
+  `
+
+
+export default class GridProdutos extends React.Component {
+  // produtosRenderizados = listaProdutos.map(pdt => {
+  //   return (<Produto idProduto={pdt.idProduto} nomeProduto={pdt.nomeProduto} 
+  //     precoProduto={pdt.precoProduto.toLocaleString('pt-br',{minimumFractionDigits: 2})} imagemProduto={pdt.imagemProduto}/>)
+  // })
+
+  render() {
+
+    const produtosRenderizados = this.props.listaDeProdutos.map(pdt => {
+      return (<Produto idProduto={pdt.idProduto} nomeProduto={pdt.nomeProduto} 
+        precoProduto={pdt.precoProduto.toLocaleString('pt-br',{minimumFractionDigits: 2})} imagemProduto={pdt.imagemProduto}/>)
+    })
+
+    return (
+      <GridMain>
+        {produtosRenderizados}
+      </GridMain>
+    )
+  }
+}

src/components/produto/produto.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const DivContainer = styled.div`
+display: flex;
+position: relative;
+flex-direction: column;
+border: 1px solid black;
+height: 460px;
+width: 400px;
+padding: 5px;
+`
+const DivImg = styled.div`
+width: 400px;
+height: 300px;
+`
+const ImgProduto = styled.img`
+width: 100%;
+height: 100%;
+`
+const NomeProduto = styled.p`
+font-size: 1.9rem;
+margin: 10px 5px;
+font-weight: bold;
+text-align: center;
+`
+const PrecoProduto = styled.p`
+font-size: 1.9rem;
+margin: 5px;
+text-align: center;
+color: orange;
+font-weight: 900;
+`
+
+const BotaoAdicionar = styled.button`
+width: 400px;
+height: 50px;
+background-color: #3282b8;
+color: white;
+font-size: 1.4rem;
+position: absolute;
+bottom: 5px;
+`
+
+
+export default class Produto extends React.Component {
+  render() {
+    return (
+      <DivContainer>
+        <DivImg>
+          <ImgProduto src={this.props.imagemProduto}/>
+        </DivImg>
+        <NomeProduto>{this.props.nomeProduto}</NomeProduto>
+        <PrecoProduto>R$ {this.props.precoProduto}</PrecoProduto>
+        <BotaoAdicionar>Adicionar ao carrinho</BotaoAdicionar>
+      </DivContainer>
+    )
+  }
+}