PR de correção

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.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,26 +1,173 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import styled from "styled-components"
+import {Home} from "./components/home/Home"
+import {Carrinho} from "./components/carrinho/Carrinho"
+import Filtro from './components/filtro/Filtro';
 
-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>
-  );
+const ContainerSite = styled.div`
+  display:flex;
+  justify-content:space-between;
+  margin:10px;
+`
+const produtos = [
+  // produtos que aparecem na tela principal
+  {
+    id: 1,
+    nome: "Big Falcon Rocket",
+    preco: 22,
+    urlDaImagem: "https://cdn.vox-cdn.com/thumbor/ERS1_Blbu0L6QQtEPQCM7smC0_E=/0x0:888x501/1200x800/filters:focal(373x180:515x322)/cdn.vox-cdn.com/uploads/chorus_image/image/62364681/Screen_Shot_2018_09_17_at_9.21.53_PM.0.png",
+    quantidade:0
+  },
+  {
+    id: 2,
+    nome: "Falcon Heavy",
+    preco: 87,
+    urlDaImagem: "https://super.abril.com.br/wp-content/uploads/2018/02/spacex-falconheavy.png",
+    quantidade:0
+  },
+  {
+    id: 3,
+    nome: "Apollo 11",
+    preco: 87,
+    urlDaImagem: "https://assets.b9.com.br/wp-content/uploads/2019/07/national-geographic-apollo11.jpg",
+    quantidade:0
+  },
+  {
+    id: 4,
+    nome: "Space Shuttle",
+    preco: 87,
+    urlDaImagem: "https://cdn.mos.cms.futurecdn.net/ka5acHNs3trfycsfvB5aeY-1200-80.jpg",
+    quantidade:0
+  },
+  {
+    id: 5,
+    nome: "Millennium Falcon",
+    preco: 67,
+    urlDaImagem: "https://images.virgula.com.br/2015/12/Millennium-Falcon_018ea796.jpeg",
+    quantidade:0
+  },
+  {
+    id: 6,
+    nome: "X-wing starfighter",
+    preco: 79,
+    urlDaImagem: "https://www.wallpaperup.com/uploads/wallpapers/2015/09/28/811207/cd04cc40bd2e7060c7a2b417b1743b74-700.jpg",
+    quantidade:0
+  },
+  {
+    id: 7,
+    nome: "USS Enterprise (NCC-1701-D)",
+    preco: 82,
+    urlDaImagem: "https://i.pinimg.com/originals/b7/23/64/b723645d40bc83af75b2838c470d7a5a.jpg",
+    quantidade:0
+  },
+  {
+    id: 8,
+    nome: "USS Voyager",
+    preco: 91,
+    urlDaImagem: "https://upload.wikimedia.org/wikipedia/pt/5/58/USS_Voyager.jpg",
+    quantidade:0
+  },
+]
+const novoProduto= [...produtos]
+
+
+
+class App extends React.Component { 
+  state = {
+    filtroMin: 40,
+    filtroMax: 100,
+    filtroNome: "",
+    carrinhoDeCompras: [
+      // produtos que aparecem na tela principal
+
+    ],
+    valorCompra: 0,
+  }
+  adicionaProdutoCarrinho = (idNovo,nomeNovo,precoNovo,urlDaImagemNovo) => {
+    novoProduto.map((produto) => {
+        if(idNovo === produto.id){
+         produto.quantidade += 1
+         this.setState({
+          valorCompra:produto.preco + this.state.valorCompra
+        })
+         }
+         let novoCarrinho = novoProduto.filter(function(e){
+           return e.quantidade > 0;
+         })
+         this.setState({
+           carrinhoDeCompras:novoCarrinho
+         })
+
+      })
+    }
+  removeCarrinho = (carrinho) => {
+  // Fórmula que remove produto do carrinho e subtrai valor do prouto do valor total.
+  novoProduto.map((produto)=>{
+    if(carrinho.id === produto.id){
+      produto.quantidade -= 1
+      this.setState({
+        valorCompra:this.state.valorCompra - carrinho.preco
+      })
+    }
+    let novoCarrinho = novoProduto.filter(function(e){
+      return e.quantidade > 0;
+    })
+    this.setState({
+      carrinhoDeCompras:novoCarrinho
+    })
+
+  })
+}
+  onChangeFiltroMin = (event) => {
+    const filtroMin = event.target.value
+    this.setState({
+      filtroMin:filtroMin
+    })
+  }
+  onChangeFiltroMax = (event) => {
+    const filtroMax = event.target.value
+    this.setState({
+      filtroMax:filtroMax
+    })
+  }
+  onChangeFiltroNome = (event) => {
+    const filtroNome = event.target.value
+    this.setState({
+      filtroNome:filtroNome
+    })
+  }
+  render(){
+    return (
+    <ContainerSite>
+      <Filtro 
+        filtroMin={this.state.filtroMin}
+        filtroMax={this.state.filtroMax}
+        filtroNome={this.state.filtroNome}
+        onChangeFiltroMax={this.onChangeFiltroMax}
+        onChangeFiltroMin={this.onChangeFiltroMin}
+        onChangeFiltroNome={this.onChangeFiltroNome}
+      />
+      <Home 
+        produtos={produtos} 
+        carrinho={this.state.carrinhoDeCompras} 
+        adicionaCarrinho={this.adicionaCarrinho} 
+        adicionaProdutoCarrinho = {this.adicionaProdutoCarrinho}
+        valorCompra={this.state.valorCompra} 
+        somaValorCompra={this.somaValorCompra}
+        filtroMin={this.state.filtroMin}
+        filtroMax={this.state.filtroMax}
+        filtroNome={this.state.filtroNome}
+        />
+      <Carrinho 
+        produtos={produtos} 
+        carrinho={this.state.carrinhoDeCompras} 
+        removeCarrinho={this.removeCarrinho} 
+        valorCompra={this.state.valorCompra} 
+        somaValorCompra={this.somaValorCompra}
+        />
+    </ContainerSite>
+    );
+}
 }
 
 export default App;

