Skip to content

Commit 63ea618

Browse files
ellbeeellbee
authored
Merge pull request #1950 from ChrisJamesC/cc-todomvc
Use more ES6 syntaxes in the todomvc example
2 parents d15d8e1 + 27d9a24 commit 63ea618

File tree

12 files changed

+83
-133
lines changed

12 files changed

+83
-133
lines changed

‎examples/todomvc/src/actions/index.js‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
import * as types from '../constants/ActionTypes'
22

3-
export function addTodo(text) {
4-
return { type: types.ADD_TODO, text }
5-
}
3+
export const addTodo = text => ({ type: types.ADD_TODO, text })
64

7-
export function deleteTodo(id) {
8-
return { type: types.DELETE_TODO, id }
9-
}
5+
export const deleteTodo = id => ({ type: types.DELETE_TODO, id })
106

11-
export function editTodo(id, text) {
12-
return { type: types.EDIT_TODO, id, text }
13-
}
7+
export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text })
148

15-
export function completeTodo(id) {
16-
return { type: types.COMPLETE_TODO, id }
17-
}
9+
export const completeTodo = id => ({ type: types.COMPLETE_TODO, id })
1810

19-
export function completeAll() {
20-
return { type: types.COMPLETE_ALL }
21-
}
11+
export const completeAll = () => ({ type: types.COMPLETE_ALL })
2212

23-
export function clearCompleted() {
24-
return { type: types.CLEAR_COMPLETED }
25-
}
13+
export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED })

‎examples/todomvc/src/components/Footer.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,16 @@ const FILTER_TITLES = {
88
[SHOW_COMPLETED]: 'Completed'
99
}
1010

