From 93382e6cdc57ea91ee63a5660e16302353a1f488 Mon Sep 17 00:00:00 2001 From: Marcia-Simplicio Date: Fri, 8 Jan 2021 15:39:16 -0300 Subject: [PATCH] =?UTF-8?q?Altera=C3=A7=C3=B5es-corretas-feitas-na-branc-L?= =?UTF-8?q?abeEcommerce?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 209 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 133 insertions(+), 76 deletions(-) diff --git a/src/App.js b/src/App.js index 2386f7e..821649a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,84 +1,141 @@ -import React from "react"; -import "./App.css"; -import logo from "./youtube.png"; -import menu from "./hamburguer.png" -import imgcopia from "./imgcopia.png" +import React from 'react'; +import {Filtro} from './components/Filtro/Filtro'; +import {Produtos} from './components/Produtos/Produtos'; +import {Carrinho} from './components/Carrinho/Carrinho'; +import styled from 'styled-components'; +import condicionador from './img.jpg'; -function App() { - const titulo = "Titulo do video" - function reproduzVideo() { - alert("O vídeo está sendo reproduzido") +const AppContainer = styled.div` + display: grid; + grid-template-columns: 1fr 2fr 2fr; + padding:10px; + gap:4px; + `; + + const produtos = [ + { + id: 1, + nome: 'Produto 1', + preco: 100, + foto: '' + }, + { + id: 2, + nome: 'Produto 2', + preco: 200, + foto: '' + }, + { + id: 3, + nome: 'Produto 3', + preco: 300, + foto: '' + }, + { + id: 4, + nome: 'Produto 4', + preco: 400, + foto: '' + }, + { + id: 5, + nome: 'Produto 5', + preco: 500, + foto: '' + }, + { + id: 6, + nome: 'Produto 6', + preco: 600, + foto: '' + } +] + +class App extends React.Component { + state = { + filtroMin:"10", + filtroMax: "1000", + filtroNome:'', + produtosCarrinho: [] + } + + onChangeFiltroMin = (event) => { + this.setState({filtroMin: event.target.value}) + } + + onChangeFiltroMax = (event) => { + this.setState({filtroMax: event.target.value}) + } + + onChangeFiltroNome = (event) => { + this.setState({filtroNome: event.target.value}) + } + + onAddProdutoCarrinho = (produtosId) =>{ + const prodCarrinho = this.state.produtosCarrinho.find(produtos => produtosId === produtos.id) + + if(prodCarrinho){ + const newProdtsCarrrinho = this.state.produtosCarrinho.map(produtos =>{ + if(produtosId === produtos.id){ + return{ + ...produtos, + qtd: produtos.qtd + 1 + } + } + return produtos + }) + this.setState({produtosCarrinho: newProdtsCarrrinho}) + } else{ + const produtoAdd = produtos.find(produtos => produtosId === produtos.id) + + const newProdtsCarrrinho = [...this.state.produtosCarrinho,{...produtoAdd, qtd: 1}] + + this.setState({produtosCarrinho: newProdtsCarrrinho}) + } + + } + + onRemoverProdutoCarrinho = (produtosId) =>{ + const newProdtsCarrrinho = this.state.produtosCarrinho.map((produtos) =>{ + if(produtos.id === produtosId){ + return{ + ...produtos, + qtd: produtos.qtd - 1 + } + } + return produtos + }).filter((produtos) => produtos.qtd > 0) + + this.setState({produtosCarrinho: newProdtsCarrrinho}) + } + render(){ return ( - -
-
- - -

LabTubeBR

- - - -
- -
- - -
-
- -

{titulo}

-
-
- -

{titulo}

-
-
- -

{titulo}

-
-
- -

{titulo}

-
-
- -

{titulo}

-
-
- -

{titulo}

-
-
- -

{titulo}

-
-
- -

{titulo}

-
-
-
- -
-

streaming desenvovimento

-
-
- + + + + + ); + } } -export default App; +export default App; \ No newline at end of file