PR de Correção

src/App.js

@@ -1,26 +1,140 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import Carrinho from './components/Carrinho/Carrinho';
+import Filtros from './components/Filtro/Filtros';
+import Produtos from './components/Produtos/Produtos';
 
-function App() {
-  return (
+
+const produtos = [
+  {
+    id: 1,
+    name: 'Aerolito',
+    valor: 2000,
+    photo: 'https://picsum.photos/200/200?a=1',
+  },
+  {
+    id: 2,
+    name: 'Brinquedo',
+    valor: 100,
+    photo: 'https://picsum.photos/200/200?a=1',
+  },
+  {
+    id: 3,
+    name: 'Camisa Espacial',
+    valor: 80,
+    photo:'https://picsum.photos/200/200?a=1',
+  },
+  {
+    id: 4,
+    name: 'Onibus Espacial',
+    valor: 700000,
+    photo:'https://picsum.photos/200/200?a=1',
+  },
+  {
+    id: 5,
+    name: 'Roupa Espacial',
+    valor: 20,
+    photo:'https://picsum.photos/200/200?a=1',
+  },
+  {
+    id: 6,
+    name: 'Satelite Antigo',
+    valor: 600000,
+    photo: 'https://picsum.photos/200/200?a=1',
+  },
+  {
+    id: 7,
+    name: 'Satelite Novo',
+    valor: 900000,
+    photo:'https://picsum.photos/200/200?a=1',
+  },
+  {
+    id: 8,
+    name: 'Viagem Espacial',
+    valor: 400000,
+    photo:'https://picsum.photos/200/200?a=1',
+  },
+
+]
+
+
+class App extends React.Component {
+  state = {
+    minFiltro: '',
+    maxFiltro: '',
+    nameFiltro: '',
+    produtoCarrinho: []
+
+  }
+
+  onChangeMinFiltro = (event) => {
+    this.setState({minFiltro: event.target.value})
+  }
+  onChangeMaxFiltro = (event) => {
+    this.setState({maxFiltro: event.target.value})
+  }
+  onChangeNameFiltro = (event) => {
+    this.setState({nameFiltro: event.target.value})
+  }
+
+  onAddCarrinho = (produtoId) => {
+    const produtoCarrinho = this.state.produtoCarrinho.find(produto => produtoId === produto.id)
+
+  if(produtoCarrinho) {
+    const novoCarrinho = this.state.produtoCarrinho.map(produto => {
+      if(produtoId === produto.id) {
+        return {
+          ...produto,
+          quantity: produto.quantity + 1
+        }
+      }
+      return produto
+    })
+
+    this.setState({produtoCarrinho: novoCarrinho})
+    } else {
+      const addProduto = produtos.find(produto => produtoId === produto.id)
+
+      const novoCarrinho = [...this.state.produtoCarrinho, {...addProduto, quantity: 1}]
+
+      this.setState({produtoCarrinho: novoCarrinho})
+    }
+  }
+  removeCarrinho = (produtoId) => {
+    const novoCarrinho = this.state.produtoCarrinho.map((produto) => {
+      if(produto.id === produtoId) {
+        return {
+          ...produto,
+          quantity: produto.quantity - 1
+        }
+      }
+      return produto
+    }).filter((produto) => produto.quantity > 0)
+
+    this.setState({produtoCarrinho: novoCarrinho})
+  }
+
+  render (){
+    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>
+      <Carrinho
+      produtoCarrinho={this.state.produtoCarrinho}
+      removeCarrinho={this.removeCarrinho}/>
+      <Filtros
+      minFiltro = {this.state.minFiltro}
+      maxFiltro = {this.state.maxFiltro}
+      nameFiltro = {this.state.nameFiltro}
+      onChangeMinFiltro = {this.onChangeMinFiltro}
+      onChangeMaxFiltro = {this.onChangeMaxFiltro}
+      onChangeNameFiltro = {this.onChangeNameFiltro} />     
+      <Produtos
+      produtos={produtos}
+      minFiltro = {this.state.minFiltro}
+      maxFiltro = {this.state.maxFiltro}
+      nameFiltro = {this.state.nameFiltro}
+      onAddCarrinho={this.onAddCarrinho} />     
     </div>
-  );
+    );
+  }
 }
 
 export default App;

