From 5b230c2d3ec9c77c750763e1a3d85a4a33145173 Mon Sep 17 00:00:00 2001
From: leogsousa <leonardogomessousa5@gmail.com>
Date: Sun, 28 Jun 2020 23:55:07 -0300
Subject: [PATCH] Feito o E-commerce faltando uma funcionalidade, entrega final

---
 public/index.html          |   3 +-
 src/App.js                 | 184 +++++++++++++++++++++++++++++--------
 src/components/Carrinho.js |  17 ++--
 src/components/Filtros.js  |  60 ++++++------
 src/components/Produtos.js | 151 ++++++++++++++++++++----------
 5 files changed, 288 insertions(+), 127 deletions(-)
diff --git a/public/index.html b/public/index.html
index aa069f2..2cab1a4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
@@ -26,7 +27,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body style="background-color: #1c1d24;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.js b/src/App.js
index 55d6d43..53b3efd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,52 +1,158 @@
 import React from 'react';
-import './App.css';
 import Produtos from './components/Produtos.js'
 import Carrinho from './components/Carrinho.js'
-import Filtros from './components/Filtros.js'
-import IconCompra from './Imagens/compra.png'
+import Filtros from './components/Filtros'
 import styled from 'styled-components'
+import IconCompra from './Imagens/compra.png'
 
-const DivPai = styled.div`
-display: flex;
-justify-content: space-between;
-height: 95vh;
-margin: 5px;
-width:100%;
+const DivComCarrinho = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  color: white;
+  display: grid;
+  grid-template-columns: 20% 60% 20%;
+  grid-template-rows: 1fr;
+  height: 98%;
+  width: 98%;
+  box-sizing: border-box;
+  margin: 1%;
 `
-
-const FormactCar = styled.img`
-height: 40px;
+const DivSemCarrinho = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  color: white;
+  display: grid;
+  grid-template-columns: 25% 75%;
+  grid-template-rows: 1fr;
+  height: 98%;
+  width: 98%;
+  box-sizing: border-box;
+  margin: 1% 0 1% 1%;
 `
