Aula 31
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:
-
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.
- O apresentador utiliza o Postman para realizar um
-
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 um201 Created
.
-
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.
-
Criação do Action Creator
deletePost
:- No arquivo de ações (
actions
), ele cria a funçãodeletePost
, 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.
- No arquivo de ações (
-
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.
- O apresentador planeja implementar uma função
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: