Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Ainda não ficou muito claro

Não estou conseguindo entender algumas questões:

1) O método valido() retorna o seguinte objeto estruturado, partindo do princípio que todo o objeto é válido. Esta é a estrutura do objeto retornado pelo método:

            {
                isValid: true,
                nome: { isInvalid: false, message: '' },
                livro: { isInvalid: false, message: '' },
                preco: { isInvalid: false, message: ''}
            }

2) No código:

 if (!validacao[regra.campo].isInvalid){ 

Aqui ele faz um forEach em cada objeto do array validacoes, checando se o campo não foi marcado como inválido, certo? Mas, como assim? Se eu passo a variável validacao recebendo o objeto supostamente válido (let validacao = this.valido(); ) Não é reduntante fazer esse if?

3) Na declaração das variáveis (const):

            const campoValor = state[regra.campo.toString()]; // 
            const args = regra.args  || [];
            const metodoValidacao = typeof regra.metodo === 'string' ? validador[regra.metodo] : regra.metodo;
  • O campoValor é responsável pelo que?
  • O args irá correr por cada objeto do array, verificando se existe algum args, se sim ele retorna regra.args (caso do preco), se não, ele retorna nada (caso do nome e livro)
  • Não entendi esse metodoValidacao... Ele faz a comparação do metodo se é 'string'? Mas que metodo? Se sim, ele retorna o validador[regra.metodo], que seria quem? Se não, retorna regra.metodo. Qual a diferença? (Estou bem perdido aqui..)

4) Não entendi a sintaxe, pois não entendi a variável, metodoValidacao. Essa variável está recebendo os argumentos: "campoValor, ...args, state"? A comparação com o campo validaQuando, eu consigo entender, mas o metodoValidacao, não estou conseguindo.

if(metodoValidacao(campoValor, ...args, state) !== regra.validaQuando){

5) No submitForm:

    submitForm = () => {

        const validacao = this.validador.valida(this.state);

        if (validacao.isValid) {
            this.props.listenerSubmit(this.state);
            this.setState(this.stateInicial);

        }else{
            const {nome, livro, preco} = validacao;
            const campos = [nome, livro, preco];

            const camposInvalidos = campos.filter(elem =>{
                return elem.isInvalid;
            });
            camposInvalidos.forEach(console.log);
        }
    }

A) Aqui ele fica checando o status e atualizando para verificar se cada campo do formulário está compatível com as regras passadas para cada caso. Quando clicado o botão de submit e estiver tudo válido ele terá um listenerSubmit e implementará em nossa tabela os dados válido, com setState. Certo? B) Mas, quando algum campo for inválido. Não entendi o porquê declarar o primeiro const {nome, livro, preco}

Código do instrutor:

valida(state) {

        //itera pelo array de regras de validação e constrói
        //um objeto validacao e retorna-o

        //começa assumindo que está tudo válido, recebe o 
     //objeto do método valido.
        let validacao = this.valido();

        this.validacoes.forEach(regra => {

            //Se o campo não tiver sido marcado 
            //anteriormente como invalido por uma regra.
            if (!validacao[regra.campo].isInvalid) {
                //Determina o valor do campo, o método a ser invocado
                //e os argumentos opcionais pela definição da regra
                const campoValor = state[regra.campo.toString()];
                const args = regra.args || [];
                //if ternário para estar preparado caso 
                //alguém passe o método direto sem ser string
                const metodoValidacao = typeof regra.metodo === 'string' ?
                    validador[regra.metodo] : regra.metodo;

                //invoca o método específico da regra
                if (metodoValidacao(campoValor, ...args, state) !== regra.validoQuando) {

                    //modifica o objeto no campo específico
                    validacao[regra.campo] = { 
                        isInvalid: true, 
                        message: regra.mensagem 
                    };
                    validacao.isValid = false;

                }
            }


        });
        return validacao;
    }
1 resposta
solução!

Fala ai William, tudo bem? Vamos lá:

1) O método valido() retorna o seguinte objeto estruturado, partindo do princípio que todo o objeto é válido. Esta é a estrutura do objeto retornado pelo método:

Certo, nesse exemplo vimos que o formulário ainda está valido, isso porque seus campos não possuem erro.

Aqui ele faz um forEach em cada objeto do array validacoes, checando se o campo não foi marcado como inválido, certo? Mas, como assim? Se eu passo a variável validacao recebendo o objeto supostamente válido (let validacao = this.valido(); ) Não é reduntante fazer esse if?

É que nesse ponto ele poderia ser inválido, ou seja, o valor do isValid é igual à false ele será um campo válida, porém, caso ela seja true o campo está inválido.

O campoValor é responsável pelo que?

Ele vai conter o valor do campo, ou seja, será o valor que você digitou nos campos na tela.

Não entendi a sintaxe, pois não entendi a variável, metodoValidacao. Essa variável está recebendo os argumentos: "campoValor, ...args, state"? A comparação com o campo validaQuando, eu consigo entender, mas o metodoValidacao, não estou conseguindo.

Nesse caso o metodoValidacao seria a função de cada campo responsável por checar se ele está valido ou não dai ele está comparando o retorno da função com a regra definida para dizer quando campo deve ser válido, se o retorno for diferente da regra, ele será inválido.

Aqui ele fica checando o status e atualizando para verificar se cada campo do formulário está compatível com as regras passadas para cada caso. Quando clicado o botão de submit e estiver tudo válido ele terá um listenerSubmit e implementará em nossa tabela os dados válido, com setState. Certo?

Caso ele seja válido, ele vai chamar a função listenerSubmit que foi passada via propriedade e vai limpar o formulário

Mas, quando algum campo for inválido. Não entendi o porquê declarar o primeiro const {nome, livro, preco}

O primeiro const no caso:

const {nome, livro, preco} = validacao;

Isso é chamado de destructuring (desestruturação) em JavaScript, basicamente ele este pagando essas três propriedades de dentro do objeto validacao e atribuindo o valor delas para uma variável. Seria o mesmo que fazer:

const nome = validacao.nome;
const livro = validacao.livro;
const preco = validacao.preco;

Espero ter ajudado.