Cleanup, used components from mobx-react-boilerplate

.env

@@ -1,13 +1,3 @@
 REACT_APP_DECORATORS = true;
 REACT_APP_BABEL_STAGE_0 = true;
 
-REACT_APP_SASS = false;
-REACT_APP_LESS = false;
-REACT_APP_STYLUS = false;
-
-REACT_APP_CSS_MODULES = true;
-REACT_APP_SASS_MODULES = false;
-REACT_APP_STYLUS_MODULES = false;
-REACT_APP_LESS_MODULES = false;
-
-REACT_APP_WEBPACK_DASHBOARD = true;

package.json

@@ -6,6 +6,7 @@
     "custom-react-scripts": "0.2.0",
     "mobx": "^3.2.2",
     "mobx-react": "^4.2.2",
+    "mobx-react-devtools": "^4.2.15",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"
   },

src/components/Todo.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from "react";
+import { observer } from "mobx-react";
+
+const Todo = observer(({ todo }) => (
+  <li>
+    <input
+      type="checkbox"
+      checked={todo.finished}
+      onClick={() => (todo.finished = !todo.finished)}
+    />
+    {todo.title}
+  </li>
+));
+
+export default Todo;

src/components/TodoList.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import { observable, action } from "mobx";
+import { observer } from "mobx-react";
+
+import Todo from "./Todo";
+
+@observer
+class TodoList extends React.Component {
+  @observable newTodoTitle = "";
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleFormSubmit}>
+          New Todo:
+          <input
+            type="text"
+            value={this.newTodoTitle}
+            onChange={this.handleInputChange}
+          />
+          <button type="submit">Add</button>
+        </form>
+        <hr />
+        <ul>
+          {this.props.store.todos.map(todo => (
+            <Todo todo={todo} key={todo.id} />
+          ))}
+        </ul>
+        Tasks left: {this.props.store.unfinishedTodoCount}
+      </div>
+    );
+  }
+
+  @action
+  handleInputChange = e => {
+    this.newTodoTitle = e.target.value;
+  };
+
+  @action
+  handleFormSubmit = e => {
+    this.props.store.addTodo(this.newTodoTitle);
+    this.newTodoTitle = "";
+    e.preventDefault();
+  };
+}
+
+export default TodoList;

src/index.js

@@ -1,39 +1,28 @@
-import { observable, computed } from 'mobx';
-import { Provider } from 'mobx-react';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import TodoListView from "./TodoListView.js";
-import registerServiceWorker from "./registerServiceWorker";
+import React from "react";
+import { render } from "react-dom";
+import DevTools from "mobx-react-devtools";
 
-import "./index.css";
+import TodoList from "./components/TodoList";
+import TodoListModel from "./models/TodoListModel";
+import TodoModel from "./models/TodoModel";
 
-const todoStore = title => {
-	return {
-		@observable title: title,
-		@observable finished: false,
-		id: Math.random()
-	};
-};
+const store = new TodoListModel();
 
-const todoListStore = {
-	@observable todos: [],
-	@computed get unfinishedTodoCount() {
-	return todoListStore.todos.filter(todo => !todo.finished).length;
-	}
-};
-
-ReactDOM.render(
-	<Provider todoListStore={todoListStore}>
-		<TodoListView />
-	</Provider>,
-	document.getElementById("root")
+render(
+  <div>
+    <DevTools />
+    <TodoList store={store} />
+  </div>,
+  document.getElementById("root")
 );
 
-todoListStore.todos.push(
-	todoStore("Get Coffee"),
-	todoStore("Write simpler code")
-);
+store.addTodo("Get Coffee");
+store.addTodo("Write simpler code");
+store.todos[0].finished = true;
 
-todoListStore.todos[0].finished = true;
+setTimeout(() => {
+  store.addTodo("Get a cookie as well");
+}, 2000);
 
-registerServiceWorker();
+// playing around in the console
+window.store = store;

src/models/TodoListModel.js

@@ -0,0 +1,17 @@
+import { observable, computed, action } from "mobx";
+
+import TodoModel from "./TodoModel";
+
+export default class TodoListModel {
+  @observable todos = [];
+
+  @computed
+  get unfinishedTodoCount() {
+    return this.todos.filter(todo => !todo.finished).length;
+  }
+
+  @action
+  addTodo(title) {
+    this.todos.push(new TodoModel(title));
+  }
+}

src/models/TodoModel.js

@@ -0,0 +1,11 @@
+import { observable } from "mobx";
+
+export default class TodoModel {
+  id = Math.random();
+  @observable title;
+  @observable finished = false;
+
+  constructor(title) {
+    this.title = title;
+  }
+}