done

Author: Yu JiaZe(快站)

package.json

@@ -28,6 +28,7 @@
     "babel-preset-es2016": "^6.16.0",
     "babel-preset-es2017": "^6.22.0",
     "babel-preset-react": "^6.0.0",
+    "mobx-react-devtools": "^4.2.11",
     "react-hot-loader": "^3.0.0-beta.6",
     "ts-loader": "^2.0.0",
     "typescript": "^2.1.4",

src/app.tsx

@@ -1,12 +1,17 @@
 import { TodoListView } from './component/TodoListView'
-import * as ReactDOM from 'react-dom'
-import { TodoList } from './store/TodoList'
-import { TodoItem } from './model/TodoItem'
-const store = new TodoList()
+import { TodoHeaderView } from './component/TodoHeaderView'
+import { TodoFooterView } from './component/TodoFooterView'
+import { observer, inject } from 'mobx-react'
+import DevTools from 'mobx-react-devtools'
 
-store.todos.push(
-    new TodoItem("Get Coffee"),
-    new TodoItem("Write simpler code")
+const App = observer(({stores}: { stores: any }) => {
+    console.log(stores);
+    return <div>
+        <TodoHeaderView todos={stores} />
+        <TodoListView todoList={stores} />
+        <TodoFooterView stores={stores} />
+        <DevTools />
+    </div>
+}
 )
-store.todos[0].finished = true
-ReactDOM.render(<TodoListView todoList={store} />, document.getElementById('root'))
+export default App

src/component/TodoFooterView.tsx

@@ -0,0 +1,25 @@
+import { observer } from 'mobx-react'
+import { action } from 'mobx'
+import { FILTER } from '../store/TodoList'
+
+
+export const TodoFooterView = observer(({stores}: { stores: any }) => {
+    const _onClick = action(i => (stores.filter = FILTER[i as number]))
+    function renderFilterLink() {
+        let children = []
+        for (let i in FILTER) {
+            isNaN(parseInt(i)) && children.push(
+                <a onClick={() => { _onClick(i) }} key={i}>
+                    {i}
+                </a>
+            )
+        }
+        return <div>{children}</div>
+    }
+    return (
+        <div>
+            {renderFilterLink()}
+            <span>{stores.unfinishedTodoCount + ' items left'}</span>
+        </div>
+    )
+})

src/component/TodoHeaderView.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { ITodoList } from '../store/TodoList'
+import { observer } from 'mobx-react'
+
+
+export const TodoHeaderView = observer(({todos}: { todos: any }) => {
+    function _onKeyDown(e) {
+        if (e.keyCode == 13) {
+            todos.add(e.target.value)
+            e.target.value = ''
+        }
+    }
+
+    function _onClick(e) {
+        todos.switchAll(_checked)
+        _checked = !_checked
+    }
+    return (
+        <div>
+            <span onClick={_onClick}>swtich</span>
+            <input type='text' onKeyDown={_onKeyDown} />
+        </div>
+    )
+})
+let _checked = true

src/component/TodoListView.tsx

@@ -1,7 +1,7 @@
 import { TodoItem, ITodoItem } from '../model/TodoItem'
 import * as React from 'react'
-import { observer } from 'mobx-react'
-import { ITodoList } from '../store/TodoList'
+import { observer, inject } from 'mobx-react'
+import { ITodoList, FILTER } from '../store/TodoList'
 
 
 
@@ -18,24 +18,34 @@ const TodoItemView = observer(({todo}: { todo: ITodoItem }) => {
 
 })
 
-
 @observer
-export class TodoListView extends React.Component<{ todoList: ITodoList<ITodoItem> }, {}>{
-    public constructor(props: ITodoList<ITodoItem>) {
+export class TodoListView extends React.Component<{ todoList: any }, {}>{
+    public constructor(props) {
         super(props)
     }
     public render() {
         return (
             <div>
                 <ul>
-                    {
-                        this.props.todoList.todos.map(todo => (
-                            <TodoItemView todo={todo} key={todo.id} />
-                        ))
-                    }
+                    {this.generateTodos()}
                 </ul>
-                Tasks Left : {this.props.todoList.unfinishedTodoCount}
             </div>
         )
     }
+    private generateTodos() {
+        switch (this.props.todoList.filter) {
+            case FILTER.ALL:
+                return this.props.todoList.todos.map(todo =>
+                    <TodoItemView todo={todo} key={todo.id} />
+                )
+            case FILTER.ACTIVE:
+                return this.props.todoList.todos.filter(todo => todo.finished == false).map(todo =>
+                    <TodoItemView todo={todo} key={todo.id} />
+                )
+            case FILTER.COMPLETED:
+                return this.props.todoList.todos.filter(todo => todo.finished == true).map(todo =>
+                    <TodoItemView todo={todo} key={todo.id} />
+                )
+        }
+    }
 }

src/index.tsx

@@ -0,0 +1,20 @@
+import App from './App'
+import * as ReactDOM from 'react-dom'
+import { TodoList } from './store/TodoList'
+import { TodoItem } from './model/TodoItem'
+import { Provider } from 'mobx-react'
+const stores = new TodoList()
+
+stores.todos.push(
+    new TodoItem("Get Coffee"),
+    new TodoItem("Write simpler code")
+)
+stores.todos[0].finished = true
+ReactDOM.render(
+    <div>
+        <Provider stores={stores}>
+            <App stores={stores}/>
+        </Provider>
+    </div>,
+    document.getElementById('root')
+)

src/model/TodoItem.tsx

@@ -9,16 +9,22 @@ export interface ITodoItem {
 }
 
 export class TodoItem {
-    public id: number = Math.random()
-    @observable public finished: boolean = false
-    constructor( @observable public title: string = '') {
-
+    public readonly id: number = TodoItem.generateId()
+    @observable 
+    public finished: boolean = false
+    @observable 
+    public title: string = ''
+    constructor(title) {
+        this.title = title
     }
     public switch() {
         this.finished = !this.finished
     }
     public edit(newTitle: string) {
         this.title = newTitle
     }
-
+    static _id = 0
+    static generateId(): number {
+        return TodoItem._id++
+    }
 }

src/store/TodoList.tsx

@@ -1,25 +1,40 @@
-import { observable, computed } from 'mobx'
+import { observable, computed, action } from 'mobx'
 import { ITodoItem, TodoItem } from '../model/TodoItem'
 
+export enum FILTER {
+    ALL = -1,
+    ACTIVE = 0,
+    COMPLETED = 1
+}
 
-export interface ITodoList<T> {
-    todos: Array<T>
+export interface ITodoList {
+    todos: Array<ITodoItem>
     unfinishedTodoCount: number
+    switchAll(checked: boolean): void
+    delete(todo: ITodoItem): void
+    add(title: string): void
 }
 
 
-export class TodoList<T extends ITodoItem> implements ITodoList<ITodoItem> {
-    @observable todos: Array<T> = []
-    @computed get unfinishedTodoCount(): number {
+export class TodoList implements ITodoList {
+    @observable
+    todos: Array<ITodoItem> = []
+    @observable
+    filter: number = FILTER.ALL
+    @computed
+    get unfinishedTodoCount(): number {
         return this.todos.filter(todo => !todo.finished).length
     }
+    @action
     switchAll(checked: boolean) {
         this.todos.map(todo => todo.finished = checked)
     }
+    @action
     delete(todo) {
         let idx = this.todos.indexOf(todo)
         this.todos.splice(idx, 1)
     }
+    @action
     add(title: string) {
         this.todos.push(new TodoItem(title))
     }

webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
         "webpack-dev-server/client?http://127.0.0.1:8080",
         // "webpack/hot/only-dev-server",
         // 这里是你的入口文件
-        "./src/app.tsx",
+        "./src/index.tsx",
     ],
     output: {
         path: './public/',