copy todo_react_motion to todo_with_test

mocheng · mocheng · commit bfe18ee4f3fb · 2017-01-13T13:21:50.000+08:00
diff --git a/chapter-12/todo_with_test/README.md b/chapter-12/todo_with_test/README.md
diff --git a/chapter-12/todo_with_test/package.json b/chapter-12/todo_with_test/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "todo",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.8.4",
+    "redux-immutable-state-invariant": "^1.2.4"
+  },
+  "dependencies": {
+    "react": "^15.4.1",
+    "react-addons-perf": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "react-motion": "^0.4.7",
+    "react-redux": "^5.0.1",
+    "redux": "^3.6.0",
+    "reselect": "^2.5.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/chapter-12/todo_with_test/public/favicon.ico b/chapter-12/todo_with_test/public/favicon.ico
diff --git a/chapter-12/todo_with_test/public/index.html b/chapter-12/todo_with_test/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/chapter-12/todo_with_test/src/Store.js b/chapter-12/todo_with_test/src/Store.js
@@ -0,0 +1,47 @@
+import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
+
+import {reducer as todoReducer} from './todos';
+import {reducer as filterReducer} from './filter';
+
+import Perf from 'react-addons-perf'
+
+const win = window;
+win.Perf = Perf
+
+const reducer = combineReducers({
+  todos: todoReducer,
+  filter: filterReducer
+});
+
+const middlewares = [];
+if (process.env.NODE_ENV !== 'production') {
+  middlewares.push(require('redux-immutable-state-invariant')());
+}
+
+const storeEnhancers = compose(
+  applyMiddleware(...middlewares),
+  (win && win.devToolsExtension) ? win.devToolsExtension() : (f) => f,
+);
+
+const initialState = {
+  todos: [
+    {
+      id: 0,
+      text: 'First',
+      completed: true
+    },
+    {
+      id: 1,
+      text: 'Second',
+      completed: false
+    },
+    {
+      id: 2,
+      text: 'Third',
+      completed: true
+    }
+  ]
+
+}
+export default createStore(reducer, initialState, storeEnhancers);
+
diff --git a/chapter-12/todo_with_test/src/TodoApp.js b/chapter-12/todo_with_test/src/TodoApp.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import {view as Todos} from './todos/';
+import {view as Filter} from './filter/';
+
+function TodoApp() {
+  return (
+    <div>
+      <Todos />
+      <Filter />
+    </div>
+  );
+}
+
+export default TodoApp;
diff --git a/chapter-12/todo_with_test/src/constants.js b/chapter-12/todo_with_test/src/constants.js
@@ -0,0 +1,6 @@
+export const FilterTypes = {
+  ALL: '全部',
+  COMPLETED: '已完成',
+  UNCOMPPLETED: '未完成'
+}
+
diff --git a/chapter-12/todo_with_test/src/filter/actionTypes.js b/chapter-12/todo_with_test/src/filter/actionTypes.js
@@ -0,0 +1 @@
+export const SET_FILTER = 'FILTER/SET';
diff --git a/chapter-12/todo_with_test/src/filter/actions.js b/chapter-12/todo_with_test/src/filter/actions.js
@@ -0,0 +1,6 @@
+import {SET_FILTER} from './actionTypes.js';
+
+export const setFilter = filterType => ({
+  type: SET_FILTER,
+  filter: filterType
+});
diff --git a/chapter-12/todo_with_test/src/filter/index.js b/chapter-12/todo_with_test/src/filter/index.js
@@ -0,0 +1,5 @@
+import * as actions from './actions.js';
+import reducer from './reducer.js';
+import view from './views/filters.js';
+
+export {actions, reducer, view};
diff --git a/chapter-12/todo_with_test/src/filter/reducer.js b/chapter-12/todo_with_test/src/filter/reducer.js
@@ -0,0 +1,12 @@
+import {SET_FILTER} from './actionTypes.js';
+import {FilterTypes} from '../constants.js'
+
+export default (state = FilterTypes.ALL, action) => {
+  switch(action.type) {
+    case SET_FILTER: {
+      return action.filter;
+    }
+    default:
+      return state;
+  }
+}
diff --git a/chapter-12/todo_with_test/src/filter/views/filters.js b/chapter-12/todo_with_test/src/filter/views/filters.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Link from './link.js';
+import {FilterTypes} from '../../constants.js'
+
+import './style.css';
+
+const Filters = () => {
+  return (
+    <p className="filters">
+      <Link filter={FilterTypes.ALL}> {FilterTypes.ALL} </Link>
+      <Link filter={FilterTypes.COMPLETED}> {FilterTypes.COMPLETED} </Link>
+      <Link filter={FilterTypes.UNCOMPPLETED}> {FilterTypes.UNCOMPPLETED} </Link>
+    </p>
+  );
+};
+
+export default Filters;
diff --git a/chapter-12/todo_with_test/src/filter/views/link.js b/chapter-12/todo_with_test/src/filter/views/link.js
@@ -0,0 +1,38 @@
+import React, {PropTypes} from 'react';
+import {connect} from 'react-redux';
+import {setFilter} from '../actions.js';
+
+const Link = ({active, children, onClick}) => {
+  if (active) {
+    return <b className="filter selected">{children}</b>;
+  } else {
+    return (
+      <a href="#" className="filter not-selected" onClick={(ev) => {
+        ev.preventDefault();
+        onClick();
+      }}>
+        {children}
+      </a>
+    );
+  }
+};
+
+Link.propTypes = {
+  active: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    active: state.filter === ownProps.filter
+  }
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  onClick: () => {
+    dispatch(setFilter(ownProps.filter));
+  }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Link);
diff --git a/chapter-12/todo_with_test/src/filter/views/style.css b/chapter-12/todo_with_test/src/filter/views/style.css
@@ -0,0 +1,28 @@
+.filters {
+  font-size: 20px;
+}
+
+.filters .filter {
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.filters .selected {
+  border: 1px solid transparent;
+  text-decoration: none;
+}
+
+.filters .not-selected {
+  color: black;
+  text-decoration: none;
+  border: 1px solid;
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
+.filters .not-selected:hover {
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
diff --git a/chapter-12/todo_with_test/src/index.js b/chapter-12/todo_with_test/src/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Provider} from 'react-redux';
+import TodoApp from './TodoApp';
+
+import store from './Store.js';
+
+ReactDOM.render(
+  <Provider store={store}>
+    <TodoApp />
+  </Provider>,
+  document.getElementById('root')
+);
diff --git a/chapter-12/todo_with_test/src/todos/actionTypes.js b/chapter-12/todo_with_test/src/todos/actionTypes.js
@@ -0,0 +1,4 @@
+export const ADD_TODO = 'TODO/ADD';
+export const TOGGLE_TODO = 'TODO/TOGGLE';
+export const REMOVE_TODO = 'TODO/REMOVE';
+
diff --git a/chapter-12/todo_with_test/src/todos/actions.js b/chapter-12/todo_with_test/src/todos/actions.js
@@ -0,0 +1,21 @@
+import {ADD_TODO, TOGGLE_TODO, REMOVE_TODO} from './actionTypes.js';
+
+let nextTodoId = 10;
+
+export const addTodo = (text) => ({
+  type: ADD_TODO,
+  completed: false,
+  id: nextTodoId ++,
+  text: text
+});
+
+export const toggleTodo = (id) => ({
+  type: TOGGLE_TODO,
+  id: id
+});
+
+export const removeTodo = (id) => ({
+  type: REMOVE_TODO,
+  id: id
+});
+
diff --git a/chapter-12/todo_with_test/src/todos/index.js b/chapter-12/todo_with_test/src/todos/index.js
@@ -0,0 +1,5 @@
+import * as actions from './actions.js';
+import reducer from './reducer.js';
+import view from './views/todos.js';
+
+export {actions, reducer, view};
diff --git a/chapter-12/todo_with_test/src/todos/reducer.js b/chapter-12/todo_with_test/src/todos/reducer.js
@@ -0,0 +1,33 @@
+import {ADD_TODO, TOGGLE_TODO, REMOVE_TODO}from './actionTypes.js';
+
+export default (state = [], action) => {
+  switch(action.type) {
+    case ADD_TODO: {
+      return [
+        {
+          id: action.id,
+          text: action.text,
+          completed: false
+        },
+        ...state
+      ]
+    }
+    case TOGGLE_TODO: {
+      return state.map((todoItem) => {
+        if (todoItem.id === action.id) {
+           return {...todoItem, completed: !todoItem.completed};
+        } else {
+          return todoItem;
+        }
+      })
+    }
+    case REMOVE_TODO: {
+      return state.filter((todoItem) => {
+        return todoItem.id !== action.id;
+      })
+    }
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/chapter-12/todo_with_test/src/todos/selector.js b/chapter-12/todo_with_test/src/todos/selector.js
@@ -0,0 +1,21 @@
+import {createSelector} from 'reselect';
+import {FilterTypes} from '../constants.js';
+
+const getFilter = (state) => state.filter;
+const getTodos = (state) => state.todos;
+
+export const selectVisibleTodos = createSelector(
+  [getFilter, getTodos],
+  (filter, todos) => {
+    switch (filter) {
+      case FilterTypes.ALL:
+        return todos;
+      case FilterTypes.COMPLETED:
+        return todos.filter(item => item.completed);
+      case FilterTypes.UNCOMPPLETED:
+        return todos.filter(item => !item.completed);
+      default:
+        throw new Error('unsupported filter');
+    }
+  }
+);
diff --git a/chapter-12/todo_with_test/src/todos/views/addTodo.js b/chapter-12/todo_with_test/src/todos/views/addTodo.js
diff --git a/chapter-12/todo_with_test/src/todos/views/style.css b/chapter-12/todo_with_test/src/todos/views/style.css
diff --git a/chapter-12/todo_with_test/src/todos/views/todoItem.js b/chapter-12/todo_with_test/src/todos/views/todoItem.js
diff --git a/chapter-12/todo_with_test/src/todos/views/todoList.js b/chapter-12/todo_with_test/src/todos/views/todoList.js
diff --git a/chapter-12/todo_with_test/src/todos/views/todos.js b/chapter-12/todo_with_test/src/todos/views/todos.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const SET_FILTER = 'FILTER/SET';`