Aula 29
Terminamos de Desenvolver o updatePost
Summary
# Resumo do Transcrito
O apresentador demonstra como realizar uma atualização de um post usando a API e o Postman, explicando passo a passo o processo de edição e a integração no código.
## Passos Seguidos:
1. **Uso do Postman**:
- O apresentador abre o Postman para realizar uma requisição PUT.
- Configura o body da requisição para JSON.
2. **Realizando uma Requisição GET**:
- Primeiro, é feita uma chamada GET para obter o post que será atualizado, copiando a URL da API.
3. **Configurando Requisição PUT**:
- A URL para a requisição PUT é montada utilizando a URL do post, incluindo o ID.
- O corpo da requisição é modificado para alterar os campos (título e corpo do post).
4. **Enviando a Requisição**:
- Após enviar a requisição, o apresentador verifica a resposta do servidor, que retorna um status `200 OK` e o post atualizado.
5. **Atualizando o Reducer**:
- O post atualizado é armazenado em `response.data`, e o reducer é configurado para utilizar este novo post.
6. **Implementação no Componente**:
- No componente de edição de post, o apresentador implementa a lógica para chamar o action creator `updatePost` ao pressionar OK.
- A ação utiliza o título e o corpo do formulário, além do ID do post selecionado.
7. **Refatoração do Código**:
- O apresentador realiza um refactoring para simplificar o código usando destructuring para extrair propriedades do objeto `this.props`.
8. **Navegação Após Atualização**:
- Após a atualização, o apresentador comenta sobre a necessidade de retornar à tela anterior, utilizando a função `pop`.
9. **Testando a Atualização**:
- A funcionalidade é testada, e o apresentador identifica e corrige um erro no código que impedia a atualização de ser feita.
10. **Verificação Final**:
- O resultado é verificado no servidor usando outra chamada GET para garantir que o post foi atualizado corretamente.
- O apresentador nota que a lista de posts não foi atualizada, prometendo resolver isso no próximo vídeo.
## Conclusão:
O tutorial ilustra perfeitamente o fluxo de edição de um post, mostrando como as requisições funcionam, como os dados são manipulados no frontend e a importância de garantir que todos os componentes estejam adequadamente conectados entre si.
Video Transcript
Só para demonstrar aqui a resposta da API eu vou abrir o postman, certo?
Você se lembra desse cara?
Vou abrir o postman aqui e vou fazer um pedido put, o body, body, raw, em vez de text, JSON,
application, JSON.
Então, vai ser o que?
Deixa eu ver aqui.
Se eu abrir uma nova aba antes disso, vou fazer um get do post que a gente quer atualizar.
Deixa eu copiar o RL aqui do meu API aqui.
Vou aqui no index do actions, vou copiar a minha request RL, certo?
Pro meu postman.
Se eu dar um get, vai pegar esse cara, barra posts, todos os posts, certo?
Post número um, esse cara.
Agora eu vou pegar esse aqui, vou copiar, certo?
Eu vou voltar para outra aba e vou colar aqui no body, certo?
Deixa eu copiar o RL, voltando para o outro, copiando um RL, incluindo o ID do post,
está certo?
Barra posts, barra um.
Importante ter o ID aqui, a gente está fazendo o pedido put, é post barra o index, o ID
do post.
Nem precisa desse cara aqui, certo?
Porque já está aqui.
Então, a gente vai mudar aqui para hello para hello lá e vamos mudar o body e vamos
tirar esses negócios aqui.
Muito legal.
Então, vamos ver o que acontece.
Clica send, vou aumentar aqui para você ver todo o cara.
Clica send e ver o que acontece.
Então, a resposta do servidor está aqui embaixo, vou dar uma rolada, vou rolar aqui para
baixo, ganhei 200 OK, 200 OK, e você note que você recebe de volta como resposta o
próprio post, incluindo o ID e o post já está atualizado na resposta, tem um legal
e hello world, certo?
Por isso que a gente vai usar esse cara que vai ser o response.data, response.data,
está bom?
Voltando aqui.
Para o post reducer.
O que a gente vai fazer?
O selected vai ser o novo, aquele post, aquela resposta que a gente obteu com o post atualizado.
Certo?
Vamos voltar, a gente fez o action creator, agora vamos ver se está funcionando.
Voltando ao post edit.
Vamos ver o que?
Vamos fazer o OK press, e você já sabe como é que faz, não é?
Como é?
Vou esperar você fazer o OK press e você vai chamar aquele action creator, update post que a gente fez,
certo?
E você vai usar esse tira aqui e esse body que vai vir do des.props,
desculpa, não é?
Desse.props, select post não, é do title e do body do formulário, certo?
E aí deu tudo certo?
Vamos lá fazer.
OK press.
Vamos lá, desse.q
Update post.
A gente tem que passar o que?
Press a função, para essa função, tem que ter o, primeiro de tudo tem que ter o post.
O post é um objeto, o objeto tem o título e o objeto tem o body.
Mas cadê esse cara?
Está dentro do props, vamos lá embaixo para o map state props, esses caras aqui.
Note que é o título e o body do formulário, não é do selected post, selected post é o original.
O title e o body são os valores que foram modificados, eles contêm os valores que foram modificados.
Então vamos usar des.props.tirefdes.props.body.
Certo?
E o segundo argumenta é o id do que?
Do post.
Mas como é que a gente vai obter esse id?
Bem, a gente tem o post selecionado, não tem aquela informação?
Voltando lá embaixo para o map state props, a gente tem acesso ao post original.
E esse cara original contém o id, certo?
Então vamos pegar o id do selected post.
Vamos lá, voltando aqui.
SelectedPost.id, nesse caso é des.props.
Eu sei que não dá nem para ler mais, deixa eu botar o soft wrap aqui.
Mas eu não gosto de linha longa, é preferência, mas vamos fazer o refactoring, a refatorização.
Normalmente o título, o body e o selected post estão dentro do objeto des.props.
Então vou fazer o destruturamento aqui do s6.
Vou extrair as propriedades, título, body e o selected post do que?
Do des.props.
Nessa maneira, a gente não tem que digitar mais des.props e nem aqui.
E como esse cara aqui, essa chave, esse valor, a propriedade de título, tem o mesmo nome que o seu valor,
podemos usar essa maneira aqui mais curta, não é?
Só precisa digitar o body e o body, mesma coisa que a gente tinha antes.
Certo? Fica melhor, eu acho melhor ver assim.
Então vai chamar update post, um título e body, um objeto que é o post e o ID.
E voltando aqui, deixa eu botar aqui lado a lado para você visualizar o post added e o index.
Cadê? Vou botar esse cara para cá.
Então aqui, a gente está aqui chamando update post,
aqui o update post, level post, level post ID, não é?
E dá o request, request usa o post ID para o RL e o post é mandado como segundo.
Argumento para o access.put, certo?
Então vou voltar aqui, tudo ok?
E o que é que vai acontecer depois que a gente dá o update?
A gente quer voltar para a cena anterior, certo?
Então o que a gente pode fazer? Aqui nesse caso pode dar o pop, como a gente já lhe deu com o update post
dentro do reducer aqui, que muda o selected, então não tem problema usar pop aqui.
Então vou usar o pop, actions.pop, mesma coisa que o oncancelpress, né?
Pode até chamar esse cara também se você quiser, para não digitar mais o que eu estou fazendo.
Então tudo certo? Vamos testar.
Vamos lá? Cadê?
Clique em cara, editar, deixa eu mudar o título primeiro.
Vou clicar ok.
Nada aconteceu? Será que eu atualizei o negócio?
Deixa eu atualizar.
Ah, eu sei o que aconteceu, acho.
Esquecemos de o que?
Voltando aqui, des.updatepost, está errado, né? Des.props.
O action creator é injetado como props no componente.
Para injetar esse cara, precisa fazer o que? Primeiro vai lá no map dispatch to props e adiciona ele.
Certo? Qual é? Update post.
E para poder usar esse cara aqui, tem que o que? Importar.
Não sabe o que é, vai lá em cima, importe o que? Update post do actions. Certo?
Acho que essa linha já está muito longa e eu vou quebrar o link aqui.
Certo? Vamos testar novamente. Já deu update.
Editar, vou remover esse negócio do título.
Tira esse arquitecto, não sei o que.
Ainda não funciona. Então, você sabe qual é o problema?
Voltando aqui, post edit. Quando a gente clica ou toca no botão OK, a gente vai chamar o onpress do touchable opacity.
Mas qual é o onpress desse cara aqui? Não tem nada. Então, o que devem adicionar? Des.onpress, que está aqui.
Certo? Agora vai chamar esse cara quando a gente clicar OK.
Editar. Vamos lá, vamos lá. Espero que não tenha mais erros, que não tenhamos esquecido alguma coisa.
Funcionou. Certo? Vamos editar de novo, só para ver. Vamos adicionar.
Oi, oi, oi. Tudo OK. Oi, oi, oi, tudo OK. Então, modificou esse cara.
Será que modificou no servidor mesmo? No banco de dados? Vamos verificar.
Eu vou voltar aqui para o postman para o meu pedido get. Vou pegar o get do primeiro post.
Vou mandar. Ah, desculpe, é o segundo post, né? Segundo post número dois.
Vou mandar. Você note o título. Oi, oi, oi. E tudo OK. E o id número dois. Certo?
Então, tá. Tudo OK no servidor e no front end aqui. No back end e no front end.
Agora, vamos ver se modificou o título na página, na lista. Volta aqui na lista.
Você note que o título não está atualizado. Isso. E agora?
Então, a gente vai ajudar com isso no próximo vídeo.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: