Aula 3: Seria o set() opcional?

Qual vídeo de qual capítulo você esta se referindo? Se é o https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2/task/17466

Nele, eu só crio o proxy para a lista de negociações. O da mensagem continua do jeito que estava.

Aula 3, onde tu implementa a classe ProxyFactory. O get intercepta o acesso ao "texto" da Mensagem, no caso quando o texto é modificado ele intercepta pelo get mesmo, não precisa interceptar o set para isso. Pelo que eu entendi ele deveria interceptar pelo set, pois está alterando o texto, mas isso não acontece.

Ah sim, veja neste vídeo, em aproximadamente 0:53. O proxy Factory, que deve receber o modelo passado como parâmetro para criar o proxy esta usando fixo ListageNegociacoes. Isso não esta correto, porque qualquer alteração em listaNegociacoes fará que todos que foram criados usando nosso proxy sejam atualizados, que é o caso de MensagemView. Eu faço assim para motivar a correção que vem depois em 03:28

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2/task/17491

Nossa, dá zero pra mim. Verdade! Eu fui implementando e testando, e eu esqueci disso. Desculpa a bobeira, valeu!

Resumindo: a atualização da mensagem sem o set funcionou porque o proxy esta usando fixo ListaNegociacoes. E quando o proxy de ListaNegociacoes era alterado, disparada a atualização de MensagemView. Mas, quando você corrige o Proxy, fazendo com que ele trabalhe com o modelo passado como parâmetro, MensagemView não é atualizada, porque queremos monitorar uma property.

Avance com o vídeo um pouquinho e faças as alterações para ver o resultado.

Vou dar zero não, vou dar 10! Isso porque você esta muito atento. Na verdade, esse erro de deixar o ListaNegociacoes fixo no proxy e corrigi-lo depois foi erro meu. Eu corrijo depois, mas vi agora que isso causou certa dúvida na aprendizagem.

Vou até alterar a solução e marcar sua resposta como solução para ganhar os pontos.

Então, para ficar bonito, volta a aula desse capítulo.... e quando criar o Proxy Factory.... no lugar de deixar fixo o ListaNegociacoes e depois corrigir...corrige logo.. dai o fluxo ficará ainda mais fácil de entender... você verá que a mensagem não é atualizada de MensagemView. Faz assim.. para ficar ainda mais.

Nada pode prejudicar sua saga para virar cangaceiro em JavaScript!

Que estranho, podia jurar que era esse o problema mas estou seguindo a parte escrita da aula e já estou passando o objeto como parâmetro. Mesmo sem o set, a mensagem ainda é exibida.

Me envia o código do seu controller e o código do Proxy Factory.

Tá bom. O controller tá assim:

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);
        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');

        this._listaNegociacoes =  ProxyFactory.create(
                new ListaNegociacoes(), 
                    ['adiciona', 'esvazia'],
                        lista => this._negociacoesView.update(lista));

        this._negociacoesView = new NegociacoesView($('#negociacoesView'));
        this._negociacoesView.update(this._listaNegociacoes);

        this._mensagem = ProxyFactory.create(
               new Mensagem(),
               ['texto'], mensagem => this._mensagemView.update(mensagem)); 

        this._mensagemView = new MensagemView($('#mensagemView'));
        this._mensagemView.update(this._mensagem);
    }

    adiciona(event) {

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());

        this._mensagem.texto = 'Negociação adicionada com sucesso';
        this._mensagemView.update(this._mensagem);

        this._limpaFormulario();   
    }

    apaga() {

        this._listaNegociacoes.esvazia();

        this._mensagem.texto = 'Negociações apagadas com sucesso';
        this._mensagemView.update(this._mensagem);
    }

    _criaNegociacao() {

        return new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value);    
    }

    _limpaFormulario() {

        this._inputData.value = '';
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();   
    }
}

E a ProxyFactory:

class ProxyFactory{

    static create(objeto, props, acao) {

        return new Proxy(objeto, {

            get(target, prop, receiver) {

                if(props.includes(prop) && ProxyFactory._ehFuncao(target[prop])) {
                    return function() { 
                        Reflect.apply(target[prop], target, arguments);
                        return acao(target);
                    }
                }
                return Reflect.get(target, prop, receiver);       
            }
        })
    }

    static _ehFuncao(func) {
        return typeof(func) == typeof(Function);
    }
}

Paulo, o motivo é o primeiro que indiquei no POST. Na mensagem, você não esta usando proxy, esta fazendo o update manualmente,

Na verdade, você esta usando proxy e o código antigo. Se você for usar proxy, faz apenas usando proxy. Vou corrigir para você:

Editado... a explicação certo vem no final :)

Deixa eu organizar aqui o código.. um minuto

É que na parte escrita, acredito que foi pedido para colocar o set prematuramente aí eu pensei que já naquele momento era necessário o set, mas na prática o set só passou a ser obrigatório diante da implementação do Bind por algum motivo. A relação ProxyFactory <-> Controller permite alterar a Mensagem.texto pelo get, quando eu implemento o Bind aí sim que é obrigatório o set para alterar Mensagem.texto.

Ah sim! Agora achei a confusão. Vamos lá meu aluno.

Tudo o que eu falei, não era problema para você. Seu problema é o seguinte. Se você esta usando o proxy com a mensagem, é porque quer que ela atualize a view toda vez que mudar librando-o de ter que lembrar de atualizar a view manualmente, certo?

Você manteve o código que atualiza a view manualmente em seu método adiciona:

    adiciona(event) {

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());

        this._mensagem.texto = 'Negociação adicionada com sucesso';
      // opa, isso não deveria existir, porque quando modelo for atualizado, o proxy chamará essa instrução automaticamente.
        this._mensagemView.update(this._mensagem);

        this._limpaFormulario();   
    }

É por isso que a mensagem esta sendo exibida. Veja, a ideia de criar o proxy nesse contexto é que se eu tenho 10 lugares que eu altero mensagem eu teria que lembrar de chamar 10 vezes update e com certeza eu esqueceria em algum lugar. Agora, como nosso proxy garante que alterando a propriedade da mensagem ele chamará automaticamente o update da view, não tenho que me preocupar com isso.

Caso solucionado!

Ah, não esqueça de remover do método apaga também.

Agora ficou claro o problema? Boota tudo que eu disse, pega só a partir desse último post. :) Seu problema era mais simples do que eu imaginava e me passou desapercebido.

Então. para ficar ainda mais bonito. Veja que com o proxy..você não precisa manualmente chamar o update da view certo? Mas no construtor da classe, ainda há uma chamada obrigatório de um update. Você verá como se livrar dela quando criar a classe Bind. No fundo no fundo. estamos tentando fazer o que frameworks como Angular JS fazem,, estamos fazem um data binding. Que é a associação de um dado com a view e qualquer alteração no dado atualiza a view automaticamente.

Ah, e por fim, o set não é opcional no nosso código :)

Entendi, o grande lance é que naquela etapa da parte escrita da aula, os métodos update() da MensagemView ainda não foram removidos dos métodos adiciona() e apaga() do controller, então se for seguir a lógica da parte escrita o set, até aquele momento, ainda será opcional.

Eu entendi o motivo, obrigado pela paciência porque eu já tava ficando paranoico!

Abs.

Cono você seguiu o texto e não o vídeo, vou deixar claro no texto que esses updates devem ser removidos.

Sucesso e bom estudo.

Eu segui os dois, eu sempre vejo o vídeo e depois repasso a parte escrita pra ver se esqueci algo. Só fiquei um pouquinho confuso por causa da ordem, mas já consegui entender. rs