ASP .NET Core  - Consumindo uma Web API com React - VII

  Neste artigo vamos continuar criando a Web API ASP .NET Core para depois consumi-la usando uma aplicação React.

Continuando o artigo anterior vamos agora implementar a exclusão dos dados na aplicação React.

Excluindo dados de um aluno : Definindo a requisição DELETE

Para poder alterar os dados de um aluno existente teremos que definir um request DELETE na aplicação React.

Repetindo o procedimento usado para editar um aluno vamos criar uma janela modal para excluir os dados de um aluno selecionado incluindo o código abaixo no arquivo App.js:

    <Modal>
        <ModalBody>
              Confirma a exclusão deste(a) aluno(a)  ?
        </ModalBody>
        <ModalFooter>
            <button className="btn btn-danger"> Sim</button>
            <button className="btn btn-secondary" >Não</button>
        </ModalFooter>
      </Modal>

O código acima define o esqueleto da janela modal com uma mensagem solicitando a confirmação da exclusão, do corpo (ModalBody) e o rodapé (ModalFooter).

Para poder exibir o nome do aluno selecionado que desejamos eliminar vamos incluir o código abaixo destacado em azul :

    <Modal>
        <ModalBody>
              Confirma a exclusão deste(a) aluno(a) : {alunoSelecionado && alunoSelecionado.nome} ?
        </ModalBody>
        <ModalFooter>
            <button className="btn btn-danger"> Sim</button>
            <button className="btn btn-secondary" >Não</button>
        </ModalFooter>
      </Modal>

Da mesma forma que fizemos com a janela modal para incluir um aluno, vamos definir o state modalExcluir com o valor boleano inicialmente com valor false indicando que ele estará fechado :

 const [modalExcluir, setModalExcluir]=useState(false);

E agora vamos criar um método -  abrirFecharModalExcluir - para poder alternar entre os estados abertos e fechados deste modal:

    const abrirFecharModalExcluir=()=>{
       setModalExcluir(!modalExcluir);
}

Neste código estamos definindo que ao ser acionado, o método altera o estado de true para false e vice-versa.

E para acionar o modal, e assim abrir e fechar a janela, usamos a prop isOpen que indica se o modal deve ser exibido usando o estado modalExcluir que possui o valor true ou false :

    <Modal IsOpen={ModalExcluir}>
        <ModalBody>
              Confirma a exclusão deste(a) aluno(a) : {alunoSelecionado && alunoSelecionado.nome} ?
        </ModalBody>
        <ModalFooter>
            <button className="btn btn-danger"> Sim</button>
            <button className="btn btn-secondary"  onClick={()=>abrirFecharModalExcluir()} >Não</button>
        </ModalFooter>
      </Modal>

Como temos dois botões vamos definir o código iniciando com o botão com a opção de Não excluir o usuário:

No evento onClick() do botão Não estamos invocando o método abrirFecharModalExcluir() para cancelar a operação.

E agora vamos ajustar o método selecionarAluno para podermos trabalhar com os modos de edição e de exclusão do aluno:

const selecionarAluno=(aluno, caso)=>{
    setAlunoSelecionado(aluno);
      (caso==="Editar")?
        abrirFecharModalEditar(): abrirFecharModalExcluir();
  }

Assim ao selecionar um aluno, ao clicar no botão Editar vamos abrir a janela modal para edição dos dados do aluno e caso contrário vamos trabalhar com a janela modal para excluir um aluno.

Agora já podemos chamar esta função usando o evento onClick do botão Excluir da janela principal:

...
 <button className="btn btn-primary" onClick={()=>selecionarAluno(aluno, "Excluir")}>Excluir</button> {" "}
...

A seguir temos que criar um método para excluir o aluno selecionado e para isso vamos criar a requisição DELETE que vai submeter o formulário com o aluno selecionado montando o request usando o axios.delete e a baseUrl mais o Id do aluno selecionado:

const pedidoDelete=async()=>{
    await axios.delete(baseUrl+"/"+alunoSelecionado.id)
    .then(response=>{
        setData(data.filter(aluno=>aluno.id!==response.data));
      abrirFecharModalExcluir();
    }).catch(error=>{
      console.log(error);
    })
  }

Se a operação for executada com sucesso o aluno será excluído e usando setData filtramos os dados eliminando o registro que coincide com o id que API retorna (o Delete vai retornar o Id do registro que acabamos de excluir) e fechamos a janela modal.

Agora podemos concluir a janela modal para excluir o aluno incluindo a chamada ao request pedidoDelete():

    <Modal IsOpen={ModalExcluir}>
        <ModalBody>
              Confirma a exclusão deste(a) aluno(a) : {alunoSelecionado && alunoSelecionado.nome} ?
        </ModalBody>
        <ModalFooter>
            <button className="btn btn-danger" onClick={()=>pedidoDelete()} > Sim</button>
            <button className="btn btn-secondary"  onClick={()=>abrirFecharModalExcluir()} >Não</button>
        </ModalFooter>
      </Modal>

Com isso no evento onClick do botão Sim estamos invocando o request pedidoDelete() para excluir o aluno selecionado.

Com isso podemos testar a edição dos dados e para isso abra um Terminal no projeto e digite o comando : npm start  (O projeto AlunosApi tem que estar em execução)

Teremos a exibição dos dados obtidos da API usando o request GET :

Vamos selecionar o aluno com Id igual a 19 clicando no botão - Excluir -  e assim veremos a janela Modal onde podemos confirmar ou não a exclusão do aluno selecionado:

Clicando no botão SIM retornaremos à janela principal onde não veremos mais o registro do aluno excluído :

Assim concluímos a implementação das operações para consumir os endpoints expostos pela nossa API ASP .NET Core na aplicação React.

Pegue o projeto React aqui:  alunosreact_final.zip  (sem as referências)

"Porém, respondendo Pedro e os apóstolos, disseram: Mais importa obedecer a Deus do que aos homens."
Atos 5:29

Referências:

José Carlos Macoratti