8
respostas

Tarefa não conclui

Já olhei todo o código da aula e não consegui resolver o problema!!

Criar Tarefa

import { carregaTarefa } from "./carregaTarefa.js";
import BotaoConclui from "./concluirTarefa.js";
import BotaoDeleta from "./deletarTarefa.js";

export const handleNovoItem = (evento)=> {
    evento.preventDefault();

    const tarefas = JSON.parse(localStorage.getItem('tarefas'))|| []
    const input = document.querySelector("[data-form-input]");
    const valor = input.value;

    const calendario = document.querySelector("[data-form-date]");
    const data = moment(calendario.value);
    const horario = data.format('HH:mm')
    const dataFormatada = data.format('DD/MM/YYYY')
    const concluida = false

    const dados = {
        valor,
        dataFormatada,
        horario,
        concluida
    }

    const tarefasAtualizadas = [...tarefas, dados]

    localStorage.setItem('tarefas', JSON.stringify(tarefasAtualizadas))

    input.value = " "

    carregaTarefa()

}



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


  const tarefa = document.createElement("li");

  const conteudo = `<p class="content">${horario}
   * ${valor}</p>`;
  if( concluida ){
    tarefa.classList.add('done')
  }

  tarefa.classList.add('task')

  tarefa.innerHTML = conteudo;

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

  return tarefa

};

Concluir Tarefa

const concluirTarefa = ( atualiza, id) => {
    const tarefaCadastradas = JSON.parse(localStorage.getItem('tarefas'))

    tarefaCadastradas[id].concluida = !tarefaCadastradas[id].concluida
    localStorage.setItem('tarefas', JSON.stringify(tarefaCadastradas))

    atualiza()

}

const BotaoConclui = (atualiza, id) => { 
    const botaoConclui = document.createElement('button')  

    botaoConclui.classList.add('check-button')
    botaoConclui.innerText = 'concluir'

    botaoConclui.addEventListener('click', ()=> concluirTarefa(atualiza, id))

    return botaoConclui

}



export default BotaoConclui

Uncaught TypeError: Cannot read property 'concluida' of undefined at concluirTarefa (concluirTarefa.js:5) at HTMLButtonElement. (concluirTarefa.js:18)

8 respostas

Olá Felipe.

Tudo bem ?

Vamos ver se eu consigo te ajudar, você já tentou verificar se quando você está declarando o tarefaCadastradas, ele está vindo vazio ?

Está vazio sim, no localStorage

Felipe, depois que você fez o:

localStorage.setItem('tarefas', JSON.stringify(tarefasAtualizadas))

se você fizer um:

console.log(JSON.parse(localStorage.getItem('tarefas')))

O que está sendo exibido ?

undefined

Oi Felipe, por enquanto, pelo que eu estou entendendo, quando você executa o comando:

localStorage.setItem('tarefas', JSON.stringify(tarefasAtualizadas))

Você não está conseguindo inserir um novo item, isso está causando o seu problema de undefinend.

Eu executo e no front-end ele adiciona, e se tento adicionar outro item ele sobrepõe e no localStorage ele fica vazio!

Oi Felipe, desculpa a demora para responder.

Não sei se você conseguiu identificar o problema ainda.

E se você fizer:

console.log(tarefas);

Na segunda vez quando ele vai realizar o set vazio o que é exibido ?

Ainda não.. retorna vazio