From 7c4c6b8648c14b2e32c2fb8ad490933ceafe9061 Mon Sep 17 00:00:00 2001
From: GabrielMBatista <gabbriel_gbl2@hotmail.com>
Date: Sun, 10 Jan 2021 14:25:58 -0300
Subject: [PATCH] carrinho

tentando implementar o carriinho
---
 src/App.js                                    | 45 +++++-----------
 src/Componentes/Carrinho/CarrinhoCompras.js   | 31 ++++++-----
 src/Componentes/FiltroPrecos/FiltroPodutos.js | 18 ++++---
 src/Componentes/Produto/ListaDeProdutos.js    | 53 ++++++++++++-------
 4 files changed, 74 insertions(+), 73 deletions(-)

diff --git a/src/App.js b/src/App.js
index b0eba9f..f757acf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -108,34 +108,14 @@ const produtosLista = [
     imagem: img6,
     quantidade: 1,
   },
-  {
-    id: 7,
-    nome: 'Paco Rabanne',
-    preco: 880,
-    imagem: img2,
-    quantidade: 1,
-  },
-  {
-    id: 8,
-    nome: 'Paco Rabanne',
-    preco: 599,
-    imagem: img4,
-    quantidade: 1,
-  },
-  {
-    id: 9,
-    nome: 'Paco Rabanne',
-    preco: 1210,
-    imagem: img1,
-    quantidade: 1,
-  },
 ];
+let CarrinhoLista = [];
 
 class App extends React.Component {
   state = {
     VisorAtivo: false,
-    ValorMin: 0,
-    ValorMax: 0,
+    ValorMin: 1,
+    ValorMax: 2000,
     NomeProduto: '',
   }
 
@@ -144,11 +124,12 @@ class App extends React.Component {
       VisorAtivo: !this.state.VisorAtivo
     })
   }
