PR de correção

.gitignore

@@ -106,6 +106,7 @@ dist
 
 # dependencies
 /node_modules
+src/App.js
 /.pnp
 .pnp.js
 

src/App.css

@@ -1,3 +1,12 @@
+.button-carrinho {
+  border: none;
+  cursor: pointer;
+
+
+}
+
+
+
 .App {
   text-align: center;
 }

src/App.js

@@ -1,26 +1,120 @@
 import React from 'react';
-import logo from './logo.svg';
+import Home from './components/Home.js';
 import './App.css';
+import Carrinho from './components/Carrinho';
+import Filtro from './components/Filtro.js';
 
-function App() {
+export default class App extends React.Component {
+
+  state = {
+    carrinho: false,
+    carrinhoItem: [],
+    total: 0,
+    produtos: [
+        {
+            id: '1',
+            name: "Nome do Produto",
+            value: 3333,
+            imageUrl: "https://picsum.photos/200/300?random=1"
+        },
+        {
+            id: '2',
+            name: "Nome do Produto",
+            value: 2222,
+            imageUrl: "https://picsum.photos/200/300?random=2"
+        },
+        {
+            id: '3',
+            name: "Nome do Produto",
+            value: 1111,
+            imageUrl:  "https://picsum.photos/200/300?random=3"
+        },
+        {
+            id: '4',
+            name: "Nome do Produto",
+            value: 4444,
+            imageUrl:  "https://picsum.photos/200/300?random=4"
+        },
+        {
+            id: '5',
+            name: "Nome do Produto",
+            value: 8888,
+            imageUrl:  "https://picsum.photos/200/300?random=5"
+        },
+        {
+            id: '6',
+            name: "Nome do Produto",
+            value: 6666,
+            imageUrl:  "https://picsum.photos/200/300?random=6"
+        },
+        {
+            id: '7',
+            name: "Nome do Produto",
+            value: 5555,
+            imageUrl:  "https://picsum.photos/200/300?random=7"
+        },
+        {
+            id: '8',
+            name: "Nome do Produto",
+            value: 7777,
+            imageUrl:  "https://picsum.photos/200/300?random=8"
+        },
+    ],
+    filtro: "crescente",
+    data: "",
+    inputValueMin:0,
+    inputValueMin:1000,
+    inputValueText:'',
+    filtroInput:false
+  }
+
+  abreFechaCarrinho = () => {
+    this.setState((prevState) => ({
+      carrinho: !prevState.carrinho,
+    })
+    )
+  }
+
+  addAcarrinho = (produto) => {
+    const produtoAddNovo = {
+      id: Date.now(),
+      name: produto.name,
+      value: produto.value,
+      imgUrl: produto.imgUrl
+    }
+
+    const totalCarrinho = this.state.total + produtoAddNovo.value;
+
+    const produtoAddLista = [produtoAddNovo, ...this.state.carrinhoItem]
+
+    this.setState({total: totalCarrinho})
+    this.setState({carrinhoItem: produtoAddLista})
+  }
+
+  removerDoCarrinho = (produtoID) => {
+    const atualizaNovoCarrinho = this.state.carrinhoItem.filter((produto) => {
+      return produtoID !== produto;
+    })
+
+    let calculaNovoTotal = 0;
+    calculaNovoTotal = this.state.total - produtoID.value
+
+    this.setState({total: calculaNovoTotal })
+    this.setState({carrinhoItem: atualizaNovoCarrinho})
+
+  }
+
+  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>
+    <div>
+          <Home />
+          <Filtro produtos={this.state.produtos} min={this.state.produtos.inputValueMin} max={this.state.produtos.inputValueMax} />
+          <button class='button-carrinho' onClick={this.abreFechaCarrinho}>Carrinho</button>
+          <div>
+            {this.state.carrinho ? <Carrinho /> : ''}
+          </div>
     </div>
   );
 }
-
-export default App;
+}

src/components/Carrinho.css

@@ -0,0 +1,9 @@
+.containerCarrinho{
+    display: flex;
+    flex-direction: column;
+    width:200px;
+    min-width: 100px;
+    border: 1px solid black;
+    padding: 10px;
+}
+