11-
class Footer extends Component {
12-
renderTodoCount() {
11+
export default class Footer extends Component {
12+
static propTypes = {
13+
completedCount: PropTypes.number.isRequired,
14+
activeCount: PropTypes.number.isRequired,
15+
filter: PropTypes.string.isRequired,
16+
onClearCompleted: PropTypes.func.isRequired,
17+
onShow: PropTypes.func.isRequired
18+
}
19+
20+
renderTodoCount = () => {
1321
const { activeCount } = this.props
1422
const itemWord = activeCount === 1 ? 'item' : 'items'
1523

@@ -20,7 +28,7 @@ class Footer extends Component {
2028
)
2129
}
2230

23-
renderFilterLink(filter) {
31+
renderFilterLink = filter => {
2432
const title = FILTER_TITLES[filter]
2533
const { filter: selectedFilter, onShow } = this.props
2634

@@ -33,7 +41,7 @@ class Footer extends Component {
3341
)
3442
}
3543

36-
renderClearButton() {
44+
renderClearButton = () => {
3745
const { completedCount, onClearCompleted } = this.props
3846
if (completedCount > 0) {
3947
return (
@@ -61,13 +69,3 @@ class Footer extends Component {
6169
)
6270
}
6371
}
64-
65-
Footer.propTypes = {
66-
completedCount: PropTypes.number.isRequired,
67-
activeCount: PropTypes.number.isRequired,
68-
filter: PropTypes.string.isRequired,
69-
onClearCompleted: PropTypes.func.isRequired,
70-
onShow: PropTypes.func.isRequired
71-
}
72-
73-
export default Footer

‎examples/todomvc/src/components/Footer.spec.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import TestUtils from 'react-addons-test-utils'
33
import Footer from './Footer'
44
import { SHOW_ALL, SHOW_ACTIVE } from '../constants/TodoFilters'
55

6-
function setup(propOverrides) {
6+
const setup = propOverrides => {
77
const props = Object.assign({
88
completedCount: 0,
99
activeCount: 0,
@@ -22,14 +22,15 @@ function setup(propOverrides) {
2222
}
2323
}
2424

25-
function getTextContent(elem) {
25+
const getTextContent = elem => {
2626
const children = Array.isArray(elem.props.children) ?
2727
elem.props.children : [ elem.props.children ]
2828

29-
return children.reduce(function concatText(out, child) {
29+
return children.reduce((out, child) =>
30+
// Concatenate the text
3031
// Children are either elements or text strings
31-
return out + (child.props ? getTextContent(child) : child)
32-
}, '')
32+
out + (child.props ? getTextContent(child) : child)
33+
, '')
3334
}
3435

3536
describe('components', () => {

‎examples/todomvc/src/components/Header.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import React, { PropTypes, Component } from 'react'
22
import TodoTextInput from './TodoTextInput'
33

4-
class Header extends Component {
5-
handleSave(text) {
4+
export default class Header extends Component {
5+
static propTypes = {
6+
addTodo: PropTypes.func.isRequired
7+
}
8+
9+
handleSave = text => {
610
if (text.length !== 0) {
711
this.props.addTodo(text)
812
}
@@ -13,15 +17,9 @@ class Header extends Component {
1317
<header className="header">
1418
<h1>todos</h1>
1519
<TodoTextInput newTodo
16-
onSave={this.handleSave.bind(this)}
20+
onSave={this.handleSave}
1721
placeholder="What needs to be done?" />
1822
</header>
1923
)
2024
}
2125
}
22-
23-
Header.propTypes = {
24-
addTodo: PropTypes.func.isRequired
25-
}
26-
27-
export default Header

‎examples/todomvc/src/components/Header.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import TestUtils from 'react-addons-test-utils'
33
import Header from './Header'
44
import TodoTextInput from './TodoTextInput'
55

6-
function setup() {
6+
const setup = () => {
77
const props = {
88
addTodo: jest.fn()
99
}

‎examples/todomvc/src/components/MainSection.js‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,19 @@ const TODO_FILTERS = {
99
[SHOW_COMPLETED]: todo => todo.completed
1010
}
1111

12-
class MainSection extends Component {
13-
constructor(props, context) {
14-
super(props, context)
15-
this.state = { filter: SHOW_ALL }
12+
export default class MainSection extends Component {
13+
static propTypes = {
14+
todos: PropTypes.array.isRequired,
15+
actions: PropTypes.object.isRequired
1616
}
1717

18-
handleClearCompleted() {
19-
this.props.actions.clearCompleted()
20-
}
18+
state = { filter: SHOW_ALL }
2119

22-
handleShow(filter) {
23-
this.setState({ filter })
24-
}
20+
handleClearCompleted = () => this.props.actions.clearCompleted()
21+
22+
handleShow = filter => this.setState({ filter })
2523

26-
renderToggleAll(completedCount) {
24+
renderToggleAll = completedCount => {
2725
const { todos, actions } = this.props
2826
if (todos.length > 0) {
2927
return (
@@ -35,7 +33,7 @@ class MainSection extends Component {
3533
}
3634
}
3735

38-
renderFooter(completedCount) {
36+
renderFooter = completedCount => {
3937
const { todos } = this.props
4038
const { filter } = this.state
4139
const activeCount = todos.length - completedCount
@@ -74,10 +72,3 @@ class MainSection extends Component {
7472
)
7573
}
7674
}
77-
78-
MainSection.propTypes = {
79-
todos: PropTypes.array.isRequired,
80-
actions: PropTypes.object.isRequired
81-
}
82-
83-
export default MainSection

‎examples/todomvc/src/components/MainSection.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import TodoItem from './TodoItem'
55
import Footer from './Footer'
66
import { SHOW_ALL, SHOW_COMPLETED } from '../constants/TodoFilters'
77

8-
function setup(propOverrides) {
8+
const setup = propOverrides => {
99
const props = Object.assign({
1010
todos: [
1111
{

‎examples/todomvc/src/components/TodoItem.js‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@ import React, { Component, PropTypes } from 'react'
22
import classnames from 'classnames'
33
import TodoTextInput from './TodoTextInput'
44

5-
class TodoItem extends Component {
6-
constructor(props, context) {
7-
super(props, context)
8-
this.state = {
9-
editing: false
10-
}
5+
export default class TodoItem extends Component {
6+
static propTypes = {
7+
todo: PropTypes.object.isRequired,
8+
editTodo: PropTypes.func.isRequired,
9+
deleteTodo: PropTypes.func.isRequired,
10+
completeTodo: PropTypes.func.isRequired
1111
}
1212

13-
handleDoubleClick() {
14-
this.setState({ editing: true })
13+
state = {
14+
editing: false
1515
}
1616

17-
handleSave(id, text) {
17+
handleDoubleClick = () => this.setState({ editing: true })
18+
19+
handleSave = (id, text) => {
1820
if (text.length === 0) {
1921
this.props.deleteTodo(id)
2022
} else {
@@ -40,7 +42,7 @@ class TodoItem extends Component {
4042
type="checkbox"
4143
checked={todo.completed}
4244
onChange={() => completeTodo(todo.id)} />
43-
<label onDoubleClick={this.handleDoubleClick.bind(this)}>
45+
<label onDoubleClick={this.handleDoubleClick}>
4446
{todo.text}
4547
</label>
4648
<button className="destroy"
@@ -59,12 +61,3 @@ class TodoItem extends Component {
5961
)
6062
}
6163
}
62-
63-
TodoItem.propTypes = {
64-
todo: PropTypes.object.isRequired,
65-
editTodo: PropTypes.func.isRequired,
66-
deleteTodo: PropTypes.func.isRequired,
67-
completeTodo: PropTypes.func.isRequired
68-
}
69-
70-
export default TodoItem

‎examples/todomvc/src/components/TodoItem.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import TestUtils from 'react-addons-test-utils'
33
import TodoItem from './TodoItem'
44
import TodoTextInput from './TodoTextInput'
55

6-
function setup( editing = false ) {
6+
const setup = ( editing = false ) => {
77
const props = {
88
todo: {
99
id: 0,

‎examples/todomvc/src/components/TodoTextInput.js‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import React, { Component, PropTypes } from 'react'
22
import classnames from 'classnames'
33

4-
class TodoTextInput extends Component {
5-
constructor(props, context) {
6-
super(props, context)
7-
this.state = {
8-
text: this.props.text || ''
9-
}
4+
export default class TodoTextInput extends Component {
5+
static propTypes = {
6+
onSave: PropTypes.func.isRequired,
7+
text: PropTypes.string,
8+
placeholder: PropTypes.string,
9+
editing: PropTypes.bool,
10+
newTodo: PropTypes.bool
11+
}
12+
13+
state = {
14+
text: this.props.text || ''
1015
}
1116

12-
handleSubmit(e) {
17+
handleSubmit = e => {
1318
const text = e.target.value.trim()
1419
if (e.which === 13) {
1520
this.props.onSave(text)
@@ -19,11 +24,10 @@ class TodoTextInput extends Component {
1924
}
2025
}
2126

22-
handleChange(e) {
23-
this.setState({ text: e.target.value })
24-
}
27+
handleChange = e => this.setState({ text: e.target.value })
2528

26-
handleBlur(e) {
29+
30+
handleBlur = e => {
2731
if (!this.props.newTodo) {
2832
this.props.onSave(e.target.value)
2933
}
@@ -40,19 +44,9 @@ class TodoTextInput extends Component {
4044
placeholder={this.props.placeholder}
4145
autoFocus="true"
4246
value={this.state.text}
43-
onBlur={this.handleBlur.bind(this)}
44-
onChange={this.handleChange.bind(this)}
45-
onKeyDown={this.handleSubmit.bind(this)} />
47+
onBlur={this.handleBlur}
48+
onChange={this.handleChange}
49+
onKeyDown={this.handleSubmit} />
4650
)
4751
}
4852
}
49-
50-
TodoTextInput.propTypes = {
51-
onSave: PropTypes.func.isRequired,
52-
text: PropTypes.string,
53-
placeholder: PropTypes.string,
54-
editing: PropTypes.bool,
55-
newTodo: PropTypes.bool
56-
}
57-
58-
export default TodoTextInput

0 commit comments

Comments
 (0)