-
-const DivCar = styled.div`
-background-color: #FFFF;
-width: 100px;
-height: 100px;
-display: flex;
-align-items: center;
-justify-content: center;
-border-radius: 50%;
-box-shadow: 0px 0px 5px 1px gray;
-position: fixed;
-bottom: 10px;
-right: 10px;
+const IconeCarrinho = styled.img`
+  height: 40px;
+`
+const DivApareceCarrinho = styled.div`
+  background-color: #FFFF;
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-shadow: 0px 0px 2px 4px #32ad27;
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  :hover{
+    box-shadow: 0px 0px 2px 4px green;
+    cursor: pointer;
+  }
 `
 
+class App extends React.Component {
+  state = {
+    produtos: [
+      {id:1, nome: "Produto 1", valor: 100.0, imagemProd: "https://picsum.photos/150/150?ramdon=1"},
+      {id:2, nome: "Produto 2", valor: 150.0, imagemProd: "https://picsum.photos/150/150?ramdon=2"},
+      {id:3, nome: "Produto 3", valor: 300.0, imagemProd: "https://picsum.photos/150/150?ramdon=3"},
+      {id:4, nome: "Produto 4", valor: 400.0, imagemProd: "https://picsum.photos/150/150?ramdon=4"},
+      {id:5, nome: "Produto 5", valor: 500.0, imagemProd: "https://picsum.photos/150/150?ramdon=5"},
+      {id:6, nome: "Produto 6", valor: 600.0, imagemProd: "https://picsum.photos/150/150?ramdon=6"},
+      {id:7, nome: "Produto 7", valor: 700.0, imagemProd: "https://picsum.photos/150/150?ramdon=7"},
+      {id:8, nome: "Produto 8", valor: 800.0, imagemProd: "https://picsum.photos/150/150?ramdon=8"}
+    ],
+    carrinho: false,
+    maxValor: "",
+    minValor: "",
+    buscaProduto: "",
+    seletorOrdem: "cresc"
+  }
 
+  addProdutoCarrinho = (prodid) => {
+    const itensCarrinho = this.state.produtos.filter((item) => {
+      if(prodid === item.id){
+        return true
+      }else{
+        return false
+      }
+    })
+    console.log(this.state.itensCarrinho)
+  }
+  onChangeInputMax = (event) => {
+    this.setState({ maxValor: event.target.value });
+  };
+  onChangeInputMin = (event) => {
+    this.setState({ minValor: event.target.value });
+  };
+  onChangeInputBusca = (event) => {
+    this.setState({ buscaProduto: event.target.value });
+  };
+  onChangeFilter = (event) => {
+    this.setState({ seletorOrdem: event.target.value })
+  }
+  renderizaCarrinho = ()=>{
+    this.setState({carrinho: !this.state.carrinho});
+  }
 
-function App() {
+  mensagem = this.state.produtos.length
 
-  
-  return (
-    <DivPai className="App">
-      <Filtros />
-      <Produtos />
-      {/* <Carrinho /> */}
-      <DivCar>
-        <FormactCar src={IconCompra}/>
-      </DivCar>
-    </DivPai>
-  );
+  render(){
+    if(this.state.carrinho){
+      return (
+        <DivComCarrinho className="App">
+          <Filtros arrayProd = {this.state.produtos}
+            max = {this.state.maxValor}
+            min = {this.state.minValor}
+            busca = {this.state.buscaProduto}
+            imax = {this.onChangeInputMax}
+            imin = {this.onChangeInputMin}
+            ibusca = {this.onChangeInputBusca}
+          />
+          <Produtos
+            msg = {this.mensagem}
+            arrayProd = {this.state.produtos}
+            maxValor = {this.state.maxValor}
+            minValor = {this.state.minValor}
+            buscaProduto = {this.state.buscaProduto}
+            seletorOrdem = {this.state.seletorOrdem}
+            onChangeFilter = {this.onChangeFilter}
+            addProduto = {this.addProdutoCarrinho}
+          />
+          <Carrinho 
+            itensCarrinho = {this.state.itensCarrinho}
+          />
+          <DivApareceCarrinho onClick={this.renderizaCarrinho}>
+            <IconeCarrinho src={IconCompra} />
+          </DivApareceCarrinho>
+        </DivComCarrinho>
+      )
+    }
+    return (
+      <DivSemCarrinho className="App">
+        <Filtros arrayProd = {this.state.produtos}
+          max = {this.state.maxValor}
+          min = {this.state.minValor}
+          busca = {this.state.buscaProduto}
+          imax = {this.onChangeInputMax}
+          imin = {this.onChangeInputMin}
+          ibusca = {this.onChangeInputBusca}
+        />
+        <Produtos
+          msg = {this.mensagem}
+          arrayProd = {this.state.produtos}
+          maxValor = {this.state.maxValor}
+          minValor = {this.state.minValor}
+          buscaProduto = {this.state.buscaProduto}
+          seletorOrdem = {this.state.seletorOrdem}
+          onChangeFilter = {this.onChangeFilter}
+          addProduto = {this.addProdutoCarrinho}
+        />
+        <DivApareceCarrinho onClick={this.renderizaCarrinho}>
+          <IconeCarrinho src={IconCompra} />
+        </DivApareceCarrinho>
+      </DivSemCarrinho>
+    );
+  }  
 }
-
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Carrinho.js b/src/components/Carrinho.js
index 29ebc74..121727e 100644
--- a/src/components/Carrinho.js
+++ b/src/components/Carrinho.js
@@ -2,23 +2,26 @@ import React from 'react'
 import styled from 'styled-components'
 
 const Cart = styled.div`
-    border: 1px solid black;
-    text-align: left;
-    min-width: 20%;
-    height: 95vh;
+    border: 1px solid #2b303a;
+    border-radius: 2px;
+    box-shadow: 0px 0px 5px 0.1px #2b303a;
+    width: 100%;
+    height: 100%;
+    > * {
+        margin-left: 10px;
+    }
 `
-    
 
 class Carrinho extends React.Component{
     render(){
-            
         return(
             <Cart>
                 <h3>Carrinho:</h3>
+                
                 <p>Total: R$</p>
+                {this.props.itensCarrinho}
             </Cart>
         )
     }
 }
-
 export default Carrinho
\ No newline at end of file
diff --git a/src/components/Filtros.js b/src/components/Filtros.js
index 079247e..4e447ef 100644
--- a/src/components/Filtros.js
+++ b/src/components/Filtros.js
@@ -2,46 +2,48 @@ import React from 'react'
 import styled from 'styled-components'
 
 const DivFilter = styled.div`
