Store.ts

import { action, computed, observable, reaction } from 'mobx'

export interface Todo {
  task: string
  isComplete: boolean
}

export class TodoStore {
  @observable public todoList: Todo[] = []

  public constructor() {
    reaction(
      () => this.todoList.filter(todo => !todo.isComplete),
      incompleteTasks => {
        if (incompleteTasks.length > 15) {
          alert("Dude, you've got too much on your plate. Let's get to it.")
        }
      },
    )
  }

  @computed
  public get completedTodos(): Todo[] {
    return this.todoList.filter(todo => todo.isComplete)
  }

  @computed
  public get incompleteTodos(): Todo[] {
    return this.todoList.filter(todo => !todo.isComplete)
  }

  @action
  public addTodo(task: string) {
    this.todoList.push({ task, isComplete: false })
    this.sortTodoList()
    this.storeToLocal()
  }

  @action
  public completeTodo(completedTodo: Todo) {
    const i = this.todoList.findIndex(todo => todo.task === completedTodo.task)
    this.todoList[i].isComplete = true
    this.sortTodoList()
    this.storeToLocal()
  }

  @action
  public clearTodos() {
    this.todoList = []
  }

  private sortTodoList() {
    const sorted = this.todoList
      .slice()
      .sort((a, b) => Number(a.isComplete) - Number(b.isComplete))
    this.todoList = [...sorted]
  }

  private storeToLocal() {
    return window.localStorage.setItem(
      'todos',
      JSON.stringify(this.todoList || []),
    )
  }

  private getFromLocal() {
    return JSON.parse(window.localStorage.getItem('todos') || '{}')
  }
}