src/components/Carrinho/Carrinho.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ItemCarrinho from './ItemCarrinho';
+
+
+export default class Carrinho extends React.Component {
+    valorTotal = () => {
+        let totalValor = 0
+
+        for (let produto of this.props.produtoCarrinho){
+            totalValor += produto.valor * produto.quantity
+        }
+        return totalValor
+    }
+
+
+    render (){
+        return (
+            <div>
+                <h2>Carrinho:</h2>
+                {this.props.produtoCarrinho.map((produto) => {
+                    return  <ItemCarrinho carItem={produto}
+                    removeCarrinho={this.props.removeCarrinho}/>
+                })}
+                <p>Valor total: R${this.valorTotal()},00</p>
+            </div>
+        );
+    }
+}

src/components/Carrinho/ItemCarrinho.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+
+export default class ItemCarrinho extends React.Component {
+    render (){
+        return (
+            <div>
+                <p>{this.props.carItem.quantity}x</p>
+                <p>{this.props.carItem.name}</p>
+                <button onClick={() => this.props.removeCarrinho(this.props.carItem.id)}>Remover</button>
+            </div>
+        );
+    }
+}

src/components/Filtro/Filtros.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+
+export default class Filtros extends React.Component {
+    render (){
+        return (
+            <div>
+               <h3>Filtros</h3>
+               <label>
+                   Valor minimo:
+                   <input type="number"
+                   value={this.props.minFiltro}
+                   onChange={this.props.MinFiltro}/>
+               </label>
+               <label>
+                   Valor maximo:
+                   <input type="number"
+                    value={this.props.maxFiltro}
+                   onChange={this.props.MaxFiltro}/>
+               </label>
+               <label>
+                   Buscar produto:
+                   <input type="text"
+                    value={this.props.nameFiltro}
+                    onChange={this.props.NameFiltro}/>
+               </label>
+            </div>
+        );
+    }
+}

src/components/Produtos/ListProdutos.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+
+export default class ListProdutos extends React.Component {
+    render (){
+        const produto = this.props.produto
+        return (
+            <div>
+               <img src={produto.photo}/>
+               <h2>{produto.name}</h2>
+               <p>R$ {produto.valor},00</p>
+               <button onClick={() => this.props.onAddCarrinho(produto.id)}>Adicionar ao carrinho </button>
+            </div>
+        );
+    }
+}

src/components/Produtos/Produtos.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import ListProdutos from './ListProdutos';
+
+
+export default class Produtos extends React.Component {
+    state = {
+        sort: 'CRESCENTE'
+    }
+
+
+    getFiltroLista = () => {
+        return this.props.produtos
+        .filter((produto) => this.props.minFiltro ? produto.valor < this.props.minFiltro : true)
+        .filter((produto) => this.props.maxFiltro ? produto.valor > this.props.maxFiltro : true)
+        .filter((produto) => this.props.nameFiltro ? produto.name.includes(this.props.nameFiltro) : true)
+        .sort((one, two) => this.state.sort === 'CRESCENTE' ? one.valor - two.valor : two.valor - one.valor)
+    }
+
+    onChangeRandom = (event) => {
+        this.setState({sort: event.target.value})
+      }
+
+    render () {
+        const filtroLista = this.getFiltroLista () 
+        return (
+            <div>
+               <h1>Quantidade de produtos: {filtroLista.length}</h1>
+               <label>
+                   Ordenação:
+                   <select value={this.state.random}>
+                       <option value={'CRESCENTE'}>Crescente</option>
+                       <option value={'DECRESCENTE'}n>Decrescente</option>
+                   </select>
+               </label>
+                {filtroLista.map((produto) => {
+                    return <ListProdutos produto={produto}
+                    onAddCarrinho={this.props.onAddCarrinho}/>
+                })}
+            </div>
+        );
+    }
+}