PR para correção e comentários #8
Conversation
Projeto Futurecommerce
Projeto E-Commerce
Adicionar ao carrinho funcionando
Carrinho finalizado e filtro finalizado
Iniciamos a funcionalidade de ordenação.
Finalizei o layout e ajustei as funcionalidades.
Link do Surge no README.
paula-aribeiro
left a comment
paula-aribeiro
left a comment
There was a problem hiding this comment.
Oi pessoal, ficou animal o projeto de vocês 😍
Vocês souberam implementar os requisitos que pedimos e componentizaram bem as seções do site. Erraram apenas alguns detalhes.
Parabéns pelo trabalho em equipe e continuem assim 👏 🚀
| removerCarrinho = (idProduto) => { | ||
| const novoCarrinho = [...this.state.carrinho] | ||
| const IndexProdutoRemover = this.state.carrinho.findIndex((objeto) => objeto.id === idProduto) | ||
| const ProdutoCarrinho = novoCarrinho.find((item) => item.id === idProduto) | ||
|
|
||
| novoCarrinho.splice(IndexProdutoRemover,1) | ||
| ProdutoCarrinho.quantidade = 1 | ||
|
|
||
| this.setState({ | ||
| carrinho: novoCarrinho, | ||
| }) | ||
| } |
There was a problem hiding this comment.
O único problema dessa função é que, se o produto tiver uma quantidade maior do que 1, ao clicar no X ela exclui o produto todo, e não diminui a quantidade do produto.
| atualizarFiltroMin = (valorMin) => { | ||
| this.setState({ | ||
| filtroMin: valorMin, | ||
| }) | ||
| } | ||
|
|
||
|
|
||
| atualizarFiltroMax = (valorMax) => { | ||
| if (valorMax === 0) { | ||
| this.setState({ | ||
| filtroMax: Infinity, | ||
| }) | ||
| } else { | ||
| this.setState({ | ||
| filtroMax: valorMax, | ||
| }) | ||
| } | ||
| } | ||
|
|
||
|
|
||
| atualizarFiltroTexto = (valorTexto) => { | ||
| this.setState({ | ||
| filtroTexto: valorTexto, | ||
| }) | ||
| } | ||
|
|
||
|
|
||
| atualizarSeletorOrdem = (ordem) => { | ||
| const ordenado = ordem | ||
| this.setState({ordem: ordenado,}) | ||
| } | ||
|
|
||
|
|
||
| ordenaProdutosDaLista = (itemA, itemB) => { | ||
| if (this.state.ordem === 'crescente') { | ||
| return itemA.valor - itemB.valor | ||
| } else if (this.state.ordem === 'decrescente') { | ||
| return itemB.valor - itemA.valor | ||
| } | ||
| } | ||
|
|
||
|
|
||
| filtroListaDeProduto = () => { | ||
| return listaProdutos.filter((item) => { | ||
| if(item.valor > this.state.filtroMin) { | ||
| return true | ||
| }else{ | ||
| return false | ||
| } | ||
| }).filter((item) => { | ||
| if(item.valor < this.state.filtroMax) { | ||
| return true | ||
| }else{ | ||
| return false | ||
| } | ||
| }).filter((texto) => { | ||
| if(texto.nomeDoProduto.includes(this.state.filtroTexto)) { | ||
| return true | ||
| }else{ | ||
| return false | ||
| } | ||
| }) | ||
| } |
There was a problem hiding this comment.
Essas funções poderiam estar no componente de filtro
|
|
||
| return ( | ||
| <MainContainer> | ||
| <SideBar titulo="Filtros:"> |
There was a problem hiding this comment.
Interessante criar um componente para as barras laterais!
| const filtroMin = (event) => { | ||
| const valorMin = Number(event.target.value) | ||
| props.atualizarFiltroMin(valorMin) | ||
| } | ||
|
|
||
|
|
||
| const filtroMax = (event) => { | ||
| const valorMax = Number(event.target.value) | ||
| props.atualizarFiltroMax(valorMax) | ||
| } | ||
|
|
||
|
|
||
| const filtroTexto = (event) => { | ||
| const valorTexto = (event.target.value) | ||
| props.atualizarFiltroTexto(valorTexto) | ||
| } |
There was a problem hiding this comment.
Essas funções deveriam ter nomes com verbos no infinitivo. Ex: atualizarFiltroMin
| function Filtro(props) { | ||
|
|
||
| const filtroMin = (event) => { | ||
| const valorMin = Number(event.target.value) | ||
| props.atualizarFiltroMin(valorMin) | ||
| } | ||
|
|
||
|
|
||
| const filtroMax = (event) => { | ||
| const valorMax = Number(event.target.value) | ||
| props.atualizarFiltroMax(valorMax) | ||
| } | ||
|
|
||
|
|
||
| const filtroTexto = (event) => { | ||
| const valorTexto = (event.target.value) | ||
| props.atualizarFiltroTexto(valorTexto) | ||
| } |
There was a problem hiding this comment.
Seria melhor se esse componente Filtro fosse de classe, assim ele poderia guardar em seu state todas as informações sobre os filtros e apenas notificar o App sobre essa mudança. Assim, as responsabilidades ficam melhor separadas.
| ` | ||
|
|
||
|
|
||
| function Section(props) { |
There was a problem hiding this comment.
Esse componente poderia ter um nome mais específico
| <SideBarArea> | ||
| <Titulo>{props.titulo}</Titulo> | ||
| {props.children} | ||
| </SideBarArea> |
| const ContainerCarrinho = styled.div ` | ||
| ` |
| return ( | ||
| <ContainerCarrinho> | ||
| {props.listaCarrinho.map(item => { | ||
| const enviarId = () => { | ||
| props.removerCarrinho(item.id) | ||
| } | ||
| return <ItemCarrinho>{item.quantidade}x {item.nomeDoProduto} | ||
| <BotaoRemover onClick={enviarId}> X</BotaoRemover></ItemCarrinho> | ||
| })} | ||
| <Total>Total: R${soma}</Total> | ||
| </ContainerCarrinho> |
There was a problem hiding this comment.
Uma forma mais enxuta de fazer esse map seria:
{props.listaCarrinho.map(item => (
<ItemCarrinho>{item.quantidade}x {item.nomeDoProduto}<BotaoRemover onClick={() => {props.removerCarrinho(item.id)}> X</BotaoRemover></ItemCarrinho>
))}
No description provided.