Exercise solved - Sebastián Moreyra

src/app/local-storage.service.ts

@@ -1,12 +1,37 @@
 import { Injectable } from '@angular/core';
+import { listLazyRoutes } from '@angular/compiler/src/aot/lazy_routes';
+import { TodoItem } from './model/todo-item';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LocalStorageService {
+
   // https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
   constructor() { }
   getName() {
     return 'LocalStorageService'
   }
+  getTasks() {
+    let storedList = localStorage.getItem("taskList");
+    if (storedList === null) {
+      let tasks = [];
+      return tasks;
+    }
+    else  {
+      let tasks = JSON.parse(localStorage.getItem('taskList')).map(each => new TodoItem(each));
+      return tasks;
+    }
+  }
+
+  removeTask(list) {
+    localStorage.removeItem("tasklist");
+    this.setTasks(list);
+  }
+
+  setTasks(list) {
+    localStorage.setItem("taskList",JSON.stringify(list));
+  }
+
+
 }

src/app/model/todo-item.ts

@@ -2,6 +2,11 @@ export class TodoItem {
   id: number;
   description: string;
   isCompleted: boolean = false;
+  constructor(item) {
+    this.id = item.id;
+    this.description = item.description;
+    this.isCompleted = item.isCompleted;
+  }
 
   toggleCompleted() {
     this.isCompleted = !this.isCompleted;

src/app/todo-app/todo-app.component.ts

@@ -22,6 +22,7 @@ export class TodoAppComponent  {
   }
   onItemStateChanged(item: TodoItem) {
     item.toggleCompleted();
+    this.service.changeState(item);
   }
   onTodoItemCreated(task) {
     this.service.add(task)

src/app/todo-form/todo-form.component.ts

@@ -14,9 +14,8 @@ export class TodoFormComponent {
     if(!description.value || description.value === '') {
       return;
     }
-    let task = new TodoItem();
-    task.description = description.value;
-    task.isCompleted = false;
+    let task = {description:description.value, isCompleted:false, id:0 };
+
     this.add.emit(task);
     description.value = '';
   }

src/app/todo.service.ts

@@ -1,26 +1,46 @@
 import { Injectable } from '@angular/core';
 import { LocalStorageService } from './local-storage.service';
+import { TodoItem } from './model/todo-item';
 
 @Injectable({
   providedIn: 'root'
 })
-export class TodoService {
+export class TodoService{
+
 
-  list = [];
+  list : TodoItem[] = [];
   lastItemId = 0;
 
-  constructor(private storage: LocalStorageService) { }
+  constructor(private storage: LocalStorageService) { 
+    this.list = this.storage.getTasks();
+    console.log(this.list);
+  }
 
+
   add(task) {
+    this.lastItemId = this.getLastId();
     const id = this.lastItemId;
     task.id = id;
-    this.list.push(task);
+    let taskAdded = new TodoItem(task);
+    this.list.push(taskAdded);
     this.lastItemId += 10;
+    this.storage.setTasks(this.list);
+    console.log(this.storage.getTasks());
+  }
+  getLastId() {
+    let lastId = 0;
+    this.list.forEach(e => {
+      if(e.id >= lastId) {
+        lastId = e.id;
+      }
+    })
+    return lastId + 1;
   }
 
   remove(id) {
     const index = this.list.findIndex((element) => element.id === id);
     this.list.splice(index, 1);
+    this.storage.removeTask(this.list);
   }
 
   incompletedSize() {
@@ -34,4 +54,10 @@ export class TodoService {
   getName() {
     return 'TodoService 123' + this.storage.getName();
   }
+
+  changeState(item:TodoItem) {
+    const index = this.list.findIndex((element) => element.id === item.id);
+    this.list[index] = item;
+    this.storage.setTasks(this.list);
+  }
 }