PR Correção

[BrunoSilva28]

No description provided.

[labenu-bot]

Parabéns pela entrega!

Requisitos do projeto ✅

Implementações	Feito
A página possui dois inputs controlados: um para o nome do usuário e um para a mensagem	✅
Existe um botão de enviar e um espaço para as mensagens enviadas aparecerem	✅
Ao pressionar o botão de enviar, a mensagem enviada aparece na tela	✅
Ao pressionar o botão de enviar, o campo de mensagem é limpo	✅
Quão fácil foi achar as informações no site?	Fácil
O que você achou do design do site?	Médio
[Desafio] A mensagem pode ser enviada utilizando a tecla enter	-
[Desafio] Quando o usuário é 'eu' ou 'Eu', a mensagem aparece do outro lado da tela	-
[Desafio] Ao clicar duas vezes em uma menasgem já enviada, ela é deletada	-
Funcionalidade extra	-

Feedback do código	Feito
Criou componentes separados ao invés de deixar tudo no arquivo App.js	-
Utilizou apenas styled-components para a estilização	✅
Deu bons nomes para variáveis, funções, componentes e styled-components	-
Boa identação	✅
Ao alterar arrays no estado, criou uma cópia da lista com o spread operator para alterá-la antes de utilizar o this.setState	✅
Criou link do surge	✅
Criou um bom readme com informações relevantes para o projeto	-

Comentários da pessoa avaliadora

Olá, pessoal! Primeiramente, gostaria de parabenizá-los por concluírem mais uma etapa do processo da Labenu! Pude perceber pelo código de vocês que estão no caminho certo! Conseguiram incluir todas as funcionalidades essenciais do projeto,
o que é um excelente avanço! :)

De toda forma, gostaria de fazer alguns comentários que talvez ajudem vocês nos próximos projetos:

1. Uma prática muito importante e relevante na estruturação dos códigos é que busquemos implementá-lo na mesma linguagem. Isto permite que, quem vá observar nossa codagem, identifique rapidamente a forma de escrita. Percebi que vocês optaram por nomear variáveis e funções utilizando o português, mas na escolha de nomes para funções, propriedades de estado e tags nomeadas algumas se encontram em inglês e outras em português. O ideal, por ser uma língua global, é que tentemos nos habituar a codar ao máximo em inglês (já pensando aqui no futuro de vocês, quem sabe empregados numa empresa internacional! ^.^), mas caso queiram se utilizar de outra linguagem, não tem nenhum problema. Mas, procurem escrever todo o código de forma padronizada. Isto pode ajudar muito vocês! ;)

2. Uma prática muito interessante é a de criar uma documentação README.md que seja visível a qualquer pessoa que eventualmente observe o projeto de vocês. Além de incluir o que funciona (ou não funciona no projeto) e os integrantes da equipe, seria interessante também que vocês incluíssem na documentação informações sobre a tecnologia utilizada ("Este projeto foi realizado
   utilizando React.js, ...), o propósito do projeto ("Este projeto busca implementar funcionalidades básicas do Whatsapp, ...) e, por se tratar de um projeto em equipe, também seria interessante identificar como foram realizadas as atividades da equipe (se pair programming, ou se não, como foram distribuídas as tarefas). Dessa forma, qualquer avaliador ou recrutador que eventualmente veja o portfólio futuro de vocês saberá mais ou menos a intenção do projeto, suas limitações e também como buscaram cooperar como equipe (esta, uma característica essencial nas empresas).

3. Notei que vocês conseguiram desenvolver bem o desafio de separação do usuário "eu" dos demais. Todavia, na implementação de separação do usuário próprio ("eu" ou "EU"), a escrita à direita da tela só ocorre se passarmos em "Usuário" o nome "eu" minúsculo. Como sugestão, vocês poderiam capturar a informação do input controlado e utilizar-se do método .toLowerCase() para tornar qualquer variação de escrita da palavra "eu" (Eu, eU, EU ou eu) em "eu" minúsculo (utilizar o método .toUpperCase() também funciona, mas de forma inversa).

4. Outra coisa que observei foi que vocês não bloquearam a exibição de mensagens ou usuários vazios. Como sugestão, sugiro a inclusão de condicionais na função de envio para que o state possa ser modificado somente quando os campos forem preenchidos.

5. Notei que ao inserir muitas mensagens no projeto de vocês, eventualmente a tela se arrasta para baixo, assim desconfigurando a estilização base do projeto. Como sugestão, gostaria de recomendar a vocês a leitura desta funcionalidade: "https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp". Pode ser que ajude vocês em novos projetos! :)

No mais, parabéns pelo projeto! E muito sucesso na jornada de vocês! :)

Análise realizada por: Bruno