Olá, Gabriel. Como vai?
A sua resolução ficou excelente! Criar um objeto literal capturando os dados dos inputs com o método .trim() é uma abordagem muito limpa e segura, pois evita que o usuário salve textos compostos apenas por espaços em branco. O uso do alert também funciona perfeitamente para dar esse feedback visual imediato.
Respondendo diretamente à sua dúvida: não há um problema técnico imediato, mas existe uma diferença importante sobre arquitetura de software e organização de código.
Vamos entender o porquê e analisar as boas práticas para esse cenário:
O papel de cada arquivo (Separação de Conceitos)
Quando dividimos o projeto em arquivos como api.js, ui.js e main.js, estamos aplicando um princípio chamado Separação de Responsabilidades. A ideia é que cada arquivo cuide de apenas um "assunto":
api.js: Cuida exclusivamente da comunicação com o servidor (requisições HTTP como GET, POST, PUT, DELETE).ui.js (User Interface): Cuida estritamente da manipulação do DOM (capturar dados da tela, limpar formulários, renderizar elementos na página).main.js: Funciona como o "orquestrador" ou o cérebro principal do aplicativo. Ele importa as funções dos outros arquivos e dita o fluxo dos acontecimentos, geralmente escutando os eventos (como o submit).
Onde deve ficar a captura dos dados?
A criação do objeto novoPensamento extrai os valores diretamente dos elementos HTML (pensamento.value, autoria.value). Como isso envolve interagir diretamente com a interface do usuário (DOM), a boa prática sugere que essa lógica de extração fique encapsulada dentro do ui.js.
Se você mantiver a captura no main.js, o seu arquivo principal precisa conhecer detalhes internos do HTML (como os IDs dos inputs). Se amanhã você mudar o ID de um input no HTML, precisará mexer no main.js, quando o ideal seria alterar apenas o ui.js.
Sugestão de Refatoração
Para manter o seu padrão de escutar o evento dentro do main.js, mas isolar a responsabilidade da interface no ui.js, você pode criar uma função auxiliar no ui.js que apenas extrai e devolve esses dados para o main.js.
Veja como o seu main.js ficaria ainda mais limpo e elegante:
import api from "./api.js";
import ui from "./ui.js";
const form = document.getElementById("pensamento-form");
document.addEventListener("DOMContentLoaded", async () => {
ui.renderizarPensamentos();
});
form.addEventListener("submit", async (e) => {
e.preventDefault();
// O ui.js isola o DOM e nos devolve apenas o objeto pronto
const novoPensamento = ui.obterDadosDoFormulario();
alert("Salvei o seu pensamento!");
await api.salvarPensamento(novoPensamento);
await ui.renderizarPensamentos();
ui.limparFormulario(); // Opcional: boa prática para resetar os campos
});
E dentro do seu arquivo ui.js, você implementaria a função que lê os inputs:
// Exemplo de como ficaria no ui.js
const ui = {
obterDadosDoFormulario() {
return {
id: document.getElementById("pensamento-id").value,
conteudo: document.getElementById("pensamento-conteudo").value.trim(),
autoria: document.getElementById("pensamento-autoria").value.trim(),
};
},
// suas outras funções como renderizarPensamentos()...
};
export default ui;
Dessa forma, você mantém o seu padrão de gerenciar os eventos no main.js, mas o seu código ganha muito mais maturidade, facilitando futuras manutenções e testes.
Parabéns pelo questionamento arquitetural, pensar na organização do código é o que diferencia um desenvolvedor júnior de um pleno!
Espero que possa ter lhe ajudado!
