PR de Correção

README.md

@@ -1 +1,3 @@
 Sejam bem vindos ao Labe-commerce, esse repositório contém um esqueleto de app React e um .gitignore.
+
+Link do surge: https://ill-fated-lip.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.3.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,38 +1,4 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+*{
+    margin: 0;
+    padding: 0;
+}

src/App.js

@@ -1,26 +1,280 @@
 import React from 'react';
-import logo from './logo.svg';
+
 import './App.css';
+import styled from 'styled-components';
+import Carrinho from './components/Carrinho';
+import Produto from "./components/Produtos/Produto";
+
+
+
+
+
+
+const AppContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
+  padding: 40px;
+
+`
+const DivProdutos = styled.div`
+ display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
+
+`
+const FiltroContainer = styled.div`
+border: 1px solid black;
+padding: 40px;
+height: 720px;
+
+width: 160px;
+`
+const Filtros = styled.div`
+display: flex;
+flex-direction: column;
+width: 180px;
+`
+
+const MainProdutos = styled.main`
+  display: grid;
+  justify-items: center;
+
+`
+const MenuInfos = styled.div`
+  display: flex;
+  justify-items: center;
+  justify-content: space-between;
+  align-items: center;
+  width: 90%;
+`
+
+class App extends React.Component {
+
+  state = {
+    order: 1,
+    produtos:  [
+      {
+        "id": 1,
+        "name": "Camisa Astronauta",
+        "value": 10.00,
+        "imagemUrl": "https://www.usecamisetas.com/media/product/aed/camiseta-astronauta-9d2.jpg"
+      },
+      {
+        "id": 2,
+        "name": "camiseta astronauta in-love",
+        "value": 25.00,
+        "imagemUrl": "https://www.usecamisetas.com/media/product/69e/camiseta-astronauta-in-love-c8e.jpg"
+      },
+      {
+        "id": 3,
+        "name": "Camiseta falling Astronauta",
+        "value": 39.90,
+        "imagemUrl": "https://www.usecamisetas.com/media/product/ce4/camiseta-falling-astronaut-27a.jpg"
+      },
+      {
+        "id": 4,
+        "name": "Camiseta gato abduzido",
+        "value": 44.90,
+        "imagemUrl": "https://www.usecamisetas.com/media/product/4a7/camiseta-gato-abduzido-441.jpg"
+      },
+      {
+        "id": 5,
+        "name": "Camisa pequeno principe",
+        "value": 59.99,
+        "imagemUrl": "https://www.usecamisetas.com/media/product/beb/camiseta-pequeno-principe-b15.jpg"
+      },
+      {
+        "id": 6,
+        "name": "camiseta trippy astronauta",
+        "value": 86.75,
+        "imagemUrl": "https://www.usecamisetas.com/media/product/ccd/camiseta-trippy-astronauta-2b9.jpg"
+      }
+      ],
+
+    listaProdutos: [
+      {
+          id: 1,
+          name: "Camisa Astronauta",
+          value: 10.00,
+          imagemUrl: "https://www.usecamisetas.com/media/product/aed/camiseta-astronauta-9d2.jpg",
+          quantidade: 1
+      },
+      {
+         id: 2,
+         name: "Camiseta falling Astronauta",
+         value: 25,
+         imagemUrl: "https://www.usecamisetas.com/media/product/ce4/camiseta-falling-astronaut-27a.jpg",
+         quantidade: 1
+  }
+
+
+  ],
+
+    pesquisa: "",
+    minPrice: "",
+    maxPrice: "",
+  }
+
+
+  filtrarNome = (event) => {
+
+    this.setState({ pesquisa: event.target.value })
+  }
+
+  filtrarMin = (event) => {
+    this.setState({ minPrice: event.target.value })
+
+  }
+
+  filtrarMax = (event) => {
+    this.setState({ maxPrice: event.target.value })
+  }
+
+  addProdutoInCar = (productId) => {
+
+    const produtoCar = this.state.listaProdutos.find(product => productId === product.id)
+
+    if (produtoCar) {
+      const novoProdutoInCar = this.state.listaProdutos.map(product =>{
+         if (productId === product.id) {
+           return({
+             ...product,
+             quantidade: product.quantidade + 1
+           })
+
+         } 
+         return product
+      })
+      this.setState({listaProdutos: novoProdutoInCar})
+
+    }else{
+      const produtoAdd = this.state.produtos.find(product => productId === product.id)
+      const novoProdutoInCart = [...this.state.listaProdutos, {...produtoAdd, quantidade: 1}] 
+
+      this.setState({listaProdutos: novoProdutoInCart})
+
+    }
+
+  } 
+
+  removeProduto = (productId) =>{
+    const removendo = this.state.listaProdutos.map((product) =>{
+      if(product.id === productId){
+        return {
+          ... product,
+          quantidade: product.quantidade - 1
+        }
+      }
+      return product
+    }).filter((product) => product.quantidade > 0)
+    this.setState({listaProdutos: removendo})
+
+  }
+
+  updateOrder = (ev) => {
+    this.setState({ order: ev.target.value })
+  }
+
+
+  render() {
+    const listaDeProdutos = this.state.produtos
+      .filter(prod => {
+        return prod.name.toLowerCase().includes(this.state.pesquisa.toLowerCase())
+      })
+      .filter(prod => {
+        return this.state.minPrice === "" || prod.value >= this.state.minPrice
+
+      })
+      .filter(prod => {
+        return this.state.maxPrice === "" || prod.value <= this.state.maxPrice
+
+      }).sort((cresc,decre) =>{
+        switch (this.state.order){
+            default:
+              return this.state.order * (cresc.value - decre.value)
+        }
+    })
+      .map((itens) => {
+        return (
+          <Produto
+           key={itens.id}
+            imgProduto={itens.imagemUrl}
+            nomeProduto={itens.name}
+            valueProduto={itens.value}
+           eita={itens.id}
+           addProdutoInCar = {this.addProdutoInCar}
+          />
+
+      )
+
+  })
+
+    return (
+      <AppContainer>
+
+        <FiltroContainer>
+
+          <Filtros>
+            <h3>Filtros</h3>
+            <p>Valor Minimo</p>
+            <input
+              type='number'
+              placeholder='Digite um valor'
+              value={this.state.minPrice}
+              onChange={this.filtrarMin}
+            />
+
+
+            <p>ValorMáximo</p>
+            <input
+              type='number'
+              placeholder='Digite um valor'
+              value={this.state.maxPrice}
+              onChange={this.filtrarMax}
+            />
+
+            <p>Busca por Nome</p>
+            <input
+              placeholder="Nome do Produto"
+              value={this.state.pesquisa}
+              onChange={this.filtrarNome}
+            />
+          </Filtros>
+
+
+        </FiltroContainer>
+        <MainProdutos>
+
+          <MenuInfos>
+            <p>Quantidade de produtos: {listaDeProdutos.length}</p>
+            <span>
+              <label>Ordenação: </label>
+              <select
+                name='order'
+                value={this.state.order}
+                onChange={this.updateOrder}>
+                <option value={1}>Crescente</option>
+                <option value={-1}>Decrescente</option>
+              </select>
+            </span>
+          </MenuInfos>
+
+          <DivProdutos>
+            {listaDeProdutos}
+          </DivProdutos>
+
+        </MainProdutos>
+        <Carrinho
+          listaDeProdutos={this.state.listaProdutos}
+          removeProduto ={this.removeProduto}
+
+        />
+      </AppContainer>
+
+    );
+  }
 
-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>
-  );
 }
 
 export default App;