-    border: solid 1px black; 
-    justify-content: left;
-    min-width: 20%;
-    height: 95vh;
-    text-align: center;
+    border: solid 1px #2b303a; 
+    border-radius: 2px;
+    box-shadow: 0px 0px 5px 0.1px #2b303a;
+    width: 100%;
+    height: 100%;
+    > * {
+        margin-left: 10px;
+    }
 `
-
-const DivTeste = styled.div`
-    display: flex;
-    padding: 10px;
+const Espaco = styled.div`
+    margin: 32px 10px;
+    &:nth-child(2){
+        margin-top: 50px;
+    }
 `
-
 const InputProd = styled.input`
-width: 60%;
-height: 15px;
-margin: 0px 0px 0px 10px;
+    display:block;
+    width: 80%;
+    height: 16px;
+    border-radius: 2px;
+    border: none;
 `
 
-
-class Filtros extends React.Component{
+class Filtros extends React.Component{ 
     render(){
         return(
             <DivFilter>
                 <h3>Filtros:</h3> 
-                <br/>
-                <DivTeste>
-                <span>Valor Mínimo:</span>
-                <InputProd type="Number"/>
-                </DivTeste>
-                <DivTeste>
-                <span>Valor Máximo:</span>
-                <InputProd type="Number"/>
-                </DivTeste>
-                <DivTeste>
-                <span>Busca Produto:</span>
-                <InputProd type="text"/>
-                </DivTeste>
+                <Espaco>          
+                    <span>Valor Mínimo:</span>
+                    <InputProd type="number" value={this.props.min} onChange={this.props.imin}/>
+                </Espaco>
+                <Espaco> 
+                    <span>Valor Máximo:</span>
+                    <InputProd type="number" value={this.props.max} onChange={this.props.imax}/>    
+                </Espaco>  
+                <Espaco> 
+                    <span>Busca Produto:</span>
+                    <InputProd type="text" value={this.props.busca} onChange={this.props.ibusca}/> 
+                </Espaco>      
             </DivFilter>
         )
     }
 }
-
 export default Filtros
\ No newline at end of file
diff --git a/src/components/Produtos.js b/src/components/Produtos.js
index 04f4267..91ef457 100644
--- a/src/components/Produtos.js
+++ b/src/components/Produtos.js
@@ -1,82 +1,131 @@
 import React from 'react'
 import styled from 'styled-components'
 
-const DivProdutos = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    
-    /* justify-items: center; */
-    /* align-self: center; */
-    /* margin-left: 200px; */
-    width:60%;
+const DivTotal = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    width: 100%;
 `
-
 const DivQuant = styled.div`
     display: flex;
     justify-content: space-evenly;  
     align-items:baseline;
+    width: 100%;
+    height: 10vh;
+`
+const DivProdutos = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    width: 100%;
 `
-
 const DivProd = styled.div`
-    margin: 16px;
+    margin: 10px;
+    border: 1px solid #2b303a;
+    border-radius: 2px;
+    box-shadow: 0px 0px 5px 0.1px #2b303a;
+    padding: 4px;
 `
-
 const SelectStyled = styled.select`
-    height: 10%;
+    height: 20px;
 `
-
-const DivTotal = styled.div`
-height: 95vh;
+const Imagem = styled.img`
+    width: 100%;
+`
+const BotaoAddCarrinho = styled.button`
+    background-color: red;
+    color: white;
+    width: 100%;
+    min-height: 30px;
+    border: none;
+    border-radius: 2px;
+    box-shadow: 0px 0px 10px 0.1px gray;
+    cursor: pointer;
+    transition: 0.7s;
+    :hover{
+        box-shadow: none;
+        background-color: #aa0000;
+    }
+`
+const Paragrafo = styled.p`
+    margin: 8px;
+    :nth-child(3){
+        color: #32ad27;
+        font-weight: 700;
+        text-decoration: underline;
+    }
 `
-
-
 
 class Produtos extends React.Component{
-    state = {
-        produtos: [
-        {id:1, nome: "Produto 1", valor: 100.0, imagemProd: "https://picsum.photos/200/200?ramdon=1"},
-        {id:2, nome: "Produto 2", valor: 200.0, imagemProd: "https://picsum.photos/200/200?ramdon=2"},
-        {id:3, nome: "Produto 3", valor: 300.0, imagemProd: "https://picsum.photos/200/200?ramdon=3"},
-        {id:4, nome: "Produto 4", valor: 400.0, imagemProd: "https://picsum.photos/200/200?ramdon=4"},
-        {id:5, nome: "Produto 5", valor: 500.0, imagemProd: "https://picsum.photos/200/200?ramdon=5"},
-        {id:6, nome: "Produto 6", valor: 600.0, imagemProd: "https://picsum.photos/200/200?ramdon=6"},
-        {id:7, nome: "Produto 7", valor: 700.0, imagemProd: "https://picsum.photos/200/200?ramdon=7"},
-        {id:8, nome: "Produto 8", valor: 800.0, imagemProd: "https://picsum.photos/200/200?ramdon=8"}
-        ]
-}
-
-
     render(){
-        const mensagem = this.state.produtos.length
+        function ordenaCrescente(a,b){
+            return a.valor - b.valor;
+        }
+        function ordenaDecrescente(a,b){
+            return b.valor - a.valor;
+        }
+        if(this.props.seletorOrdem === "cresc"){
+            this.props.arrayProd.sort(ordenaCrescente);
+        }
+        else if(this.props.seletorOrdem === "decresc"){
+            this.props.arrayProd.sort(ordenaDecrescente);
+        }
 
-        const novosProdutos = this.state.produtos.map((produto)=>{
-            return (                      
-                    <DivProd key={produto.id}>
-                        <img src={produto.imagemProd}/>
-                        <p>{produto.nome}</p>
-                        <p>R$ {produto.valor}</p>
-                        <button>Adicionar ao Carrinho</button>
-                    </DivProd>
-            )
+        let listaFiltrada = this.props.arrayProd;
+        if(this.props.minValor !== ""){
+            listaFiltrada = listaFiltrada.filter((produto) => {
+                if(produto.valor >= this.props.minValor){
+                    return true
+                } else {
+                    return false
+                }
+            })
+        }
+        if(this.props.maxValor !== ""){
+            listaFiltrada = listaFiltrada.filter((produto) => {
+                if(produto.valor <= this.props.maxValor){
+                    return true
+                } else {
+                    return false
+                }
+            })
+        }
+        if(this.props.buscaProduto !== ""){
+            listaFiltrada = listaFiltrada.filter((produto) => {
+                if(produto.nome === this.props.buscaProduto){
+                    return true
+                } else {
+                    return false
+                }
+            })
+          }
+
+        const novaListaDeProduto = listaFiltrada.map((produto)=>{
+            return (
+                <DivProd key={produto.id}>
+                    <Imagem src={produto.imagemProd}/>
+                    <Paragrafo>{produto.nome}</Paragrafo>
+                    <Paragrafo>R$ {produto.valor}</Paragrafo>
+                    <BotaoAddCarrinho onClick = {() => this.props.addProduto(produto.id)}>Adicionar ao Carrinho</BotaoAddCarrinho>
+                </DivProd>
+            ) 
         });
+
         return(
             <DivTotal>
                 <DivQuant>
-                    <p>Quantidade de produtos: {mensagem}</p>
-                    <SelectStyled>
-                        <option>Preço: Crescente</option>
-                        <option>Preço: Decrescente</option>
+                    <p>Quantidade de produtos: {this.props.msg}</p>
+                    <SelectStyled value={this.props.seletorOrdem} onChange={this.props.onChangeFilter}>
+                        <option value="cresc">Preço: Crescente</option>
+                        <option value="decresc">Preço: Decrescente</option>
                     </SelectStyled>
                 </DivQuant>
                 <DivProdutos>
-                    {novosProdutos}
+                    {novaListaDeProduto}
                 </DivProdutos>
             </DivTotal>
-            
-           
         );
     }
 } 
-
 export default Produtos;
\ No newline at end of file
