Resumo do Desenvolvimento do Componente Post Form

Então agora vamos lá e desenvolver esse post edit, só voltando aqui para o wireframe aqui. Então vamos lá primeiro de tudo, vamos adicionar esse formular aqui, mas vamos a um meio. Então vamos trair esse cara em um novo componente e usá-lo no novo post e no editar post. Vamos dar uma olhada no post new aqui, o Sinr post new, componente post new. Ele tem essa parte aqui com o botão. Então esses caras que nós queremos extrair em um componente, certo? Tem uma coisa que o gente pode considerar aqui, pode incluir o botão ou não, entendeu? Depende de como você está fazendo isso. Você quiser só incluir o formular, pode, mas deixar os botões diferentes ou pode incluir o botão com o Selaiokey também e só adicionar esse deletable post no editable. Você pode incluir tudo, mas você pode escolher outra maneira também, outra maneira. Então vamos lá. Vamos extrair esses caras aqui, vou recortar, tá bom? Vamos pensar no nome para esse cara aqui e vou criar um novo arquivo aqui chamado post form, tá bom? Dentro do pasta components post form, ponto js, meu componente chamado post form. Da mesma maneira vou fazer import react, como a gente vai fazer o componente de classe, vou importar extrair o component dentro do modo do react, vou precisar do que eu acho que view, text e o touchable opacity. Não sei se esquecer algum, mas vamos ver aqui. Class post form extends, component, todo component tem a função render e torna o template e esse cara que eu coloquei aqui, tá bom? Ah, eu esqueci de importar text input, certo? Voltando aqui, text input, certo? Vai lá embaixo e exporta, export default, post form, certo? Salvar, vamos ver se vai funcionar. Vamos primeiro dar uma olhada aqui nesse post form. Você note que o template aqui, o primeiro caixa de text que é pro título, ele tá dizendo esse on title change, mas o que é esse cara? Nesse caso não está definido aqui, então o que é que eu quero fazer? Eu quero pegar essa função da props, nesse caso a gente vai dar como propriedades ao post form o on title change, certo? E também da mesma maneira pro conteúdo, eu não vou definir um body change aqui, mas vou passar pro post form uma propriedade que vai definir o on change text pro conteúdo, certo? Então esse cara aqui vai virar desse ponto props on title change e esse cara aqui vai virar desse ponto props um body change. A gente vai entender já, já como é isso, tá bom? Então vou salvar aqui, antes de continuar com os outros, vamos resolver esse cara aqui. Então esse post form tem um formulário, duas caixas de text e os botões. Então quando a gente digitar uma coisa, o on change text vai chamar essa função aqui pra mudar o título lá no estado do aplicativo, o application state. Nesse caso a gente tem que definir se on title change, mas a gente não quer definir aqui porque a gente vai reutilizar esse post form em duas cenas, então a cena pie é que vai definir como esse cara vai mudar. Então a gente vai dar como propriedades ao post form lá do post new ou do post edit. Essa propriedade aqui on title change. Voltando ao post new, eu vou adicionar o post form que a gente tá criando, certo? Vai o componente post form que já inclui as caixas de text e os botões e vai ter essa propriedade on title change, certo? Aqui vai ser o que? A gente vai dar o post form on title change e vai dar a função que é desse componente chamado post new, this on title change, certo? Esse cara aqui se refere à função this on title change do componente post new. Essa função aqui vai ser chamada lá de dentro do post form por esse cara aqui, como é dado como props. Entendeu? O post form é dado essa propriedade on title change que pode ser acessada, voltando aqui ao post form, com o this.props, certo? Ponto on title change. Dá mesmo maneiro para fazer com esse cara aqui. Então o que eu quero que você faça? Que você dê a propriedade post new para definir o título. Vou esperar um pouquinho para o vídeo faça. E aí, deu tudo certo? Vamos continuar. Então aqui o on change text aqui do cara, do conteúdo, vai ser pela propriedade on body change. Então vamos lá definir. O body change vai ser o que? Vai ser essa função aqui, on body change. Então, this.on body change. Não está muito longo, vou quebrar aí novas linhas. Quebrar aqui. Certo? Então quando a gente mudar o conteúdo, vai chamar essa função, this.props.on body change, que na verdade é o this.on body change do post new, que é essa função aqui. Está certo? Agora tem mais um detalhe. Voltando a post form, o valor das caixas de texto são dados como propriedades a esse componente post form. Nesse caso a gente não deu não propriedade aqui, então a gente tem que adicionar o title, certo? You body. Nesse caso vai ser this.props.tile e this.props.body. Nesse caso essas são as propriedades dados ao quem? A quem é post new? Por causa do map the state to props aqui. Vai extrair o estado do redux, o título you body e vai injetar como props para o componente post new. E o post new vai dar como propriedades, injetar as propriedades no post form do title you body dessa maneira, certo? E agora esses caras vão funcionar direitinho, certo?