Finish Refactorable section

Author: ryanmcdermott

README.md

@@ -837,14 +837,236 @@ We will centralize our state management using Redux. If you haven't used Redux b
 
 Let's see what this more refactorable code looks like:
 
+```javascript
+// src/3-refactorable/good/containers/inventory.js
+import React from 'react';
+import { connect } from 'react-redux';
+import { addToCartAction } from '../actions';
+
+import CurrencyConverter from '../lib/currency-converter';
+import Inventory from '../components/inventory';
+
+const InventoryContainer = (
+  {
+    inventory,
+    currencies,
+    localCurrency,
+    addToCart,
+  },
+) => (
+  <Inventory
+    currencyConverter={new CurrencyConverter(currencies)}
+    inventory={inventory}
+    localCurrency={localCurrency}
+    addToCart={productId => addToCart(productId)}
+  />
+);
+
+InventoryContainer.propTypes = {
+  currencies: React.PropTypes.object.isRequired,
+  inventory: React.PropTypes.object.isRequired,
+  localCurrency: React.PropTypes.string.isRequired,
+  addToCart: React.PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  inventory: state.inventory,
+  currencies: state.currencies,
+  localCurrency: state.localCurrency,
+});
+
+export default connect(mapStateToProps, {
+  addToCart: addToCartAction,
+})(InventoryContainer);
+
+```
+
+```javascript
+// src/3-refactorable/good/containers/cart.js
+import React from 'react';
+import { connect } from 'react-redux';
+
+import CurrencyConverter from '../lib/currency-converter';
+import Cart from '../components/cart';
+
+const CartContainer = ({ cart, inventory, currencies, localCurrency }) => (
+  <Cart
+    cart={cart}
+    currencyConverter={new CurrencyConverter(currencies)}
+    localCurrency={localCurrency}
+    inventory={inventory}
+  />
+);
+
+CartContainer.propTypes = {
+  currencies: React.PropTypes.object.isRequired,
+  cart: React.PropTypes.array.isRequired,
+  inventory: React.PropTypes.object.isRequired,
+  localCurrency: React.PropTypes.string.isRequired,
+};
+
+const mapStateToProps = state => ({
+  cart: state.cart,
+  inventory: state.inventory,
+  currencies: state.currencies,
+  localCurrency: state.localCurrency,
+});
+
+export default connect(mapStateToProps, {})(CartContainer);
+```
+
+```javascript
+// src/3-refactorable/good/actions/index.js
+import * as types from '../constants/action-types';
+
+export const addToCartAction = productId => ({
+  type: types.ADD_TO_CART,
+  productId,
+});
+```
+
+```javascript
+// src/3-refactorable/good/reducers/cart.js
+import { ADD_TO_CART } from '../constants/action-types';
+
+const initialState = [];
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_TO_CART:
+      return [...state, parseInt(action.productId, 10)];
+    default:
+      return state;
+  }
+};
+```
+
+This improved code centralizes our side effects to an `action` function which takes a `productId` in and passes it to our `reducer` which creates an entirely brand-new cart with this product added to it. This new cart is placed in our `store`, and once that happens all of our components which derive their state from particular pieces of the `store` will be notified by `react-redux` of the new data, and they will update their state and React will intelligently re-render each updated component.
+
+This flow makes it possible to be sure that the state of your application can only be updated in one way, and that's through the _action_ -> _reducer_ -> _store_ -> _component_ pipeline. There's no global state to modify, no messages to pass and keep track of, and no uncontrolled side effects that our modules can produce.
+
+One caveat to note: now, you might not need Redux in this project's example application, but if we were to expand this code it would become easier to use Redux as the state management solution instead of putting everything in the top-level controller `index.js`. We could have isolated the state of our app there and passed the appropriate data-modifying action functions down through each module. The issue with that is that at scale, we would have a lot of actions to pass down and a lot of data that would live in one massive `index.js` controller. By committing to a proper centralization of state early, we won't need to change much as our application develops.
+
+The last thing we need to look at is tests. Tests give us confidence that we can change a module and it will still do what it was intended to do. We will look at the tests for the Cart and Inventory components:
+
+```javascript
+// src/test/cart.test.js
+import React from 'react';
+import { shallow } from 'enzyme';
+import Cart from '../src/3-refactorable/good/components/cart';
+
+const props = {
+  localCurrency: 'usd',
+  cart: [1, 1],
+  inventory: {
+    1: {
+      product: 'Flashlight',
+      img: '/flashlight.jpg',
+      desc: 'A really great flashlight',
+      price: 100,
+      currency: 'usd',
+    },
+  },
+  currencyConverter: {
+    convert: jest.fn(),
+  },
+};
+
+it('should render Cart without crashing', () => {
+  const cartComponent = shallow(<Cart {...props} />);
+  expect(cartComponent);
+});
+
+it('should show all cart data in cart table', () => {
+  props.currencyConverter.convert = function () {
+    return `$${props.inventory[1].price}`;
+  };
+
+  const cartComponent = shallow(<Cart {...props} />);
+  let tr = cartComponent.find('tr');
+  expect(tr.length).toEqual(3);
+
+  props.cart.forEach((item, idx) => {
+    let td = cartComponent.find('td');
+    let product = td.at(2 * idx);
+    let price = td.at(2 * idx + 1);
+
+    expect(product.text()).toEqual(props.inventory[item].product);
+    expect(price.text()).toEqual(props.currencyConverter.convert());
+  });
+});
+```
+
+```javascript
+// src/test/inventory.test.js
+import React from 'react';
+import { shallow } from 'enzyme';
+import Inventory from '../src/3-refactorable/good/components/inventory';
+
+const props = {
+  localCurrency: 'usd',
+  inventory: {
+    1: {
+      product: 'Flashlight',
+      img: '/flashlight.jpg',
+      desc: 'A really great flashlight',
+      price: 100,
+      currency: 'usd',
+    },
+  },
+  addToCart: jest.fn(),
+  changeCurrency: jest.fn(),
+  currencyConverter: {
+    convert: jest.fn(),
+  },
+};
+
+it('should render Inventory without crashing', () => {
+  const inventoryComponent = shallow(<Inventory {...props} />);
+  expect(inventoryComponent);
+});
+
+it('should show all inventory data in table', () => {
+  props.currencyConverter.convert = function () {
+    return `$${props.inventory[1].price}`;
+  };
+
+  const inventoryComponent = shallow(<Inventory {...props} />);
+  let tr = inventoryComponent.find('tr');
+  expect(tr.length).toEqual(2);
+
+  let td = inventoryComponent.find('td');
+  let product = td.at(0);
+  let image = td.at(1);
+  let desc = td.at(2);
+  let price = td.at(3);
+
+  expect(product.text()).toEqual('Flashlight');
+  expect(image.html()).toEqual('<td><img src="/flashlight.jpg" alt=""/></td>');
+  expect(desc.text()).toEqual('A really great flashlight');
+  expect(price.text()).toEqual('$100');
+});
+
+it('should have Add to Cart button work', () => {
+  const inventoryComponent = shallow(<Inventory {...props} />);
+  let addToCartBtn = inventoryComponent.find('button').first();
+  addToCartBtn.simulate('click');
+  expect(props.addToCart).toBeCalled();
+});
+```
 
+These tests ensure that the Cart and Inventory components:
+* Show the data they are supposed to
+* Maintain a consistent API
+* Can modify state by calling a given action function
 
 
-You might not need Redux in this specific case, but as we expand this application it will become easier to use Redux as the state management solution instead of linking everything to the parent controller `index.js`
+## Final Thoughts
+Software architecture is the stuff that's hard to change, so invest early in a readable, reusable, and refactorable foundation. It will be hard to get there later. By following the 3 Rs, your users will thank you, your developers will thank you, and you will thank yourself.
 
 --------------------------------------------------------------------------------
 ## Development
-If you wish to expand on this project or contribute, run the following commands to install everything you need:
+Thank you for reading this! If you wish to expand on this project or contribute, run the following commands to install everything you need:
 
 ```
 npm install -g create-react-app

public/index.html

@@ -6,7 +6,7 @@
     <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
     <a href="https://github.com/ryanmcdermott/3rs-of-software-architecture" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-    <title>Software Architecture Pyramid</title>
+    <title>3 Rs of Software Architecture</title>
   </head>
   <body>
     <div id="root"></div>