From 9bfde2a3ae7fada86911dc96f1ed35a21aae40c3 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Mon, 4 Jul 2016 12:59:11 -0400
Subject: [web] change ducks/ui

---
 web/src/js/components/ProxyApp.jsx | 80 +++++++++++---------------------------
 1 file changed, 22 insertions(+), 58 deletions(-)

(limited to 'web/src/js/components/ProxyApp.jsx')

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)
-- 
cgit v1.2.3


From af2319aa6458a92caec2c09386fdf251502c03cb Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Tue, 5 Jul 2016 22:28:00 +0800
Subject: [web] listen to window.onKeyDown

---
 web/src/js/components/ProxyApp.jsx | 58 +++++---------------------------------
 1 file changed, 7 insertions(+), 51 deletions(-)

(limited to 'web/src/js/components/ProxyApp.jsx')

diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index e8c0e6d6..62b13932 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -12,23 +12,18 @@ import { Key } from '../utils.js'
 
 class ProxyAppMain extends Component {
 
-    static childContextTypes = {
-        returnFocus: PropTypes.func.isRequired,
-    }
-
     static contextTypes = {
         router: PropTypes.object.isRequired,
     }
 
-    constructor(props, context) {
-        super(props, context)
-
-        this.focus = this.focus.bind(this)
-        this.onKeyDown = this.onKeyDown.bind(this)
-    }
-
     componentWillMount() {
         this.props.appInit()
+        window.addEventListener('keydown', this.props.onKeyDown);
+    }
+
+    componentWillUnmount() {
+        this.props.appDestruct()
+        window.removeEventListener('keydown', this.props.onKeyDown);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -42,49 +37,10 @@ class ProxyAppMain extends Component {
         }
     }
 
-    /**
-     * @todo listen to window's key events
-     */
-    componentDidMount() {
-        this.focus()
-    }
-
-    componentWillUnmount() {
-        this.props.appDestruct()
-    }
-
-    /**
-     * @todo use props
-     */
-    getChildContext() {
-        return { returnFocus: this.focus }
-    }
-
-    /**
-     * @todo remove it
-     */
-    focus() {
-        document.activeElement.blur()
-        window.getSelection().removeAllRanges()
-        ReactDOM.findDOMNode(this).focus()
-    }
-
-    /**
-     * @todo move to actions
-     * @todo bind on window
-     */
-    onKeyDown(e) {
-        if (e.ctrlKey) {
-            return
-        }
-        this.props.onKeyDown(e.keyCode)
-        e.preventDefault()
-    }
-
     render() {
         const { showEventLog, location, children, query } = this.props
         return (
-            <div id="container" tabIndex="0" onKeyDown={this.onKeyDown}>
+            <div id="container" tabIndex="0">
                 <Header ref="header" query={query} />
                 {React.cloneElement(
                     children,
-- 
cgit v1.2.3


From db991e2bccc10e8e31fb200cba2a99bf94e83914 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Tue, 5 Jul 2016 22:49:16 +0800
Subject: [web] set display large

---
 web/src/js/components/ProxyApp.jsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

(limited to 'web/src/js/components/ProxyApp.jsx')

diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index 62b13932..f0e33330 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -17,21 +17,21 @@ class ProxyAppMain extends Component {
     }
 
     componentWillMount() {
-        this.props.appInit()
+        this.props.appInit(this.context.router)
         window.addEventListener('keydown', this.props.onKeyDown);
     }
 
     componentWillUnmount() {
-        this.props.appDestruct()
+        this.props.appDestruct(this.context.router)
         window.removeEventListener('keydown', this.props.onKeyDown);
     }
 
     componentWillReceiveProps(nextProps) {
-        if(nextProps.query === this.props.query && nextProps.flowId === this.props.flowId && nextProps.panel === this.props.panel) {
+        if (nextProps.query === this.props.query && nextProps.selectedFlowId === this.props.selectedFlowId && nextProps.panel === this.props.panel) {
             return
         }
-        if(nextProps.flowId) {
-            this.context.router.replace({ pathname: `/flows/${nextProps.flowId}/${nextProps.panel}`, query: nextProps.query })
+        if (nextProps.selectedFlowId) {
+            this.context.router.replace({ pathname: `/flows/${nextProps.selectedFlowId}/${nextProps.panel}`, query: nextProps.query })
         } else {
             this.context.router.replace({ pathname: '/flows', query: nextProps.query })
         }
@@ -58,10 +58,9 @@ class ProxyAppMain extends Component {
 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]
+        selectedFlowId: state.flows.views.main.selected[0]
     }),
     {
         appInit,
-- 
cgit v1.2.3

