set up react router

packages/electrode-webpack-reporter/client/app.jsx

@@ -1,13 +1,12 @@
 import React from "react";
-// import {routes} from "./routes";
 // import {Router, browserHistory} from "react-router";
+import Routes from "./routes";
 import {render, unmountComponentAtNode} from "react-dom";
 import "./styles/base.css";
 import injectTapEventPlugin from "react-tap-event-plugin";
 import {createStore} from "redux";
 import {Provider} from "react-redux";
 import rootReducer from "./reducers";
-import Home from "./components/home";
 
 //
 // Add the client app start up code to a function as window.webappStart.
@@ -25,14 +24,13 @@ window.webappStart = () => {
     method: "GET",
     headers
   })).then((response) => {
-    // for developing with electrode server <Router history={browserHistory}>{routes}</Router>
     return response.json().then((initialState) => {
       const store = createStore(rootReducer, initialState);
       const appContainer = document.querySelector(".js-content");
       unmountComponentAtNode(appContainer);
       render(
         <Provider store={store}>
-          <Home />
+          <Routes />
         </Provider>,
         appContainer
       );

packages/electrode-webpack-reporter/client/components/home.jsx

@@ -1,55 +1,14 @@
 import React, {PropTypes} from "react";
-import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
-import darkBaseTheme from "material-ui/styles/baseThemes/darkBaseTheme";
-import getMuiTheme from "material-ui/styles/getMuiTheme";
-import {Tabs, Tab} from "material-ui/Tabs";
-import WarningsErrors from "./warnings-errors";
-import WebpackInfo from "./webpack-info";
-import Legacy from "./legacy";
-import {connect} from "react-redux";
-import styles from "../styles/base.css";
-import Electrify from "electrode-electrify-react-component";
+import Navbar from "./navbar";
 
-const Home = (props) => {
-  return (
-    <div className={styles.container}>
-      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
-        <Tabs>
-          <Tab label="Report">
-            <WebpackInfo {...props.info} />
-            <WarningsErrors errors={props.errors} warnings={props.warnings} />
-            <Electrify
-              assets={props.assets}
-              modulesByPkg={props.modulesByPkg}
-              totalSizeByPkg={props.totalSizeByPkg}
-              modules={props.modules}
-            />
-          </Tab>
-          <Tab label="Legacy">
-            <div style={ {background: "black", color: "gray", padding: "10px"} }>
-              <Legacy legacy={props.legacy}/>
-            </div>
-          </Tab>
-        </Tabs>
-      </MuiThemeProvider>
-    </div>
-  );
-};
+const Home = (props) => (
+  <div>
+    <Navbar />
+    {props.children}
+  </div>);
 
 Home.propTypes = {
-  info: PropTypes.object,
-  assets: PropTypes.array,
-  modulesByPkg: PropTypes.object,
-  warnings: PropTypes.array,
-  errors: PropTypes.array,
-  legacy: PropTypes.string,
-  totalSizeByPkg: PropTypes.number,
-  modules: PropTypes.array
+  children: PropTypes.array
 };
 
-const mapStateToProps = (state) => state;
-
-export default connect(
-  mapStateToProps
-)(Home);
-
+export default Home;

packages/electrode-webpack-reporter/client/routes.jsx

@@ -1,7 +1,26 @@
-import React from "react";
-import {Route} from "react-router";
+import React, {PropTypes} from "react";
+import {connect} from "react-redux";
+import {Router, Route, browserHistory, IndexRoute} from "react-router";
 import Home from "./components/home";
+import Report from "./components/report";
+import Legacy from "./components/legacy";
 
-export const routes = (
-  <Route path="/" component={Home}/>
-);
+const Routes = (props) => (
+  <Router history={browserHistory}>
+    <Route path="/reporter" component={Home}>
+      <IndexRoute component={() => (<Report webpackInfo={props}/>)}/>
+      <Route path="/reporter/report" component={() => (<Report webpackInfo={props}/>)}/>
+      <Route path="/reporter/legacy" component={() => (<Legacy legacy={props.legacy}/>)}/>
+    </Route>
+</Router>);
+
+const mapStateToProps = (state) => state;
+
+Routes.propTypes = {
+  legacy: PropTypes.object
+};
+
+
+export default connect(
+  mapStateToProps
+)(Routes);