Merge pull request #1009 from gzzhanghao/settings

[web] eliminate SettingsState

5 files changed, 84 insertions, 104 deletions

diff --git a/mitmproxy/web/static/app.js b/mitmproxy/web/static/app.js
index 313a07fe..bb06970e 100644
--- a/mitmproxy/web/static/app.js
+++ b/mitmproxy/web/static/app.js
@@ -481,7 +481,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.Splitter = exports.Router = exports.SettingsState = exports.StickyHeadMixin = exports.AutoScrollMixin = undefined;
+exports.Splitter = exports.Router = exports.StickyHeadMixin = exports.AutoScrollMixin = undefined;
 
 var _react = require("react");
 
@@ -520,28 +520,6 @@ var StickyHeadMixin = exports.StickyHeadMixin = {
     }
 };
 
-var SettingsState = exports.SettingsState = {
-    contextTypes: {
-        settingsStore: _react2.default.PropTypes.object.isRequired
-    },
-    getInitialState: function getInitialState() {
-        return {
-            settings: this.context.settingsStore.dict
-        };
-    },
-    componentDidMount: function componentDidMount() {
-        this.context.settingsStore.addListener("recalculate", this.onSettingsChange);
-    },
-    componentWillUnmount: function componentWillUnmount() {
-        this.context.settingsStore.removeListener("recalculate", this.onSettingsChange);
-    },
-    onSettingsChange: function onSettingsChange() {
-        this.setState({
-            settings: this.context.settingsStore.dict
-        });
-    }
-};
-
 var Router = exports.Router = {
     contextTypes: {
         location: _react2.default.PropTypes.object,
@@ -2773,6 +2751,7 @@ exports.default = Nav;
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.default = Footer;
 
 var _react = require("react");
 
@@ -2782,34 +2761,32 @@ var _common = require("./common.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Footer = _react2.default.createClass({
-    displayName: "Footer",
-
-    mixins: [_common.SettingsState],
-    render: function render() {
-        var mode = this.state.settings.mode;
-        var intercept = this.state.settings.intercept;
-        return _react2.default.createElement(
-            "footer",
-            null,
-            mode && mode != "regular" ? _react2.default.createElement(
-                "span",
-                { className: "label label-success" },
-                mode,
-                " mode"
-            ) : null,
-            " ",
-            intercept ? _react2.default.createElement(
-                "span",
-                { className: "label label-success" },
-                "Intercept: ",
-                intercept
-            ) : null
-        );
-    }
-});
+Footer.propTypes = {
+    settings: _react2.default.PropTypes.object.isRequired
+};
 
-exports.default = Footer;
+function Footer(_ref) {
+    var settings = _ref.settings;
+    var mode = settings.mode;
+    var intercept = settings.intercept;
+
+    return _react2.default.createElement(
+        "footer",
+        null,
+        mode && mode != "regular" && _react2.default.createElement(
+            "span",
+            { className: "label label-success" },
+            mode,
+            " mode"
+        ),
+        intercept && _react2.default.createElement(
+            "span",
+            { className: "label label-success" },
+            "Intercept: ",
+            intercept
+        )
+    );
+}
 
 },{"./common.js":4,"react":"react"}],15:[function(require,module,exports){
 "use strict";
@@ -3029,7 +3006,10 @@ var FilterInput = _react2.default.createClass({
 var MainMenu = exports.MainMenu = _react2.default.createClass({
     displayName: "MainMenu",
 
-    mixins: [_common.Router, _common.SettingsState],
+    mixins: [_common.Router],
+    propTypes: {
+        settings: _react2.default.PropTypes.object.isRequired
+    },
     statics: {
         title: "Start",
         route: "flows"
@@ -3050,7 +3030,7 @@ var MainMenu = exports.MainMenu = _react2.default.createClass({
     render: function render() {
         var search = this.getQuery()[_actions.Query.SEARCH] || "";
         var highlight = this.getQuery()[_actions.Query.HIGHLIGHT] || "";
-        var intercept = this.state.settings.intercept || "";
+        var intercept = this.props.settings.intercept || "";
 
         return _react2.default.createElement(
             "div",
@@ -3228,6 +3208,9 @@ var Header = exports.Header = _react2.default.createClass({
     displayName: "Header",
 
     mixins: [_common.Router],
+    propTypes: {
+        settings: _react2.default.PropTypes.object.isRequired
+    },
     getInitialState: function getInitialState() {
         return {
             active: header_entries[0]
@@ -3268,7 +3251,7 @@ var Header = exports.Header = _react2.default.createClass({
             _react2.default.createElement(
                 "div",
                 { className: "menu" },
-                _react2.default.createElement(this.state.active, { ref: "active" })
+                _react2.default.createElement(this.state.active, { ref: "active", settings: this.props.settings })
             )
         );
     }
@@ -3744,7 +3727,6 @@ var ProxyAppMain = _react2.default.createClass({
 
     mixins: [_common.Router],
     childContextTypes: {
-        settingsStore: _react2.default.PropTypes.object.isRequired,
         flowStore: _react2.default.PropTypes.object.isRequired,
         eventStore: _react2.default.PropTypes.object.isRequired,
         returnFocus: _react2.default.PropTypes.func.isRequired,
@@ -3752,10 +3734,16 @@ var ProxyAppMain = _react2.default.createClass({
     },
     componentDidMount: function componentDidMount() {
         this.focus();
+        this.settingsStore.addListener("recalculate", this.onSettingsChange);
+    },
+    componentWillUnmount: function componentWillUnmount() {
+        this.settingsStore.removeListener("recalculate", this.onSettingsChange);
+    },
+    onSettingsChange: function onSettingsChange() {
+        this.setState({ settings: this.settingsStore.dict });
     },
     getChildContext: function getChildContext() {
         return {
-            settingsStore: this.state.settingsStore,
             flowStore: this.state.flowStore,
             eventStore: this.state.eventStore,
             returnFocus: this.focus,
@@ -3767,10 +3755,11 @@ var ProxyAppMain = _react2.default.createClass({
         var flowStore = new _store.FlowStore();
         var settingsStore = new _store.SettingsStore();
 
+        this.settingsStore = settingsStore;
         // Default Settings before fetch
         _lodash2.default.extend(settingsStore.dict, {});
         return {
-            settingsStore: settingsStore,
+            settings: settingsStore.dict,
             flowStore: flowStore,
             eventStore: eventStore
         };
@@ -3822,10 +3811,10 @@ var ProxyAppMain = _react2.default.createClass({
         return _react2.default.createElement(
             "div",
             { id: "container", tabIndex: "0", onKeyDown: this.onKeydown },
-            _react2.default.createElement(_header.Header, { ref: "header" }),
+            _react2.default.createElement(_header.Header, { ref: "header", settings: this.state.settings }),
             children,
             eventlog,
-            _react2.default.createElement(_footer2.default, null)
+            _react2.default.createElement(_footer2.default, { settings: this.state.settings })
         );
     }
 });
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 293cff49..447e6eec 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -29,28 +29,6 @@ export var StickyHeadMixin = {
     }
 };
 
-export var SettingsState = {
-    contextTypes: {
-        settingsStore: React.PropTypes.object.isRequired
-    },
-    getInitialState: function () {
-        return {
-            settings: this.context.settingsStore.dict
-        };
-    },
-    componentDidMount: function () {
-        this.context.settingsStore.addListener("recalculate", this.onSettingsChange);
-    },
-    componentWillUnmount: function () {
-        this.context.settingsStore.removeListener("recalculate", this.onSettingsChange);
-    },
-    onSettingsChange: function () {
-        this.setState({
-            settings: this.context.settingsStore.dict
-        });
-    },
-};
-
 
 export var Router = {
     contextTypes: {
diff --git a/web/src/js/components/footer.js b/web/src/js/components/footer.js
index 415c2577..e2d96288 100644
--- a/web/src/js/components/footer.js
+++ b/web/src/js/components/footer.js
@@ -1,19 +1,20 @@
 import React from "react";
 import {SettingsState} from "./common.js";
 
-var Footer = React.createClass({
-    mixins: [SettingsState],
-    render: function () {
-        var mode = this.state.settings.mode;
-        var intercept = this.state.settings.intercept;
-        return (
-            <footer>
-                {mode && mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
-                &nbsp;
-                {intercept ? <span className="label label-success">Intercept: {intercept}</span> : null}
-            </footer>
-        );
-    }
-});
+Footer.propTypes = {
+    settings: React.PropTypes.object.isRequired,
+};
 
-export default Footer;
\ No newline at end of file
+export default function Footer({ settings }) {
+    const {mode, intercept} = settings;
+    return (
+        <footer>
+            {mode && mode != "regular" && (
+                <span className="label label-success">{mode} mode</span>
+            )}
+            {intercept && (
+                <span className="label label-success">Intercept: {intercept}</span>
+            )}
+        </footer>
+    );
+}
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 96b522f0..1af928a3 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -4,7 +4,7 @@ import $ from "jquery";
 
 import Filt from "../filt/filt.js";
 import {Key} from "../utils.js";
-import {Router, SettingsState} from "./common.js";
+import {Router} from "./common.js";
 import {SettingsActions, FlowActions} from "../actions.js";
 import {Query} from "../actions.js";
 
@@ -161,7 +161,10 @@ var FilterInput = React.createClass({
 });
 
 export var MainMenu = React.createClass({
-    mixins: [Router, SettingsState],
+    mixins: [Router],
+    propTypes: {
+        settings: React.PropTypes.object.isRequired,
+    },
     statics: {
         title: "Start",
         route: "flows"
@@ -182,7 +185,7 @@ export var MainMenu = React.createClass({
     render: function () {
         var search = this.getQuery()[Query.SEARCH] || "";
         var highlight = this.getQuery()[Query.HIGHLIGHT] || "";
-        var intercept = this.state.settings.intercept || "";
+        var intercept = this.props.settings.intercept || "";
 
         return (
             <div>
@@ -351,6 +354,9 @@ var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */];
 
 export var Header = React.createClass({
     mixins: [Router],
+    propTypes: {
+        settings: React.PropTypes.object.isRequired,
+    },
     getInitialState: function () {
         return {
             active: header_entries[0]
@@ -386,7 +392,7 @@ export var Header = React.createClass({
                     {header}
                 </nav>
                 <div className="menu">
-                    <this.state.active ref="active"/>
+                    <this.state.active ref="active" settings={this.props.settings}/>
                 </div>
             </header>
         );
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index 97acfbde..d17a1522 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -23,7 +23,6 @@ var Reports = React.createClass({
 var ProxyAppMain = React.createClass({
     mixins: [Router],
     childContextTypes: {
-        settingsStore: React.PropTypes.object.isRequired,
         flowStore: React.PropTypes.object.isRequired,
         eventStore: React.PropTypes.object.isRequired,
         returnFocus: React.PropTypes.func.isRequired,
@@ -31,10 +30,16 @@ var ProxyAppMain = React.createClass({
     },
     componentDidMount: function () {
         this.focus();
+        this.settingsStore.addListener("recalculate", this.onSettingsChange);
+    },
+    componentWillUnmount: function () {
+        this.settingsStore.removeListener("recalculate", this.onSettingsChange);
+    },
+    onSettingsChange: function () {
+        this.setState({ settings: this.settingsStore.dict });
     },
     getChildContext: function () {
         return {
-            settingsStore: this.state.settingsStore,
             flowStore: this.state.flowStore,
             eventStore: this.state.eventStore,
             returnFocus: this.focus,
@@ -46,10 +51,11 @@ var ProxyAppMain = React.createClass({
         var flowStore = new FlowStore();
         var settingsStore = new SettingsStore();
 
+        this.settingsStore = settingsStore;
         // Default Settings before fetch
         _.extend(settingsStore.dict, {});
         return {
-            settingsStore: settingsStore,
+            settings: settingsStore.dict,
             flowStore: flowStore,
             eventStore: eventStore
         };
@@ -106,10 +112,10 @@ var ProxyAppMain = React.createClass({
         );
         return (
             <div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
-                <Header ref="header"/>
+                <Header ref="header" settings={this.state.settings}/>
                 {children}
                 {eventlog}
-                <Footer/>
+                <Footer settings={this.state.settings}/>
             </div>
         );
     }