feat: add localStorage

Author: codedstrings

src/scripts/Modules/TodoApp.js

@@ -4,24 +4,41 @@ import TodoItem from './TodoItem';
 class TodoApp {
   constructor() {
     this.projects = [];
-    // Add a default project and default todo for testing
-    this.addProject("Default"); 
-    let todo = new TodoItem();
-    todo.title = "default Todo";
-    todo.description = "default desc";
-    todo.dueDate = new Date().toJSON().slice(0,10);
-    todo.priority = "low";
-    todo.completed = true;
-    this.addTodoToProject("Default",todo);
+    this.loadFromLocalStorage();
+    if (this.projects.length === 0) {
+      this.addProject("Default");
+    }
+  }
+
+  saveToLocalStorage() {
+    localStorage.setItem('todoApp', JSON.stringify(this.projects));
+  }
+
+  loadFromLocalStorage() {
+    const data = localStorage.getItem('todoApp');
+    if (data) {
+      const parsedData = JSON.parse(data);
+      this.projects = parsedData.map(projectData => {
+        const project = new Project(projectData.name);
+        project.todos = projectData.todos.map(todoData => {
+          const todo = new TodoItem(todoData.title, todoData.description, todoData.dueDate, todoData.priority);
+          todo.completed = todoData.completed;
+          return todo;
+        });
+        return project;
+      });
+    }
   }
 
   addProject(name) {
     const project = new Project(name);
     this.projects.push(project);
+    this.saveToLocalStorage();
   }
 
   removeProject(name) {
     this.projects = this.projects.filter(project => project.name !== name);
+    this.saveToLocalStorage();
   }
 
   getProject(name) {
@@ -36,6 +53,7 @@ class TodoApp {
     const project = this.getProject(projectName);
     if (project) {
       project.addTodo(todo);
+      this.saveToLocalStorage();
     } else {
       console.log(`Project ${projectName} does not exist.`);
     }
@@ -45,6 +63,7 @@ class TodoApp {
     const project = this.getProject(projectName);
     if (project) {
       project.removeTodo(todoIndex);
+      this.saveToLocalStorage();
     } else {
       console.log(`Project ${projectName} does not exist.`);
     }
@@ -60,16 +79,20 @@ class TodoApp {
       return todos;
     } else {
       console.log(`Project ${projectName} does not exist.`);
+      return[];
     }
   }
 
-  updateTodoCompletion(todotitle, projectName){
+  updateTodoCompletion(todotitle, projectName) {
     const project = this.getProject(projectName);
-    project.getTodos().forEach((item)=>{
-      if(item.title===todotitle){
-        item.toggleComplete();
-      }
-    });   
+    if (project) {
+      project.getTodos().forEach((item) => {
+        if (item.title === todotitle) {
+          item.toggleComplete();
+        }
+      });
+      this.saveToLocalStorage();
+    }
   }
 }
 

src/scripts/Modules/UI.js

@@ -4,19 +4,19 @@ import TodoItem from './TodoItem';
 export default class UI {
   constructor() {
     this.app = new TodoApp();  // Store the TodoApp instance in the UI class
-    this.selectedProject = 'Default';
+    this.selectedProject = this.app.listProjects()[0] || 'Default';
     this.newProjectPopup = document.querySelector(".add-project-popup");
     this.newProjectPopupAddBtn = document.querySelector(".button-add-project-popup");
     this.newProjectNameInput = document.querySelector(".input-add-project-popup");
     this.newProjectPopupCancelBtn = document.querySelector(".button-cancel-project-popup");
-    
     //adding global event listeners  
     this.newProjectPopupAddBtn.addEventListener('click', (event) => this.handleAddNewProject(event));
     this.newProjectPopupCancelBtn.addEventListener('click', ()=> this.newProjectPopup.classList.remove("active"));
   }
 
   loadHomepage() {
     this.loadProjects();
+    this.OpenProject(this.selectedProject);
   }
 
   loadProjects() {
@@ -72,16 +72,15 @@ export default class UI {
 
   handleAddNewProject(event) {
     const newProjectName = this.newProjectNameInput.value;
-    const exisitingProjects = this.app.listProjects();
-    const selectedprojectItem = document.querySelector('.selected-project');
-    if(newProjectName && !exisitingProjects.includes(newProjectName)){
+    const existingProjects = this.app.listProjects();
+    if(newProjectName && !existingProjects.includes(newProjectName)){
       this.app.addProject(newProjectName);
       this.selectedProject = newProjectName; // Set the new project as selected and opens it
       this.loadProjects();
       this.OpenProject(newProjectName);
     }
     else{
-      alert("Project Name cannot be duplicate or null!")
+      alert("Project Name cannot be duplicate or null!");
     }    
     this.newProjectPopup.classList.remove("active");
   }
@@ -119,8 +118,11 @@ export default class UI {
 
         // Add event listener for checkbox
         const checkbox = todoElement.querySelector('.todo-checkbox');
-        // checkbox.addEventListener('change', (event) => this.handleTodoCompletion(event, todoItem.title, projectName));
-        checkbox.addEventListener('change', (event) => this.app.updateTodoCompletion(todoItem.title, projectName));
+        checkbox.addEventListener('change', () => {
+          this.app.updateTodoCompletion(todoItem.title, projectName);
+          this.OpenProject(projectName);  // Refresh the project view
+        });
+        
       });
     }