From 8a3a21bba1e6706295cc22e1b3a876a7a86cb705 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 21 Jul 2016 01:14:55 -0700
Subject: web: fix ValueEditor, clean up code

---
 web/src/js/components/Header/MainMenu.jsx   | 120 +++++++++-------------------
 web/src/js/components/Header/OptionMenu.jsx |  27 +++----
 2 files changed, 52 insertions(+), 95 deletions(-)

(limited to 'web/src/js/components/Header')

diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx
index 27a4be60..7236d31f 100644
--- a/web/src/js/components/Header/MainMenu.jsx
+++ b/web/src/js/components/Header/MainMenu.jsx
@@ -1,92 +1,50 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import FilterInput from './FilterInput'
-import { Query } from '../../actions.js'
 import { update as updateSettings } from '../../ducks/settings'
-import { updateQuery, setSelectedInput } from '../../ducks/ui'
+import { updateFilter, updateHighlight } from '../../ducks/flowView'
 
-class MainMenu extends Component {
+MainMenu.title = "Start"
 
-    static title = 'Start'
-    static route = 'flows'
-
-    static propTypes = {
-        query: PropTypes.object.isRequired,
-        settings: PropTypes.object.isRequired,
-        updateSettings: PropTypes.func.isRequired,
-        updateQuery: PropTypes.func.isRequired,
-    }
-
-    constructor(props, context) {
-        super(props, context)
-        this.onSearchChange = this.onSearchChange.bind(this)
-        this.onHighlightChange = this.onHighlightChange.bind(this)
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if(this.refs[nextProps.selectedInput]) {
-            this.refs[nextProps.selectedInput].select()
-        }
-        this.props.setSelectedInput(undefined)
-    }
-
-    onSearchChange(val) {
-        this.props.updateQuery({ [Query.SEARCH]: val })
-    }
-
-    onHighlightChange(val) {
-        this.props.updateQuery({ [Query.HIGHLIGHT]: val })
-    }
-
-    render() {
-        const { query, settings, updateSettings } = this.props
-
-        return (
-            <div>
-                <div className="menu-row">
-                    <FilterInput
-                        ref="search"
-                        placeholder="Search"
-                        type="search"
-                        color="black"
-                        value={query[Query.SEARCH] || ''}
-                        onChange={this.onSearchChange}
-                    />
-                    <FilterInput
-                        ref="highlight"
-                        placeholder="Highlight"
-                        type="tag"
-                        color="hsl(48, 100%, 50%)"
-                        value={query[Query.HIGHLIGHT] || ''}
-                        onChange={this.onHighlightChange}
-                    />
-                    <FilterInput
-                        ref="intercept"
-                        placeholder="Intercept"
-                        type="pause"
-                        color="hsl(208, 56%, 53%)"
-                        value={settings.intercept || ''}
-                        onChange={intercept => updateSettings({ intercept })}
-                    />
-                </div>
-                <div className="clearfix"></div>
+export default function MainMenu() {
+    return (
+        <div>
+            <div className="menu-row">
+                <FlowFilterInput/>
+                <HighlightInput/>
+                <InterceptInput/>
             </div>
-        )
-    }
+            <div className="clearfix"></div>
+        </div>
+    )
 }
 
-export default connect(
+const InterceptInput = connect(
+    state => ({
+        value: state.settings.intercept || '',
+        placeholder: 'Intercept',
+        type: 'pause',
+        color: 'hsl(208, 56%, 53%)'
+    }),
+    { onChange: intercept => updateSettings({ intercept }) }
+)(FilterInput);
+
+const FlowFilterInput = connect(
+    state => ({
+        value: state.flowView.filter || '',
+        placeholder: 'Search',
+        type: 'search',
+        color: 'black'
+    }),
+    { onChange: updateFilter }
+)(FilterInput);
+
+const HighlightInput = connect(
     state => ({
-        settings: state.settings.settings,
-        selectedInput: state.ui.selectedInput
+        value: state.flowView.highlight || '',
+        placeholder: 'Highlight',
+        type: 'tag',
+        color: 'hsl(48, 100%, 50%)'
     }),
-    {
-        updateSettings,
-        updateQuery,
-        setSelectedInput
-    },
-    null,
-    {
-        withRef: true,
-    }
-)(MainMenu);
+    { onChange: updateHighlight }
+)(FilterInput);
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 4a487cc9..a338fed0 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -8,53 +8,52 @@ OptionMenu.title = 'Options'
 
 OptionMenu.propTypes = {
     settings: PropTypes.object.isRequired,
-    onSettingsChange: PropTypes.func.isRequired,
+    updateSettings: PropTypes.func.isRequired,
 }
 
-function OptionMenu({ settings, onSettingsChange }) {
-    // @todo use settings.map
+function OptionMenu({ settings, updateSettings }) {
     return (
         <div>
             <div className="menu-row">
                 <ToggleButton text="showhost"
                     checked={settings.showhost}
-                    onToggle={() => onSettingsChange({ showhost: !settings.showhost })}
+                    onToggle={() => updateSettings({ showhost: !settings.showhost })}
                 />
                 <ToggleButton text="no_upstream_cert"
                     checked={settings.no_upstream_cert}
-                    onToggle={() => onSettingsChange({ no_upstream_cert: !settings.no_upstream_cert })}
+                    onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
                 />
                 <ToggleButton text="rawtcp"
                     checked={settings.rawtcp}
-                    onToggle={() => onSettingsChange({ rawtcp: !settings.rawtcp })}
+                    onToggle={() => updateSettings({ rawtcp: !settings.rawtcp })}
                 />
                 <ToggleButton text="http2"
                     checked={settings.http2}
-                    onToggle={() => onSettingsChange({ http2: !settings.http2 })}
+                    onToggle={() => updateSettings({ http2: !settings.http2 })}
                 />
                 <ToggleButton text="anticache"
                     checked={settings.anticache}
-                    onToggle={() => onSettingsChange({ anticache: !settings.anticache })}
+                    onToggle={() => updateSettings({ anticache: !settings.anticache })}
                 />
                 <ToggleButton text="anticomp"
                     checked={settings.anticomp}
-                    onToggle={() => onSettingsChange({ anticomp: !settings.anticomp })}
+                    onToggle={() => updateSettings({ anticomp: !settings.anticomp })}
                 />
                 <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
                     checked={!!settings.stickyauth}
                     txt={settings.stickyauth || ''}
-                    onToggleChanged={txt => onSettingsChange({ stickyauth: !settings.stickyauth ? txt : null })}
+                    onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
                 />
                 <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
                     checked={!!settings.stickycookie}
                     txt={settings.stickycookie || ''}
-                    onToggleChanged={txt => onSettingsChange({ stickycookie: !settings.stickycookie ? txt : null })}
+                    onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
                 />
                 <ToggleInputButton name="stream" placeholder="stream..."
                     checked={!!settings.stream}
                     txt={settings.stream || ''}
                     inputType="number"
-                    onToggleChanged={txt => onSettingsChange({ stream: !settings.stream ? txt : null })}
+                    onToggleChanged={txt => updateSettings({ stream: !settings.stream ? txt : null })}
                 />
             </div>
             <div className="clearfix"/>
@@ -64,9 +63,9 @@ function OptionMenu({ settings, onSettingsChange }) {
 
 export default connect(
     state => ({
-        settings: state.settings.settings,
+        settings: state.settings,
     }),
     {
-        onSettingsChange: updateSettings,
+        updateSettings,
     }
 )(OptionMenu)
-- 
cgit v1.2.3