Merge pull request #2 from future4code/erick-branchh

Projeto, com Parte do carrinho, estrutura, e funções, faltando terminar

Author: igorchacon

src/App.css

@@ -1,3 +1,12 @@
+.button-carrinho {
+  border: none;
+  cursor: pointer;
+  
+  
+}
+
+
+
 .App {
   text-align: center;
 }

src/App.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import Home from './components/Home.js';
 import './App.css';
+import Carrinho from './components/Carrinho';
 import Filtro from './components/Filtro.js';
 
 export default class App extends React.Component {
 
   state = {
+    carrinho: false,
+    carrinhoItem: [],
+    total: 0,
     produtos: [
         {
             id: '1',
@@ -63,14 +67,54 @@ export default class App extends React.Component {
     inputValueText:'',
     filtroInput:false
   }
+
+  abreFechaCarrinho = () => {
+    this.setState((prevState) => ({
+      carrinho: !prevState.carrinho,
+    })
+    )
+  }
+
+  addAcarrinho = (produto) => {
+    const produtoAddNovo = {
+      id: Date.now(),
+      name: produto.name,
+      value: produto.value,
+      imgUrl: produto.imgUrl
+    }
+
+    const totalCarrinho = this.state.total + produtoAddNovo.value;
+
+    const produtoAddLista = [produtoAddNovo, ...this.state.carrinhoItem]
+
+    this.setState({total: totalCarrinho})
+    this.setState({carrinhoItem: produtoAddLista})
+  }
+
+  removerDoCarrinho = (produtoID) => {
+    const atualizaNovoCarrinho = this.state.carrinhoItem.filter((produto) => {
+      return produtoID !== produto;
+    })
+
+    let calculaNovoTotal = 0;
+    calculaNovoTotal = this.state.total - produtoID.value
+
+    this.setState({total: calculaNovoTotal })
+    this.setState({carrinhoItem: atualizaNovoCarrinho})
+
+  }
+
   render(){
 
   return (
     <div>
           <Home />
           <Filtro produtos={this.state.produtos} min={this.state.produtos.inputValueMin} max={this.state.produtos.inputValueMax} />
+          <button class='button-carrinho' onClick={this.abreFechaCarrinho}>Carrinho</button>
+          <div>
+            {this.state.carrinho ? <Carrinho /> : ''}
+          </div>
     </div>
   );
 }
 }
-

src/components/Carrinho.css

@@ -0,0 +1,9 @@
+.containerCarrinho{
+    display: flex;
+    flex-direction: column;
+    width:200px;
+    min-width: 100px;
+    border: 1px solid black;
+    padding: 10px;
+}
+

src/components/Carrinho.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import CarrinhoItem from './CarrinhoItem'
+import './Carrinho.css';
+
+export default class Carrinho extends React.Component {
+    state = {
+        produtos: [
+            {
+                id: '1',
+                name: "Nome do Produto",
+                value: "3333",
+                imageUrl: "https://picsum.photos/200/300?random=1"
+            },
+            {
+                id: '2',
+                name: "Nome do Produto",
+                value: "2222",
+                imageUrl: "https://picsum.photos/200/300?random=2"
+            },
+            {
+                id: '3',
+                name: "Nome do Produto",
+                value: "1111",
+                imageUrl:  "https://picsum.photos/200/300?random=3"
+            },
+            {
+                id: '4',
+                name: "Nome do Produto",
+                value: "4444",
+                imageUrl:  "https://picsum.photos/200/300?random=4"
+            },
+            {
+                id: '5',
+                name: "Nome do Produto",
+                value: "8888",
+                imageUrl:  "https://picsum.photos/200/300?random=5"
+            },
+            {
+                id: '6',
+                name: "Nome do Produto",
+                value: "6666",
+                imageUrl:  "https://picsum.photos/200/300?random=6"
+            },
+            {
+                id: '7',
+                name: "Nome do Produto",
+                value: "5555",
+                imageUrl:  "https://picsum.photos/200/300?random=7"
+            },
+            {
+                id: '8',
+                name: "Nome do Produto",
+                value: "7777",
+                imageUrl:  "https://picsum.photos/200/300?random=8"
+            },
+        ],
+        total: 0,
+    }
+
+
+    render() {
+      
+      return (
+        <div class='containerCarrinho'>
+
+            <h2> Carrinho: </h2>
+            <div>
+                <ul>
+                    <li>
+                        {this.state.produtos.map((produtoID) => (
+                            <CarrinhoItem key={produtoID.id} name={produtoID.name} value={produtoID.value}>
+                                {produtoID.name}
+                                {produtoID.value}
+
+                            </CarrinhoItem>
+                            
+                        ),
+                        )}
+                        
+                    </li>
+                </ul>
+                <p> Total: <b>R$ {this.state.total}</b> </p>
+            </div>
+          
+        </div>
+      );
+    }
+
+
+  }

src/components/CarrinhoItem.js

@@ -0,0 +1,16 @@
+import React from 'react'; 
+
+const CarrinhoItem = (props) => {
+    return (
+        <li>
+            <span>
+                <p>{props.name}</p>
+                <p>{props.value}</p>
+            </span>
+            
+            <button>X</button>
+        </li>
+    )
+}
+
+export default CarrinhoItem;

src/components/Filtro.css

@@ -9,6 +9,5 @@
 
 
 .inputFiltro{
-    
     margin:5px;
 }

src/components/Produtos.js

@@ -8,6 +8,7 @@ function Produtos(props) {
             <h4>{ props.name }</h4>
             <p>R${ props.value }</p>
 
+            {/* <button onClick={() => this.addAcarrinho(produto)}>Adicionar ao carrinho</button> */}
             <button>Adicionar ao carrinho</button>
         </div>
     );