função atualiza() e carrega tarefa | JS na Web: Armazenando dados no navegador

Não entendi qual a ligação entre atualiza() e carregaTarefa no append do botão... Poderia me ajudar? O último vídeo da Aula 4 e o primeiro vídeo da Aula 5 estão muito confusos.

No arquivo concluirTarefa.js:

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

atualiza();

}

No arquivo criaTarefa.js?

export const Tarefa = ({input, dataFormatada, concluida}, id) => { const tarefa = document.createElement('li'); const conteudo = <p class="content">${dataFormatada} * ${input}</p>;

if(concluida){
    tarefa.classList.add('done');
}

tarefa.classList.add('task');

tarefa.innerHTML = conteudo;

tarefa.appendChild(BotaoConcluir(carregarTarefa, id));
tarefa.appendChild(BotaoDeletar(carregarTarefa, id));  

return tarefa;

}

Oi Fernanda!

Sua dúvida foi excelente! Vamos lá, as funções recebem parâmetros, correto? Eles podem ser números, strings, objetos e até mesmo outras funções.

Na declaração da função BotaoConcluir, era utilizado somente um parâmetro, o id. No primeiro video da aula 5, o instrutor adicionou o parâmetro atualiza que é uma função e sabemos isso porque ela é executada no final com atualiza().

A função BotaoConcluir tem a seguinte estrutura:

const BotaoConclui = (atualiza, id) => { 
    // ...
    atualiza()
}

Quando executamos a linha

tarefa.appendChild(BotaoConcluir(carregarTarefa, id));

estamos pedindo que a função atualiza seja equivalente à carregarTarefa. Ou seja, quando a função BotaoConclui chegar em atualiza(), ela na verdade estará executando carregarTarefa.

Neste caso, poderiamos apenas escrever a função BotaoConclui da seguinte maneira:

import { carregaTarefa } from './carregaTarefa.js'

const BotaoConclui = (id) => { 
    // ...
    carregaTarefa()
}

E teriamos o mesmo resultado. Na verdade, esta versão seria a simplificada da mostrada na aula e a que provavelmente faria mais sentido pra você.

Entretanto, passar a função atualiza como parâmetro tem suas vantagens. Neste curso, o propósito é ensinar a usar o localStorage, então todos os métodos vão ser relacionados à ele. Porém, caso fosse necessário salvar num banco de dados, seria somente necessário passar essa nova função como o parâmetro atualiza, por exemplo:

// criaTarefa.js
// import {atualizaBanco} from "./atualizaBanco"
export const Tarefa = ({ valor, horario, concluida }, id) => {

    // restante da função Tarefa

    tarefa.appendChild(BotaoConclui(atualizaBanco, id))

    return tarefa
}

No caso mais simples isso não seria possível e teríamos que reescrever a função BotaoConclui para aceitar esse caso.

É importante que você entenda esse conceito pois é muito comum utilizar funções como parâmetros para abstrair funcionalidades.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui! :)