src/components/Carrinho.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import CarrinhoItem from './CarrinhoItem'
+import './Carrinho.css';
+
+export default class Carrinho extends React.Component {
+    state = {
+        produtos: [
+            {
+                id: '1',
+                name: "Nome do Produto",
+                value: "3333",
+                imageUrl: "https://picsum.photos/200/300?random=1"
+            },
+            {
+                id: '2',
+                name: "Nome do Produto",
+                value: "2222",
+                imageUrl: "https://picsum.photos/200/300?random=2"
+            },
+            {
+                id: '3',
+                name: "Nome do Produto",
+                value: "1111",
+                imageUrl:  "https://picsum.photos/200/300?random=3"
+            },
+            {
+                id: '4',
+                name: "Nome do Produto",
+                value: "4444",
+                imageUrl:  "https://picsum.photos/200/300?random=4"
+            },
+            {
+                id: '5',
+                name: "Nome do Produto",
+                value: "8888",
+                imageUrl:  "https://picsum.photos/200/300?random=5"
+            },
+            {
+                id: '6',
+                name: "Nome do Produto",
+                value: "6666",
+                imageUrl:  "https://picsum.photos/200/300?random=6"
+            },
+            {
+                id: '7',
+                name: "Nome do Produto",
+                value: "5555",
+                imageUrl:  "https://picsum.photos/200/300?random=7"
+            },
+            {
+                id: '8',
+                name: "Nome do Produto",
+                value: "7777",
+                imageUrl:  "https://picsum.photos/200/300?random=8"
+            },
+        ],
+        total: 0,
+    }
+
+
+    render() {
+
+      return (
+        <div class='containerCarrinho'>
+
+            <h2> Carrinho: </h2>
+            <div>
+                <ul>
+                    <li>
+                        {this.state.produtos.map((produtoID) => (
+                            <CarrinhoItem key={produtoID.id} name={produtoID.name} value={produtoID.value}>
+                                {produtoID.name}
+                                {produtoID.value}
+
+                            </CarrinhoItem>
+
+                        ),
+                        )}
+
+                    </li>
+                </ul>
+                <p> Total: <b>R$ {this.state.total}</b> </p>
+            </div>
+
+        </div>
+      );
+    }
+
+
+  }

src/components/CarrinhoItem.js

@@ -0,0 +1,16 @@
+import React from 'react'; 
+
+const CarrinhoItem = (props) => {
+    return (
+        <li>
+            <span>
+                <p>{props.name}</p>
+                <p>{props.value}</p>
+            </span>
+
+            <button>X</button>
+        </li>
+    )
+}
+
+export default CarrinhoItem;

src/components/Filtro.css

@@ -0,0 +1,13 @@
+
+.containerFiltro{
+    display:flex;
+    flex-direction:column;
+    width:200px;
+    height:500px;
+    border: 1px solid black;
+}
+
+
+.inputFiltro{
+    margin:5px;
+}

src/components/Filtro.js

@@ -0,0 +1,94 @@
+import React from "react";
+import './Filtro.css';
+
+
+export default class Filtro extends React.Component {
+
+  state = {
+    produtos: [
+      {
+        id: Date.now(),
+        name: "",
+        inputValueMin: "",
+        InputValueMax: "",
+        InputValueText: "",
+      }
+    ],
+  };
+  onChangeInputMin = (event) => {
+    this.setState({
+      inputValueMin: event.target.value
+    });
+  };
+  onChangeInputMax = (event) => {
+    this.setState({
+      InputValueMax: event.target.value
+    });
+  };
+  onChangeInputText = (event) => {
+    this.setState({
+      InputValueText: event.target.value
+    });
+  };
+
+
+
+
+
+  render() {
+
+    const listaFiltrada = this.props.produtos.filter((produto) => {
+
+      if (produto.value < this.valueMax) {
+        return true
+      } else {
+        return false
+      }
+    }).filter((produto) => {
+
+      if (produto.Text < this.valueText) {
+        return true
+      } else {
+        return false
+      }
+    });;
+
+    console.log(listaFiltrada)
+
+    return (
+      <div>
+        <div class='containerFiltro'>
+          <div class='inputFiltro'>
+
+
+            <h3>Filtros:</h3>
+
+            <ul>{listaFiltrada.map(produto => {
+              return <li>{produto}</li>
+            })}</ul>
+
+            <label for="valorMin">Valor Mínimo:</label>
+            <input valueMin={this.state.inputValueMin}
+              onChange={this.onChangeInputMin}
+              type='number' />
+          </div>
+          <div class='inputFiltro'>
+            <label for="valorMax">Valor Máximo:</label>
+            <input valueMax={this.state.InputValueMax}
+              onChange={this.onChangeInputMax} type='number' />
+          </div>
+          <div class='inputFiltro'>
+            <label>Buscar Produtos</label>
+            <input valueText={this.state.InputValueText}
+              onChange={this.onChangeInputText}
+              type="text"
+              name="busca" />
+          </div>
+
+        </div>
+
+
+      </div >
+    );
+  }
+}