Resumo do Vídeo

No vídeo passado nós concertamos aquele problema do formulário estar preenchido depois que a gente saía da cena do editar e ia para a cena do novo. Agora nós vamos continuar o desenvolvimento voltando lá para o post edit. Vamos continuar a adicionar as propriedades que são necessárias para o post form. A gente ressta agora a adicionar as funções do onCancelPress e onOkeyPress. Tá bom? Então onCancelPress muito fácil é só dar o pop usando o actions do reactnator router flux. Então como desafio eu quero que você faça o onCancelPress aqui. Vou esperar pause o vídeo quando estiver preparado continua. E aí tudo certo? Então vamos lá fazer o onCancelPress vai ser da mesma maneira que o que a gente fez no post new. Se você voltar aqui no post new você notar onCancelPress aqui vai ser a mesma coisa. Então vamos lá voltar aqui no post edit. Ah eu vou tirar esse semicolon aqui esse ponto em vírgula. Continuando onCancelPress. Vamos usar a property initializer usando igual e vamos usar a função de flash. Definir a sua função. O que a gente quer quando clicar cancelar? E volte para a cena anterior. Simplesmente uso actions o objeto fornecido pelo reactnator router flux nos permite a mudar de cena. Nesse caso a gente vai usar o pop para remover a cena que a gente está. Nesse caso vai voltar para a cena anterior que no caso do editor aqui vai ser a cena ver post. Se eu voltar esse cancelar vai ter a mesma função desse botão aqui que já está definido. Então actions.pop. Salvar. Deixa eu ver aqui. Vamos testar. Estive o habilitar o live reload aqui que eu não tinha antes. Vamos clicar em um dos posts clicar editar e ver se funciona quando clicar cancelar. E aí o que aconteceu? Não funciona porque a gente esqueceu de conectar aqui. Digitar o oncancelpress des.oncancelpress. Certo? Esquecemos de dizer qual função para chamar quando apertar o botão. Tocar no botão. Então clicando aqui novamente. Editar. Cancelar. Ah! Mais outro problema. Você sabe o que aconteceu? Isso mesmo. Esquecemos de importar o actions. Então vamos lá em cima no topo do arquivo. O actions faz parte do que? Do react-native-router-flux. Então vamos lá import actions. Tem que dar destruturada. From react-native-router-flux. Certo? Vou salvar. Vamos lá. Editar. Cancelar. Funcionou direitinho. Vamos só ver usando a flash que já estava funcionando. Nós adicionamos o botão cancelar que funciona da mesma maneira que esse botão da esquerda. Certo? Então vamos continuar e fazer o botão de ok. Vamos ver o que vai acontecer. Certo? Antes disso a gente não testou se é digital o formulário funciona. Então antes de fazer o botão de ok vamos lá ver se esse formulário está sendo editado mesmo. Está tudo funcionando. Sem problemas. Tudo bem então. Então para o botão de ok como é que isso vai ser? A gente vai editar um post. O post já existe no banco de Daz. A gente vai usar api para fazer um pedir o que? Put ou patch se você quiser. Eu vou usar put. Eu T. Vamos usar o put para dar um update nesse post. Para isso a gente vai precisar do que? Vamos fazer um action creator. Certo? Aquel action creator da mesma maneira que a gente fez action creator criador de ação para fazer pedir a gata de P para criar um novo post para obter as informações de um certo post ou para obter as informações de todos os posts. A gente tem que adicionar um action creator para fazer o update. Então vamos lá. Vamos no actions src-actions-index. Vamos adicionar um action creator da mesma maneira que os outros. E vai ser muito similar ao create post aqui. Nesse caso essa diferença vai ser que não vai ser post vai ser put. Certo? E a gente vai adicionar o id do post aqui. Nessa URL. Nesse endpoint. Certo? Então vamos aqui. Eu te desafio a fazer primeiro que eu pause o vídeo e tente fazer o update post. Certo? E aí? Eu tudo certo? Vamos lá? Vamos lá exportar já. Fazer um variado update post que vai ser uma função. Certo? Nesse caso a gente vai precisar do que? Informações sobre process. A gente pode pôr post como um parâmetro. Então vamos fazer o actions put e vamos usar o que? Vamos usar essa request URL que se você já esqueceu. A gente vai lá em cima e lembrar. Request URL é só um string que tem o endpoint da API. Nesse caso eu estou usando o Hiroko. Mas você também pode usar o localhost se você estiver rodando o JSON server localmente. Certo? Então voltando aqui, vai ser barra post, barra o id do post. Da mesma maneira do get aqui você vê esse aqui. Vai ser a mesma coisa aqui. Esse cara aqui. Então vamos lá. Eu vou usar a string interpolation usando back tick. Esse aqui como é que fala? Centro grave? Eu sei lá. Deixa o comentário aí pro nome desse cara aqui. Então vamos lá. A gente vai dar uma interpolação na string dessa variável pro substituir o valor aqui no lugar desse cara. Barra post, barra o id do post. Vamos ver como é que a gente vai fazer. Será que a gente pega o id dessa variável ou adiciona uma variável id aqui? Tem duas maneiras de fazer isso. O que você acha? Qual maneira? Deixa eu ver aqui. A gente pega o get, tinha um id. Quando ferro o crédito só tem o post. Vamos deixar com o id aqui e vamos ver depois se a gente tem que mudar. Vamos colocar o id aqui. Post id, put. E tem que mandar os dados como segundo argumento. Não se esqueça. Às vezes eu me esqueço do segundo argumento pro post ou o put. E não sei porque tem um problema que está acontecendo. Qual é o problema? O segundo argumento é os dados. Certo? Nesse caso vamos botar esse cara dentro de uma variável. Se note que o axios, ponto put, retorna uma promessa. Se você não conhece bem o axios. Se você não conhece bem o axios, ponto put, retorna uma promessa. Então o request é uma variável que está armazenando a promessa. E essa promessa vai demorar tempo para ser full filled. Para ser como é que fala? Vai pro servidor, faz o pedido e recebe a resposta. E depois recebe a resposta, a promessa é full filled. A gente vai retornar sempre do um axio-creer ou a ação. Sempre retorna a action. E essa action tem um tipo de quê? Vamos criar um tipo que a gente fez, create post aqui. Então vamos mudar, sei lá, update post. Essa maneira payload vai ser a request. Como a gente está usando o middleware chamado redux promise? Se você se lembra, voltando aqui pro app, quanto já está essa? Só aqui para explicar um pouquinho. A gente está usando redux promise, esse cara aqui. Esse pacote. O que ele faz? Voltando aqui para o action index. Fazer um pedido HTTP, a sincron. Então vai demorar um pouquinho para receber a resposta. Então não dá para retornar esse cara na mesma hora. Então vai ter que esperar um pouquinho. E o redux promise? Quando a promessa aqui for full filled. E receber a resposta, ele vai substituir essa request com o valor da resposta. Nesse caso, há o responso do axios. Certo? Então é conveniente usar o redux promise. Tem também outra maneira de fazer esse negócio, com o chamado redux tank. Mais avançado que em vez de retornar um objeto do action-creer, você retorna uma função. Então vou deixar aí você se quiser interessar para pesquisar o redux tank. Vou deixar no redux promise para ficar mais simples. Certo? Então vamos lá. Vamos ver se conferir está tudo ok aqui. Faz um request e retorna ação update-post. Agora toda vez retorna ação, essa ação é despachada para todos os reducers, quando você chama o action-creator. Então vamos qual o reducer que vai lidar com esse negócio? Vamos pensar. Então quando a gente dá um update no post, vamos lá, que é aqueles post reducers? Tem o post selecionado. Você note que quando a gente dá um update no post, vai voltar para aquela cena que tem o post, o ver post. Então o ver post está usando essas informações, na verdade é desse selected. Então a maneira de a gente fazer coisas, a gente vai ter que dar um update no selected e substituir o valor que já tinha pelo valor atualizado. Então esse cara vai ter que lidar com o update post. Vai ter que dar o caso do update post. Certo? Então vamos lá fazer aqui o case update post. Vamos só falar aqui no selected, depois vamos ver se o AL também tem que mudar. Vamos ver aqui no update post. Então, o que é que vai acontecer? A gente vai retornar o novo estado e copia as propriedades do estado anterior, e o selected agora vai ser o quê? Vai ser o action.payload.data. O action.payload é a resposta do Axios. Mas para pegar aquela informação da resposta, na verdade o valor está dentro do data, do data, dos dados. Certo? E por que eu estou usando isso? Porque eu espero, porque é um API RESTful de REST, serviço REST. Quando você dá um update, você sempre obtém o objeto que foi atualizado. Certo?