2 files changed, 41 insertions, 31 deletions

diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx
index 7b0b542c..a466a980 100644
--- a/web/src/js/components/Header/MainMenu.jsx
+++ b/web/src/js/components/Header/MainMenu.jsx
@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
 import FilterInput from './FilterInput'
 import { Query } from '../../actions.js'
-import {setInterceptPattern} from "../../ducks/settings"
-import { connect } from 'react-redux'
+import { updateSettings } from '../../ducks/settings'
 
 class MainMenu extends Component {
 
@@ -10,14 +10,16 @@ class MainMenu extends Component {
     static route = 'flows'
 
     static propTypes = {
-        settings: React.PropTypes.object.isRequired,
+        query: PropTypes.object.isRequired,
+        settings: PropTypes.object.isRequired,
+        updateLocation: PropTypes.func.isRequired,
+        onSettingsChange: PropTypes.func.isRequired,
     }
 
     constructor(props, context) {
         super(props, context)
         this.onSearchChange = this.onSearchChange.bind(this)
         this.onHighlightChange = this.onHighlightChange.bind(this)
-        this.onInterceptChange = this.onInterceptChange.bind(this)
     }
 
     onSearchChange(val) {
@@ -28,16 +30,8 @@ class MainMenu extends Component {
         this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val })
     }
 
-    onInterceptChange(val) {
-        this.props.setInterceptPattern(val);
-    }
-
     render() {
-        const { query, settings } = this.props
-
-        const search = query[Query.SEARCH] || ''
-        const highlight = query[Query.HIGHLIGHT] || ''
-        const intercept = settings.intercept || ''
+        const { query, settings, onSettingsChange } = this.props
 
         return (
             <div>
@@ -47,7 +41,7 @@ class MainMenu extends Component {
                         placeholder="Search"
                         type="search"
                         color="black"
-                        value={search}
+                        value={query[Query.SEARCH] || ''}
                         onChange={this.onSearchChange}
                     />
                     <FilterInput
@@ -55,7 +49,7 @@ class MainMenu extends Component {
                         placeholder="Highlight"
                         type="tag"
                         color="hsl(48, 100%, 50%)"
-                        value={highlight}
+                        value={query[Query.HIGHLIGHT] || ''}
                         onChange={this.onHighlightChange}
                     />
                     <FilterInput
@@ -63,8 +57,8 @@ class MainMenu extends Component {
                         placeholder="Intercept"
                         type="pause"
                         color="hsl(208, 56%, 53%)"
-                        value={intercept}
-                        onChange={this.onInterceptChange}
+                        value={settings.intercept || ''}
+                        onChange={intercept => onSettingsChange({ intercept })}
                     />
                 </div>
                 <div className="clearfix"></div>
@@ -73,6 +67,11 @@ class MainMenu extends Component {
     }
 }
 
-export default connect(undefined, {
-    setInterceptPattern
-})(MainMenu);
+export default connect(
+    state => ({
+        settings: state.settings.settings,
+    }),
+    {
+        onSettingsChange: updateSettings,
+    }
+)(MainMenu);
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 44f309fd..f871ec92 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -1,61 +1,72 @@
 import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
 import ToggleButton from '../common/ToggleButton'
 import ToggleInputButton from '../common/ToggleInputButton'
-import { SettingsActions } from '../../actions.js'
+import { updateSettings } from '../../ducks/settings'
 
 OptionMenu.title = 'Options'
 
 OptionMenu.propTypes = {
     settings: PropTypes.object.isRequired,
+    onSettingsChange: PropTypes.func.isRequired,
 }
 
-export default function OptionMenu({ settings }) {
+function OptionMenu({ settings, onSettingsChange }) {
     // @todo use settings.map
     return (
         <div>
             <div className="menu-row">
                 <ToggleButton text="showhost"
                     checked={settings.showhost}
-                    onToggle={() => SettingsActions.update({ showhost: !settings.showhost })}
+                    onToggle={() => onSettingsChange({ showhost: !settings.showhost })}
                 />
                 <ToggleButton text="no_upstream_cert"
                     checked={settings.no_upstream_cert}
-                    onToggle={() => SettingsActions.update({ no_upstream_cert: !settings.no_upstream_cert })}
+                    onToggle={() => onSettingsChange({ no_upstream_cert: !settings.no_upstream_cert })}
                 />
                 <ToggleButton text="rawtcp"
                     checked={settings.rawtcp}
-                    onToggle={() => SettingsActions.update({ rawtcp: !settings.rawtcp })}
+                    onToggle={() => onSettingsChange({ rawtcp: !settings.rawtcp })}
                 />
                 <ToggleButton text="http2"
                     checked={settings.http2}
-                    onToggle={() => SettingsActions.update({ http2: !settings.http2 })}
+                    onToggle={() => onSettingsChange({ http2: !settings.http2 })}
                 />
                 <ToggleButton text="anticache"
                     checked={settings.anticache}
-                    onToggle={() => SettingsActions.update({ anticache: !settings.anticache })}
+                    onToggle={() => onSettingsChange({ anticache: !settings.anticache })}
                 />
                 <ToggleButton text="anticomp"
                     checked={settings.anticomp}
-                    onToggle={() => SettingsActions.update({ anticomp: !settings.anticomp })}
+                    onToggle={() => onSettingsChange({ anticomp: !settings.anticomp })}
                 />
                 <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
                     checked={!!settings.stickyauth}
                     txt={settings.stickyauth || ''}
-                    onToggleChanged={txt => SettingsActions.update({ stickyauth: !settings.stickyauth ? txt : null })}
+                    onToggleChanged={txt => onSettingsChange({ stickyauth: !settings.stickyauth ? txt : null })}
                 />
                 <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
                     checked={!!settings.stickycookie}
                     txt={settings.stickycookie || ''}
-                    onToggleChanged={txt => SettingsActions.update({ stickycookie: !settings.stickycookie ? txt : null })}
+                    onToggleChanged={txt => onSettingsChange({ stickycookie: !settings.stickycookie ? txt : null })}
                 />
                 <ToggleInputButton name="stream" placeholder="stream..."
                     checked={!!settings.stream}
                     txt={settings.stream || ''}
                     inputType="number"
-                    onToggleChanged={txt => SettingsActions.update({ stream: !settings.stream ? txt : null })}
+                    onToggleChanged={txt => onSettingsChange({ stream: !settings.stream ? txt : null })}
                 />
             </div>
             <div className="clearfix"/>
         </div>
     )
 }
+
+export default connect(
+    state => ({
+        settings: state.settings.settings,
+    }),
+    {
+        onSettingsChange: updateSettings,
+    }
+)(OptionMenu)