diff --git a/examples/todomvc/src/actions/index.js b/examples/todomvc/src/actions/index.js index 2e52a7cf1b..0a7e94128c 100644 --- a/examples/todomvc/src/actions/index.js +++ b/examples/todomvc/src/actions/index.js @@ -1,25 +1,13 @@ import * as types from '../constants/ActionTypes' -export function addTodo(text) { - return { type: types.ADD_TODO, text } -} +export const addTodo = text => ({ type: types.ADD_TODO, text }) -export function deleteTodo(id) { - return { type: types.DELETE_TODO, id } -} +export const deleteTodo = id => ({ type: types.DELETE_TODO, id }) -export function editTodo(id, text) { - return { type: types.EDIT_TODO, id, text } -} +export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text }) -export function completeTodo(id) { - return { type: types.COMPLETE_TODO, id } -} +export const completeTodo = id => ({ type: types.COMPLETE_TODO, id }) -export function completeAll() { - return { type: types.COMPLETE_ALL } -} +export const completeAll = () => ({ type: types.COMPLETE_ALL }) -export function clearCompleted() { - return { type: types.CLEAR_COMPLETED } -} +export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED }) diff --git a/examples/todomvc/src/components/Footer.js b/examples/todomvc/src/components/Footer.js index 8ae9c59983..1a0ed720ea 100644 --- a/examples/todomvc/src/components/Footer.js +++ b/examples/todomvc/src/components/Footer.js @@ -8,8 +8,16 @@ const FILTER_TITLES = { [SHOW_COMPLETED]: 'Completed' } -class Footer extends Component { - renderTodoCount() { +export default class Footer extends Component { + static propTypes = { + completedCount: PropTypes.number.isRequired, + activeCount: PropTypes.number.isRequired, + filter: PropTypes.string.isRequired, + onClearCompleted: PropTypes.func.isRequired, + onShow: PropTypes.func.isRequired + } + + renderTodoCount = () => { const { activeCount } = this.props const itemWord = activeCount === 1 ? 'item' : 'items' @@ -20,7 +28,7 @@ class Footer extends Component { ) } - renderFilterLink(filter) { + renderFilterLink = filter => { const title = FILTER_TITLES[filter] const { filter: selectedFilter, onShow } = this.props @@ -33,7 +41,7 @@ class Footer extends Component { ) } - renderClearButton() { + renderClearButton = () => { const { completedCount, onClearCompleted } = this.props if (completedCount > 0) { return ( @@ -61,13 +69,3 @@ class Footer extends Component { ) } } - -Footer.propTypes = { - completedCount: PropTypes.number.isRequired, - activeCount: PropTypes.number.isRequired, - filter: PropTypes.string.isRequired, - onClearCompleted: PropTypes.func.isRequired, - onShow: PropTypes.func.isRequired -} - -export default Footer diff --git a/examples/todomvc/src/components/Footer.spec.js b/examples/todomvc/src/components/Footer.spec.js index 4d46ac08cd..a0fa830e4c 100644 --- a/examples/todomvc/src/components/Footer.spec.js +++ b/examples/todomvc/src/components/Footer.spec.js @@ -3,7 +3,7 @@ import TestUtils from 'react-addons-test-utils' import Footer from './Footer' import { SHOW_ALL, SHOW_ACTIVE } from '../constants/TodoFilters' -function setup(propOverrides) { +const setup = propOverrides => { const props = Object.assign({ completedCount: 0, activeCount: 0, @@ -22,14 +22,15 @@ function setup(propOverrides) { } } -function getTextContent(elem) { +const getTextContent = elem => { const children = Array.isArray(elem.props.children) ? elem.props.children : [ elem.props.children ] - return children.reduce(function concatText(out, child) { + return children.reduce((out, child) => + // Concatenate the text // Children are either elements or text strings - return out + (child.props ? getTextContent(child) : child) - }, '') + out + (child.props ? getTextContent(child) : child) + , '') } describe('components', () => { diff --git a/examples/todomvc/src/components/Header.js b/examples/todomvc/src/components/Header.js index aeb8303819..996bbc818a 100644 --- a/examples/todomvc/src/components/Header.js +++ b/examples/todomvc/src/components/Header.js @@ -1,8 +1,12 @@ import React, { PropTypes, Component } from 'react' import TodoTextInput from './TodoTextInput' -class Header extends Component { - handleSave(text) { +export default class Header extends Component { + static propTypes = { + addTodo: PropTypes.func.isRequired + } + + handleSave = text => { if (text.length !== 0) { this.props.addTodo(text) } @@ -13,15 +17,9 @@ class Header extends Component {

todos

) } } - -Header.propTypes = { - addTodo: PropTypes.func.isRequired -} - -export default Header diff --git a/examples/todomvc/src/components/Header.spec.js b/examples/todomvc/src/components/Header.spec.js index eab9bd91f9..6b63df2a34 100644 --- a/examples/todomvc/src/components/Header.spec.js +++ b/examples/todomvc/src/components/Header.spec.js @@ -3,7 +3,7 @@ import TestUtils from 'react-addons-test-utils' import Header from './Header' import TodoTextInput from './TodoTextInput' -function setup() { +const setup = () => { const props = { addTodo: jest.fn() } diff --git a/examples/todomvc/src/components/MainSection.js b/examples/todomvc/src/components/MainSection.js index f5c2804010..92bc45b05b 100644 --- a/examples/todomvc/src/components/MainSection.js +++ b/examples/todomvc/src/components/MainSection.js @@ -9,21 +9,19 @@ const TODO_FILTERS = { [SHOW_COMPLETED]: todo => todo.completed } -class MainSection extends Component { - constructor(props, context) { - super(props, context) - this.state = { filter: SHOW_ALL } +export default class MainSection extends Component { + static propTypes = { + todos: PropTypes.array.isRequired, + actions: PropTypes.object.isRequired } - handleClearCompleted() { - this.props.actions.clearCompleted() - } + state = { filter: SHOW_ALL } - handleShow(filter) { - this.setState({ filter }) - } + handleClearCompleted = () => this.props.actions.clearCompleted() + + handleShow = filter => this.setState({ filter }) - renderToggleAll(completedCount) { + renderToggleAll = completedCount => { const { todos, actions } = this.props if (todos.length > 0) { return ( @@ -35,7 +33,7 @@ class MainSection extends Component { } } - renderFooter(completedCount) { + renderFooter = completedCount => { const { todos } = this.props const { filter } = this.state const activeCount = todos.length - completedCount @@ -74,10 +72,3 @@ class MainSection extends Component { ) } } - -MainSection.propTypes = { - todos: PropTypes.array.isRequired, - actions: PropTypes.object.isRequired -} - -export default MainSection diff --git a/examples/todomvc/src/components/MainSection.spec.js b/examples/todomvc/src/components/MainSection.spec.js index 245b4aeb2b..f5924548bb 100644 --- a/examples/todomvc/src/components/MainSection.spec.js +++ b/examples/todomvc/src/components/MainSection.spec.js @@ -5,7 +5,7 @@ import TodoItem from './TodoItem' import Footer from './Footer' import { SHOW_ALL, SHOW_COMPLETED } from '../constants/TodoFilters' -function setup(propOverrides) { +const setup = propOverrides => { const props = Object.assign({ todos: [ { diff --git a/examples/todomvc/src/components/TodoItem.js b/examples/todomvc/src/components/TodoItem.js index a892951842..6aa4a0adb8 100644 --- a/examples/todomvc/src/components/TodoItem.js +++ b/examples/todomvc/src/components/TodoItem.js @@ -2,19 +2,21 @@ import React, { Component, PropTypes } from 'react' import classnames from 'classnames' import TodoTextInput from './TodoTextInput' -class TodoItem extends Component { - constructor(props, context) { - super(props, context) - this.state = { - editing: false - } +export default class TodoItem extends Component { + static propTypes = { + todo: PropTypes.object.isRequired, + editTodo: PropTypes.func.isRequired, + deleteTodo: PropTypes.func.isRequired, + completeTodo: PropTypes.func.isRequired } - handleDoubleClick() { - this.setState({ editing: true }) + state = { + editing: false } - handleSave(id, text) { + handleDoubleClick = () => this.setState({ editing: true }) + + handleSave = (id, text) => { if (text.length === 0) { this.props.deleteTodo(id) } else { @@ -40,7 +42,7 @@ class TodoItem extends Component { type="checkbox" checked={todo.completed} onChange={() => completeTodo(todo.id)} /> -