PR de correção. Não preicisa mergeear. #5
Conversation
…ódigos styled implementados
componentes area de mensagem e mensagens separados, app.js com alguma…
…rdo com quem envia
implementacao de enviar com enter, e das posicoes de mensagens de aco…
Apagar mensagem com dois cliques criado
| background-color: ${props =>{ | ||
| if(props.side !== "right"){ | ||
| return "#ffffff" | ||
| } else { | ||
| return "#d5f5bc" | ||
| } | ||
| }}; |
There was a problem hiding this comment.
Mto bom as props no styled-component! Parabéns!
| state = { | ||
| mensagensDoApp : [], | ||
| valorInputUsuario: "", | ||
| valorInputMensagem: "" | ||
| }; |
There was a problem hiding this comment.
Perfeita a declaração do estado! 👏👏👏
|
|
||
| const novasMensagens = [...this.state.mensagensDoApp, novaMensagem]; | ||
|
|
||
| this.setState({ mensagensDoApp: novasMensagens, valorInputMensagem: "", valorInputUsuario: ""}); |
There was a problem hiding this comment.
Lembrem-se de quebrar a linha para cada mudança de estado. O código fica mais legível quando se faz isso!
| const novasMensagens = [...this.state.mensagensDoApp, novaMensagem]; | ||
|
|
||
| this.setState({ mensagensDoApp: novasMensagens, valorInputMensagem: "", valorInputUsuario: ""}); | ||
| console.log(this.state.mensagensDoApp) |
There was a problem hiding this comment.
Lembrem-se de tirar os console.logs ao longo do código.
| let userStyle | ||
|
|
||
|
|
||
| let listaMensagens = this.state.mensagensDoApp.map((message) => { |
There was a problem hiding this comment.
De preferência para const no lugar de let, nesses casos.
| let side | ||
| let userStyle |
There was a problem hiding this comment.
Acho que vocês poderiam ter deixado essas duas lets dentro da função map, pq vcs estão usando elas apenas dentro da função.
| const deleteMsg = () => { | ||
| this.deleteMensagem(message.id) | ||
| } | ||
|
|
||
| if(message.usuario === 'eu'){ | ||
| side = "right" | ||
| return( | ||
| <MsgContainer key={message.id} side={side} onDoubleClick={deleteMsg}> |
There was a problem hiding this comment.
No lugar da criar uma outra função chamada deleteMsg que chama a this.deleteMensagem(message.id), vcs poderiam simplificar a sintaxe no onDoubleClick:
onDoubleClick={() => this.deleteMensagem(message.id)}
| <InputUserName | ||
| type="text" | ||
| placeholder="usuário" | ||
| value={this.state.valorInputUsuario} | ||
| onChange={this.onChangeInputUsuario} /> |
There was a problem hiding this comment.
Atenção com a identação. De uma margem nas props do componente.
|
Queridos! Fiz uns comentários ao longo do código, peço que deem uma olhada. Mas no geral, a entrega de vcs ficou impecável. Código muito bem escrito, com desafios feitos e ótimas ideias de lógica para as funcionalidades. Parabéns! Continuem assim! |
PR de correção. Não preicisa mergeear.
whatslab-group7n.surge.sh