Produtos

src/App.js

@@ -14,66 +14,81 @@ const produtos = [
   {
     id: 2,
     nome: "produto 2",
-    valor: 10,
+    valor: 20,
     imgUrl: "https://picsum.photos/200/200?a=2",
   },
   {
     id: 3,
     nome: "produto 3",
-    valor: 10,
+    valor: 30,
     imgUrl: "https://picsum.photos/200/200?a=3",
   },
   {
     id: 4,
     nome: "produto 4",
-    valor: 10,
+    valor: 40,
     imgUrl: "https://picsum.photos/200/200?a=4",
   },
   {
     id: 5,
     nome: "produto 5",
-    valor: 10,
+    valor: 50,
     imgUrl: "https://picsum.photos/200/200?a=5",
   },
   {
     id: 6,
     nome: "produto 6",
-    valor: 10,
+    valor: 60,
     imgUrl: "https://picsum.photos/200/200?a=6",
   },
   {
     id: 7,
     nome: "produto 7",
-    valor: 10,
+    valor: 70,
     imgUrl: "https://picsum.photos/200/200?a=7",
   },
   {
     id: 8,
     nome: "produto 8",
-    valor: 10,
+    valor: 80,
     imgUrl: "https://picsum.photos/200/200?a=8",
   },
 ];
 
 const MainContainer = styled.div`
   display: grid;
   grid-template-columns: 1fr 3fr 1fr;
-  grid-template-rows: 80vh;
 `;
 
 class App extends React.Component {
   state = {
     produtos: produtos,
+    carrinho: [],
+    ordenacao: "crescente",
+  };
+
+  adicionarAoCarrinho = (produto) => {
+    const novoCarrinho = [...this.state.carrinho, produto];
+    this.setState({ carrinho: novoCarrinho });
+  };
+
+  mudarOrdenacao = (evento) => {
+    this.setState({ ordenacao: evento.target.value });
   };
 
   render() {
     return (
-    <MainContainer>
-      <Filter></Filter>
-      <GridProdutos listaProdutos={this.state.produtos}></GridProdutos>
-      <Carrinho></Carrinho>
-    </MainContainer>
-    )
+      <MainContainer>
+        <Filter></Filter>
+        <GridProdutos
+          produtos={this.state.produtos}
+          ordenacao={this.state.ordenacao}
+          funcaoAdicionar={this.adicionarAoCarrinho}
+          funcaoOrdenacao={this.mudarOrdenacao}
+        ></GridProdutos>
+        <Carrinho></Carrinho>
+      </MainContainer>
+    );
   }
 }
 

src/components/CardProduto/CardProduto.js

@@ -1,8 +1,34 @@
 import React from "react";
 import styled from "styled-components";
 
-function CardProduto() {
-  return <div></div>;
+const CardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  border: 1px dotted orange;
+  margin-top: 5px;
+`;
+const Imagem = styled.img``;
+
+const BotaoAdicionar = styled.button`
+  margin: 5px;
+`;
+
+const Descricao = styled.p`
+  margin: 5px;
+`
+
+function CardProduto(props) {
+  const { produto, funcao } = props;
+
+  return (
+    <CardContainer>
+      <Imagem src={produto.imgUrl} />
+      <Descricao>{produto.nome}</Descricao>
+      <Descricao>R$: {produto.valor.toFixed(2)}</Descricao>
+      <BotaoAdicionar onClick={funcao}>Adicionar ao Carrinho</BotaoAdicionar>
+    </CardContainer>
+  );
 }
 
 export default CardProduto;

src/components/GridProdutos/GridProdutos.js

@@ -1,26 +1,69 @@
 import React from "react";
 import styled from "styled-components";
+import CardProduto from "../CardProduto/CardProduto";
 
 const MainContainer = styled.div`
   display: grid;
-  grid-template-rows: 30px 1fr;
+  grid-template-rows: 40px 1fr;
 `;
 
-const Header = styled.div``;
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Quantidade = styled.p`
+  padding: 10px;
+`;
+
+const Ordenacao = styled.select`
+  margin-right: 10px;
+`;
 
 const ContainerProdutos = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  /* Funciona com grid e flex, gostei mais de flex, mas vou deixar  o grid aqui por enquanto
   display: grid;
   grid-template-columns: repeat(4, 1fr);
+  gap: 10px; 
+  */
+  padding: 10px;
   border: 1px solid red;
 `;
 
 function GridProdutos(props) {
+  const { produtos, ordenacao, funcaoAdicionar, funcaoOrdenacao } = props;
+
+  switch(ordenacao){
+    case "crescente":
+      produtos.sort((a, b)=> a.valor - b.valor)
+      break
+    case "decrescente":
+      produtos.sort((a, b)=> b.valor - a.valor)
+      break
+    default:
+      break  
+  }
+
   return (
     <MainContainer>
-      <Header>Cabecalho</Header>
+      <Header>
+        <Quantidade>Quantidade de Produtos: {produtos.length}</Quantidade>
+        <Ordenacao onChange={funcaoOrdenacao}>
+          <option value="crescente">Preço: Crescente</option>
+          <option value="decrescente">Preço: Decrescente</option>
+        </Ordenacao>
+      </Header>
       <ContainerProdutos>
-        {props.listaProdutos.map((produto) => (
-          <div>{produto.nome}</div>
+        {produtos.map((item) => (
+          <CardProduto
+            key={item.id}
+            produto={item}
+            funcao={() => funcaoAdicionar(item)}
+          />
         ))}
       </ContainerProdutos>
     </MainContainer>