PR para correção e comentários #1
Conversation
paula-aribeiro
left a comment
paula-aribeiro
left a comment
There was a problem hiding this comment.
Oi pessoal,
O ECommerce de vocês está bem caprichado no layout, porém faltou a interação entre componentes para implementar as funcionalidades que pedimos.
Continuem evoluindo e não deixem de procurar ajuda em caso de dúvidas.
| 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; |
There was a problem hiding this comment.
Já que os componentes da pasta future-commerce não seriam utilizados, ela deveria ter sido apagada.
| constructor(props){ | ||
| super(props); | ||
| this.state = { | ||
| inputValorMinimo: 0, | ||
| inputValorMaximo: Infinity, | ||
| carrinhoCompras: props.valorProduto, | ||
| carrinhoCompras: [], | ||
| buscarCompras: '', | ||
|
|
||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
| controleMinimo = (event) => { | ||
| this.setState({ | ||
| inputValorMinimo: event.target.value, | ||
| }) | ||
| } | ||
|
|
||
| controleMaximo = (event) => { | ||
| this.setState({ | ||
| inputValorMaximo: event.target.value, | ||
| }) | ||
| } | ||
|
|
||
| controleBusca = (event) => { | ||
| this.setState({ | ||
| buscarCompras: event.target.value, | ||
| }) | ||
| } | ||
|
|
||
|
|
||
|
|
||
| atualizarFiltro = () => { | ||
| this.setState({ | ||
|
|
||
| }) | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| colocarCarrinho = (produtos) => { | ||
| const itensComprados = [...this.state.carrinhoCompras] | ||
| const produtosIndex = this.state.carrinhoCompras.findIndex((item) => item.produtos.id === produtos.id) | ||
|
|
||
| if (produtosIndex > -1) { | ||
| itensComprados[produtosIndex].quantity += 1 | ||
| } else { | ||
| itensComprados.push({ produto: produtos, quantity: 1 }) | ||
| } | ||
|
|
||
| this.setState({ | ||
| arrayProdutos: itensComprados, | ||
|
|
||
| }) | ||
|
|
||
| console.log(itensComprados) | ||
|
|
||
| } |
There was a problem hiding this comment.
Cuidado com indentação, as funções estão cada uma em um nível.
| atualizarFiltro = () => { | ||
| this.setState({ | ||
|
|
||
| }) | ||
| } |
| carrinhoCompras: props.valorProduto, | ||
| carrinhoCompras: [], |
There was a problem hiding this comment.
Isso não faz sentido, pois o state carrinhoCompras está duplicado e essa props valorProduto não está sendo passada.
| // filtrar = () => { | ||
| // const listaFiltrada = props.lista.filter((valor) => { | ||
| // if (valor.valorProduto >= this.state.inputValorMinimo && valor.valorProduto <= this.state.inputValorMaximo){ | ||
| // return true | ||
| // } | ||
| // else{ | ||
| // return false | ||
| // } | ||
| // })} | ||
|
|
||
| let funcaoMinimo = ProdutosLoja.filter((produtos => { | ||
| if(produtos.valorProduto > this.state.inputValorMinimo){ | ||
| return produtos.valorProduto; | ||
|
|
||
| } | ||
|
|
||
|
|
||
| })) | ||
|
|
||
| let filtroBuscar = ProdutosLoja.filter((produtos) => { | ||
| return produtos.nomeProduto.toLowerCase().includes(this.state.buscarCompras.toLowerCase()) | ||
|
|
||
| }) | ||
|
|
||
| console.log(this.state.buscarCompras) |
There was a problem hiding this comment.
Essa lógica dos filtros deveria estar dentro de um componente de filtro e não no render do App
| class Filtro extends React.Component{ | ||
| constructor(props){ | ||
| super(props); | ||
| this.state = { | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| render(){ | ||
|
|
||
| return( | ||
| <FiltroDiv> | ||
| <ContainerDiv> | ||
| <h2>Filtros</h2> | ||
| <label>Valor Mínimo:</label> | ||
| <input value={this.props.valueControleMinimo} onChange={this.props.controleMinimo} type="number"></input> | ||
| <label>Valor Máximo:</label> | ||
| <input value={this.props.valueControleMaximo} onChange={this.props.controleMaximo} type="number"></input> | ||
| <label>Buscar Produto</label> | ||
| <input value={this.props.valueBuscarProduto} onChange={this.props.controleBusca}></input> | ||
| </ContainerDiv> | ||
| </FiltroDiv> | ||
| ) | ||
| } | ||
| } |
There was a problem hiding this comment.
Toda a lógica de filtragem deveria ser feita nesse componente, passando para o pai apenas o resultado do filtro, para que ele apenas selecionasse os produtos a serem mostrados. Dessa forma as responsabilidades ficam melhor separadas.
| function Produtos(props) { | ||
|
|
||
| return( | ||
|
|
||
| <ProdutosMainDiv> | ||
| <ProdutosDiv> | ||
| <ImagemProduto src={props.imagemProduto}></ImagemProduto> | ||
| <CampoDeNome>{props.nome}</CampoDeNome> | ||
| <CampoValor><label>R$</label>{props.valor} </CampoValor> | ||
| <ButtonComprar onClick={props.colocarCarrinho}>Comprar</ButtonComprar> | ||
|
|
||
| </ProdutosDiv> | ||
| </ProdutosMainDiv> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Faria mais sentido o nome desse componente (e de todos os styled components) estar no singular, pois ele representa apenas um produto.
| <ImagemProduto src={props.imagemProduto}></ImagemProduto> | ||
| <CampoDeNome>{props.nome}</CampoDeNome> | ||
| <CampoValor><label>R$</label>{props.valor} </CampoValor> | ||
| <ButtonComprar onClick={props.colocarCarrinho}>Comprar</ButtonComprar> |
There was a problem hiding this comment.
Essa props colocarCarrinho não foi passada quando o componente Produtos foi utilizado no App
| class Carrinho extends React.Component{ | ||
| constructor(props){ | ||
| super(props); | ||
| this.state = { | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| render(){ | ||
| return( | ||
| <CarrinhoDiv> | ||
| <TitleDiv> | ||
| <h2>Carrinho</h2> | ||
| </TitleDiv> | ||
| <DivDoArryCarrinho> | ||
|
|
||
| </DivDoArryCarrinho> | ||
| <DivDoTotal> | ||
| <label>R$</label> | ||
| </DivDoTotal> | ||
| </CarrinhoDiv> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| } |
There was a problem hiding this comment.
Esse componente está estático
No description provided.