1 files changed, 22 insertions, 11 deletions
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)