revert to mobx beginning

Author: willrstern

5-react-mobx/package.json

@@ -10,8 +10,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "mobx": "^2.3.7",
-    "mobx-react": "^3.5.1",
     "react": "^15.2.1",
     "react-dom": "^15.3.0"
   },

5-react-mobx/src/js/TodoList.js

@@ -1,39 +1,8 @@
 import React from "react"
-import { observer } from "mobx-react"
 
 
-@observer
 export default class TodoList extends React.Component {
-  create(e) {
-    if (e.which === 13) {
-      this.props.store.createTodo(e.target.value)
-      e.target.value = ""
-    }
-  }
-
-  filter(e) {
-    this.props.store.filter = e.target.value
-  }
-
-  toggleComplete(todo) {
-    todo.complete = !todo.complete
-  }
-
   render() {
-    const todos = this.props.store.filteredTodos.map(todo => (
-      <li key={todo.id}>
-        <input type="checkbox" value={todo.complete} onChange={this.toggleComplete.bind(this, todo)} /> <span>{todo.value}</span>
-      </li>
-    ))
-
-    return (
-      <div >
-        <h1>todos</h1>
-        <input placeholder="create new" onKeyPress={this.create.bind(this)} />
-        <input placeholder="filter todos" value={this.props.store.filter} onChange={this.filter.bind(this)} />
-        <ul>{todos}</ul>
-        <a href="#" onClick={this.props.store.clearComplete}>Clear Completed</a>
-      </div>
-    )
+    return <h1>MobX<h1>
   }
 }

5-react-mobx/src/js/TodoStore.js

@@ -1,34 +0,0 @@
-import mobx from "mobx"
-import { computed, observable} from "mobx"
-
-class Todo {
-  @observable value
-  @observable id
-  @observable complete
-
-  constructor(value) {
-    this.value = value
-    this.id = Date.now()
-    this.complete = false
-  }
-}
-
-export class TodoStore {
-  @observable todos = []
-  @observable filter = ""
-
-  @computed get filteredTodos() {
-    return this.todos.filter(todo => !this.filter || todo.value.toLowerCase().match(this.filter.toLowerCase()))
-  }
-
-  clearComplete = () => {
-    this.todos.replace(this.todos.filter(todo => !todo.complete))
-  }
-
-  createTodo(value) {
-    this.todos.push(new Todo(value))
-  }
-}
-
-export default new TodoStore
-

5-react-mobx/src/js/main.js

@@ -1,10 +1,10 @@
 import "../css/main.css"
 import React from "react"
 import ReactDOM from "react-dom"
-import TodoStore from "./TodoStore"
+
 import TodoList from "./TodoList"
 
 const app = document.getElementById("app")
 
-ReactDOM.render(<TodoList store={TodoStore} />, app)
+ReactDOM.render(<TodoList />, app)