-  CarregarTela = () => {
+
+
+  CarregarCarrinho = () => {
     if (this.state.VisorAtivo) {
       return (
-        <CarrinhoCompras>
-
+        <CarrinhoCompras lista= {produtosLista}>
         </CarrinhoCompras>
       )
     } else
@@ -175,26 +156,24 @@ class App extends React.Component {
   }
 
 
-
   render() {
     return (
       <ContainerPrincipal>
         <Botaoabrir className='carrinho'
           onClick={this.AbrirVisor}>
         </Botaoabrir>
-        {this.CarregarTela()}
+        {this.CarregarCarrinho()}
         <Header>
           header
         </Header>
-        <FiltroPodutos lista={produtosLista} min={this.state.ValorMin} max={this.state.ValorMax} nome={this.state.NomeProduto} />
+        <FiltroPodutos  lista={produtosLista} min={this.state.ValorMin} max={this.state.ValorMax} nome={this.state.NomeProduto} />
         <Filtro>
           <h2>FiltroPreços</h2>
           <ul>
-            <input type='number'  placeholder="Valor Min" onChange={this.onChangemin}></input>
-            <input type='number'  placeholder='Valor Max' onChange={this.onChangemax}></input>
-            <input type='string'  placeholder='Nome' onChange={this.onChangename}></input>
+            <input type='number' placeholder="Valor Min" onChange={this.onChangemin}></input>
+            <input type='number' placeholder='Valor Max' onChange={this.onChangemax}></input>
+            <input type='string' placeholder='Nome' onChange={this.onChangename}></input>
           </ul>
-
         </Filtro>
         <Footer>
           footer
diff --git a/src/Componentes/Carrinho/CarrinhoCompras.js b/src/Componentes/Carrinho/CarrinhoCompras.js
index ce8ef3f..cccc4b4 100644
--- a/src/Componentes/Carrinho/CarrinhoCompras.js
+++ b/src/Componentes/Carrinho/CarrinhoCompras.js
@@ -18,30 +18,33 @@ z-index:1000;
 `
 const ProdutoList = styled.ul`
   padding: 0;
-  width: 200px;
+  width: 100%;
 `
 const ProdutoItem = styled.li`
 text-align: center;
-width:50px;
+width: 100%;
+height:40%;
  `
 
-class CarrinhoCompras extends React.Component{
- 
 
-    render(){                  
-                            
-            
-        return(
+function CarrinhoCompras(props) {
+
+  
+    return (
+   
         <Carrinho>
-            <ProdutoList>
-                 <ProdutoItem>1</ProdutoItem> 
-                 <ProdutoItem>2</ProdutoItem> 
-                 <ProdutoItem>3</ProdutoItem> 
+            <ProdutoList> nome preço quantidade 
+            {props.lista.map(item => {
+                    return (
+                        <ProdutoItem>
+                            <p>{item.nome} {item.preco} {item.quantidade}</p>
+                        </ProdutoItem>
+                    )
+                })}
             </ProdutoList>
         </Carrinho>
-        )
         
-    }
+    )
 
 }
 
diff --git a/src/Componentes/FiltroPrecos/FiltroPodutos.js b/src/Componentes/FiltroPrecos/FiltroPodutos.js
index 1cc184a..6688336 100644
--- a/src/Componentes/FiltroPrecos/FiltroPodutos.js
+++ b/src/Componentes/FiltroPrecos/FiltroPodutos.js
@@ -1,20 +1,24 @@
 import React from 'react';
 import ListaDeProdutos from '../Produto/ListaDeProdutos'
-
+import selectTarefa from '../../App'
 
 function FiltroPodutos(props) {
-    const ListaFiltrada = props.lista.filter((produtos) => {
+
+      const ListaFiltrada = props.lista.filter((produtos) => {
         if (produtos.preco >= props.min) {
             return true
         } else {
             return false
         }
+    }).filter((produtos) => {
+        if (produtos.preco <= props.max) {
+            return true
+        } else {
+            return false
+        }
     })
-   
-    console.log(ListaFiltrada)
-    console.log(props)
-
-    return (<ListaDeProdutos produtos={ListaFiltrada} />)
+ 
+     return (<ListaDeProdutos  produtos={ListaFiltrada} />)
 }
 
 export default FiltroPodutos
\ No newline at end of file
diff --git a/src/Componentes/Produto/ListaDeProdutos.js b/src/Componentes/Produto/ListaDeProdutos.js
index c82b182..cd992dd 100644
--- a/src/Componentes/Produto/ListaDeProdutos.js
+++ b/src/Componentes/Produto/ListaDeProdutos.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-
+import selectTarefa from '../../App'
 const ProdutoList = styled.div`
 display: grid;
 grid-template-columns: repeat(3,1fr);
@@ -23,26 +23,41 @@ height:90%;
 width: 90%;
 margin-left:5%;
 border-radius: 10%;
+padding-bottom:5%;
  `
-
-function ListaDeProdutos (props) {
-        
-        return (
-            <div>
-                <ProdutoList>
-                    {props.produtos.map(item => {
-                        return (
-                            <ProdutoItem>
-                                <p>{item.nome}</p>
-                                <img src={item.imagem} />
-                                <p> {item.preco}</p>
-                            </ProdutoItem>
-                        )
-                    })}
-                </ProdutoList>
-             </div>
-        )
+ const Comprar = styled.button`
+ display: flex;
+ justify-content: space-between;
+ text-align: center;
+ flex-direction:column;
+ align-items: center;
+ background-color: #f2f2f2;
+ width: 50%;
+ margin-left:5%;
+ border-radius: 10%;
+ padding-bottom:2%;
+  `
  
+
+function ListaDeProdutos(props) {
+
+    return (
+        <div>
+            <ProdutoList>
+                {props.produtos.map(item => {
+                    return (
+                        <ProdutoItem>
+                            <p>{item.nome}</p>
+                            <img src={item.imagem} />
+                            <p> {item.preco}</p>
+                            <Comprar> Comprar</Comprar>
+                        </ProdutoItem>
+                    )
+                })}
+            </ProdutoList>
+        </div>
+    )
+
 }
 
 export default ListaDeProdutos