Merge pull request #1947 from ChrisJamesC/cc-shopping-cart

Use more ES6 syntaxes in the shopping cart example

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

@@ -1,50 +1,38 @@
 import shop from '../api/shop'
 import * as types from '../constants/ActionTypes'
 
-function receiveProducts(products) {
-  return {
-    type: types.RECEIVE_PRODUCTS,
-    products: products
-  }
-}
+const receiveProducts = products => ({
+  type: types.RECEIVE_PRODUCTS,
+  products: products
+})
 
-export function getAllProducts() {
-  return dispatch => {
-    shop.getProducts(products => {
-      dispatch(receiveProducts(products))
-    })
-  }
-}
+export const getAllProducts = () => dispatch => shop.getProducts(products => {
+  dispatch(receiveProducts(products))
+})
 
-function addToCartUnsafe(productId) {
-  return {
-    type: types.ADD_TO_CART,
-    productId
-  }
-}
+const addToCartUnsafe = productId => ({
+  type: types.ADD_TO_CART,
+  productId
+})
 
-export function addToCart(productId) {
-  return (dispatch, getState) => {
-    if (getState().products.byId[productId].inventory > 0) {
-      dispatch(addToCartUnsafe(productId))
-    }
+export const addToCart = productId => (dispatch, getState) => {
+  if (getState().products.byId[productId].inventory > 0) {
+    dispatch(addToCartUnsafe(productId))
   }
 }
 
-export function checkout(products) {
-  return (dispatch, getState) => {
-    const cart = getState().cart
+export const checkout = products => (dispatch, getState) => {
+  const { cart } = getState()
 
+  dispatch({
+    type: types.CHECKOUT_REQUEST
+  })
+  shop.buyProducts(products, () => {
     dispatch({
-      type: types.CHECKOUT_REQUEST
+      type: types.CHECKOUT_SUCCESS,
+      cart
     })
-    shop.buyProducts(products, () => {
-      dispatch({
-        type: types.CHECKOUT_SUCCESS,
-        cart
-      })
-      // Replace the line above with line below to rollback on failure:
-      // dispatch({ type: types.CHECKOUT_FAILURE, cart })
-    })
-  }
+    // Replace the line above with line below to rollback on failure:
+    // dispatch({ type: types.CHECKOUT_FAILURE, cart })
+  })
 }

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

@@ -6,11 +6,6 @@ import _products from './products.json'
 const TIMEOUT = 100
 
 export default {
-  getProducts(cb, timeout) {
-    setTimeout(() => cb(_products), timeout || TIMEOUT)
-  },
-
-  buyProducts(payload, cb, timeout) {
-    setTimeout(() => cb(), timeout || TIMEOUT)
-  }
+  getProducts: (cb, timeout) => setTimeout(() => cb(_products), timeout || TIMEOUT),
+  buyProducts: (payload, cb, timeout) => setTimeout(() => cb(), timeout || TIMEOUT)
 }

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

@@ -1,37 +1,33 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import Product from './Product'
 
-export default class Cart extends Component {
-  render() {
-    const { products, total, onCheckoutClicked } = this.props
+const Cart  = ({ products, total, onCheckoutClicked }) => {
+  const hasProducts = products.length > 0
+  const nodes = !hasProducts ?
+    <em>Please add some products to cart.</em> :
+    products.map(product =>
+      <Product
+        title={product.title}
+        price={product.price}
+        quantity={product.quantity}
+        key={product.id}/>
+  )
 
-    const hasProducts = products.length > 0
-    const nodes = !hasProducts ?
-      <em>Please add some products to cart.</em> :
-      products.map(product =>
-        <Product
-          title={product.title}
-          price={product.price}
-          quantity={product.quantity}
-          key={product.id}/>
-    )
-
-    return (
-      <div>
-        <h3>Your Cart</h3>
-        <div>{nodes}</div>
-        <p>Total: &#36;{total}</p>
-        <button onClick={onCheckoutClicked}
-          disabled={hasProducts ? '' : 'disabled'}>
-          Checkout
-        </button>
-      </div>
-    )
-  }
+  return <div>
+    <h3>Your Cart</h3>
+    <div>{nodes}</div>
+    <p>Total: &#36;{total}</p>
+    <button onClick={onCheckoutClicked}
+      disabled={hasProducts ? '' : 'disabled'}>
+      Checkout
+    </button>
+  </div>
 }
 
 Cart.propTypes = {
   products: PropTypes.array,
   total: PropTypes.string,
   onCheckoutClicked: PropTypes.func
 }
+
+export default Cart

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

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
 import Cart from './Cart'
 import Product from './Product'
 
-function setup(total, products = []) {
+const setup = (total, products = []) => {
   const actions = {
     onCheckoutClicked: jest.fn()
   }

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

@@ -1,14 +1,12 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 
-export default class Product extends Component {
-  render() {
-    const { price, quantity, title } = this.props
-    return <div> {title} - &#36;{price} {quantity ? `x ${quantity}` : null} </div>
-  }
-}
+const Product = ({ price, quantity, title }) =>
+  <div> {title} - &#36;{price} {quantity ? `x ${quantity}` : null} </div>
 
 Product.propTypes = {
   price: PropTypes.number,
   quantity: PropTypes.number,
   title: PropTypes.string
 }
+
+export default Product

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import Product from './Product'
 
-function setup(props) {
+const setup = props => {
   const component = shallow(
     <Product {...props} />
   )

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

@@ -1,25 +1,17 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import Product from './Product'
 
-export default class ProductItem extends Component {
-  render() {
-    const { product } = this.props
-
-    return (
-      <div
-        style={{ marginBottom: 20 }}>
-        <Product
-          title={product.title}
-          price={product.price} />
-        <button
-          onClick={this.props.onAddToCartClicked}
-          disabled={product.inventory > 0 ? '' : 'disabled'}>
-          {product.inventory > 0 ? 'Add to cart' : 'Sold Out'}
-        </button>
-      </div>
-    )
-  }
-}
+const ProductItem = ({ product, onAddToCartClicked }) => <div
+  style={{ marginBottom: 20 }}>
+  <Product
+    title={product.title}
+    price={product.price} />
+  <button
+    onClick={onAddToCartClicked}
+    disabled={product.inventory > 0 ? '' : 'disabled'}>
+    {product.inventory > 0 ? 'Add to cart' : 'Sold Out'}
+  </button>
+</div>
 
 ProductItem.propTypes = {
   product: PropTypes.shape({
@@ -29,3 +21,5 @@ ProductItem.propTypes = {
   }).isRequired,
   onAddToCartClicked: PropTypes.func.isRequired
 }
+
+export default ProductItem

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

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
 import Product from './Product'
 import ProductItem from './ProductItem'
 
-function setup(product) {
+const setup = product => {
   const actions = {
     onAddToCartClicked: jest.fn()
   }

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

@@ -1,17 +1,13 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 
-export default class ProductsList extends Component {
-  render() {
-    return (
-      <div>
-        <h3>{this.props.title}</h3>
-        <div>{this.props.children}</div>
-      </div>
-    )
-  }
-}
+const ProductsList = ({title, children}) => <div>
+  <h3>{title}</h3>
+  <div>{children}</div>
+</div>
 
 ProductsList.propTypes = {
   children: PropTypes.node,
   title: PropTypes.string.isRequired
 }
+
+export default ProductsList

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import ProductsList from './ProductsList'
 
-function setup(props) {
+const setup = props => {
   const component = shallow(
     <ProductsList title={props.title}>{props.children}</ProductsList>
   )

examples/shopping-cart/src/containers/App.js

@@ -1,17 +1,13 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ProductsContainer from './ProductsContainer'
 import CartContainer from './CartContainer'
 
-export default class App extends Component {
-  render() {
-    return (
-      <div>
-        <h2>Shopping Cart Example</h2>
-        <hr/>
-        <ProductsContainer />
-        <hr/>
-        <CartContainer />
-      </div>
-    )
-  }
-}
+const App = () => <div>
+  <h2>Shopping Cart Example</h2>
+  <hr/>
+  <ProductsContainer />
+  <hr/>
+  <CartContainer />
+</div>
+
+export default App

examples/shopping-cart/src/containers/CartContainer.js

@@ -1,21 +1,13 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { checkout } from '../actions'
 import { getTotal, getCartProducts } from '../reducers'
 import Cart from '../components/Cart'
 
-class CartContainer extends Component {
-  render() {
-    const { products, total } = this.props
-
-    return (
-      <Cart
-        products={products}
-        total={total}
-        onCheckoutClicked={() => this.props.checkout()} />
-    )
-  }
-}
+const CartContainer = ({ products, total, checkout }) => <Cart
+  products={products}
+  total={total}
+  onCheckoutClicked={() => checkout(products)} />
 
 CartContainer.propTypes = {
   products: PropTypes.arrayOf(PropTypes.shape({
@@ -28,12 +20,10 @@ CartContainer.propTypes = {
   checkout: PropTypes.func.isRequired
 }
 
-const mapStateToProps = (state) => {
-  return {
-    products: getCartProducts(state),
-    total: getTotal(state)
-  }
-}
+const mapStateToProps = (state) => ({
+  products: getCartProducts(state),
+  total: getTotal(state)
+})
 
 export default connect(
   mapStateToProps,

examples/shopping-cart/src/containers/ProductsContainer.js

@@ -1,25 +1,18 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { addToCart } from '../actions'
 import { getVisibleProducts } from '../reducers/products'
 import ProductItem from '../components/ProductItem'
 import ProductsList from '../components/ProductsList'
 
-class ProductsContainer extends Component {
-  render() {
-    const { products } = this.props
-    return (
-      <ProductsList title="Products">
-        {products.map(product =>
-          <ProductItem
-            key={product.id}
-            product={product}
-            onAddToCartClicked={() => this.props.addToCart(product.id)} />
-        )}
-      </ProductsList>
-    )
-  }
-}
+const ProductsContainer = ({ products, addToCart }) => <ProductsList title="Products">
+  {products.map(product =>
+    <ProductItem
+      key={product.id}
+      product={product}
+      onAddToCartClicked={() => addToCart(product.id)} />
+  )}
+</ProductsList>
 
 ProductsContainer.propTypes = {
   products: PropTypes.arrayOf(PropTypes.shape({
@@ -31,11 +24,9 @@ ProductsContainer.propTypes = {
   addToCart: PropTypes.func.isRequired
 }
 
-function mapStateToProps(state) {
-  return {
-    products: getVisibleProducts(state.products)
-  }
-}
+const mapStateToProps = state => ({
+  products: getVisibleProducts(state.products)
+})
 
 export default connect(
   mapStateToProps,