Skip to content

Commit d15d8e1

Browse files
ellbeeellbee
authored
Merge pull request reduxjs#1947 from ChrisJamesC/cc-shopping-cart
Use more ES6 syntaxes in the shopping cart example
2 parents 480b764 + c813282 commit d15d8e1

File tree

16 files changed

+136
-203
lines changed

16 files changed

+136
-203
lines changed

‎examples/shopping-cart/src/actions/index.js‎

Lines changed: 25 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,38 @@
11
import shop from '../api/shop'
22
import * as types from '../constants/ActionTypes'
33

4-
function receiveProducts(products) {
5-
return {
6-
type: types.RECEIVE_PRODUCTS,
7-
products: products
8-
}
9-
}
4+
const receiveProducts = products => ({
5+
type: types.RECEIVE_PRODUCTS,
6+
products: products
7+
})
108

11-
export function getAllProducts() {
12-
return dispatch => {
13-
shop.getProducts(products => {
14-
dispatch(receiveProducts(products))
15-
})
16-
}
17-
}
9+
export const getAllProducts = () => dispatch => shop.getProducts(products => {
10+
dispatch(receiveProducts(products))
11+
})
1812

19-
function addToCartUnsafe(productId) {
20-
return {
21-
type: types.ADD_TO_CART,
22-
productId
23-
}
24-
}
13+
const addToCartUnsafe = productId => ({
14+
type: types.ADD_TO_CART,
15+
productId
16+
})
2517

