PR de correçao

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "labenu"
+    ]
+}

README.md

@@ -1 +1,2 @@
 Sejam bem vindos ao Labe-commerce, esse repositório contém um esqueleto de app React e um .gitignore.
+Link do surge: http://high-pitched-support.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.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,3 +1,7 @@
+* {
+  margin: 0;
+}
+
 .App {
   text-align: center;
 }
@@ -13,6 +17,16 @@
   }
 }
 
+#buttonCart {
+  background-color: green;
+  color: white;
+  height: 4vh;
+  float: right;
+  margin-right: 12vh;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

src/App.js

@@ -1,26 +1,199 @@
-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 React from "react";
+import "./App.css";
+import Cards from "./components/Cards";
+import {
+  InputsFilters,
+  Container,
+  CardContainer,
+  Texts,
+} from "./components/styled";
+import CartItem from "./components/CartItens";
+
+class App extends React.Component {
+  state = {
+    itemCard: [
+      {
+        id: 1,
+        img: "https://picsum.photos/300/300?a=1",
+        item: `Item A`,
+        price: 1,
+      },
+      {
+        id: 2,
+        img: "https://picsum.photos/300/300?a=2",
+        item: `Item B`,
+        price: 2000,
+      },
+      {
+        id: 3,
+        img: "https://picsum.photos/300/300?a=3",
+        item: `Item C`,
+        price: 25.5,
+      },
+      {
+        id: 4,
+        img: "https://picsum.photos/300/300?a=4",
+        item: `Item D`,
+        price: 25.95,
+      },
+      {
+        id: 5,
+
+        img: "https://picsum.photos/300/300?a=5",
+        item: `Item E`,
+        price: 789.87,
+      },
+      {
+        id: 6,
+        img: "https://picsum.photos/300/300?a=6",
+        item: `Item F`,
+        price: 453.28,
+      },
+      {
+        id: 7,
+        img: "https://picsum.photos/300/300?a=7",
+        item: `Item G`,
+        price: 236.63,
+      },
+      {
+        id: 8,
+        img: "https://picsum.photos/300/300?a=8",
+        item: `Item H`,
+        price: 456.98,
+      },
+    ],
+    cart: [],
+    inputValueMin: 0,
+    inputValueMax: Infinity,
+    inputText: "",
+    cartVisible: false,
+  };
+
+  onChangeValueMin = (e) => {
+    const valueMin = e.target.value;
+    this.setState({
+      inputValueMin: valueMin,
+    });
+  };
+
+  onChangeValueMax = (e) => {
+    const valueMax = e.target.value;
+    this.setState({
+      inputValueMax: valueMax,
+    });
+  };
+
+  filterName = (e) => {
+    const valueText = e.target.value;
+    this.setState({
+      inputText: valueText,
+    });
+  };
+
+  getFilterAddLista = () => {
+    return this.state.itemCard
+      .filter((produto) => {
+        return this.state.inputValueMin > 0
+          ? produto.price > this.state.inputValueMin
+          : produto;
+      })
+      .filter((produto) => {
+        return this.state.inputValueMax < Infinity
+          ? produto.price < this.state.inputValueMax
+          : produto;
+      })
+      .filter((produto) => {
+        const produtoNome = produto.item.toLowerCase();
+        return produtoNome.indexOf(this.state.inputText.toLowerCase()) > -1;
+      });
+  };
+
+  cartVisible = () => {
+    this.setState({
+      cartVisible: !this.state.cartVisible,
+    });
+  };
+
+  addCartItem = (id) => {
+    const addItem = this.state.itemCard.filter((item) => {
+      return item.id === id;
+    });
+    const newCart = [...this.state.cart, addItem[0]];
+    this.setState({
+      cart: newCart,
+    });
+  };
+
+  removeCartItem = (id) => {
+    const novoCarrinho = this.state.cart;
+    const indexProduto = novoCarrinho.findIndex((item) => {
+      return item.id === id;
+    });
+
+    novoCarrinho.splice(indexProduto, 1);
+
+    this.setState({ cart: novoCarrinho });
+  };
+
+  render() {
+    const listaFiltrada = this.getFilterAddLista();
+    const itemList = listaFiltrada.map((item) => {
+      return (
+        <div key={item.id}>
+          <Cards
+            id={item.id}
+            itemPhoto={item.img}
+            itemName={item.item}
+            priceItem={item.price}
+            addCartItem={this.addCartItem}
+            removeCartItem={this.removeCartItem}
+          />
+        </div>
+      );
+    });
+
+    return (
+      <div className="App">
+        <Container cartVisible={this.state.cartVisible}>
+          <InputsFilters>
+            <Texts>Valor Mínimo: </Texts>
+            <input
+              value={this.state.inputValueMin}
+              onChange={this.onChangeValueMin}
+              min="0"
+              type="number"
+            />
+            <Texts>Valor Máximo: </Texts>
+            <input
+              value={this.state.inputValueMax}
+              onChange={this.onChangeValueMax}
+              min="0"
+              type="number"
+            />
+
+            <Texts>Buscar Produto: </Texts>
+            <input onChange={this.filterName} type="text" />
+          </InputsFilters>
+          <CardContainer>
+            {/* <div>
+              <p>Quantidade de Produtos</p>
+              <select>
+                <option value="crescente">Crescente</option>
+                <option value="decrescente">decrescente</option>
+                </select>
+              </div> */}
+
+            {itemList}
+          </CardContainer>
+          {this.state.cartVisible && (
+            <CartItem estado={this.state.cart} remove={this.removeCartItem} />
+          )}
+        </Container>
+        {/* <CartButton showCart={this.cartVisible}></CartButton> */}
+        <button id="buttonCart" onClick={this.cartVisible}>Carrinho</button>
+      </div>
+    );
+  }
 }
 
 export default App;

src/components/Button.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default class CartButton extends React.Component {
+  render() {
+    return <button> Carrinho</button>;
+  }
+}

src/components/Cards.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { ItemCard, ContainerCards, ButtonAddCar, Images } from "./styled";
+
+export default class Cards extends React.Component {
+  render() {
+    return (
+      <ContainerCards>
+        <ItemCard>
+          <Images src={this.props.itemPhoto} alt="Imagem do produto" />
+          <p>{this.props.itemName}</p>
+          <p>R$ {this.props.priceItem}</p>
+
+          <ButtonAddCar onClick={() => this.props.addCartItem(this.props.id)}>
+            Adicionar ao carrinho
+          </ButtonAddCar>
+        </ItemCard>
+      </ContainerCards>
+    );
+  }
+}

src/components/CartItens.js

@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+
+const ContainerCartItem = styled.div`
+  border: 1px solid black;
+  height: auto;
+  margin: 0.5em 0.5em 0 0.5em;
+  padding: 0.5em;
+`;
+
+export default class CartItem extends React.Component {
+  render() {
+    const cartItem = this.props.estado.map((produto) => {
+      console.log(produto.id);
+      return (
+        <div key={produto.id}>
+          <p>
+            <strong>Produto: </strong>
+            {produto.item}
+          </p>
+
+          <p> R$ {produto.price}</p>
+          <p>-------------------------</p>
+          <button onClick={() => this.props.remove(this.props.id)}>X</button>
+        </div>
+      );
+    });
+    return (
+      <ContainerCartItem>
+        <p>{cartItem}</p>
+      </ContainerCartItem>
+    );
+  }
+}

src/components/Filters.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { InputsFilters, Texts } from "./styled";
+
+export default class Filters extends React.Component {
+  render() {
+    return (
+      <InputsFilters>
+      </InputsFilters>
+    );
+  }
+}