future4code · pedro-severo · Aug 19, 2020 · Aug 19, 2020 · Aug 19, 2020 · Aug 19, 2020
diff --git a/README.md b/README.md
@@ -1 +1,22 @@
-Sejam bem vindos ao Labe-commerce, esse repositório contém um esqueleto de app React e um .gitignore.
+## *LabeLitos - Projeto Labenu*
+> Feito com React - Por Marcela Militello, Roberto Salgado e Alice Souza.
+### Link > [wiry-force.surge.sh](http://wiry-force.surge.sh/)
+### O que funciona: 
+- Responsividade
+- Salva e Recupera conteúdo do carrinho usando o LocalStorage
+- Home
+    - Mostra todos os produtos
+    - Produtos:
+        - Têm um botão que permite adicioná-los ao carrinho
+        - São exibidos o nome, preço e imagem em um card
+- Carrinho
+    - Mostra todos os produtos e quantidades adicionadas
+    - Capacidade de remover itens do carrinho
+    - Mostra o valor total do carrinho
+- Filtro
+    - Por valor mínimo e máximo
+    - Por nome do produto
+### Imagens:
+![Labelitos2](https://github.com/future4code/jackson-labe-commerce1/blob/master/labelitos1.png)
+![Labelitos3](https://github.com/future4code/jackson-labe-commerce1/blob/master/labelitos2.png)
+![Labelitos4](https://github.com/future4code/jackson-labe-commerce1/blob/master/labelitos3.png)
diff --git a/labelitos.png b/labelitos.png
diff --git a/labelitos1.png b/labelitos1.png
diff --git a/labelitos2.png b/labelitos2.png
diff --git a/labelitos3.png b/labelitos3.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +25,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>LabeLitos</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,252 @@
 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>
-  );
-}
-
-export default App;
+import {Cabecalho} from './assets/components/Cabecalho';
+import {Card} from './assets/components/Card';
+import {Carrinho} from './assets/components/Carrinho';
+import {Filtro} from './assets/components/Filtro';
+import {Rodape} from './assets/components/Rodape';
+import {
+  AppContainer, 
+  MainContainer,
+  Cards, 
+  HeaderCards,
+  BotaoCarrinho,
+  CarrinhoContainer
+} from './assets/components/Styled';
+import bendego from './assets/img/bendego.jpg';
+import condritoBrecha from './assets/img/condrito-brecha.jpg';
+import condrulesAustralian from './assets/img/condrules-australian.jpg';
+import parkForest from './assets/img/park-forest.jpg';
+import sikhoteAlin from './assets/img/sikhote-alin.jpg';
+import varreSai from './assets/img/varre-sai.jpg';
+import viscenio from './assets/img/viscenio.jpg';
+import tatahouine from './assets/img/tatahouine.jpg';
+import botaoCarrinho from './assets/img/shopping-white.svg';
+import iconeDeletar from './assets/img/delete.svg';
+
+const produtos = [
+  {
+    id: 1,
+    titulo: "Bendegó",
+    preco: 100,
+    imagem: bendego,
+    quantidade: 1
+  },
+  {
+    id: 2,
+    titulo: "Condrito Brecha",
+    preco: 150,
+    imagem: condritoBrecha,
+    quantidade: 1
+  },
+  {
+    id: 3,
+    titulo: "Côndrules",
+    preco: 300,
+    imagem: condrulesAustralian,
+    quantidade: 1
+  },
+  {
+    id: 4,
+    titulo: "Park Forest",
+    preco: 200,
+    imagem: parkForest,
+    quantidade: 1
+  },
+  {
+    id: 5,
+    titulo: "Sikhote-Alin",
+    preco: 400,
+    imagem: sikhoteAlin,
+    quantidade: 1
+  },
+  {
+    id: 6,
+    titulo: "Tatahouine",
+    preco: 250,
+    imagem: tatahouine,
+    quantidade: 1
+  },
+  {
+    id: 7,
+    titulo: "Varre-sai",
+    preco: 350,
+    imagem: varreSai,
+    quantidade: 1
+  },
+  {
+    id: 8,
+    titulo: "Viscenio",
+    preco: 280,
+    imagem: viscenio,
+    quantidade: 1
+  }
+]
+
+export default class App extends React.Component {
+  state = {
+    produtos,
+    carrinho: [],
+    buscaValor: '',
+    ordemValor: '',
+    totalCarrinho: 0,
+    carrinhoAberto: false,
+    filtros: {
+      minimoValor: 0,
+      maximoValor: 0
+    }
+  };
+
+  componentDidUpdate() {
+    localStorage.setItem('carrinho', JSON.stringify(this.state.carrinho))
+  }
+
+  componentDidMount() {
+    this.setState({carrinho: JSON.parse(localStorage.getItem('carrinho')) || []})
+  }
+
+  onChangeBusca = (event) => {
+    this.setState({ buscaValor: event.target.value })
+  };
+
+  atualizarFiltro = (novoValorFiltro) => {
+    this.setState ({
+      filtros: {
+        ...this.state.filtros,
+        ...novoValorFiltro
+      }
+    })
+  }
+
+  filtrarProdutos() {
+    const {produtos, filtros, buscaValor} = this.state
+    let produtosFiltrados = produtos.filter(produto => {
+      return produto.titulo.toLowerCase().indexOf(buscaValor.toLowerCase()) > -1
+    }).filter(produto => {
+      return produto.preco < (filtros.maximoValor || Infinity)
+    }).filter(produto => {
+      return produto.preco > (filtros.minimoValor || 0)
+    })
+  return produtosFiltrados
+  };
+
+  onChangeOrdem = (event) => {
+    let listaOrdenada = [];
+    if (event.target.value === 'crescente') {
+      listaOrdenada = [...this.state.produtos];
+      listaOrdenada.sort ((a, b) => {
+        return a.preco - b.preco;
+      })
+    }
+    if ( event.target.value === 'decrescente' ) {
+      listaOrdenada = [...this.state.produtos];
+      listaOrdenada.sort ((b, a) => {
+        return a.preco - b.preco;
+      })
+    }
+    this.setState({ produtos: listaOrdenada })
+  };
+
+  abrirCarrinho = () => {
+    this.setState({carrinhoAberto: !this.state.carrinhoAberto});
+  };
+
+  adicionarCarrinho = (id) => {
+    const produtoSelecionado = this.state.produtos.find(produto => {
+      return produto.id === id
+    })
+    const posicaoDoProdutoNoCarrinho = this.state.carrinho.findIndex(produto => {
+      return produto.id === id
+    });
+    const existeNoCarrinho = posicaoDoProdutoNoCarrinho > -1
+    let carrinhoExpectativa = [...this.state.carrinho]
+    if (existeNoCarrinho) {
+      carrinhoExpectativa = carrinhoExpectativa.map(produto => {
+        if (produto.id === id ) {
+          return {
+            ...produto,
+            quantidade: produto.quantidade + 1
+          }
+        }
+        return produto
+      })
+    } else {
+      carrinhoExpectativa.push(produtoSelecionado)
+    }
+    this.setState({carrinho: carrinhoExpectativa})
+  };
+
+  deletarProdutoCarrinho = (id) => {
+    const carrinhoRealidade = this.state.carrinho.filter(produto => {
+      return (produto.id === id) ? false : true
+    });
+    this.setState({carrinho: carrinhoRealidade});
+  };
+
+  renderCarrinho =  () => {
+    let resultado = 0;
+    this.state.carrinho.forEach(produto => {
+      if (produto) {
+        resultado += (produto.preco * produto.quantidade)
+      }
+    });
+    return (
+        <CarrinhoContainer>
+          <h2>Carrinho</h2>
+          {this.state.carrinho.map(produto => {
+            if (produto.quantidade > 0 ) {
+              return <Carrinho 
+              tituloProduto={produto.titulo} 
+              quantidadeProduto={produto.quantidade} 
+              clickDeletarProduto={() => this.deletarProdutoCarrinho(produto.id)}
+              iconeDeletar={iconeDeletar}
+            />
+            }
+          })}
+          <p><strong>Total: R$ {resultado},00</strong></p>
+        </CarrinhoContainer>
+    )
+  };
+
+  render () {
+    const produtosFiltrados = this.filtrarProdutos()
+
+    return (
+      <AppContainer>
+        <Cabecalho/>
+        <MainContainer carrinhoAberto={ this.state.carrinhoAberto }>
+          <Filtro
+            onChangeFiltro={ this.atualizarFiltro }
+            valorBusca={ this.state.buscaValor }
+            mudarBusca={ this.onChangeBusca }
+          />
+          <div>
+            <HeaderCards>
+              <p>Quantidade de produtos: { produtosFiltrados.length } </p>
+              <select onChange={this.onChangeOrdem}>
+                <option value='crescente'>Preço: crescente</option>
+                <option value='decrescente'>Preço: decrescente</option>
+              </select>
+            </HeaderCards>
+            <Cards>
+              { produtosFiltrados.map(produto => {
+                return (
+                  <Card
+                    srcImg={produto.imagem}
+                    tituloCard={produto.titulo}
+                    precoCard={produto.preco}
+                    clickAddCarrinho={() => this.adicionarCarrinho(produto.id)}
+                  />
+                )
+              }) }
+            </Cards>
+          </div>
+          {this.state.carrinhoAberto && this.renderCarrinho()}
+        </MainContainer>
+        <Rodape/>
+        <BotaoCarrinho onClick={this.abrirCarrinho}>
+          <img alt='Icone carrinho' src={botaoCarrinho} />
+        </BotaoCarrinho>
+      </AppContainer>
+    );
+  };
+};
diff --git a/src/assets/components/Cabecalho.js b/src/assets/components/Cabecalho.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import {Header} from './Styled';
+
+export class Cabecalho extends React.Component{
+  render(){
+    return (
+      <Header>
+        <h1>LabeLitos</h1>
+        <h3>Não são pedras! São Labelitos!</h3>
+      </Header>
+    );
+  };
+};
diff --git a/src/assets/components/Card.js b/src/assets/components/Card.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {ImagemCard, CardProduto} from './Styled';
+
+export class Card extends React.Component{
+  render(){
+    return (
+      <CardProduto>
+        <ImagemCard src={this.props.srcImg}/>
+        <h2>{this.props.tituloCard}</h2>
+        <h3>R$ {this.props.precoCard},00</h3>
+        <button onClick={this.props.clickAddCarrinho}>Adicionar ao carrinho</button>
+      </CardProduto>
+    );
+  };
+};