From ab17680298d7d37c53347f0b32c56c476e872859 Mon Sep 17 00:00:00 2001
From: Jon Roach <roach.jc@gmail.com>
Date: Mon, 16 Oct 2017 15:56:58 -0700
Subject: [PATCH 1/2] update npm version

---
 plugin/npm-module/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugin/npm-module/package.json b/plugin/npm-module/package.json
index bcf14b6..a4a44ea 100644
--- a/plugin/npm-module/package.json
+++ b/plugin/npm-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webpack-monitor",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Monitor your production builds throughout the development process with rich analysis tool",
   "homepage": "https://github.com/webpackmonitor/webpackmonitor",
   "author": "Jon Roach, Gordon Yu, Balal Zuhair",

From d1e6fe4f5966152f824edde3ce4c9ebb6c6c3416 Mon Sep 17 00:00:00 2001
From: Jon Roach <roach.jc@gmail.com>
Date: Fri, 20 Oct 2017 12:02:29 -0700
Subject: [PATCH 2/2] utils for containers

---
 client/App.jsx               |  4 ++++
 client/containers/Header.jsx | 10 ++--------
 client/containers/Main.jsx   |  2 ++
 client/containers/utils.js   | 11 +++++++++++
 client/index.jsx             |  2 ++
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/client/App.jsx b/client/App.jsx
index ff57738..04e280b 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -12,6 +12,7 @@ class App extends React.Component {
     this.handleIncrement = this.handleIncrement.bind(this);
   }
 
+  // Get build data
   componentDidMount() {
     fetch('/getstats')
     .then(res => res.json())
@@ -20,17 +21,20 @@ class App extends React.Component {
     });
   }
 
+  // Select build from LineChart
   handleCircleClick(e) {
     const len = this.state.build.length;
     const index = len - e.target.getAttribute('data-build');
     this.setState({ activeBuild: len - index });
   }
 
+  // Select build from header dropdown
   selectBuild(e) {
     const index = e.target.getAttribute('data-build');
     this.setState({ activeBuild: index - 1 });
   }
 
+  // Select build from card
   handleIncrement() {
     if (this.state.activeBuild < this.state.build.length - 1) {
       const activeBuild = this.state.activeBuild + 1;
diff --git a/client/containers/Header.jsx b/client/containers/Header.jsx
index f561549..1a43878 100644
--- a/client/containers/Header.jsx
+++ b/client/containers/Header.jsx
@@ -1,15 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { NavDropdown, MenuItem } from 'react-bootstrap';
+import { NavDropdown } from 'react-bootstrap';
 import logo from './../assets/wpmlogo.png';
+import { getMenuItems } from './utils';
 
-const getMenuItems = (buildNumber, selectBuild) => {
-  const menuItems = [];
-  for (let i = buildNumber; i > 0; i -= 1) {
-    menuItems.push(<MenuItem onClick={selectBuild} data-build={i} key={`build${i}`}>Build {i}</MenuItem>);
-  }
-  return menuItems;
-};
 
 const Header = (props) => {
   const menuItems = getMenuItems(props.build.length, props.selectBuild);
diff --git a/client/containers/Main.jsx b/client/containers/Main.jsx
index c5c3aaa..759be39 100644
--- a/client/containers/Main.jsx
+++ b/client/containers/Main.jsx
@@ -11,6 +11,7 @@ class Main extends React.Component {
     );
   }
 
+  // Handle routing for Main
   renderApp() {
     return (
       <main>
@@ -54,6 +55,7 @@ class Main extends React.Component {
     );
   }
 
+  // Render spinner / loader util data loads
   render() {
     const build = this.props.build.length;
     return (
diff --git a/client/containers/utils.js b/client/containers/utils.js
index e69de29..e4f3bdd 100644
--- a/client/containers/utils.js
+++ b/client/containers/utils.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { MenuItem } from 'react-bootstrap';
+
+
+export function getMenuItems(buildNumber, selectBuild) {
+  const menuItems = [];
+  for (let i = buildNumber; i > 0; i -= 1) {
+    menuItems.push(<MenuItem onClick={selectBuild} data-build={i} key={`build${i}`}>Build {i}</MenuItem>);
+  }
+  return menuItems;
+}
diff --git a/client/index.jsx b/client/index.jsx
index aa9f80a..97859c8 100644
--- a/client/index.jsx
+++ b/client/index.jsx
@@ -7,6 +7,7 @@ import App from './App';
 const env = process.env.NODE_ENV;
 
 if (env === 'development') {
+  // AppDev imports a local JSON file as demo data
   render(
     (
       <BrowserRouter>
@@ -16,6 +17,7 @@ if (env === 'development') {
     document.getElementById('root'),
   );
 } else {
+  // App retrieves data with fetch from getstats route on plugin server
   render(
     (
       <BrowserRouter>