Dúvidas conteúdo aula

Oi Marcos, tudo bem? Desculpa a demora para responder!

Muito obrigada pelo seu feedback, irei passar aqui para o time responsável.

Em questão a sua dúvida, eu posso te ajudar a entender um pouco melhor o que está acontecendo durante a aula. Vamos lá!

O instrutor está fazendo o botão de concluir da tarefa. Primeiramente, ele cria uma variável chamada concluida que será igual a false, já que quando criamos uma tarefa, ela não é concluída por padrão. Se a variável for true, significa que a tarefa foi concluída e iremos adicionar um tracinho nela para representar isso.

E essa variável concluida nós iremos passar para dentro do objeto da nossa tarefa:

const dados = {
    valor, // é o nome da tarefa
    dataFormatada, // data da tarefa
    concluida // se a tarefa foi concluída ou não
}

Nós temos um componente Tarefa, onde temos todo o tratamento da nossa tarefa. Precisamos passar essa variável concluída também como parâmetro desse componente:

export const Tarefa = ({ valor, dataFormatada, concluida }) {
}

O que acontece é que estamos passando esse objeto dados que criamos para o componente Tarefa, porém estamos fazendo uma desestruturação, ou seja, pegando todas essas variáveis de dentro do objeto dados, poderíamos fazer assim também:

export const Tarefa = (dados) {
    const valor = dados.valor;
    const dataFormatada = dados.dataFormatada;
    const concluida = dados.concluida;
}

Agora vamos fazer uma verificação para ver se a tarefa está concluída ou não. Se estiver, vamos adicionar o estilo do risquinho, se não estiver, não vamos fazer nada.

if(concluida) { // isso é a mesma coisa que concluida == true
    tarefa.classList.add('done');
}

Bom, se a tarefa estiver concluída, nós iremos adicionar uma classe "done" para ela. Isso porque, lá no nosso componente BotaoConclui, vamos fazer a tratativa dessa tarefa concluída.

Agora, no arquivo concluiTarefa.js o instrutor faz uma refatoração no método concluirTarefa, pois agora vamos utilizar o próprio localStorage para salvar e recuperar esses dados.

const concluirTarefa = () => {
}

Lembrando que essa função acima é a mesma coisa que:

function concluirTarefa() {
}

Então vamos continuar! Dentro dessa função, vamos pegar todas as tarefas cadastradas do localStorage, para fazer isso, precisamos utilizar o método getItem:

const concluirTarefa = () => {
    const tarefasCadastradas = JSON.parse(localStorage.getItem(‘tarefas’))
}

Isso faz com que ele nos retorne toda as tarefas que estão cadastradas como 'tarefas'. Nós temos que utilizar o JSON.parse() pois tudo que é salvo no localStorage é salvo como uma string, e não como um objeto javascript normal. Por isso precisamos converter de string para algo que o Javascript entenda como objeto, então utilizamos o JSON.parse().

Agora, precisamos alterar essa variável concluida, para fazer isso, precisamos de uma identificação dessa tarefa, e vamos fazer isso através do id, recebendo como parâmetro e utilizando na nossa função:

const concluirTarefa = (id) => {
    const tarefasCadastradas = JSON.parse(localStorage.getItem(‘tarefas’));
    tarefasCadastradas[id].concluida = !tarefasCadastradas[id].concluida;
}

A variável tarefasCadastradas[id] identifica a tarefa cadastrada por meio do ID, agora, se o concluida estiver como true, ele precisa ficar false, e vice e versa! Por isso que nós fazemos uma negação dessa variável, para alterar o estado da variável.

Esse id vai vir do index lá do forEach do arquivo criaData.js, o index é a posição de determinado elemento dentro do Array.

Depois de ter alterado o estado da variável concluida, nós precisamos salvar novamente no localStorage, pois é lá que nós temos o controle de todos os nossos dados. Portanto, vamos utilizar um método chamado setItem():

const concluirTarefa = (id) => {
    const tarefasCadastradas = JSON.parse(localStorage.getItem(‘tarefas’));
    tarefasCadastradas[id].concluida = !tarefasCadastradas[id].concluida;
    localStorage.setItem('tarefas', JSON.stringify(tarefasCadastradas));
}

Esse JSON.stringify() irá converter de objeto para string, pois lembra que eu disse que tudo salvo no LocalStorage é uma string? É por esse motivo que realizamos essa conversão.

Agora, o instrutor cria uma função atualiza() para atualizar todas as tarefas que já estão renderizadas na tela, já que nós mantemos as suas informações salvas pelo localStorage. Ou seja, nós salvamos novamente no localStorage, mas o browser não sabe que o localStorage mudou para renderizar as tarefas novamente. Por isso precisamos criar essa função!

Vou continuar na próxima resposta porque vai dar o limite de caractere aqui do fórum hahahah

Então vamos lá, vamos chamar essa função atualiza(), que irá renderizar as tarefas novamente:

const concluirTarefa = (id) => {
    const tarefasCadastradas = JSON.parse(localStorage.getItem(‘tarefas’));
    tarefasCadastradas[id].concluida = !tarefasCadastradas[id].concluida;
    localStorage.setItem('tarefas', JSON.stringify(tarefasCadastradas));
    atualiza();
}

Essa função atualiza() vai vir de algum lugar, por isso vamos recebê-la como parâmetro e chamá-la ao final:

const concluirTarefa = (atualiza, id) => {
    const tarefasCadastradas = JSON.parse(localStorage.getItem(‘tarefas’));
    tarefasCadastradas[id].concluida = !tarefasCadastradas[id].concluida;
    localStorage.setItem('tarefas', JSON.stringify(tarefasCadastradas));
    atualiza();
}

Como é a função BotaoConclui que chama essa outra função concluirTarefa, vamos precisar receber como parâmetro os mesmos parâmetros que essa função concluirTarefa possui, já que é o BotaoConclui que invoca essa função concluirTarefa, então ele precisa passar os parâmetros!

const BotaoConclui = (atualiza, id) => {
    // Todo o código aqui
    // Chamando a função concluirTarefa:
    botaoConclui.addEventListener('click', () => concluirTarefa(atualiza, id));
}

Nós passamos uma função anônima para o concluirTarefa, pois se chamássemos dessa forma:

botaoConclui.addEventListener('click', concluirTarefa(atualiza, id));

A aplicação não iria esperar o evento de clique para chamar essa função, iria chamar instantaneamente, por isso chamamos essa função anônima, para quando houver o clique, ele chamar essa função.

Voltando no arquivo criaTarefa.js, precisamos enviar como parâmetro para a função BotaoConclui essa função de atualizar, que na verdade é a carregaTarefa, e também o id dessa tarefa:

tarefa.appendChild(BotaoConclui(carregaTarefa, id));

E esse id recebemos também como parâmetro na função Tarefa, porém fora da desestruturação, já que esse id não se encontra no objeto dados:

export const Tarefa = ({ valor, dataFormatada, concluida }, id) {
}

E é isso! Eu tentei explicar aqui de uma forma, espero que tenha entendido, mas por favor, caso tenha quaisquer outras dúvidas, sempre mande aqui no fórum que estaremos sempre à disposição! Nosso objetivo é tirar todas as dúvidas possíveis.

Espero ter ajudado, bons estudos =)