Resumo do Transcript

Então, vamos dar uma refatorização aqui. Essas duas funções, um Tire and Change, um Tire and Change, NumBodyChange, porque a gente está usando quase o mesmo código para fazer a mesma coisa. Então, que tal a gente fazer uma nova função que faz essa mesma coisa e chama essa função dessa função, um Tire and Change, dessa função, a Bary Change. Dessa maneira, a gente só precisa escrever aquela função uma vez e usá-la várias vezes de outras funções. Então, você note que comparando as coisas que diferem entre essas duas é esse cara aqui, que é o campo, aqui é a Bary, que nesse caso vai ser o valor do campo, em questão, e é o mesmo desse ponto próprio que a gente post era, não muda nada, e muda esse nome do campo aqui, que é Tire, e do outro que é Bary, e muda a descrição, a descrição é quase a mesma, só muda esse cara aqui, que o detalhe que eu usei, o nome português, mas aqui o nome do campo é inglês, então a gente tem que pensar nisso também. Se os dois foram os mesmos, ia ser mais fácil, podia usar esse aqui, esse aqui como mesmo variável. Mas então, porque são diferentes, a gente tem que fazer outra, passar o seu argumento na função que a gente vai criar. Então, vou recortar aqui, vamos pegar esse cara aqui, vou recortar, vamos fazer uma função aqui dentro do post new, após um Bary Change, vou fazer a função, eu vou chamá-la de Validate, Field, certo? Porque eu estou usando 10.props, eu vou usar o property initializer, que é dao igual, e define a função como função de Flash. Vou colar, e vamos começar a refatorização aqui com essa função. Note que esse cara aqui vai ser o valor da chamada do campo, chamada Field, que vou chamá-la de Field, certo? Então, tem o valor do Field, tem o nome do Field, que nos casar e tem o nome Português. Então, como argumento, como parâmetro dessa função, eu vou pegar três coisas, o nome da Field, que é Tidal, o valor que está dentro dessa variável aqui, e o nome Português, para eu poder, eu utilizar na mensagem de erro. Esse cara, na verdade, nem precisava, você pode só, poderia usar a mesma mensagem, aí não precisaria ter essa terceira coisa, mas eu vou fazer. Então, em vez de pegar três argumentos, eu vou fazer só um objeto, um único argumento que é um objeto, certo? Então, esse objeto, vou chamar de, só de Field, certo? E dentro desse objeto vai ser assim, voltando aqui, a função TidalChange, a gente vai chamar o value de Field e vai passar um objeto, certo? Nesse objeto vai ter, esse objeto é a Field, vai ter três coisas. Então, primeiro eu chamar o name para o nome da Field, certo? Nesse caso vai ser Tidal. O segundo é o value, vou chamar o valor, vai ser o que? Vai ser o valor que está dentro da variável Tidal, que é Dada, essa função. E o terceiro eu dar o nome Português, certo? Vou chamar de Level, sei lá. Chama de Tidal. Certo? Então, um único objeto com três propriedades, name, value e level. Name é o nome do Camp em inglês. Value é o valor do Camp que está dentro da variável Dada, função onChange. Level vai ser o título, o nome da variável do Camp em Português, certo? Então, vai chamar o value de Field assim. Então, esse objeto vai ser chamado Field, dentro da value de Field, voltando aqui. Então, if, o quê? A gente quer comparar o valor dessa, dessa camp, né? O valor vai estar dentro de Field.value, certo? Field.value. Fone branco, está inválido. Vamos dar a console log, eu vou tirar esse console log já, já, mas deixe aí. A gente pode usar aqui o nome desse Field. Name, está inválido. This will prop change post error qual o nome da propriedade aqui nesse caso. Vai ser Field.name, certo? Olha lá em cima, certo? E esse, essa mensagem aqui, vamos usar o back tick para fazer interpolação de string, string interpolation. Esse cara título é o nome em Português que eu chamei de label. Field.label, certo? O valor da variável aqui vai ser substituído aqui. E no final aqui, só para finalizar isso aqui, é o nome do Field. Certo? Então, vamos voltar lá em cima. A gente chama validate field, toda vez que está um change. A mesma coisa, vai ser num body change, mas antes disso, vamos testar ver se não aconteceu nenhum problema, não teve nenhum problema para o título. Validate fields, não tem nenhum problema, não tem nenhum problema para o título. Validate fields, Validate fields, not defined. Então, qual é esse problema? Como é que corrige? Olha aqui como é que eu chamei validate field. Está faltando alguma coisa antes? Isso, tem que ter o des, porque eu defini a função no próprio componente. Salvar. Voltando aqui. Então, deu certo. O título está em Valido. Tyrum está em Valido. Certo? Note que eu dei a interpalação no nome do Field. Não era o nome português, mas o nome próprio do Field. Field.name. Então, na mesma maneira, eu quero ver você fazer aqui para um body change, dê uma pausa, e vamos continuar já já. E aí, deu tudo certo? Então, vamos remover esse cara aqui, e adicionar des.validate field, passo um objeto. O name vai ser o quê? Body. O value vai ser o próprio valor da variável aqui, e o level vai ser o nome português do teudo. Certo? Salvar. Vamos testar. O body está em Valido, está vermelho. Certo? Então, é isso. Eu fico melhor assim. E, se lembra que a gente tinha falado de impor um limite ao número de caracteres? Isso que a gente vai fazer no próximo vídeo. É só adicionar outro FLC dentro do Validate Field, que vai dar tudo ok. Certo? Até o próximo. Tchau.