Update npm packages

TODO: React recently changes its API version. Some packages
are still migrating. Need to be checked later.

Fix "react-highlight":
"github:briancappello/react-highlight#react-v16-compiled"
akiran/react-highlight#39

package.json

@@ -1,36 +1,35 @@
 {
   "name": "SnippitUI",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "",
   "main": "webpack.config.js",
   "dependencies": {
-    "axios": "^0.15.3",
-    "babel-core": "^6.17.0",
-    "babel-loader": "^6.2.0",
-    "babel-plugin-add-module-exports": "^0.1.2",
+    "axios": "^0.16.2",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-react-html-attrs": "^2.0.0",
-    "babel-plugin-transform-class-properties": "^6.3.13",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "highcharts": "^5.0.9",
-    "history": "^1.17.0",
-    "mobx": "^3.1.7",
-    "mobx-react": "^4.1.3",
-    "react": "^0.14.6",
-    "react-dom": "^0.14.6",
-    "react-highcharts": "^11.5.0",
-    "react-highlight": "^0.9.0",
-    "react-redux": "^5.0.3",
-    "react-router": "^1.0.3",
-    "redux": "^3.6.0",
-    "redux-logger": "^2.8.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "highcharts": "^6.0.1",
+    "highcharts-treemap": "^0.1.2",
+    "history": "^4.7.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-highcharts": "^13.0.0",
+    "react-highlight": "github:briancappello/react-highlight#react-v16-compiled",
+    "react-redux": "^5.0.6",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
     "redux-multi": "^0.1.12",
-    "redux-promise-middleware": "^4.2.0",
+    "redux-promise-middleware": "^4.4.1",
     "redux-thunk": "^2.2.0",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.1"
+    "webpack": "^3.7.1",
+    "webpack-dev-server": "^2.9.1"
   },
   "devDependencies": {},
   "scripts": {

src/js/app.js

@@ -1,21 +1,27 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { Router, Route, IndexRoute, hashHistory } from "react-router";
+import { Route, IndexRoute, Link } from "react-router";
+import { HashRouter } from "react-router-dom";
 
 import { Provider } from "react-redux"
 import store from "./store"
 
-import Phase from "./pages/Phase";
 import Layout from "./pages/Layout";
+import Footer from "./components/layout/Footer";
 
 const app = document.getElementById('app');
 
+const containerStyle = {
+    marginTop: "30px"
+};
+
 ReactDOM.render(
 <Provider store={store}>
-  <Router history={hashHistory}>
-    <Route path="/" component={Layout}>
-      <IndexRoute component={Phase}></IndexRoute>
-    </Route>
-  </Router>
+  <HashRouter>
+    <div class="container-fluid" style={containerStyle}>
+      <Route path="/" component={Layout} />
+      <Footer/>
+    </div>
+  </HashRouter>
 </Provider>,
 app);

src/js/pages/Layout.js

@@ -1,14 +1,13 @@
 import React from "react";
-import { Link } from "react-router";
+import { Link, Route } from 'react-router-dom';
 
-import Footer from "../components/layout/Footer";
+import Phase from "./Phase";
 
 export default class Layout extends React.Component {
   render() {
     const { location } = this.props;
-    const containerStyle = {
-      marginTop: "30px"
-    };
+    const { match } = this.props;
+
     const timelineStyle = {
       height: "500px",
       minWidth: "310px",
@@ -18,18 +17,18 @@ export default class Layout extends React.Component {
       minWidth: "310px",
     };
 
+    // Set to empty string to make the route work at index
+    if (match.url === "/") match.url = "";
+
     console.log("layout");
     return (
-        <div class="container-fluid" style={containerStyle}>
-          <div class="row">
-            <div class="col-12">
-              <h1>Snippit UI</h1>
-            </div>
-            <div class="col-12">
-              {this.props.children}
-            </div>
+        <div class="row">
+          <div class="col-12">
+            <h1>Snippit UI</h1>
+          </div>
+          <div class="col-12">
+            <Route path={`${match.url}/phase/:phaseID?`} component={Phase} />
           </div>
-          <Footer/>
         </div>
     );
   }

src/js/store.js

@@ -1,12 +1,19 @@
 import { applyMiddleware, createStore } from "redux"
+import { createLogger } from 'redux-logger'
 
-import logger from "redux-logger"
 import thunk from "redux-thunk"
-import promise from "redux-promise-middleware"
+import promiseMiddleware from "redux-promise-middleware"
 import multi from 'redux-multi'
 
 import reducer from "./reducers"
 
-const middleware = applyMiddleware(multi, promise(), thunk, logger())
+const middlewares = [multi, promiseMiddleware(), thunk];
 
-export default createStore(reducer, middleware)
+const logger = createLogger({
+    collapsed: (getState, action, logEntry) => !logEntry.error,
+    duration: true
+});
+
+middlewares.push(logger);
+
+export default createStore(reducer, applyMiddleware(...middlewares));

webpack.config.js

@@ -13,7 +13,7 @@ module.exports = {
         exclude: /(node_modules|bower_components)/,
         loader: 'babel-loader',
         query: {
-          presets: ['react', 'es2015', 'stage-0'],
+          presets: ['react', 'env', 'stage-0'],
           plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
         }
       }