refactor

client/App.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Header from './Header';
-import Main from './Main';
+import Header from './containers/Header';
+import Main from './containers/Main';
 
 class App extends React.Component {
   constructor() {

client/AppDev.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Header from './Header';
-import Main from './Main';
+import Header from './containers/Header';
+import Main from './containers/Main';
 import build from './../monitor/stats.json';
 
 class App extends React.Component {

client/Header.jsx → client/containers/Header.jsx

@@ -1,11 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { NavDropdown, MenuItem } from 'react-bootstrap';
-import logo from './assets/wpmlogo.png';
-
-
-// The Header creates links that can be used to navigate
-// between routes.
+import logo from './../assets/wpmlogo.png';
 
 const getMenuItems = (buildNumber, selectBuild) => {
   const menuItems = [];
@@ -20,7 +16,10 @@ const Header = (props) => {
   return (
     <header>
       <nav>
-        <div className="pull-left panel-title header-title"><img className="logo" src={logo} />webpack monitor</div>
+        <div className="pull-left panel-title header-title">
+          <img alt="wpm" className="logo" src={logo} />
+          webpack monitor
+        </div>
         <ul className="links list-inline pull-right">
           <NavDropdown title="Select Build" id="basic-nav-dropdown">
             {menuItems}
@@ -31,7 +30,7 @@ const Header = (props) => {
         </ul>
       </nav>
     </header>
-  )
+  );
 };
 
 export default Header;

client/Main.jsx → client/containers/Main.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import Recommendations from './recoComponents/Recommendations';
-import Charts from './chartComponents/chartsApp';
-import Dashboard from './BuildComponents/Dashboard';
+import Recommendations from './../views/recommendations/Recommendations';
+import Overview from './../views/overview/Overview';
+import BuildData from './../views/build-data/BuildData';
 
 class Main extends React.Component {
   renderLoader() {
@@ -18,7 +18,7 @@ class Main extends React.Component {
           <Route
             exact path="/"
             render={() => (
-              <Charts
+              <Overview
                 build={this.props.build}
                 activeBuild={this.props.activeBuild}
                 handleCircleClick={this.props.handleCircleClick}
@@ -30,7 +30,7 @@ class Main extends React.Component {
           <Route
             path="/builds"
             render={() => (
-              <Dashboard
+              <BuildData
                 build={this.props.build}
                 activeBuild={this.props.activeBuild}
                 handleIncrement={this.props.handleIncrement}

client/chartComponents/common/Panel.jsx → client/containers/Panel.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
 
-const Panel = (props) => (
+const Panel = props => (
   <div className="bg">
     {props.children}
   </div>
 );
 
-
-
-export default Panel;
+export default Panel;

client/chartComponents/common/PanelHeader.jsx → client/containers/PanelHeader.jsx

@@ -1,15 +1,12 @@
 import React from 'react';
 
-
-const PanelHeader = (props) => (
+const PanelHeader = props => (
   <div className="panel-header">
     <div className="pull-left panel-title">{props.title}</div>
     <div className="pull-right line-height-30">
       {props.children}
     </div>
-
   </div>
 );
 
-
-export default PanelHeader;
+export default PanelHeader;

client/BuildComponents/Dashboard.jsx → client/views/build-data/BuildData.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import Modules from './Modules';
-import Assets from './Assets';
-import Changes from './Changes';
-import Errors from './Errors';
-import Cards from './../chartComponents/cards/Cards';
+import Modules from './components/Modules';
+import Assets from './components/Assets';
+import Changes from './components/Changes';
+import Errors from './components/Errors';
+import Cards from './../cards/Cards';
 
 const Dashboard = (props) => {
   const getBytes = (number) => {
@@ -65,11 +65,34 @@ const Dashboard = (props) => {
 
   return (
     <div className="container">
-      <Cards build={props.build} activeBuild={props.activeBuild} handleIncrement={props.handleIncrement} handleDecrement={props.handleDecrement} />
-      <Changes build={props.build} activeBuild={props.activeBuild} getBytes={getBytes} dirFinalArray={dirFinalArray} dirFinalArrayPrev={dirFinalArrayPrev} />
-      <Assets build={props.build} activeBuild={props.activeBuild} getBytes={getBytes} />
-      <Errors build={props.build} activeBuild={props.activeBuild} />
-      <Modules build={props.build} activeBuild={props.activeBuild} getBytes={getBytes} dirFinalArray={dirFinalArray} />
+      <Cards
+        build={props.build}
+        activeBuild={props.activeBuild}
+        handleIncrement={props.handleIncrement}
+        handleDecrement={props.handleDecrement}
+      />
+      <Changes
+        build={props.build}
+        activeBuild={props.activeBuild}
+        getBytes={getBytes}
+        dirFinalArray={dirFinalArray}
+        dirFinalArrayPrev={dirFinalArrayPrev}
+      />
+      <Assets
+        build={props.build}
+        activeBuild={props.activeBuild}
+        getBytes={getBytes}
+      />
+      <Errors
+        build={props.build}
+        activeBuild={props.activeBuild}
+      />
+      <Modules
+        build={props.build}
+        activeBuild={props.activeBuild}
+        getBytes={getBytes}
+        dirFinalArray={dirFinalArray}
+      />
     </div>
   );
 };

client/BuildComponents/Changes.jsx → client/views/build-data/components/Changes.jsx

@@ -111,5 +111,4 @@ const Changes = (props) => {
   );
 };
 
-
 export default Changes;

client/BuildComponents/Errors.jsx → client/views/build-data/components/Errors.jsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import Panel from './../chartComponents/common/Panel';
-import PanelHeader from './../chartComponents/common/PanelHeader';
-import { Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { Panel as PanelTable } from 'react-bootstrap';
+import { Table, OverlayTrigger, Tooltip, Panel as PanelTable } from 'react-bootstrap';
 
 const Errors = (props) => {
   let errors = props.build[props.activeBuild].errors;

client/chartComponents/cards/Cards.jsx → client/views/cards/Cards.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-
 class Cards extends React.Component {
 
   getData() {