Terminado ordenaçao de produtos, comencando criar adicionar ao carrinho

src/components/gridprodutos/gridprodutos.js

@@ -5,23 +5,87 @@ import listaProdutos from '../../db/dbProdutos'
 
 const GridMain = styled.div`
   display: flex;
-  width: 100%;
-  height: 100%;
   flex-wrap: wrap;
-  /* background-color: #0f4c75; */
+justify-content: space-between; 
+
+`
+const QtdProdutos = styled.p`
+  font-size: 1.3rem;
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
+'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  margin: 10px 10px 0px 10px;
+`
+const CbxProdutos = styled.select`
+font-size: 1.3rem;
+margin: 10px 10px 0px 10px;
+`
+const DivHeader = styled.div`
+display: flex;
+justify-content: space-between; 
 `
 
 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}/>)
-  })
+  state = {
+    ordenacaoItens: 'Decrescente'
+  }
+
+  adicionarCarrinho = (pdt) => {
+    pdt.carrinho = !pdt.carrinho;
+    console.log(pdt);
+  }
+
+  produtosRenderizados = () => {
+    if (this.state.ordenacaoItens === 'Decrescente') {
+      return (
+        listaProdutos.sort(function (a, b) {
+          return b.precoProduto - a.precoProduto;
+        }).map(pdt => {
+          return (<Produto
+            idProduto={pdt.idProduto}
+            nomeProduto={pdt.nomeProduto}
+            precoProduto={pdt.precoProduto.toLocaleString('pt-br', { minimumFractionDigits: 2 })}
+            imagemProduto={pdt.imagemProduto}
+            adicionarCarrinho={() => this.adicionarCarrinho(pdt)}
+            carrinho={pdt.carrinho}
+          />)
+        })
+      )
+    } else {
+      return (
+        listaProdutos.sort(function (a, b) {
+          return a.precoProduto - b.precoProduto;
+        }).map(pdt => {
+          return (<Produto
+            idProduto={pdt.idProduto}
+            nomeProduto={pdt.nomeProduto}
+            precoProduto={pdt.precoProduto.toLocaleString('pt-br', { minimumFractionDigits: 2 })}
+            imagemProduto={pdt.imagemProduto}
+            adicionarCarrinho={() => this.adicionarCarrinho(pdt)}
+            carrinho={pdt.carrinho}
+          />)
+        })
+      )
+    }
+  }
+
+  CbxProdutosOnChange = (e) => {
+    this.setState({ ordenacaoItens: e.target.value })
+  }
 
   render() {
     return (
-      <GridMain>
-        {this.produtosRenderizados}
-      </GridMain>
+      <div >
+        <DivHeader>
+          <QtdProdutos>Quantidade de produtos: {listaProdutos.length}</QtdProdutos>
+          <CbxProdutos onChange={this.CbxProdutosOnChange}>
+            <option value="Decrescente">Decrescente </option>
+            <option value="Crescente">Crescente</option>
+          </CbxProdutos>
+        </DivHeader>
+        <GridMain>
+          {this.produtosRenderizados()}
+        </GridMain>
+      </div>
     )
   }
 }

src/components/produto/produto.js

@@ -7,11 +7,12 @@ position: relative;
 flex-direction: column;
 border: 1px solid black;
 height: 460px;
-width: 400px;
+width: 320px;
 padding: 5px;
+margin: 10px;
 `
 const DivImg = styled.div`
-width: 400px;
+width: 320px;
 height: 300px;
 `
 const ImgProduto = styled.img`
@@ -33,7 +34,7 @@ font-weight: 900;
 `
 
 const BotaoAdicionar = styled.button`
-width: 400px;
+width: 320px;
 height: 50px;
 background-color: #3282b8;
 color: white;
@@ -48,11 +49,13 @@ export default class Produto extends React.Component {
     return (
       <DivContainer>
         <DivImg>
-          <ImgProduto src={this.props.imagemProduto}/>
+          <ImgProduto src={this.props.imagemProduto} />
         </DivImg>
         <NomeProduto>{this.props.nomeProduto}</NomeProduto>
         <PrecoProduto>R$ {this.props.precoProduto}</PrecoProduto>
-        <BotaoAdicionar>Adicionar ao carrinho</BotaoAdicionar>
+        <BotaoAdicionar onClick={this.props.adicionarCarrinho}>
+          {this.props.carrinho ? 'Remover do carrinho' : 'Adicionar ao carrinho'}
+          </BotaoAdicionar>
       </DivContainer>
     )
   }