Merge pull request webpackmonitor#61 from roachjc/master

utils for containers

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;

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);

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 (

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;
+}

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>

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",