TodoMVC Tutorial - DO NOT MERGE!

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["transform-decorators-legacy"]
 }

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "express": "^4.15.4",
     "immutable": "^3.8.1",
+    "radium": "^0.19.4",
     "react": "^15.6.1",
     "react-redux": "^5.0.5",
     "redux": "^3.7.2",
@@ -45,6 +46,8 @@
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",

src/containers/Root.dev.js

@@ -2,7 +2,7 @@
 
 import React, {Component} from 'react'
 import {Provider} from 'react-redux'
-import {CounterApp} from '../counter'
+import {TodoApp} from '../todomvc'
 import PropTypes from '../PropTypes'
 import DevTools from './DevTools'
 
@@ -12,7 +12,7 @@ class Root extends Component {
     return (
       <Provider store={store}>
         <div>
-          <CounterApp/>
+          <TodoApp/>
           <DevTools/>
         </div>
       </Provider>

src/containers/Root.prod.js

@@ -2,15 +2,15 @@
 
 import React, {Component} from 'react'
 import {Provider} from 'react-redux'
-import {CounterApp} from '../counter'
+import {TodoApp} from '../todomvc'
 import PropTypes from '../PropTypes'
 
 class Root extends Component {
   render() {
     const {store} = this.props;
     return (
       <Provider store={store}>
-        <CounterApp/>
+        <TodoApp/>
       </Provider>
     )
   }

src/reducers.js

@@ -1,10 +1,10 @@
 'use strict';
 
 import {combineReducers} from 'redux'
-import counter from './counter'
+import todomvc from './todomvc'
 
 const rootReducer = combineReducers({
-  counter: counter.reducer
+  todos: todomvc.reducer
 });
 
 export default rootReducer

src/todomvc/ActionTypes.js

@@ -0,0 +1,8 @@
+'use strict';
+
+export const ADD = 'todomvc/ADD';
+export const EDIT = 'todomvc/EDIT';
+export const DELETE = 'todomvc/DELETE';
+export const TOGGLE_COMPLETE_ONE = 'todomvc/TOGGLE_COMPLETE_ONE';
+export const TOGGLE_COMPLETE_ALL = 'todomvc/TOGGLE_COMPLETE_ALL';
+export const DELETE_COMPLETED = 'todomvc/DELETE_COMPLETED';

src/todomvc/actions.js

@@ -0,0 +1,27 @@
+'use strict';
+
+import * as types from './ActionTypes'
+
+export function addTodo(text) {
+  return {type: types.ADD, description: text, completed: false}
+}
+
+export function editTodo(id, text) {
+  return {type: types.EDIT, id: id, description: text}
+}
+
+export function deleteTodo(id) {
+  return {type: types.DELETE, id: id}
+}
+
+export function toggleCompleteOneTodo(id) {
+  return {type: types.TOGGLE_COMPLETE_ONE, id: id}
+}
+
+export function toggleCompleteAllTodos(all_completed = true) {
+  return {type: types.TOGGLE_COMPLETE_ALL, all_completed: all_completed}
+}
+
+export function deleteCompletedTodos() {
+  return {type: types.DELETE_COMPLETED}
+}

src/todomvc/components/Footer.js

@@ -0,0 +1,69 @@
+'use strict';
+
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import Radium from 'radium'
+
+@Radium
+export default class Footer extends Component {
+  static propTypes = {
+    todos: PropTypes.object,
+    deleteCompletedTodos: PropTypes.func.isRequired
+  };
+
+  styles = {
+    footer: {
+      color: '#777',
+      padding: '10px 15px',
+      height: 20,
+      borderTop: '1px solid #e6e6e6'
+    },
+
+    deleteCompleted: {
+      position: 'relative',
+      float: 'right',
+      marginTop: 2,
+      border: 0,
+      color: 'rgba(175, 47, 47, 0.75)',
+      background: 'none',
+      textDecoration: 'none',
+      fontSize: '100%',
+      cursor: 'pointer',
+      WebkitAppearance: 'none',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+      ':hover': {
+        fontStyle: 'italic',
+        fontWeight: 'bold',
+        color: 'indianred'
+      },
+    }
+  };
+
+  static hasCompleted(todos) {
+    if (typeof todos === "undefined") return false;
+    else return todos.filter(todo => todo.get('completed') === true).count() > 0;
+  }
+
+  static countNotCompleted(todos) {
+    if (typeof todos === "undefined") return '';
+    else if (todos.filter(todo => todo.get('completed') !== true).count() === 0) return 'No todos left';
+    else if (todos.filter(todo => todo.get('completed') !== true).count() === 1) return '1 todo left';
+    else return `${todos.filter(todo => todo.get('completed') !== true).count()} todos left`
+  }
+
+  render() {
+    const todos = this.props.todos;
+    const deleteCompletedTodos = this.props.deleteCompletedTodos;
+
+    return (
+      <footer style={this.styles.footer}>
+        <label>
+          The number of todos not completed: <strong>{Footer.countNotCompleted(todos)}</strong>
+        </label>
+        {Footer.hasCompleted(todos) &&
+        <button style={this.styles.deleteCompleted} onClick={() => deleteCompletedTodos()}>delete completed</button>}
+      </footer>
+    )
+  }
+}