Merge pull request reduxjs#373 from rwillrich/remove-es7-from-examples

Remove ES7 from examples

Author: gaearon

examples/counter/.babelrc

@@ -1,3 +1,3 @@
 {
-  "stage": 0
+  "stage": 2
 }

examples/counter/components/Counter.js

@@ -1,13 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-export default class Counter extends Component {
-  static propTypes = {
-    increment: PropTypes.func.isRequired,
-    incrementIfOdd: PropTypes.func.isRequired,
-    decrement: PropTypes.func.isRequired,
-    counter: PropTypes.number.isRequired
-  };
-
+class Counter extends Component {
   render() {
     const { increment, incrementIfOdd, decrement, counter } = this.props;
     return (
@@ -23,3 +16,12 @@ export default class Counter extends Component {
     );
   }
 }
+
+Counter.propTypes = {
+  increment: PropTypes.func.isRequired,
+  incrementIfOdd: PropTypes.func.isRequired,
+  decrement: PropTypes.func.isRequired,
+  counter: PropTypes.number.isRequired
+};
+
+export default Counter;

examples/counter/containers/CounterApp.js

@@ -4,10 +4,7 @@ import { connect } from 'react-redux';
 import Counter from '../components/Counter';
 import * as CounterActions from '../actions/CounterActions';
 
-@connect(state => ({
-  counter: state.counter
-}))
-export default class CounterApp extends Component {
+class CounterApp extends Component {
   render() {
     const { counter, dispatch } = this.props;
     return (
@@ -16,3 +13,7 @@ export default class CounterApp extends Component {
     );
   }
 }
+
+export default connect(state => ({
+  counter: state.counter
+}))(CounterApp);

examples/todomvc/.babelrc

@@ -1,3 +1,3 @@
 {
-  "stage": 0
+  "stage": 2
 }

examples/todomvc/components/Footer.js

@@ -8,15 +8,7 @@ const FILTER_TITLES = {
   [SHOW_MARKED]: 'Completed'
 };
 
-export default class Footer extends Component {
-  static propTypes = {
-    markedCount: PropTypes.number.isRequired,
-    unmarkedCount: PropTypes.number.isRequired,
-    filter: PropTypes.string.isRequired,
-    onClearMarked: PropTypes.func.isRequired,
-    onShow: PropTypes.func.isRequired
-  }
-
+class Footer extends Component {
   render() {
     return (
       <footer className='footer'>
@@ -69,3 +61,13 @@ export default class Footer extends Component {
     }
   }
 }
+
+Footer.propTypes = {
+  markedCount: PropTypes.number.isRequired,
+  unmarkedCount: PropTypes.number.isRequired,
+  filter: PropTypes.string.isRequired,
+  onClearMarked: PropTypes.func.isRequired,
+  onShow: PropTypes.func.isRequired
+};
+
+export default Footer;

examples/todomvc/components/Header.js

@@ -1,11 +1,7 @@
 import React, { PropTypes, Component } from 'react';
 import TodoTextInput from './TodoTextInput';
 
-export default class Header extends Component {
-  static propTypes = {
-    addTodo: PropTypes.func.isRequired
-  };
-
+class Header extends Component {
   handleSave(text) {
     if (text.length !== 0) {
       this.props.addTodo(text);
@@ -17,9 +13,15 @@ export default class Header extends Component {
       <header className='header'>
           <h1>todos</h1>
           <TodoTextInput newTodo={true}
-                         onSave={::this.handleSave}
+                         onSave={this.handleSave.bind(this)}
                          placeholder='What needs to be done?' />
       </header>
     );
   }
 }
+
+Header.propTypes = {
+  addTodo: PropTypes.func.isRequired
+};
+
+export default Header;

examples/todomvc/components/MainSection.js

@@ -9,12 +9,7 @@ const TODO_FILTERS = {
   [SHOW_MARKED]: todo => todo.marked
 };
 
-export default class MainSection extends Component {
-  static propTypes = {
-    todos: PropTypes.array.isRequired,
-    actions: PropTypes.object.isRequired
-  };
-
+class MainSection extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = { filter: SHOW_ALL };
@@ -82,3 +77,10 @@ export default class MainSection extends Component {
     }
   }
 }
+
+MainSection.propTypes = {
+  todos: PropTypes.array.isRequired,
+  actions: PropTypes.object.isRequired
+};
+
+export default MainSection;

examples/todomvc/components/TodoItem.js

@@ -2,14 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 import TodoTextInput from './TodoTextInput';
 
-export default class TodoItem extends Component {
-  static propTypes = {
-    todo: PropTypes.object.isRequired,
-    editTodo: PropTypes.func.isRequired,
-    deleteTodo: PropTypes.func.isRequired,
-    markTodo: PropTypes.func.isRequired
-  };
-
+class TodoItem extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
@@ -47,7 +40,7 @@ export default class TodoItem extends Component {
                  type='checkbox'
                  checked={todo.marked}
                  onChange={() => markTodo(todo.id)} />
-          <label onDoubleClick={::this.handleDoubleClick}>
+          <label onDoubleClick={this.handleDoubleClick.bind(this)}>
             {todo.text}
           </label>
           <button className='destroy'
@@ -66,3 +59,12 @@ export default class TodoItem extends Component {
     );
   }
 }
+
+TodoItem.propTypes = {
+  todo: PropTypes.object.isRequired,
+  editTodo: PropTypes.func.isRequired,
+  deleteTodo: PropTypes.func.isRequired,
+  markTodo: PropTypes.func.isRequired
+};
+
+export default TodoItem;

examples/todomvc/components/TodoTextInput.js

@@ -1,15 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import classnames from 'classnames';
 
-export default class TodoTextInput extends Component {
-  static propTypes = {
-    onSave: PropTypes.func.isRequired,
-    text: PropTypes.string,
-    placeholder: PropTypes.string,
-    editing: PropTypes.bool,
-    newTodo: PropTypes.bool
-  };
-
+class TodoTextInput extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
@@ -47,9 +39,19 @@ export default class TodoTextInput extends Component {
              placeholder={this.props.placeholder}
              autoFocus='true'
              value={this.state.text}
-             onBlur={::this.handleBlur}
-             onChange={::this.handleChange}
-             onKeyDown={::this.handleSubmit} />
+             onBlur={this.handleBlur.bind(this)}
+             onChange={this.handleChange.bind(this)}
+             onKeyDown={this.handleSubmit.bind(this)} />
     );
   }
 }
+
+TodoTextInput.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  text: PropTypes.string,
+  placeholder: PropTypes.string,
+  editing: PropTypes.bool,
+  newTodo: PropTypes.bool
+};
+
+export default TodoTextInput;

examples/todomvc/index.js

@@ -1,3 +1,5 @@
+import 'babel/polyfill';
+
 import React from 'react';
 import App from './containers/App';
 import 'todomvc-app-css/index.css';

examples/todomvc/reducers/todos.js

@@ -23,21 +23,20 @@ export default function todos(state = initialState, action) {
   case EDIT_TODO:
     return state.map(todo =>
       todo.id === action.id ?
-        { ...todo, text: action.text } :
+        Object.assign({}, todo, { text: action.text }) :
         todo
     );
 
   case MARK_TODO:
     return state.map(todo =>
       todo.id === action.id ?
-        { ...todo, marked: !todo.marked } :
+        Object.assign({}, todo, { marked: !todo.marked }) :
         todo
     );
 
   case MARK_ALL:
     const areAllMarked = state.every(todo => todo.marked);
-    return state.map(todo => ({
-      ...todo,
+    return state.map(todo => Object.assign({}, todo, {
       marked: !areAllMarked
     }));