Um momento
Aula 31
Cursos / CRUD com o Redux (e React Native)
Botão de Deletar Post

Summary

Resumo do Vídeo sobre Deletar Posts

Neste vídeo, o apresentador demonstra como desenvolver a funcionalidade de deletar um post em uma API. A seguir estão os principais pontos abordados:

  1. Verificação da API:

    • O apresentador utiliza o Postman para realizar um GET e visualizar todos os posts.
    • Observa uma inconsistência com os IDs dos posts, que não são sempre numéricos. Faz uma comparação com a API fictícia Jsonplaceholder e nota que eles retornam IDs inteiros.
  2. Processo de Deleção:

    • Decide deletar um post específico. Para isso, ele copia o ID do post a ser deletado.
    • Realiza uma requisição DELETE através do endpoint da API, e observa que a resposta do servidor é 200 OK, apesar de que o esperado normalmente seria um 201 Created.
  3. Implementação do Botão de Deletar:

    • O apresentador menciona a necessidade de adicionar um botão para deletar posts no componente de edição.
    • Utiliza TouchableOpacity para criar o botão e define o texto como "Deletar Post".
    • Define uma função onPress que irá chamar um acionador (action creator) para deletar o post.
  4. Criação do Action Creator deletePost:

    • No arquivo de ações (actions), ele cria a função deletePost, que retorna uma ação para a deleção de um post.
    • Esta ação faz uma requisição DELETE utilizando Axios, passando o ID do post como parâmetro.
  5. Testando a Funcionalidade:

    • O apresentador planeja implementar uma função onDeletePress para vincular a ação de deletar ao botão, incentivando os espectadores a testarem o código.

Considerações Finais

O vídeo é uma demonstração prática de como manipular uma API para a deleção de registros, apresentando tanto a parte técnica da chamada a API quanto o desenvolvimento da interface no frontend.

Video Transcript

