Skip to content

Commit de5ff84

Browse files
committed
revert to mobx beginning
1 parent c406224 commit de5ff84

File tree

4 files changed

+3
-70
lines changed

4 files changed

+3
-70
lines changed

5-react-mobx/package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010
"author": "",
1111
"license": "ISC",
1212
"dependencies": {
13-
"mobx": "^2.3.7",
14-
"mobx-react": "^3.5.1",
1513
"react": "^15.2.1",
1614
"react-dom": "^15.3.0"
1715
},

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

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,8 @@
11
import React from "react"
2-
import { observer } from "mobx-react"
32

43

5-
@observer
64
export default class TodoList extends React.Component {
7-
create(e) {
8-
if (e.which === 13) {
9-
this.props.store.createTodo(e.target.value)
10-
e.target.value = ""
11-
}
12-
}
13-
14-
filter(e) {
15-
this.props.store.filter = e.target.value
16-
}
17-
18-
toggleComplete(todo) {
19-
todo.complete = !todo.complete
20-
}
21-
225
render() {
23-
const todos = this.props.store.filteredTodos.map(todo => (
24-
<li key={todo.id}>
25-
<input type="checkbox" value={todo.complete} onChange={this.toggleComplete.bind(this, todo)} /> <span>{todo.value}</span>
26-
</li>
27-
))
28-
29-
return (
30-
<div >
31-
<h1>todos</h1>
32-
<input placeholder="create new" onKeyPress={this.create.bind(this)} />
33-
<input placeholder="filter todos" value={this.props.store.filter} onChange={this.filter.bind(this)} />
34-
<ul>{todos}</ul>
35-
<a href="#" onClick={this.props.store.clearComplete}>Clear Completed</a>
36-
</div>
37-
)
6+
return <h1>MobX<h1>
387
}
398
}

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

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +0,0 @@
1-
import mobx from "mobx"
2-
import { computed, observable} from "mobx"
3-
4-
class Todo {
5-
@observable value
6-
@observable id
7-
@observable complete
8-
9-
constructor(value) {
10-
this.value = value
11-
this.id = Date.now()
12-
this.complete = false
13-
}
14-
}
15-
16-
export class TodoStore {
17-
@observable todos = []
18-
@observable filter = ""
19-
20-
@computed get filteredTodos() {
21-
return this.todos.filter(todo => !this.filter || todo.value.toLowerCase().match(this.filter.toLowerCase()))
22-
}
23-
24-
clearComplete = () => {
25-
this.todos.replace(this.todos.filter(todo => !todo.complete))
26-
}
27-
28-
createTodo(value) {
29-
this.todos.push(new Todo(value))
30-
}
31-
}
32-
33-
export default new TodoStore
34-

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import "../css/main.css"
22
import React from "react"
33
import ReactDOM from "react-dom"
4-
import TodoStore from "./TodoStore"
4+
55
import TodoList from "./TodoList"
66

77
const app = document.getElementById("app")
88

9-
ReactDOM.render(<TodoList store={TodoStore} />, app)
9+
ReactDOM.render(<TodoList />, app)
1010

0 commit comments

Comments
 (0)