import { action , computed , extras , observable } from "mobx" ; import { TodoItem } from "./todoItem" ; export class TodoList { [ x ] : any ; @ observable public todos : TodoItem [ ] = [ ] ; constructor ( ) { extras . isolateGlobalState ( ) ; } @ computed public get unfinishedTodoCount ( ) { return this . todos . filter ( ( todo ) => ! todo . finished ) . length ; } @ action public addTodoByTitle ( todoTitle ) { this . todos = [ ... this . todos , new TodoItem ( todoTitle ) ] ; } @ action public setFinished ( todoId , isFinished ) { const todoIndex = this . findTodoIndexById ( todoId ) ; if ( todoIndex === - 1 ) { console . error ( `Todo Item with id "${ todoId }" was not found. Can't set it's status to finished!` ) ; return ; } this . todos [ todoIndex ] . setFinished ( isFinished ) ; this . refreshTodoList ( ) ; } private refreshTodoList ( ) { this . todos = [ ... this . todos ] ; } private findTodoIndexById ( todoId ) { return this . todos . findIndex ( ( todo ) => todo . id === todoId ) ; } @ action public removeTodo ( todoId ) { this . todos = this . todos . filter ( p => p . id !== todoId ) ; } }