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.css

@@ -1,38 +1,34 @@
 .App {
+  margin-top: 50px;
+  margin-left: 30px;
   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;
-  }
-}
+.produto{
+border: dotted ;
+width: 250px;
+height: 400px;
 
-.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;
+.imagem{
+  margin-top: 10px;
+  height: 250px;
+  width: 200px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.botao{
+  background-color: black;
+  color: white;
+  width: 200px;
+  height: 35px;
+  cursor: pointer;
 }
+.FilterContainer{
+  background-color: teal;
+  /* Michael Soto */
+  display:grid;
+  grid-template-columns:  1fr 3fr 1fr;
+  padding: 16px;
+  gap:8px;
+/* Michael Soto */
+}

src/App.js

@@ -1,26 +1,162 @@
 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 {Filters} from "./component/Filters/Filters";
+import {Products} from "./component/Products/Products";
+import {ShoppingCart} from "./component/ShoppingCart/ShoppingCart"
+import styled from "styled-components";
+
+
+let AppContainer =styled.div`
+display: grid;
+grid-template-columns: 1fr 3fr 1fr;
+
+`
+const product = [
+  {
+    id: 1,
+    name: "Passeio: Viagem de Foguete",
+    price: 200.0,
+    photo: "https://images.pexels.com/photos/355906/pexels-photo-355906.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
+    quantity: 1    
+  },
+
+  {
+    id: 2,
+    name: "Passeio: Parceria com Robô",
+    price: 30.0,
+    photo: "https://images.pexels.com/photos/73910/mars-mars-rover-space-travel-robot-73910.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
+    quantity: 1    
+  },
+
+  {
+    id: 3,
+    name: "Passeio: Urano",
+    price: 21.0,
+    photo: "https://images.pexels.com/photos/39561/solar-flare-sun-eruption-energy-39561.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
+    quantity: 1
+  },
+
+  {
+    id: 4,
+    name: "Passeio: Rolê de Meteoro",
+    price: 120.0,
+    photo: "https://images.pexels.com/photos/631477/pexels-photo-631477.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
+    quantity: 1
+  },
+
+  {
+    id: 5,
+    name: "Passeio:  em Vênus",
+    price: 150.0,
+    photo: "https://images.pexels.com/photos/1114900/pexels-photo-1114900.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
+    quantity: 1
+  },
+
+  {
+    id: 6,
+    name: "Passeio: Volta na Lua",
+    price: 210.0,
+    photo: "https://images.pexels.com/photos/673902/pexels-photo-673902.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
+    quantity: 1
+  },
+
+  {
+    id: 7,
+    name: "Passeio: Partiu Marte?",
+    price: 285.0,
+    photo: "https://images.pexels.com/photos/586030/pexels-photo-586030.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
+    quantity: 1
+  },
+
+  {
+    id: 8,
+    name: "Passeio: Rolê na Galáxia",
+    price: 300.0,
+    photo: "https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
+    quantity: 1
+  }
+]
+
+class App extends React.Component{
+state= {
+  minFilter:"0",
+  maxFilter:"300",
+  nameFilter:"Passeio",
+  productsInCart:[
+  ]
+}
+
+onChangeMinFilter = (event) =>{
+this.setState({minFilter:event.target.value})
 }
 
+onChangeMaxFilter = (event) =>{
+  this.setState({maxFilter:event.target.value})
+  }
+
+onChangeNameFilter = (event) =>{
+this.setState({nameFilter:event.target.value})
+}
+
+
+onRemoveProductFromCart = (id) =>{
+  let productsInCart = [...this.state.productsInCart];
+
+  productsInCart.filter(produto => {
+    if (produto.id === id) {
+        productsInCart.splice(produto.id, 1)
+    }
+  })
+
+  this.setState({
+    productsInCart: productsInCart
+  })
+}
+
+onAddProductToCart =(id) =>{
+  let productsInCart = [...this.state.productsInCart];
+
+    product.filter(product => {
+      if (product.id === id) {
+        if (product.quantity > 1) {
+          product.quantity += 1;
+        } else {
+          productsInCart.push(product);
+        }
+      }
+    })
+    this.setState({
+      productsInCart: productsInCart
+    })
+  }
+
+
+render() {
+
+
+  return   <AppContainer>
+          <Filters 
+          minFilter={this.state.minFilter}
+          maxFilter={this.state.maxFilter}
+          nameFilter={this.state.nameFilter}
+          onChangeMinFilter={this.onChangeMinFilter}
+          onChangeMaxFilter={this.onChangeMaxFilter}
+          onChangeNameFilter={this.onChangeNameFilter}
+          />
+
+          <Products
+          product={product}
+          minFilter={this.state.minFilter}
+          maxFilter={this.state.maxFilter}
+          nameFilter={this.state.nameFilter}
+          onAddProductToCart={this.onAddProductToCart}    
+          />
+
+          <ShoppingCart
+          productsInCart={this.state.productsInCart}
+          onRemoveProductFromCart={this.onRemoveProductFromCart}
+          />
+          </AppContainer>
+
+}  
+}
 export default App;

src/component/Filters/Filters.js

@@ -0,0 +1,47 @@
+import React from "react";
+import styled from "styled-components";
+
+const FiltersContainer = styled.div`
+  border: 1px solid black;
+`
+
+const InputContainer = styled.label`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 8px;
+    padding: 8px;
+`
+
+export class Filters extends React.Component {
+  render()  {
+    return <FiltersContainer>
+        <h3>Filtros</h3>
+          < InputContainer>
+            Valor mínimo:
+            <input type="number" 
+            value={this.props.minFilter}
+            onChange={this.props.onChangeMinFilter}
+      />
+      </InputContainer>
+
+          <InputContainer>
+            Valor máximo:
+            <input type="number" 
+               value={this.props.maxFilter}
+               onchange={this.props.onChangeMaxFilter}
+                />
+            </InputContainer>
+
+            <InputContainer>
+            Busca por nome:
+            <input type="text" 
+               value={this.props.nameFilter}
+               onchange={this.props.onChangeNameFilter}
+                />
+                </InputContainer>
+
+                </FiltersContainer>
+
+  }
+}

src/component/Products/ProductCard.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from "styled-components"
+
+const CardContainer = styled.div`
+border: dotted 1px black;
+
+
+
+
+`
+const CardInfor = styled.div`
+display: flex;
+    flex-direction: column;
+    padding: 10px;
+
+
+`
+const AddToCartButton = styled.button`
+    align-self: center;
+    font-size: 12px; 
+
+`
+
+
+export class ProductCards extends React.Component{
+    render(){
+        const product = this.props.product
+
+        return <CardContainer>
+        <img src = {product.photo}/>
+        <CardInfor>
+            <p>{product.name}</p>
+            <p>R${product.price}.00</p>
+            <AddToCartButton onClick={() =>this.props.onAddProductToCart(product.id)}>Adicionar ao carrinho</AddToCartButton>
+            </CardInfor>
+        </CardContainer>
+
+    }
+}