Neste vídeo nós vamos desenvolver aquele botão de deletar o post. Antes de prosseguir, nós vamos dar um olhado da resposta e como é a resposta da API quando a gente der o delete, tá bom? Vamos lá pro postman que tem o endpoint da minha API, vou dar um get pra todos os posts. Tem o post número um, dois, assim por diante. Você não acha que o ID desse cara aqui não é o número? Eu criei uns outros recordes que eu notei que o ID aqui não é o número, não sei por que isso acontece. Quando eu uso a Json server no Hiroko, por algum razão o ID esse número aqui, eu já fui no experimento vendo aqui. Se eu der um post usando a nossa minha API aqui do Hiroko, não sei o que, a resposta é com o ID assim, não é o número. Mas se eu usar o tpcode, você se lembra do tpcode é aquele site que nos permite usar a API falsa, vou no navegador, por exemplo, Jsonplaceholder.tpcode.com.post, você note aqui se eu usar esse cara aqui e criar o novo post, vamos ver o que acontece. Se a gente, o que tipo de ID a gente obtém? Abitem um inteiro, número inteiro, não sei por que isso acontece, se você souber, seria legal se você postar os comentários sobre isso. Certo, é só um detalhe aí. Mas voltando aqui pro que a gente tá fazendo, vamos falar de delete. Nesse caso a gente tem essa lista de post, vamos deletear um deles para ver qual é a resposta do servidor. Então eu não gosto desse cara aqui, então vamos deletear. Então para deletear precisa primeiro de tudo o ID, vou copiar esse ID aqui, certo? Copio o ID e eu vou aqui criar uma nova aba, deixa eu adicionar o meu API URL, barra post, barra o ID, o ID é esse aqui. Então vamos lá em vez de guess, dá o delete. Vamos lá e ver o que acontece. Você note que a gente não pega nada. Nesse caso essa API, normalmente a gente retorna 201, mas essa API tá retornando 200, ok. Vamos ver se realmente funcionou. Eu vou voltar aqui a minha aba que tem o get, eu vou dar o get de novo aqui. Você note que o terceiro já, se foi, se eu usar o ID, aquele mesmo ID, barra o ID, já não existe, 404 not found, 404 not found. Então deleteou, certo? Então é isso, a resposta do delete não tem nada. So, dao 200, ok. Normalmente é 201, mas esse cara dá 200, ok. Tá bom, então vamos lá. Voltando aqui ao nosso desenvolvimento, vamos lá para o post edit, você note, vamos lá lembrar do sketchpad aqui, nosso wireframe que a gente já fez o novo botão dela tá post aqui no final, então vamos adicioná-lo. Vamos lá, post edit, vai, então, vai para os botões, ah, tá dentro do post form, mas a gente não quer adicionar o da data dentro do post form, tem que ser fora. Então depois desse post form que inclui esses título, caixa de título, conteúdo, ia, caixa do conteúdo e esses botões de cancelar e ok, nós vamos adicionar no próprio componente post edit aqui o botão, tá bom. Primeiro de tudo vamos usar o totable highlight, desculpa, totable opacity, eu vou fazer da mesma maneira dos outros botões, eu não quero perder muito tempo com o estilo agora, tá bom, então plotable opacity, botão texto dentro, o que que vai dizer, vai dizer que deletar post, certo. Agora o totable opacity, ele leva a própria chamada on press e o que vai acontecer é você tocar esse botão, certo. Ainda não definimos, vamos só botar under fine aqui, só para ver o que acontece. Vamos importar esses componentes porque estamos usando aqui, lá em cima import view text, totable opacity e o, ah, o text já tá aqui, então text e o totable opacity do react nade. Vamos ver aqui, vamos adicionar o estilo para esse botão aqui, vou copiar o estilo dos outros, não é muito bom, o estilo não é muito bom, mas só para dar consistência, voltando aqui no post form vou copiar o estilo aqui dos botões, certo. Vou copiar o estilo tudo aqui mesmo, então voltando ao post edit, vou quebrar uma linha, deixa eu fechar isso aqui, Abba, pane, close pane, então vou adicionar a propriedade style, aqui, border 9, a borda, vamos mudar essa cor para vermelho, red, vamos ver o que acontece, cadê, voltando aqui o simulador novo, não é novo, é de estar, é de estar aqui, o dela está a post já está aqui, certo, então é só isso, tá lá o botão, então vamos lá implementar essa implementação, primeiro de tudo o que a gente vai fazer, da mesma maneira do update post a gente vai ter que criar um action creator, esse action creator para dela estar o post, qual as informações precisa, só precisa do id do post, não é, só isso, então vamos lá, vamos lá para o arquivo index do actions, certo, vamos lá embaixo e vamos criar aqui uma função chamada delete post, tá, e vou deixar como você fazer aí primeiro, pause o vídeo, defina esse action creator, depois vamos continuar, e deu tudo certo, então vamos lá, vamos fazer essa variável delete post que é uma função e vai retornar no final uma action, vamos exportar para ser disponibilizado também de outros arquivos, em outros arquivos, então a gente vai fazer o que, no final a gente vai retornar uma ação com tipo o que, vamos criar um tipo aqui, delete post, certo, só precisa disso, não precisa de payload, certo, então delete post e o que a gente vai fazer o axioth.q, ponto delete com o rl, request rl, barra post, barra o id, a gente precisa do id, então vamos adicionar o id aqui como um parâmetro para essa função, então o id aqui, vamos interpolar, certo, só isso e retornar o delete post, se quiser pode usar o payload, porque a gente tá usando o meroware, chamado redux promise, a gente pode usar o payload aqui e definir esse cara no request, nem que esteja usando, só para esse cara só mandar despachar essa action quando o pedido for realizado, se a gente não tivesse assim, sem o payload, eu acho que a gente iria retornar o objeto na mesma hora que fez o pedido, nem que o pedido não tenha sido realizado, então por isso que eu vou só adicionar esse request aqui, só para poder retornar a action quando o pedido for realizado e esse request, ponto data, data, vai retornar o objeto vazio, a gente nem vai usar, mas só para fazer esse negócio retornar ser despachado somente quando o pedido for realizado, a resposta vir, certo, então vamos lá, vamos testar esse cara, vamos lá para o post edit, vamos definir aqui on press, vamos chamar de this, ponto on, que delete press, sei lá, on delete press, vamos definir essa função, des, então a função
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: