Shopping cart example updates

examples/shopping-cart/actions/index.js

@@ -1,37 +1,37 @@
 import shop from '../api/shop'
 import * as types from '../constants/ActionTypes'
 
-function receiveProducts(products) {
+const receiveProducts = (products) => {
   return {
     type: types.RECEIVE_PRODUCTS,
     products: products
   }
 }
 
-export function getAllProducts() {
+export const getAllProducts = () => {
   return dispatch => {
     shop.getProducts(products => {
       dispatch(receiveProducts(products))
     })
   }
 }
 
-function addToCartUnsafe(productId) {
+const addToCartUnsafe = (productId) => {
   return {
     type: types.ADD_TO_CART,
     productId
   }
 }
 
-export function addToCart(productId) {
+export const addToCart = (productId) => {
   return (dispatch, getState) => {
     if (getState().products.byId[productId].inventory > 0) {
       dispatch(addToCartUnsafe(productId))
     }
   }
 }
 
-export function checkout(products) {
+export const checkout = (products) => {
   return (dispatch, getState) => {
     const cart = getState().cart
 

examples/shopping-cart/components/Cart.js

@@ -1,37 +1,39 @@
 import React, { Component, 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
+  products: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    inventory: PropTypes.number.isRequired
+  }).isRequired).isRequired,
+  total: PropTypes.string.isRequired,
+  onCheckoutClicked: PropTypes.func.isRequired
 }
+
+export default Cart

examples/shopping-cart/components/Product.js

@@ -1,14 +1,13 @@
 import React, { Component, 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
+  price: PropTypes.number.isRequired,
+  quantity: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired
 }
+
+export default Product

examples/shopping-cart/components/ProductItem.js

@@ -1,25 +1,19 @@
 import React, { Component, 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 +23,5 @@ ProductItem.propTypes = {
   }).isRequired,
   onAddToCartClicked: PropTypes.func.isRequired
 }
+
+export default ProductItem

examples/shopping-cart/components/ProductsList.js

@@ -1,17 +1,15 @@
 import React, { Component, 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/containers/App.js

@@ -2,16 +2,14 @@ import React, { Component } 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/containers/CartContainer.js

@@ -4,18 +4,12 @@ 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()} />
-    )
-  }
-}
+let CartContainer = ({ products, total, checkout }) => (
+	<Cart
+		products={products}
+		total={total}
+		onCheckoutClicked={checkout} />
+)
 
 CartContainer.propTypes = {
   products: PropTypes.arrayOf(PropTypes.shape({
@@ -35,7 +29,9 @@ const mapStateToProps = (state) => {
   }
 }
 
-export default connect(
+CartContainer = connect(
   mapStateToProps,
   { checkout }
 )(CartContainer)
+
+export default CartContainer

examples/shopping-cart/containers/ProductsContainer.js

@@ -5,21 +5,16 @@ 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>
-    )
-  }
-}
+let 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,13 +26,15 @@ ProductsContainer.propTypes = {
   addToCart: PropTypes.func.isRequired
 }
 
-function mapStateToProps(state) {
+const mapStateToProps = (state) => {
   return {
     products: getVisibleProducts(state.products)
   }
 }
 
-export default connect(
+ProductsContainer = connect(
   mapStateToProps,
   { addToCart }
 )(ProductsContainer)
+
+export default ProductsContainer

examples/shopping-cart/index.js

@@ -1,4 +1,3 @@
-import 'babel-polyfill'
 import React from 'react'
 import { render } from 'react-dom'
 import { createStore, applyMiddleware } from 'redux'

examples/shopping-cart/reducers/cart.js

@@ -9,7 +9,7 @@ const initialState = {
   quantityById: {}
 }
 
-function addedIds(state = initialState.addedIds, action) {
+const addedIds = (state = initialState.addedIds, action) => {
   switch (action.type) {
     case ADD_TO_CART:
       if (state.indexOf(action.productId) !== -1) {
@@ -21,7 +21,7 @@ function addedIds(state = initialState.addedIds, action) {
   }
 }
 
-function quantityById(state = initialState.quantityById, action) {
+const quantityById = (state = initialState.quantityById, action) => {
   switch (action.type) {
     case ADD_TO_CART:
       const { productId } = action
@@ -33,7 +33,7 @@ function quantityById(state = initialState.quantityById, action) {
   }
 }
 
-export default function cart(state = initialState, action) {
+const cart = (state = initialState, action) => {
   switch (action.type) {
     case CHECKOUT_REQUEST:
       return initialState
@@ -47,10 +47,12 @@ export default function cart(state = initialState, action) {
   }
 }
 
-export function getQuantity(state, productId) {
-  return state.quantityById[productId] || 0
-}
+export default cart
 
-export function getAddedIds(state) {
-  return state.addedIds
-}
+export const getQuantity = (state, productId) => (
+  state.quantityById[productId] || 0
+)
+
+export const getAddedIds = (state) => (
+  state.addedIds
+)