PR de Correção (Não precisa ser mergeado) #10
Conversation
Layout com menu quase pronto
Pagina inicial adicionada
contrato e formulario
…lor, data e ordem alfabetica
Projeto future ninjas dennis
adicionado a funcao no componente de lista completo!
Projeto completo com alguns bugs
correção da Função change taken
Projeto completo
Projeto completo
| constructor(props) { | ||
| super(props) | ||
| } | ||
|
|
||
| render() { |
There was a problem hiding this comment.
Poderia ser um componente funcional, vocês não fizeram uso do estado e de nenhum método de ciclo de vida (componentDidMount, componentWillUnmount).
| @media (max-width: 480px){ | ||
| width: 100%; | ||
| } |
| <ButonOrder onClick={() => this.filterAlphabetically()}>Ordernar Por Titulo</ButonOrder> | ||
| <ButonOrder onClick={() => this.filterByValue()}>Ordernar Por valor</ButonOrder> | ||
| <ButonOrder onClick={() => this.filterByDate()}>Ordernar Por Data</ButonOrder> |
There was a problem hiding this comment.
Quando temos esse tipo de situação (o método que lida com um evento não receber parâmetros), podemos fazer da seguinte forma:
<ButonOrder onClick={this.filterAlphabetically}>Ordenar Por Titulo</ButonOrder>
<ButonOrder onClick={this.filterByValue}>Ordenar Por valor</ButonOrder>
<ButonOrder onClick={this.filterByDate}>Ordenar Por Data</ButonOrder>^ Essa é uma forma mais eficiente de fazer o que vocês fizeram acima, pois dessa forma vocês poupam a criação das arrow functions a cada iteração do render.
| <Filtro> | ||
| <input placeholder="Filtrar por titulo..." value={this.state.title} onChange={this.inputTitle}></input> | ||
| <input placeholder="Filtrar por Descrição..." value={this.state.descricao} onChange={this.inputDescricao}></input> | ||
| <button onClick={() => this.filterListByTitleAndDescription(this.state.title, this.state.descricao)}>filtrar</button> |
There was a problem hiding this comment.
Atenção! Quando temos um método que precisa de informações que estão no estado do componente, não precisamos passá-las no render, exemplo:
// removi os parâmetros da função
filterListByTitleAndDescription = () => {
let jobList = this.state.jobList.filter((job) => {
return job.title.includes(this.state.title) // troquei aqui para pegar direto do estado
})
if (descricao !== "") {
jobList = jobList.filter((job) => {
return job.description.includes(this.state.descricao) // troquei aqui para pegar direto do estado
})
}
this.setState({ filterList: jobList })
}Dessa forma, limpamos o JSX no render que pode ficar assim:
<button onClick={this.filterListByTitleAndDescription}>filtrar</button>
| <button onClick={() => this.filterListByTitleAndDescription(this.state.title, this.state.descricao)}>filtrar</button> | ||
| <input placeholder="valor minimo" value={this.state.valMin} onChange={this.inputValMin}></input> | ||
| <input placeholder="valor maximo" value={this.state.valMax} onChange={this.inputValMax}></input> | ||
| <button onClick={() => this.filterListByValMInAndValMax(this.state.valMin, this.state.valMax)}>filtrar</button> |
There was a problem hiding this comment.
Mesma coisa que comentei sobre o outro botão nesse componente.
| render() { | ||
| const list = this.state.filterList | ||
|
|
||
| if (list !== undefined) { |
There was a problem hiding this comment.
Nos casos que temos checagens para garantir se uma lista pode ser mostrada, ao inverter a comparação o código fica mais simples, exemplo:
if(list === undefined){
return (<div>Lista vazia</div>)
}
return (
// O componente de vocês aqui, fora de um if, mais fácil de ler.
)
| <Input type="text" | ||
| onChange={this.saveTitle} | ||
| value={this.state.title} | ||
| ></Input> | ||
| <StyledElemnts>Descrição</StyledElemnts> | ||
| <Input type="text" | ||
| onChange={this.saveDescription} | ||
| value={this.state.description} | ||
| ></Input> | ||
| <StyledElemnts>Valor</StyledElemnts> | ||
| <Input type="number" | ||
| onChange={this.savePrice} | ||
| value={this.state.price} | ||
| ></Input> | ||
| <StyledElemnts>Pagamento</StyledElemnts> | ||
| <NativeSelect | ||
| onChange={this.savePayment} | ||
| value={this.state.payment} | ||
| > | ||
| <option>Selecione a forma de pagamento</option> | ||
| <option>Cartão de crédito</option> | ||
| <option>Cartão de débito</option> | ||
| <option>Dinheiro</option> | ||
| <option>Cheque</option> | ||
| <option>Escambo</option> | ||
| </NativeSelect> | ||
| <StyledElemnts>Dia de agendamento</StyledElemnts> | ||
| <StyledDate type="date" | ||
| onChange={this.saveDate} | ||
| value={this.state.date} | ||
| ></StyledDate> | ||
| <Button variant="outlined" | ||
| onClick={this.createJob} | ||
| >Criar contrato</Button> |
There was a problem hiding this comment.
Atenção para indentação e organização das props, dificulta a leitura.
| switch (currentMenu) { | ||
| case 'initial': | ||
| return ( | ||
| <Fragment> |
| this.setState({ | ||
| currentMenu: 'contract', | ||
| currentPage: 'contract' | ||
| }) |
There was a problem hiding this comment.
Sei que é tentador, mas seria mais ideal se essa lógica estivesse extraída pra um método próprio.
| this.setState({ | ||
| currentMenu: 'provider', | ||
| currentPage: 'listJobsProvider' | ||
| }) |
There was a problem hiding this comment.
Sei que é tentador, mas seria mais ideal se essa lógica estivesse extraída pra um método próprio.
|
|
||
| let jobList = this.state.jobList | ||
| jobList = this.state.jobList.filter((job) => { | ||
| if (min !== "") { |
There was a problem hiding this comment.
uma forma mais eficiente de fazer essa checagem é olhar o .length da string:
if(min.length > 0){
}
| jobList.sort(function (jobA, jobB) { | ||
| if (Date.parse(jobA.dueDate) < Date.parse(jobB.dueDate)) { return -1; } | ||
| if (Date.parse(jobA.dueDate) > Date.parse(jobB.dueDate)) { return 1; } | ||
| return 0; | ||
| }) |
| } | ||
| { | ||
|
|
||
| this.state.taken ? <p><strong>Serviço já contratado</strong></p> : <p><strong>Serviço não contratado</strong></p> |
There was a problem hiding this comment.
Uma forma de simplificar essa lógica seria só trocar o texto, algo como:
const serviceStatusText = this.state.taken ? "Serviço já contratado" : "Serviço não contratado";Aí o JSX ficaria assim:
<p><strong>{serviceStatusText}</strong></p>Repetindo menos código.
| const JobWrapper = styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 60%; | ||
| margin: 10px auto; | ||
| min-height: 150px; | ||
| ` | ||
| const InfoWrapper = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 5px; | ||
| width: 100%; | ||
| ` | ||
|
|
||
| const DescicaoWrapper = styled.div` | ||
| padding: 5px; | ||
| text-align: center; | ||
| width: 200%; | ||
| ` | ||
| const classes = { | ||
| card: { | ||
| minWidth: 275, | ||
| }, | ||
| bullet: { | ||
| display: 'inline-block', | ||
| margin: '0 2px', | ||
| transform: 'scale(0.8)', | ||
| }, | ||
| title: { | ||
| fontSize: 14, | ||
| }, | ||
| pos: { | ||
| marginBottom: 12, | ||
| }, | ||
| }; | ||
|
|
||
| const Description = styled(Card)` | ||
| margin: 10px; | ||
| width: 100%; | ||
| ` | ||
| const ItemContrato = styled(CardContent)` | ||
| display:flex; | ||
| ` |
There was a problem hiding this comment.
Percebam que as primeiras 52 linhas desse arquivo foram só pra coisas secundárias, uma boa forma de se organizar seria extrair esses componentes para outro arquivo e só importá-los aí.
|
Pontos de atenção - FutureNinjas
Código
|
Surge