[web] eliminate SettingsState

4 files changed, 35 insertions, 46 deletions

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..7d313b02 100644
--- a/web/src/js/components/footer.js
+++ b/web/src/js/components/footer.js
@@ -1,19 +1,18 @@
 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 = settings.mode;
+    const intercept = 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>
+    );
+}
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>
         );
     }