Resumo do Transcrito

E aí galera vamos continuar? Então a gente terminou o novo post. A gente já tem a lista de post. Já tem o ver post. Agora só falta criar essa cena aqui, essa página de editar o post. Que por sinal muito parecida com a de novo post. Então a gente vai adicionar esse botão editar na página do post. Que vai para essa editar post. Aí quando você clicar cancelar, volta para a cena do post. Ou se você clicar ok, vai atualizar o post e voltar para a cena do post. E tem também o deletar post, que nesse caso vai deletar o post. E voltar para a lista de post. Que não faz sentido voltar para o post que já foi deletado. Então você note que antes de a gente partir para o desenvolvimento. Que é quase a mesma coisa, só adicionar esse botão de deletar. E aqui nesse caso já tem o formulário já feio. Já tem esses dados aqui entrados. Então a gente pode reutilizar esse formulário aqui. Esses elementos aqui. No editar post. Talvez a gente crie um novo componente aqui. Que será usado para o novo post pelo editar post. E esse componente pode levar o estado inicial desses campos. Pode ser já com dados entrados ou não. Algo assim. E no editar post é só adicionar esse componente aqui e o deletar post. Certo? Mas é claro que você também pode fazer o novo editar post. Com um novo formulário diferente. Mas como é quase a mesma coisa. Eu não vou me repetir. Vai ser dry. Eu vou usar esse princípio dry. De not repeat yourself. Não se não repita a mesma coisa que você fez. Então vamos lá. Vamos começar aqui. Vamos primeiro adicionar esse editar aqui. Então como é que a gente vai adicionar esse cara? Se lembra que o react native router flux tem aquelas propriedades que permitem você modificar o que está a direita ou a esquerda da navbar. A gente fez esse novo aqui. Se lembra a lista de posts a gente tem esse novo aqui. Então se você... a gente for lá para as rotas. O que tem lá. Então vou para o arquivo de rotas. Router.js dentro do pasta src. Você note que nessa cena para a lista de posts tem esse write title. Write title é a parte da direita. Nesse caso a gente quer editar. Mas não é para a lista de posts. É para ver posts. Então cadê o ver post? É o post detail. Esse post detail é a página de ver posts. Então a gente vai adicionar o write title. E onwrite. Então vou quebrar a linha aqui. Para ficar melhor de vocês verem. E eu também gosto desse estilo vertical. Sim. Certo? Vou botar o write title. Vai ser o que? É editar, não é? É editar. É editar. É essa propriedade. E o onwrite que você passa uma função a essa propriedade. Essa função será chamada quando você clicar nesse e editar. Onwrite a gente vai chamar a função. Certo? Ainda não temos a cena para editar posts. Mas a gente pode criar aqui. Então vamos supor que seja, sei lá, vamos ver o nome list. PostDT, postnew. Vamos botar post edit, sei lá. Algo assim. Então quando você clicar o write, vai chamar essa chave aqui, que é post edit. Edit que vai se referir a uma cena que a gente vai criar. Então vamos aqui. Depois do postnew eu vou criar uma nova cena. Essa cena vai ter aqui chamada, tem que ser a mesma aqui, post edit. Para editar o post. O componente ainda não temos, mas vou chamar de post edit. Título vai ser editar post. Vamos verificar se é isso que eu botei no wireframe. Editar post tudo certo. Voltando aqui, certo? Se quiser usar o estilo vertical, pode usar, sei lá, só para deixar tudo ok. Estilo consistente, vou fazer esse estilo. Posto edit, mas não temos esse cara ainda. A gente vai fazer, mas quando a gente usa esse cara tem que fazer o que? Tem que importar, então leia em cima, lá para o começo do arquivo. Onde é que está? Já me importamos ou não? Então vamos lá import, post edit, from. Vou botar na parte de componentes, barra post edit. Não precisa dar a extensão, bota o jts. Certo? Nesse caso a gente tem o pasta component, vou criar post edit.js, certo? E é aquela mesma coisa quando a gente começa a criar um novo componente react. Na verdade eu tenho uns snippets do Atom que eu posso editar o negócio, apertar tab, e ele já completa tudo com o template do novo componente. Mas nesse caso para o aprendizado sempre é bom no começo, digitar tudo na mão. Então vou digitar, a gente sempre começa com o que? Import, react, from react, certo? Nesse caso vou fazer um componente de class, vou importar o component dentro do react, certo? Defini a class, post edit, certo? Extends component, sempre, opa. E aqui no final vou exportar post edit, opa. Sport default, post edit. Que todo componente react tem uma função chamada o quê? Render, né? Estão para renderizar o template, que sempre retorna um template jsx. Nesse caso vou botar um view aqui, só para você ver. Aquela mesma história, post edit. Ah, mas eu estou usando view text, mas não importei, então temos que importar. Port view text react native, do react native. Esqueci de alguma coisa, vamos ver aqui os outros aqui. Vou falar aqui, react, tudo certo. Sport default, estou com component, certo? Vamos ver se está funcionando. Você nota que o router aqui importa post edit e usa post edit nessa cena chamado post edit, que vai ser chamada quando você clicar, editar no post detail, no ver post. Então vamos lá, vou atualizar. Vamos ver se post aqui, editar. Tá certo, funcionou, senorte tem post edit, que é isso que a gente digitou lá no post edit. Então voltando aqui, ele volta para o ver post, clicar, editar, certo? Então, por esse vídeo é só, no próximo vídeo, vamos começar a implementar, desenvolver essa página, editar, tá bom? Até logo.