Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Reload ao clicar em excluir

Referente ao curso JS na web: CRUD com JavaScript assíncrono, no capítulo Criar e remover clientes e atividade Conectando API com botão

por Ricardo Mellegari de Oliveira
| 173.9k xp | 84 posts
Analista de Projetos e Melhoria Contínua

Seguindo o video vi que ao clicar em excluir ele deleta a linha e já recarrega a pagina, entretanto não consegui localizar o motivo desse comportamento.

segue meu código, alguém poderia ajudar?

tabela.addEventListener('click', (evento)=>{
   let ehBtnDel = evento.target.className == 'botao-simples botao-simples--excluir'
   //verificando se o local clicado foi o botao
    if(ehBtnDel){
        //procurando o elemento mais próximo da td com o escutador, no caso o escutdor está na td e o proximo é tr
        const linhaCliente = evento.target.closest('[data-id]')
        let id = linhaCliente.dataset.id
        clienteService.removeCliente(id)


})


const listaClientes = () => {
    //fetch é um método global e por padrão ela já faz um get e devolve uma promisse
    return fetch(`http://localhost:3000/profile`)
    .then(resposta => {
        return resposta.json()
    })

}

const criaCliente = (nome, email) => {
    //acessar api
    return fetch(`http://localhost:3000/profile`, {
      //declarando ação desejada  
        method:'POST',
        //definido formato da informação
        headers: {
            'Content-Type': 'application/json'
        },
        //declarando o que será enviando e transformando em string
        body: JSON.stringify({
            nome: nome,
            email: email
        })

        })
        //enviar info do body
        .then( resposta=>{
            return resposta.body
    })


}

const removeCliente = (id) => {
    return fetch(`http://localhost:3000/profile/${id}`,{
        method:'DELETE',
    }
    )
}

//se mais funcinonalidades/formas de interagir com a API forem criadas 
//fica mais organizado se criar um objeto que contenha as funcionalidades

export const clienteService = {
    listaClientes,
    criaCliente,
    removeCliente,
}
1 resposta
solução!
por Lorena Garcia
| 8289.7k xp | 12130 posts
Alura Scuba Team Suporte Educacional

Olá Ricardo, tudo bem?

Pelo que entendi do seu código, a função clienteService.removeCliente(id) é responsável por remover o cliente da tabela e, em seguida, recarregar a página. Isso acontece porque essa função não tem um tratamento adequado para o retorno da requisição DELETE, então a página é recarregada para atualizar a tabela.

Para evitar que a página seja recarregada, você pode fazer o seguinte:

  1. Adicionar um tratamento de erro na função clienteService.removeCliente(id), para que a página não seja recarregada em caso de falha na remoção do cliente.

  2. Após a remoção do cliente, atualizar a tabela com a função listaClientes().

Ficaria assim:

const removeCliente = (id) => {
  return fetch(`http://localhost:3000/profile/${id}`, {
    method: 'DELETE',
  })
  .then(resposta => {
    if (!resposta.ok) {
      throw new Error('Não foi possível remover o cliente')
    }
  })
}

tabela.addEventListener('click', (evento) => {
  let ehBtnDel = evento.target.className == 'botao-simples botao-simples--excluir'
  if (ehBtnDel) {
    const linhaCliente = evento.target.closest('[data-id]')
    let id = linhaCliente.dataset.id
    clienteService.removeCliente(id)
      .then(() => {
        return clienteService.listaClientes()
      })
      .then(clientes => {
        tabela.innerHTML = criaTabela(clientes)
      })
      .catch(erro => {
        console.log(erro.message)
      })
  }
})

Espero ter ajudado e bons estudos!