PR de correção. Não precisa mergeear

.gitignore

@@ -125,3 +125,4 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json

README.md

@@ -1 +1 @@
-Sejam bem vindos ao Labe-commerce, esse repositório contém um esqueleto de app React e um .gitignore.
+http://mello-labe-commerce11.surge.sh/

package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,26 +1,160 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import React from "react";
+import styled from "styled-components";
+import Filter from "./components/Filter/Filter";
+import Carrinho from "./components/Carrinho/Carrinho";
+import GridProdutos from "./components/GridProdutos/GridProdutos";
+
+const produtos = [
+  {
+    id: 1,
+    nome: "produto 1",
+    valor: 10,
+    imgUrl: "https://picsum.photos/200/200?a=1",
+  },
+  {
+    id: 2,
+    nome: "produto 2",
+    valor: 20,
+    imgUrl: "https://picsum.photos/200/200?a=2",
+  },
+  {
+    id: 3,
+    nome: "produto 3",
+    valor: 30,
+    imgUrl: "https://picsum.photos/200/200?a=3",
+  },
+  {
+    id: 4,
+    nome: "produto 4",
+    valor: 40,
+    imgUrl: "https://picsum.photos/200/200?a=4",
+  },
+  {
+    id: 5,
+    nome: "produto 5",
+    valor: 50,
+    imgUrl: "https://picsum.photos/200/200?a=5",
+  },
+  {
+    id: 6,
+    nome: "produto 6",
+    valor: 60,
+    imgUrl: "https://picsum.photos/200/200?a=6",
+  },
+  {
+    id: 7,
+    nome: "produto 7",
+    valor: 70,
+    imgUrl: "https://picsum.photos/200/200?a=7",
+  },
+  {
+    id: 8,
+    nome: "produto 8",
+    valor: 80,
+    imgUrl: "https://picsum.photos/200/200?a=8",
+  },
+];
+
+
+const MainContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+`;
+
+
+
+class App extends React.Component {
+  state = {
+    produtos: produtos,
+    carrinho: [],
+    ordenacao: "crescente",
+    filtroMax: "",
+    filtroMin: "",
+    regex: "",
+  }
+
+  atualizarMaximo = (evento) => {
+    this.setState({ filtroMax: Number(evento.target.value) })
+  }
+
+  atualizarMinimo = (evento) => {
+    this.setState({ filtroMin: Number(evento.target.value) })
+  }
+
+  atualizarRegex = (evento) => {
+    this.setState({ regex: evento.target.value })
+  }
+
+  filtrarProdutos = () => {
+    let filtrados = this.state.produtos;
+    if (this.state.filtroMax) {
+      filtrados = filtrados.filter(item => item.valor <= this.state.filtroMax)
+    }
+    if (this.state.filtroMin) {
+      filtrados = filtrados.filter(item => item.valor >= this.state.filtroMin)
+    }
+    if (this.state.regex) {
+      const regexp = new RegExp(this.state.regex, 'i')
+      filtrados = filtrados.filter(item => regexp.test(item.nome))
+    }
+    return filtrados
+  }
+
+
+  adicionarAoCarrinho = (produto) => {
+    const novoCarrinho = [...this.state.carrinho, produto];
+    this.setState({ carrinho: novoCarrinho });
+  };
+
+  cancelarCompra = (id) => {
+    const removido = this.state.carrinho.filter(compra => {
+      if (compra.id !== id) {
+        return true
+      }
+      return false
+    });
+    this.setState({
+      carrinho: removido
+    })
+  }
+
+  mudarOrdenacao = (evento) => {
+    this.setState({ ordenacao: evento.target.value });
+  };
+
+  componentDidUpdate() {
+    localStorage.setItem('carrinho', JSON.stringify(this.state.carrinho))
+  }
+
+  componentDidMount() {
+    const carrinhoStr = localStorage.getItem('carrinho');
+    if (carrinhoStr) {
+      const carrinhoObj = JSON.parse(carrinhoStr);
+      this.setState({ carrinho: carrinhoObj });
+    }
+  };
+
+  render() {
+    return (
+      <MainContainer>
+        <Filter
+          funcaoMax={this.atualizarMaximo}
+          funcaoMin={this.atualizarMinimo}
+          funcaoRegex={this.atualizarRegex}
+        />
+        <GridProdutos
+          produtos={this.filtrarProdutos()}
+          ordenacao={this.state.ordenacao}
+          funcaoAdicionar={this.adicionarAoCarrinho}
+          funcaoOrdenacao={this.mudarOrdenacao}
+        />
+        <Carrinho
+          meuCarrinho={this.state.carrinho}
+          funcaoRemover={this.cancelarCompra}
+        />
+      </MainContainer>
+    )
+  }
 }
 
 export default App;

src/components/CardProduto/CardProduto.js

@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+
+const CardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  border: 1px solid black;
+  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/Carrinho/Carrinho.js

@@ -0,0 +1,60 @@
+import React from "react";
+import styled from "styled-components";
+
+const CarrinhoLateral = styled.div`
+  display: flex;
+  flex-direction: column;
+  font-family: Roboto;
+  border: 1px solid black;
+  margin: 30px 20px 0px 20px;
+  padding: 5px;
+`
+const Title = styled.h3`
+  margin: 10px 5px;
+`
+const Produtos = styled.div`
+  font-size: 20px;
+`
+
+function Carrinho(props) {
+
+  const { meuCarrinho, funcaoRemover } = props;
+  const novoCarrinho = []
+  let total = 0
+
+  meuCarrinho.forEach(item => {
+
+    total += item.valor;
+
+    const estaNoArray = novoCarrinho.findIndex(index => index.id === item.id);
+    if (estaNoArray === -1) {
+      const produto = {
+        id: item.id,
+        nome: item.nome,
+        qtd: 1,
+      }
+      novoCarrinho.push(produto)
+    } else {
+      novoCarrinho[estaNoArray].qtd++;
+    }
+  });
+
+  const carrinhoLateral = novoCarrinho.map((produto) =>
+    <div>
+      <span>{produto.qtd}x - {produto.nome} </span>
+      <button onClick={() => funcaoRemover(produto.id)}>X</button>
+      <hr />
+    </div>
+  )
+
+  return <CarrinhoLateral>
+    <Title>CARRINHO</Title>
+    <Produtos>
+      <hr />
+      {carrinhoLateral}
+      <b>Total:</b> {`R$ ${total.toFixed(2)}`}
+    </Produtos>
+  </CarrinhoLateral>;
+}
+
+export default Carrinho;

src/components/Filter/Filter.js

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+
+const BarraLateral = styled.div`
+  display:flex;
+  flex-direction: column;
+  padding: 5px;
+  font-family: Roboto;
+  border: 1px solid black;
+  margin: 30px 20px 0px 20px;
+
+`
+const SeçãoFiltro = styled.div`
+  margin: 10px 5px;
+`
+
+const Title = styled.h3`
+margin: 10px 5px;
+`
+
+
+function Filter(props) {
+  const { funcaoMax, funcaoMin, funcaoRegex } = props;
+  return <BarraLateral>
+    <Title>FILTROS</Title>
+    <SeçãoFiltro>
+     <label>Valor Máximo</label> <br />
+     <input type="number" onChange={funcaoMax} />
+    </SeçãoFiltro>
+    <SeçãoFiltro>
+     <label>Valor Mínimo</label> <br />
+     <input type="number" onChange={funcaoMin} />
+    </SeçãoFiltro>
+    <SeçãoFiltro>
+     <label>Buscar Produtos</label> <br />
+     <input onChange={funcaoRegex} />
+    </SeçãoFiltro>
+  </BarraLateral>;
+}
+
+export default Filter;