26-
export function addToCart(productId) {
27-
return (dispatch, getState) => {
28-
if (getState().products.byId[productId].inventory > 0) {
29-
dispatch(addToCartUnsafe(productId))
30-
}
18+
export const addToCart = productId => (dispatch, getState) => {
19+
if (getState().products.byId[productId].inventory > 0) {
20+
dispatch(addToCartUnsafe(productId))
3121
}
3222
}
3323

34-
export function checkout(products) {
35-
return (dispatch, getState) => {
36-
const cart = getState().cart
24+
export const checkout = products => (dispatch, getState) => {
25+
const { cart } = getState()
3726

27+
dispatch({
28+
type: types.CHECKOUT_REQUEST
29+
})
30+
shop.buyProducts(products, () => {
3831
dispatch({
39-
type: types.CHECKOUT_REQUEST
32+
type: types.CHECKOUT_SUCCESS,
33+
cart
4034
})
41-
shop.buyProducts(products, () => {
42-
dispatch({
43-
type: types.CHECKOUT_SUCCESS,
44-
cart
45-
})
46-
// Replace the line above with line below to rollback on failure:
47-
// dispatch({ type: types.CHECKOUT_FAILURE, cart })
48-
})
49-
}
35+
// Replace the line above with line below to rollback on failure:
36+
// dispatch({ type: types.CHECKOUT_FAILURE, cart })
37+
})
5038
}

‎examples/shopping-cart/src/api/shop.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ import _products from './products.json'
66
const TIMEOUT = 100
77

88
export default {
9-
getProducts(cb, timeout) {
10-
setTimeout(() => cb(_products), timeout || TIMEOUT)
11-
},
12-
13-
buyProducts(payload, cb, timeout) {
14-
setTimeout(() => cb(), timeout || TIMEOUT)
15-
}
9+
getProducts: (cb, timeout) => setTimeout(() => cb(_products), timeout || TIMEOUT),
10+
buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT)
1611
}

‎examples/shopping-cart/src/components/Cart.js‎

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,33 @@
1-
import React, { Component, PropTypes } from 'react'
1+
import React, { PropTypes } from 'react'
22
import Product from './Product'
33

4-
export default class Cart extends Component {
5-
render() {
6-
const { products, total, onCheckoutClicked } = this.props
4+
const Cart = ({ products, total, onCheckoutClicked }) => {
5+
const hasProducts = products.length > 0
6+
const nodes = !hasProducts ?
7+
<em>Please add some products to cart.</em> :
8+
products.map(product =>
9+
<Product
10+
title={product.title}
11+
price={product.price}
12+
quantity={product.quantity}
13+
key={product.id}/>
14+
)
715

8-
const hasProducts = products.length > 0
9-
const nodes = !hasProducts ?
10-
<em>Please add some products to cart.</em> :
11-
products.map(product =>
12-
<Product
13-
title={product.title}
14-
price={product.price}
15-
quantity={product.quantity}
16-
key={product.id}/>
17-
)
18-
19-
return (
20-
<div>
21-
<h3>Your Cart</h3>
22-
<div>{nodes}</div>
23-
<p>Total: &#36;{total}</p>
24-
<button onClick={onCheckoutClicked}
25-
disabled={hasProducts ? '' : 'disabled'}>
26-
Checkout
27-
</button>
28-
</div>
29-
)
30-
}
16+
return <div>
17+
<h3>Your Cart</h3>
18+
<div>{nodes}</div>
19+
<p>Total: &#36;{total}</p>
20+
<button onClick={onCheckoutClicked}
21+
disabled={hasProducts ? '' : 'disabled'}>
22+
Checkout
23+
</button>
24+
</div>
3125
}
3226

3327
Cart.propTypes = {
3428
products: PropTypes.array,
3529
total: PropTypes.string,
3630
onCheckoutClicked: PropTypes.func
3731
}
32+
33+
export default Cart

‎examples/shopping-cart/src/components/Cart.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
33
import Cart from './Cart'
44
import Product from './Product'
55

6-
function setup(total, products = []) {
6+
const setup = (total, products = []) => {
77
const actions = {
88
onCheckoutClicked: jest.fn()
99
}

‎examples/shopping-cart/src/components/Product.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import React, { Component, PropTypes } from 'react'
1+
import React, { PropTypes } from 'react'
22

3-
export default class Product extends Component {
4-
render() {
5-
const { price, quantity, title } = this.props
6-
return <div> {title} - &#36;{price} {quantity ? `x ${quantity}` : null} </div>
7-
}
8-
}
3+
const Product = ({ price, quantity, title }) =>
4+
<div> {title} - &#36;{price} {quantity ? `x ${quantity}` : null} </div>
95

106
Product.propTypes = {
117
price: PropTypes.number,
128
quantity: PropTypes.number,
139
title: PropTypes.string
1410
}
11+
12+
export default Product

‎examples/shopping-cart/src/components/Product.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import { shallow } from 'enzyme'
33
import Product from './Product'
44

5-
function setup(props) {
5+
const setup = props => {
66
const component = shallow(
77
<Product {...props} />
88
)

‎examples/shopping-cart/src/components/ProductItem.js‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
1-
import React, { Component, PropTypes } from 'react'
1+
import React, { PropTypes } from 'react'
22
import Product from './Product'
33

4-
export default class ProductItem extends Component {
5-
render() {
6-
const { product } = this.props
7-
8-
return (
9-
<div
10-
style={{ marginBottom: 20 }}>
11-
<Product
12-
title={product.title}
13-
price={product.price} />
14-
<button
15-
onClick={this.props.onAddToCartClicked}
16-
disabled={product.inventory > 0 ? '' : 'disabled'}>
17-
{product.inventory > 0 ? 'Add to cart' : 'Sold Out'}
18-
</button>
19-
</div>
20-
)
21-
}
22-
}
4+
const ProductItem = ({ product, onAddToCartClicked }) => <div
5+
style={{ marginBottom: 20 }}>
6+
<Product
7+
title={product.title}
8+
price={product.price} />
9+
<button
10+
onClick={onAddToCartClicked}
11+
disabled={product.inventory > 0 ? '' : 'disabled'}>
12+
{product.inventory > 0 ? 'Add to cart' : 'Sold Out'}
13+
</button>
14+
</div>
2315

2416
ProductItem.propTypes = {
2517
product: PropTypes.shape({
@@ -29,3 +21,5 @@ ProductItem.propTypes = {
2921
}).isRequired,
3022
onAddToCartClicked: PropTypes.func.isRequired
3123
}
24+
25+
export default ProductItem

‎examples/shopping-cart/src/components/ProductItem.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
33
import Product from './Product'
44
import ProductItem from './ProductItem'
55

6-
function setup(product) {
6+
const setup = product => {
77
const actions = {
88
onAddToCartClicked: jest.fn()
99
}

‎examples/shopping-cart/src/components/ProductsList.js‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1-
import React, { Component, PropTypes } from 'react'
1+
import React, { PropTypes } from 'react'
22

3-
export default class ProductsList extends Component {
4-
render() {
5-
return (
6-
<div>
7-
<h3>{this.props.title}</h3>
8-
<div>{this.props.children}</div>
9-
</div>
10-
)
11-
}
12-
}
3+
const ProductsList = ({title, children}) => <div>
4+
<h3>{title}</h3>
5+
<div>{children}</div>
6+
</div>
137

148
ProductsList.propTypes = {
159
children: PropTypes.node,
1610
title: PropTypes.string.isRequired
1711
}
12+
13+
export default ProductsList

‎examples/shopping-cart/src/components/ProductsList.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import { shallow } from 'enzyme'
33
import ProductsList from './ProductsList'
44

5-
function setup(props) {
5+
const setup = props => {
66
const component = shallow(
77
<ProductsList title={props.title}>{props.children}</ProductsList>
88
)

0 commit comments

Comments
 (0)