Conversation
… filtros. Não consegui, sem as demais partes. Assim, seguindo o vídeo do Darvas, tentei fazer um mock de design para implementar as funcionalidades
Andamento do Trabalho - Divisão
Comecei a desenvolver o filtro
Finalização Geral
| @@ -1 +1,9 @@ | |||
| Sejam bem vindos ao Labe-commerce, esse repositório contém um esqueleto de app React e um .gitignore. | |||
| Labecommerce 5 | |||
There was a problem hiding this comment.
Parabens pelo cuidado com o README! Isso é bem importante e dá uma ótima primeira impressao!
| const Button = styled.button` | ||
| padding: 2vh 2.6vw; | ||
| background-color: black; | ||
| color: white; | ||
| ` | ||
|
|
||
| const BotaoRemover = styled.button` |
There was a problem hiding this comment.
Cuidado com a mistura de idiomas na hora de declarar as variáveis e componentes. Tambem lembrem-se de criar variáveis com nomes significativos! BotaoRemover é bom, mas Button apenas pode gerar confusao.
| const componentProduto = listaFiltrada.map((produto) => { | ||
| return ( | ||
| <div> | ||
| <Home | ||
| imageUrl={produto.imageUrl} | ||
| name={produto.name} | ||
| value={produto.value} | ||
| /> | ||
| <Button onClick={() => this.selecionarProduto(produto.id)}>Adicionar ao Carrinho</Button> | ||
| </div> | ||
|
|
||
| ) | ||
| }) |
There was a problem hiding this comment.
Esse trecho de código poderia ser um componente :))
There was a problem hiding this comment.
Lista filtrada poderia ser uma props!
| const Produto = styled.div` | ||
| margin: 0; | ||
| padding: 0; | ||
| height: 25vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| ` | ||
| const Imagem = styled.img` | ||
| width: 5vw; | ||
| ` | ||
| const Teste = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 10.6vh; | ||
| ` | ||
| const DivImagem = styled.div` | ||
| width: 15vw; | ||
| heigth: 13vh; | ||
| ` | ||
| const Teste2 = styled.div` | ||
| display: flex; | ||
| height: 15vh; | ||
| width: 15vw; | ||
| padding-top: 0.5vh; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| ` | ||
| const Valor = styled.div` | ||
| font-size: 30px; | ||
| text-align: center; | ||
| ` | ||
| const Nome = styled.p` | ||
| width: 11vw; | ||
| ` |
There was a problem hiding this comment.
Ótimo trabalho com styled-components!
| @@ -0,0 +1,27 @@ | |||
| // import React, { Component } from 'react' | |||
There was a problem hiding this comment.
Código comentado pode e deve ser retirado antes da entrega final do projeto! Lembrem de revisar e tirar o que for desnecessário.
| produtoCarrinho={componentCarrinho} | ||
| > | ||
| </ContainerProdutoCarrinho> | ||
| <span>Total: RS<span>{valorTotal}</span>,00</span> |
There was a problem hiding this comment.
Ao invés do ",00" no final do preco, voces podem usar o método toFixed(2), que estabelece que o número sempre tenha duas casas decimais. É melhor para lidar com centavos!
|
Oi grupo! A entrega de voces foi avaliada como dentro do esperado. Parabéns! 🎈 Filtros sao um pouco complicados mesmo, mas o restante do projeto está funcionando bem. Nao deixem de assistir os vídeos que estao no canal de anuncios sobre filtro e ordenacao em React! Qualquer dúvida é só mandar por la! |
2 participants
Oie! Esse é um PR de correcao que nao precisa ser mergeado. A avaliacao do trabalho estará um pouco mais abaixo na pagina.