web: smaller changes

8 files changed, 32 insertions, 52 deletions

diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 258501a4..64cd68a7 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -106,7 +106,7 @@ var FlowActions = {
     }
 };
 
-Query = {
+var Query = {
     FILTER: "f",
     HIGHLIGHT: "h",
     SHOW_EVENTLOG: "e"
@@ -116,5 +116,6 @@ module.exports = {
     ActionTypes: ActionTypes,
     ConnectionActions: ConnectionActions,
     FlowActions: FlowActions,
-    StoreCmds: StoreCmds
+    StoreCmds: StoreCmds,
+    Query: Query
 };
\ No newline at end of file
diff --git a/web/src/js/app.js b/web/src/js/app.js
index a7f3570e..63d782d4 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -2,14 +2,13 @@
 var React = require("react");
 var ReactRouter = require("react-router");
 var $ = require("jquery");
-
 var Connection = require("./connection");
 var proxyapp = require("./components/proxyapp.js");
 
 $(function () {
     window.ws = new Connection("/updates");
 
-    ReactRouter.run(proxyapp.routes, function (Handler) {
+    ReactRouter.run(proxyapp.routes, function (Handler, state) {
         React.render(<Handler/>, document.body);
     });
 });
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 96262acc..ffaa717f 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -38,7 +38,7 @@ var Navigation = _.extend({}, ReactRouter.Navigation, {
                 q[i] = dict[i] || undefined; //falsey values shall be removed.
             }
         }
-        q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/599
+        q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/957
         this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q);
     },
     replaceWith: function(routeNameOrPath, params, query) {
@@ -48,38 +48,16 @@ var Navigation = _.extend({}, ReactRouter.Navigation, {
         if(params === undefined){
             params = this.context.getCurrentParams();
         }
-        if(query === undefined){
+        if(query === undefined) {
             query = this.context.getCurrentQuery();
         }
+
+        // FIXME: react-router is just broken.
         ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query);
     }
 });
 _.extend(Navigation.contextTypes, ReactRouter.State.contextTypes);
 
-var State = _.extend({}, ReactRouter.State, {
-    getInitialState: function () {
-        this._query = this.context.getCurrentQuery();
-        this._queryWatches = [];
-        return null;
-    },
-    onQueryChange: function (key, callback) {
-        this._queryWatches.push({
-            key: key,
-            callback: callback
-        });
-    },
-    componentWillReceiveProps: function (nextProps, nextState) {
-        var q = this.context.getCurrentQuery();
-        for (var i = 0; i < this._queryWatches.length; i++) {
-            var watch = this._queryWatches[i];
-            if (this._query[watch.key] !== q[watch.key]) {
-                watch.callback(this._query[watch.key], q[watch.key], watch.key);
-            }
-        }
-        this._query = q;
-    }
-});
-
 var Splitter = React.createClass({
     getDefaultProps: function () {
         return {
@@ -186,9 +164,9 @@ var Splitter = React.createClass({
 });
 
 module.exports = {
-    State: State,
+    State: ReactRouter.State, // keep here - react-router is pretty buggy, we may need workarounds in the future.
     Navigation: Navigation,
     StickyHeadMixin: StickyHeadMixin,
     AutoScrollMixin: AutoScrollMixin,
     Splitter: Splitter
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index ae7cd093..23508275 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -1,5 +1,6 @@
 var React = require("react");
 var common = require("./common.js");
+var Query = require("../actions.js").Query;
 var VirtualScrollMixin = require("./virtualscroll.js");
 var views = require("../store/view.js");
 
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 76a1a5fb..d1684fb2 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -3,9 +3,9 @@ var $ = require("jquery");
 
 var Filt = require("../filt/filt.js");
 var utils = require("../utils.js");
-
 var common = require("./common.js");
 var actions = require("../actions.js");
+var Query = require("../actions.js").Query;
 
 var FilterDocs = React.createClass({
     statics: {
@@ -30,12 +30,12 @@ var FilterDocs = React.createClass({
             return <i className="fa fa-spinner fa-spin"></i>;
         } else {
             var commands = FilterDocs.doc.commands.map(function (c) {
-                return <tr>
+                return <tr key={c[1]}>
                     <td>{c[0].replace(" ", '\u00a0')}</td>
                     <td>{c[1]}</td>
                 </tr>;
             });
-            commands.push(<tr>
+            commands.push(<tr key="docs-link">
                 <td colSpan="2">
                     <a href="https://mitmproxy.org/doc/features/filters.html"
                         target="_blank">
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 550a61da..18d7318f 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -2,6 +2,7 @@ var React = require("react");
 
 var common = require("./common.js");
 var actions = require("../actions.js");
+var Query = require("../actions.js").Query;
 var toputils = require("../utils.js");
 var views = require("../store/view.js");
 var Filt = require("../filt/filt.js");
@@ -12,12 +13,6 @@ var flowdetail = require("./flowdetail.js");
 var MainView = React.createClass({
     mixins: [common.Navigation, common.State],
     getInitialState: function () {
-        this.onQueryChange(Query.FILTER, function () {
-            this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
-        }.bind(this));
-        this.onQueryChange(Query.HIGHLIGHT, function () {
-            this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
-        }.bind(this));
         return {
             flows: []
         };
@@ -46,6 +41,12 @@ var MainView = React.createClass({
             this.closeView();
             this.openView(nextProps.flowStore);
         }
+
+        var filterChanged = (this.props.query[Query.FILTER] !== nextProps.query[Query.FILTER]);
+        var highlightChanged = (this.props.query[Query.HIGHLIGHT] !== nextProps.query[Query.HIGHLIGHT]);
+        if (filterChanged || highlightChanged) {
+            this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
+        }
     },
     openView: function (store) {
         var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort());
@@ -73,7 +74,7 @@ var MainView = React.createClass({
     },
     onRemove: function (flow_id, index) {
         if (flow_id === this.getParams().flowId) {
-            var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length -1)];
+            var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length - 1)];
             this.selectFlow(flow_to_select);
         }
     },
@@ -194,7 +195,7 @@ var MainView = React.createClass({
                 }
                 break;
             case toputils.Key.V:
-                if(e.shiftKey && flow && flow.modified) {
+                if (e.shiftKey && flow && flow.modified) {
                     actions.FlowActions.revert(flow);
                 }
                 break;
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index c5d7491d..863a9f53 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -8,6 +8,7 @@ var Footer = require("./footer.js");
 var header = require("./header.js");
 var EventLog = require("./eventlog.js");
 var store = require("../store/store.js");
+var Query = require("../actions.js").Query;
 
 
 //TODO: Move out of here, just a stub.
@@ -47,7 +48,6 @@ var ProxyAppMain = React.createClass({
         });
     },
     render: function () {
-
         var eventlog;
         if (this.getQuery()[Query.SHOW_EVENTLOG]) {
             eventlog = [
@@ -57,11 +57,13 @@ var ProxyAppMain = React.createClass({
         } else {
             eventlog = null;
         }
-
         return (
             <div id="container">
                 <header.Header settings={this.state.settings.dict}/>
-                <RouteHandler settings={this.state.settings.dict} flowStore={this.state.flowStore}/>
+                <RouteHandler
+                    settings={this.state.settings.dict}
+                    flowStore={this.state.flowStore}
+                    query={this.getQuery()}/>
                 {eventlog}
                 <Footer settings={this.state.settings.dict}/>
             </div>
@@ -88,5 +90,4 @@ var routes = (
 
 module.exports = {
     routes: routes
-};
-
+};
\ No newline at end of file
diff --git a/web/src/js/store/view.js b/web/src/js/store/view.js
index b5db9287..9bf31c52 100644
--- a/web/src/js/store/view.js
+++ b/web/src/js/store/view.js
@@ -1,4 +1,3 @@
-
 var EventEmitter = require('events').EventEmitter;
 var _ = require("lodash");
 
@@ -10,7 +9,7 @@ function SortByStoreOrder(elem) {
 }
 
 var default_sort = SortByStoreOrder;
-var default_filt = function(elem){
+var default_filt = function (elem) {
     return true;
 };
 
@@ -39,8 +38,8 @@ _.extend(StoreView.prototype, EventEmitter.prototype, {
         this.store.removeListener("update", this.update);
         this.store.removeListener("remove", this.remove);
         this.store.removeListener("recalculate", this.recalculate);
-        },
-        recalculate: function (filt, sortfun) {
+    },
+    recalculate: function (filt, sortfun) {
         if (filt) {
             this.filt = filt.bind(this);
         }