Resumo do Transcript

O problema aqui é que os campos estão na verdade válidos porque o title error e o body error têm valores não. Na verdade a gente só dá a validação depois que o usuário interage com o formulário pela primeira vez. Nesse caso eu digito alguma coisa e depois delito tudo. Agora está inválido e agora não dá para clicar. Eu tento clicar mas não dá. Nós no começo inicialmente está válido. Então a gente tem que agitar isso. Então não podemos usar esses carros diretamente. Temos que fazer o que? Temos que validar o formulário completamente antes e depois de validar tudo de novo tudo aí que vamos saber se devemos desabilitar ou não. Mas cadê aquela função de validar cada field, cada campo? Não está aqui no postform. Está no componente que é pai do postform. Nesse caso postnew. Dentro do postnew se lembra que a gente definiu validate field e todos esses on body change e on title change não sei o que. Então a gente vai precisar usar essa função aqui. Uma opção é passar essa função como prop para o postform aqui em baixo. É uma das opções. Nesse caso já já nós temos muita prop aqui. Na verdade esse cara vai requer ir a rapatorização depois que ele já tem muita coisa. Eu não quero ir nessa rota. Eu quero ir em outra rota. Então você note que esse validate field, on body change, on title change vai ser o mesmo para o post edit. Se lembra a gente tem também a página de editar um post. Voltando aqui, clique em postexistente e clique em editar. Ops. A gente deu erro porque a gente modificou o postform enquanto a gente estava usando o postnew. Vamos para o postform. Você note que o post edit vai ter o mesmo on title change, o mesmo on body change junto com esse validate field. Então o que eu vou fazer? Eu vou pegar esses caras todos eles e vou por dentro do postform. Vou recortar do postnew e por dentro do postform. De essa maneira o post edit e o postnew não irão precisar das definições, as mesmas definições para o mesmo formulário. Voltando a post edit aqui, a gente tem um ontar on body change, sem validação a gente iria adicionar validação da mesma maneira que o postnew mas iria digitar a mesma coisa. Então eu vou pegar esses caras e vou por dentro do postform. Vamos passar a passo. Vamos começar lá. Vamos aqui no postnew. O que eu vou fazer? Primeiro vou pegar esse ontar on change, e o on body change e o validate field. Vou recortar esses aqui. Do postnew vou para o postform, componente postform e vou colar aqui dentro do componente. Acima da função render tem um ontar on body change e o validate field. Tá certo? Agora vamos. Então olha daqui como modificar esses caras todos. A gente recortou algo e pôs aqui, mas vamos ver esse cara aqui. Ele chama o validate field que já tá definindo aqui e chama o des.propos.change.positario. Esse cara aqui a gente tem que passar como propos para o postform se não não vai achar. Certo? Então eu vou voltar aqui para o postnew e para o postform aqui eu vou passar essa prop chamada changePositario. Desculpa. ChangePositario que vai ser desse ponto props.changePositario nesse caso aqui. Então o que a gente tá fazendo? Esse des.propos.changePositario do postnew é o action creator injetado no map dispatch to props. Certo? ChangePositario. A gente tá passando esse cara, é injetado como props no postnew e do postnew a gente passa ele ao postform para o postform lá dentro poder usar aqui nessa ontária o change. Certo? Procedendo agora para o próximo body change. Vamos só confirmar que a gente tem definido o validate field aqui e esse cara aqui tem que ser passado como props também. ChangePositario. Voltando ao postnew. A gente tem que passar aqui. ChangePositario vai ser o que? O des.propos no changePositario que foi injetado como props ao postnew. Certo? Salvar. Então esse cara tá tudo ok. Agora validate field, vamos ver. Validate field não sei o que, tá usando essa função changePosterior. Então a gente tem que passar isso também. Vamos voltar aqui no postnew. Passa o changePosterior. Des.propos no changePosterior. Esse changePosterior é injetado como props no postnew. A gente tá usando e passa como props pro postform. Agora vai tá definido aqui sem nenhum problema. Certo? Salvar. Agora como a gente definiu um body change, you want a title change dentro do componente postform, nós temos que ir lá embaixo e mudar as declarações que a gente fez pro on change text de cada caixa de texto. Nesse caso esse é o on change text pro título. Esse cara aqui que vai ter uns exos a gente vai consertar já. Então esse on change text tá chamando o des.propos, mas não é mais des.propos, que a gente vai remover, a gente vai usar o on title change não das propriedades, dados, mas do próprio componente postform que vai tá definido aqui acima. Esse cara aqui, esse aqui, esses são métodos do componente postform. Por isso não precisamos desse cara, a gente quer usar o do componente, então é des.ontariochange. Da mesma maneira pro on body change que des.on body change. Certo? Salvei. Agora volta no postnew, não precisamos passar esse on title change body change porque a gente removeu. Vamos deletar. Certo? Agora. Voltando aqui em cima. Vou limpar as coisas. Então os on change handlers foram passados, agora estão definidos no postform. E a gente modificou o postnew pra poder funcionar daquele jeito. Só ver que isso não deu problema, eu tô dando o post. Tá tudo funcionando direitinho ainda, certo? Então no próximo vídeo nós vamos fazer a mesma coisa, through post edit.