web: upgrade to react 0.13

3 files changed, 79 insertions, 65 deletions

diff --git a/web/package.json b/web/package.json
index 14a31f48..5b15f695 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,52 +1,52 @@
 {
-    "name": "mitmproxy",
-    "private": true,
-    "scripts": {
-        "test": "jest ./src/js"
-    },
-    "jest": {
-        "testPathDirs": [
-            "./src/js"
-        ],
-        "testPathIgnorePatterns": [
-            "/node_modules/",
-            "testutils.js"
-        ],
-        "testDirectoryName": "tests"
-    },
-    "dependencies": {
-        "jquery": "",
-        "lodash": "",
-        "react": "0.12.x",
-        "react-router": "",
-        "bootstrap": "",
-        "flux": ""
-    },
-    "devDependencies": {
-        "browserify": "=8.0.1",
-        "gulp": "",
-        "gulp-concat": "",
-        "gulp-connect": "",
-        "gulp-jshint": "",
-        "gulp-less": "",
-        "gulp-livereload": "",
-        "gulp-minify-css": "",
-        "gulp-notify": "",
-        "gulp-peg": "",
-        "gulp-plumber": "",
-        "gulp-react": "",
-        "gulp-rename": "",
-        "gulp-replace": "",
-        "gulp-rev": "",
-        "gulp-sourcemaps": "",
-        "gulp-uglify": "",
-        "jest-cli": "^0.1.18",
-        "jshint-stylish": "",
-        "lodash": "",
-        "map-stream": "",
-        "reactify": "",
-        "vinyl-buffer": "",
-        "vinyl-source-stream": "",
-        "vinyl-transform": ""
-    }
+  "name": "mitmproxy",
+  "private": true,
+  "scripts": {
+    "test": "jest ./src/js"
+  },
+  "jest": {
+    "testPathDirs": [
+      "./src/js"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "testutils.js"
+    ],
+    "testDirectoryName": "tests"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.4",
+    "flux": "",
+    "jquery": "",
+    "lodash": "",
+    "react": "^0.13.1",
+    "react-router": "^0.13.1"
+  },
+  "devDependencies": {
+    "browserify": "=8.0.1",
+    "gulp": "",
+    "gulp-concat": "",
+    "gulp-connect": "",
+    "gulp-jshint": "",
+    "gulp-less": "",
+    "gulp-livereload": "",
+    "gulp-minify-css": "",
+    "gulp-notify": "",
+    "gulp-peg": "",
+    "gulp-plumber": "",
+    "gulp-react": "",
+    "gulp-rename": "",
+    "gulp-replace": "",
+    "gulp-rev": "",
+    "gulp-sourcemaps": "",
+    "gulp-uglify": "",
+    "jest-cli": "^0.1.18",
+    "jshint-stylish": "",
+    "lodash": "",
+    "map-stream": "",
+    "reactify": "",
+    "vinyl-buffer": "",
+    "vinyl-source-stream": "",
+    "vinyl-transform": ""
+  }
 }
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index ffaa717f..3ed035ee 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -32,31 +32,43 @@ var StickyHeadMixin = {
 
 var Navigation = _.extend({}, ReactRouter.Navigation, {
     setQuery: function (dict) {
-        var q = this.context.getCurrentQuery();
+        var q = this.context.router.getCurrentQuery();
         for(var i in dict){
             if(dict.hasOwnProperty(i)){
                 q[i] = dict[i] || undefined; //falsey values shall be removed.
             }
         }
         q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/957
-        this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q);
+        this.replaceWith(this.context.router.getCurrentPath(), this.context.router.getCurrentParams(), q);
     },
     replaceWith: function(routeNameOrPath, params, query) {
         if(routeNameOrPath === undefined){
-            routeNameOrPath = this.context.getCurrentPath();
+            routeNameOrPath = this.context.router.getCurrentPath();
         }
         if(params === undefined){
-            params = this.context.getCurrentParams();
+            params = this.context.router.getCurrentParams();
         }
         if(query === undefined) {
-            query = this.context.getCurrentQuery();
+            query = this.context.router.getCurrentQuery();
         }
 
-        // FIXME: react-router is just broken.
-        ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query);
+        // FIXME: react-router is just broken,
+        // we hopefully just need to wait for the next release with https://github.com/rackt/react-router/pull/957.
+        this.context.router.replaceWith(routeNameOrPath, params, query);
+    }
+});
+
+// react-router is fairly good at changing its API regularly.
+// We keep the old method for now - if it should turn out that their changes are permanent,
+// we may remove this mixin and access react-router directly again.
+var State = _.extend({}, ReactRouter.State, {
+    getQuery: function(){
+        return this.context.router.getCurrentQuery();
+    },
+    getParams: function(){
+        return this.context.router.getCurrentParams();
     }
 });
-_.extend(Navigation.contextTypes, ReactRouter.State.contextTypes);
 
 var Splitter = React.createClass({
     getDefaultProps: function () {
@@ -164,7 +176,7 @@ var Splitter = React.createClass({
 });
 
 module.exports = {
-    State: ReactRouter.State, // keep here - react-router is pretty buggy, we may need workarounds in the future.
+    State: State,
     Navigation: Navigation,
     StickyHeadMixin: StickyHeadMixin,
     AutoScrollMixin: AutoScrollMixin,
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index eca06e74..dcfdd2ae 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -356,15 +356,17 @@ var Header = React.createClass({
     },
     render: function () {
         var header = header_entries.map(function (entry, i) {
-            var classes = React.addons.classSet({
-                active: entry == this.state.active
-            });
+            var className;
+            if(entry === this.state.active){
+                className = "active";
+            } else {
+                className = "";
+            }
             return (
                 <a key={i}
                     href="#"
-                    className={classes}
-                    onClick={this.handleClick.bind(this, entry)}
-                >
+                    className={className}
+                    onClick={this.handleClick.bind(this, entry)}>
                     { entry.title}
                 </a>
             );