[web] change ducks/ui

1 files changed, 22 insertions, 58 deletions

diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index 1ac979bc..e8c0e6d6 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -4,6 +4,7 @@ import _ from 'lodash'
 import { connect } from 'react-redux'
 
 import { init as appInit, destruct as appDestruct } from '../ducks/app'
+import { onKeyDown } from '../ducks/ui'
 import Header from './Header'
 import EventLog from './EventLog'
 import Footer from './Footer'
@@ -24,13 +25,23 @@ class ProxyAppMain extends Component {
 
         this.focus = this.focus.bind(this)
         this.onKeyDown = this.onKeyDown.bind(this)
-        this.updateLocation = this.updateLocation.bind(this)
     }
 
     componentWillMount() {
         this.props.appInit()
     }
 
+    componentWillReceiveProps(nextProps) {
+        if(nextProps.query === this.props.query && nextProps.flowId === this.props.flowId && nextProps.panel === this.props.panel) {
+            return
+        }
+        if(nextProps.flowId) {
+            this.context.router.replace({ pathname: `/flows/${nextProps.flowId}/${nextProps.panel}`, query: nextProps.query })
+        } else {
+            this.context.router.replace({ pathname: '/flows', query: nextProps.query })
+        }
+    }
+
     /**
      * @todo listen to window's key events
      */
@@ -63,72 +74,21 @@ class ProxyAppMain extends Component {
      * @todo bind on window
      */
     onKeyDown(e) {
-        let name = null
-
-        switch (e.keyCode) {
-            case Key.I:
-                name = 'intercept'
-                break
-            case Key.L:
-                name = 'search'
-                break
-            case Key.H:
-                name = 'highlight'
-                break
-            default:
-                let main = this.refs.view
-                if (this.refs.view.refs.wrappedInstance) {
-                    main = this.refs.view.refs.wrappedInstance
-                }
-                if (main.onMainKeyDown) {
-                    main.onMainKeyDown(e)
-                }
-                return // don't prevent default then
+        if (e.ctrlKey) {
+            return
         }
-
-        if (name) {
-            const headerComponent = this.refs.header.refs.wrappedInstance || this.refs.header
-            headerComponent.setState({ active: Header.entries[0] }, () => {
-                const active = headerComponent.refs.active.refs.wrappedInstance || headerComponent.refs.active
-                active.refs[name].select()
-            })
-        }
-
+        this.props.onKeyDown(e.keyCode)
         e.preventDefault()
     }
 
-    /**
-     * @todo move to actions
-     */
-    updateLocation(pathname, queryUpdate) {
-        if (pathname === undefined) {
-            pathname = this.props.location.pathname
-        }
-        const query = this.props.location.query
-        for (const key of Object.keys(queryUpdate || {})) {
-            query[key] = queryUpdate[key] || undefined
-        }
-        this.context.router.replace({ pathname, query })
-    }
-
-    /**
-     * @todo pass in with props
-     */
-    getQuery() {
-        // For whatever reason, react-router always returns the same object, which makes comparing
-        // the current props with nextProps impossible. As a workaround, we just clone the query object.
-        return _.clone(this.props.location.query)
-    }
-
     render() {
-        const { showEventLog, location, children } = this.props
-        const query = this.getQuery()
+        const { showEventLog, location, children, query } = this.props
         return (
             <div id="container" tabIndex="0" onKeyDown={this.onKeyDown}>
-                <Header ref="header" updateLocation={this.updateLocation} query={query} />
+                <Header ref="header" query={query} />
                 {React.cloneElement(
                     children,
-                    { ref: 'view', location, query, updateLocation: this.updateLocation }
+                    { ref: 'view', location, query }
                 )}
                 {showEventLog && (
                     <EventLog key="eventlog"/>
@@ -143,9 +103,13 @@ export default connect(
     state => ({
         showEventLog: state.eventLog.visible,
         settings: state.settings.settings,
+        query: state.ui.query,
+        panel: state.ui.panel,
+        flowId: state.flows.views.main.selected[0]
     }),
     {
         appInit,
         appDestruct,
+        onKeyDown
     }
 )(ProxyAppMain)