src/components/carrinho/Carrinho.js

@@ -0,0 +1,28 @@
+import React from "react";
+import {ItemDoCarrinho} from "./ItemDoCarrinho";
+import styled from 'styled-components';
+
+const ContainerDoCarrinho = styled.div`
+    border: 1px solid black;
+    height: 200vh;
+    width: 20%;
+    padding: 10px;
+`
+const ContainerDaListaDeItens = styled.div`
+    padding: 10px;
+`
+export class Carrinho extends React.Component {
+    render() {
+        return(
+            <ContainerDoCarrinho>
+                <h1>Carrinho</h1>
+                <ContainerDaListaDeItens>
+                    <ItemDoCarrinho 
+                        carrinho={this.props.carrinho} 
+                        removeCarrinho={this.props.removeCarrinho}/>
+                </ContainerDaListaDeItens>
+                <p>Total: R${this.props.valorCompra},00</p>
+            </ContainerDoCarrinho>
+        )
+    }
+}

src/components/carrinho/ItemDoCarrinho.js

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from 'styled-components';
+import {Produto} from "./../home/Produto";
+
+const ContainerDosItems = styled.div`
+    display: flex;
+    flex-direction:column;
+    justify-content: space-evenly;
+    align-items: center;
+    border-bottom: 1px dashed black;
+`
+const Item = styled.div`
+display:flex;`
+const Botao = styled.button`
+    padding: 0;
+    height: 25px;
+`
+const ImagemCarrinho = styled.img`
+height:5vh;
+width:5vh;` 
+const FlexInformacoesItem = styled.div`
+display:flex;
+flex-direction:column;
+`
+export class ItemDoCarrinho extends React.Component {
+    render() {
+        return(
+            <ContainerDosItems>
+                {this.props.carrinho.map((produto) => {
+                      return (
+                      <Item>
+                        <FlexInformacoesItem>
+                            <ImagemCarrinho src={produto.urlDaImagem}/>
+                            <h4>{produto.quantidade}:{produto.nome}:R${produto.preco}</h4>
+                        </FlexInformacoesItem>
+                        <Botao onClick={()=>this.props.removeCarrinho(produto)}>
+                            Remover
+                        </Botao>
+                      </Item>
+                )})}
+            </ContainerDosItems>
+        )
+    }
+}

src/components/filtro/Filtro.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components'
+
+
+const ContainerFiltro = styled.div`
+display:flex;
+flex-direction:column;
+border: 1px solid black;
+height:100vh;
+width:20%;`
+
+
+
+export class Filtro extends React.Component{
+    render(){
+        return(
+    <ContainerFiltro>
+       <h1>Filtro</h1>
+       <label>Valor Minimo</label>
+       <input 
+        onChange={this.props.onChangeFiltroMin}
+        type="number" 
+        value={this.props.filtroMin} 
+       />
+       <label>Valor Máximo</label>
+       <input 
+        onChange={this.props.onChangeFiltroMax}
+        typer="number" 
+        value={this.props.filtroMax}
+        />
+       <label>Buscar Produto</label>
+       <input 
+            onChange={this.props.onChangeFiltroNome}
+           value={this.props.filtroNome}
+       />
+     </ContainerFiltro>
+        )
+    }
+}
+
+export default Filtro