Olá, Gabriel. Como vai?
Parabéns pela resolução da atividade! O seu código está excelente, muito bem organizado e demonstra um domínio bem sólido sobre a manipulação do DOM e a arquitetura de separação de responsabilidades (isolando a comunicação da api e as alterações visuais da ui).
A sua implementação da funcionalidade de cancelar ficou perfeita e muito limpa. Utilizar o método nativo form.reset() dentro de uma função reaproveitável (limparFormulario) é a melhor prática para limpar todos os campos de uma vez só, evitando ter que esvaziar o .value de cada input manualmente.
Analisando a sua lógica de submissão de dados, há um detalhe muito importante sobre a experiência do usuário (UX) e o fluxo assíncrono que vale a pena analisarmos juntos.
O fluxo assíncrono e o alerta ao usuário
No seu método manipularSubmissao, você escreveu o seguinte fluxo:
alert("Salvei o seu pensamento!");
limparFormulario();
await api.salvarPensamento(novoPensamento);
await ui.renderizarPensamentos();
Aqui acontece um pequeno comportamento inesperado: o navegador vai exibir o alert e limpar a tela antes mesmo de a API terminar de salvar o pensamento no servidor.
Se a requisição HTTP falhar (por exemplo, se o servidor estiver fora do ar ou a internet oscilar), o usuário verá a mensagem de sucesso "Salvei o seu pensamento!", mas o dado terá sido perdido nos bastidores.
Para garantir que o feedback visual seja 100% fiel ao estado real da aplicação, o ideal é aguardar o término da operação assíncrona (await) para só depois disparar o sucesso e limpar a tela.
Como o código fica aplicando essa boa prática
Veja como o seu método manipularSubmissao ganha muito mais robustez e segurança adicionando também um bloco try...catch para capturar possíveis erros de rede:
async function manipularSubmissao(e) {
e.preventDefault();
const novoPensamento = {
id: idPensamento.value,
conteudo: pensamento.value.trim(),
autoria: autoria.value.trim(),
};
try {
// 1. Primeiro envia os dados para o servidor e aguarda a resposta
await api.salvarPensamento(novoPensamento);
// 2. Só exibe o sucesso se a linha de cima funcionar perfeitamente
alert("Pensamento salvo com sucesso!");
// 3. Limpa a tela e atualiza a listagem
limparFormulario();
await ui.renderizarPensamentos();
} catch (erro) {
console.error("Erro ao salvar o pensamento:", erro);
alert("Houve um problema ao salvar seu pensamento. Tente novamente mais tarde.");
}
}
Outro ponto super positivo
Gostaria de destacar o seu uso do método DOMContentLoaded para amarrar os ouvintes de evento (addEventListener). Essa é uma excelente prática no Front-end, pois garante que o JavaScript só vai tentar caçar e interagir com os elementos do formulário e botões depois que todo o esqueleto do HTML estiver completamente carregado pelo navegador, evitando o famoso erro de Cannot read properties of null.
O seu projeto do mural de pensamentos está ficando com uma estrutura profissional fantástica. Continue evoluindo nas requisições do seu CRUD!
Espero que possa ter lhe ajudado!
