Resumo do Transcript

Continuando, então você vai saber o problema da lista não ser atualizada depois que a gente editar um post. Então, o que a gente vai fazer? Então, essa lista aqui, primeiro de tudo, ela está usando aqui, que parte do estado do aplicativo. Nesse caso, se você olhar no post, o Reducer aqui está usando esse all, né? Essa propriedade chamada all, que tem uma array, uma lista de objetos aqui. Então, o que a gente vai fazer? Uma maneira de resolver esse problema é, quando der o update post, a gente também vai atualizar a lista de posts, certo? Então, vamos ver aqui como é que a gente vai fazer isso. Então, você note que a gente mudou o objeto de id número 2, esse segundo aqui, certo? A array all tem dois objetos, primeiro esse all, não sei o que, e depois esse cara. O que a gente vai fazer? A gente vai pegar e retornar o novo estado, é certo que a gente vai pegar e vai copiar essa lista e, em vez de quando a gente se depara com o cara, o post que a gente editou, a gente vai saber porque a gente tem o id. A gente vai, em vez de retornar o mesmo cara, vai retornar o post atualizado, certo? Então, vamos lá. Você conhece a função map do JavaScript? Se não conhecer, vamos aqui no terminal só para você dar uma relembrada. Então, vou abrir o node aqui, só para a gente fazer um JavaScript. Ah, não tem clear, vou estar com um OK. Então, vamos fazer uma lista aqui, certo? Vou botar objetos aqui id 1, certo? Id 2, e assim por diante. Tem uma lista de objetos, dois objetos, certo? Essa lista. Então, se eu fizer a lista map, função map, e o parâmetro dessa função aqui, o map é uma função que recebe outra função, certo? Então, vamos receber a função cujo parâmetro, o primeiro parâmetro é o objeto. Nesse caso, vou botar chamar de item. Eu vou fazer a função de flash, tá bom? E aqui é a definição da função. Nesse caso, eu só vou retornar o próprio item. Então, o que vai acontecer? Eu retorno, mesma coisa. Então, se você não entender essa parte aqui, se você não sabe, é s6, é a mesma coisa que essa coisa aqui, sabe? Function, item, return, item, certo? Mesma coisa. É certo que eu estou usando s6, primeiro de tudo, em vez de falar function, eu vou mudar para a função de flash. De essa maneira. E porque só tenho um argumento, só vou precisar de um? Eu nem preciso digitar os parâmetros, certo? E ainda mais, como eu só estou retornando uma linha, eu vou fazer o retorno implícito. Nem preciso da palavra-chave, nem preciso das chaves aqui, do braces, dessa maneira. Certo? Então, aqui eu não fiz nada. Mas eu posso fazer, por exemplo, item retorna um novo objeto, sei lá, com o... Sei lá, muda o id, multiplica por 2, sei lá, vamos ver aqui. Eu vou fazer item, vou copiar. Será que já tem esse negócio no Node? Eu não sei, não. Se tem disponível o spread, operador spread. Vou tentar. Item, copia as propriedades do item e retorna... Tem que ter os parâmetros. Aqui eu vou retornar o objeto, em please. Propriedade do item com o id sendo item.id, multiplicado por 2. Ah, peraí, que eu esqueci o... Chave lá. E agora? Ah, desculpa. Deixa eu copiar de novo. É que eu esqueci aqui esse cara. Tem esse. Eu acho que o Node não tem esse cara ainda não, minha versão. Então, a gente usa o Babel no React Native, por isso que funciona. Então, vou tirar isso. Vamos ver aqui. Vamos só fazer retornar o novo... Ah, definir lista de novo. Deve definir de novo. Videos object. Vamos retornar um objeto cujo id é item id 22, tá bom? Certo? Então, a gente pega, vai dar... Vai para cada item dentro dessa lista. A gente vai fazer uma operação e retornar esse resultado aqui. Desse caso, o item primeiro de tudo é esse cara, o objeto cujo id é 2. Então, o que é que eu faço? Eu retorno um objeto, eu retorno em Plist, então a gente precisa adicionar o parêntese, se for um objeto, se não vai confundir como um bloco de outra função, né? A gente está retornando. Retorno objeto, propriedade id é o item, pôte id nesse caso, esse cara aqui, vezes 2. E o primeiro cara vai ser o quê? 1 vezes 2 é 2. Então, vai retornar um objeto cujo id é 2 e vai adicionar a nova lista, certo? Nova array. Não é a mesma, é uma nova. Então, adicione esse cara aqui e, da mesma maneira, vai para o próximo. O próximo item é esse. Pego id 2 vezes 2 é 4. Então, pega esse resultado e adicione essa nova lista aqui no final. E recebe esse novo array. Tá bom? E assim, usa o map. Então, voltando aqui para o nosso desenvolvimento, a gente vai usar aquele conceito o map, né? Para poder dar o map para todas as alls. Vamos aqui. Então, vamos lá, all.map, nesse caso, o all está dentro do state, do estado, certo? .map. E qual é cada... Cara, é um item ou um post, sei lá se você quiser ir. Item. Vou botar post, certo? O que eu vou fazer aqui? Então, eu vou ter que... vou definir retorno explícito, tá bom? Então, eu estou botando o bloco da função. Então, eu quero retornar o próprio post, a não ser que seja o post selecionado. E se for selecionado, a gente vai retornar o não original, mas o atualizado, que está dentro dessa variável aqui, action payload.data. Então, vamos lá. Se o post.d for id for o quê? O action payload.data.data vai retornar o quê? Retorna o action payload.data. Se não, retorna o próprio post. Entendeu? Isso vai gerar uma nova lista, certo? Eu vou botar dentro de uma variável. E aqui no return, além de copiar o estado anterior, que nem precisa nesse caso porque a gente já vai definir o all. Só tem duas propriedades nesse cara aqui. Nem preciso, mas vou deixar. E vou adicionar o all aqui. Vai ser o all que a gente definiu aqui acima. Certo? Vamos ver se esse cara vai funcionar. Então, só para dar uma revisada aqui nesse cara, se você não entender. Então, state.all é aquela lista de posts. Então, ponto map, a gente vai para cada item na post, a gente vai gerar uma nova lista. E essa lista vai adicionar os valores que foram retornados nesse cara aqui. Nesse caso, se o primeiro post, o id do primeiro post for o id do post que a gente editou, certo? A gente vai retornar o post editado. Se não, a gente vai retornar o próprio post sem nenhuma mudança. Nesse caso, como a gente só editou um post, a gente espera que todos os itens serão os mesmos, exceto por um, né? Exceto um. E esse um é o cara que a gente modificou, que a gente vai retornar. Certo? Vamos testar isso. Então, vamos ver se vai dar certo. Eu vou clicar o La World. Vou editar, vou adicionar ABC no título, ok? Mudou aqui, vou voltar. Mudou aqui também, certo? Vamos ver se outro aqui. Vou retirar só oi, oi, oi. Ok? O que aconteceu? Será que o que aconteceu? No, ABC, o no estresse, o que? Tá lá, certo? E os outros não mudaram. Se você quer adicionar outro post para ver se não deu nada, vou adicionar oi, adicionou e vou mudar esse La World, vou tirar o ABC. Tirou e tirou aqui também, certo? Tá tudo ok. Não tem problema aí, não tem problema aqui. Fizemos os testes, tudo certo. Tá bom? Então, ah, só um detalhe aqui, eu esqueci. Eu estou definindo variável dentro de um caso, então você pré bom botar um bloco aqui para definir o scopo da variável para ser só local para esse bloco. Só um detalhe. E também, acho que a gente devia fazer uma half-atalização aqui para deixar esse aqui melhor. Primeiro aqui nesse guy return, a gente está usando a mesma chave. O nome da chave é o mesmo nome. Tu valor, então vou tirar isso aqui. Tá bom? Eu posto no seu que? Posto no seu que? Vamos ver se esse guy, a gente pode fazer algo melhor aqui. Se der. Se quiser, pode postar na variável e usar de novo. Se pode, sei lá. Eu vou deixar como desafio para você fazer aí, pensar aí. Se tiver alguma melhor maneira de escrever isso aqui. Certo? Então, vou salvar. Vamos lá, só ver se não deu nada errado. A mudança que eu fiz no 9.99 está tudo ok. Certo? Então, a gente fez o edit post. Editar. Certo? Agora só falta o botão de deletar e vai ser no próximo vídeo. Até logo.