From f306cfa8b6445dd04c5f7188d1a5022bcb747a62 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Thu, 9 Jun 2016 17:46:14 +0800
Subject: [web] separate flowtable to multiple files

---
 web/src/js/components/ProxyApp.jsx | 170 +++++++++++++++++++++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 web/src/js/components/ProxyApp.jsx

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

diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
new file mode 100644
index 00000000..9f497a7d
--- /dev/null
+++ b/web/src/js/components/ProxyApp.jsx
@@ -0,0 +1,170 @@
+import React, { Component, PropTypes } from "react"
+import ReactDOM from "react-dom"
+import _ from "lodash"
+import { connect } from 'react-redux'
+
+import { Splitter } from "./common.js"
+import { Header, MainMenu } from "./header.js"
+import EventLog from "./eventlog.js"
+import Footer from "./footer.js"
+import { SettingsStore } from "../store/store.js"
+import { Key } from "../utils.js"
+
+class ProxyAppMain extends Component {
+
+    static childContextTypes = {
+        returnFocus: PropTypes.func.isRequired,
+        location: PropTypes.object.isRequired,
+    }
+
+    static contextTypes = {
+        router: PropTypes.object.isRequired,
+    }
+
+    constructor(props, context) {
+        super(props, context)
+
+        this.settingsStore = new SettingsStore()
+
+        // Default Settings before fetch
+        _.extend(this.settingsStore.dict, {})
+
+        this.state = { settings: this.settingsStore.dict }
+
+        this.focus = this.focus.bind(this)
+        this.onKeyDown = this.onKeyDown.bind(this)
+        this.updateLocation = this.updateLocation.bind(this)
+        this.onSettingsChange = this.onSettingsChange.bind(this)
+    }
+
+    /**
+     * @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)
+    }
+
+    /**
+     * @todo remove settings store
+     * @todo connect websocket here
+     * @todo listen to window's key events
+     */
+    componentDidMount() {
+        this.focus()
+        this.settingsStore.addListener("recalculate", this.onSettingsChange)
+    }
+
+    /**
+     * @todo remove settings store
+     * @todo disconnect websocket here
+     * @todo stop listening to window's key events
+     */
+    componentWillUnmount() {
+        this.settingsStore.removeListener("recalculate", this.onSettingsChange)
+    }
+
+    /**
+     * @todo move to actions
+     */
+    onSettingsChange() {
+        this.setState({ settings: this.settingsStore.dict })
+    }
+
+    /**
+     * @todo use props
+     */
+    getChildContext() {
+        return {
+            returnFocus: this.focus,
+            location: this.props.location
+        }
+    }
+
+    /**
+     * @todo remove it
+     */
+    focus() {
+        document.activeElement.blur()
+        window.getSelection().removeAllRanges()
+        ReactDOM.findDOMNode(this).focus()
+    }
+
+    /**
+     * @todo move to actions
+     */
+    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.getWrappedInstance) {
+                    main = this.refs.view.getWrappedInstance()
+                }
+                if (main.onMainKeyDown) {
+                    main.onMainKeyDown(e)
+                }
+                return // don't prevent default then
+        }
+
+        if (name) {
+            const headerComponent = this.refs.header
+            headerComponent.setState({active: MainMenu}, function () {
+                headerComponent.refs.active.refs[name].select()
+            })
+        }
+
+        e.preventDefault()
+    }
+
+    render() {
+        const { showEventLog, location, children } = this.props
+        const { settings } = this.state
+        const query = this.getQuery()
+        return (
+            <div id="container" tabIndex="0" onKeyDown={this.onKeyDown}>
+                <Header ref="header" settings={settings} updateLocation={this.updateLocation} query={query} />
+                {React.cloneElement(
+                    children,
+                    { ref: "view", location, query, updateLocation: this.updateLocation }
+                )}
+                {showEventLog && [
+                    <Splitter key="splitter" axis="y"/>,
+                    <EventLog key="eventlog"/>
+                ]}
+                <Footer settings={settings}/>
+            </div>
+        )
+    }
+}
+
+export default connect(
+    state => ({
+        showEventLog: state.eventLog.visible
+    })
+)(ProxyAppMain)
-- 
cgit v1.2.3


From e24bf8d73f744319eeed99e7cae0b7f2c3947b8f Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Thu, 9 Jun 2016 18:03:40 +0800
Subject: [web] fix shortcut for header fields

---
 web/src/js/components/ProxyApp.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 9f497a7d..465cf272 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -134,7 +134,7 @@ class ProxyAppMain extends Component {
 
         if (name) {
             const headerComponent = this.refs.header
-            headerComponent.setState({active: MainMenu}, function () {
+            headerComponent.setState({ active: MainMenu }, () => {
                 headerComponent.refs.active.refs[name].select()
             })
         }
-- 
cgit v1.2.3


From 1baefcdc99bd8e4ee6bf7620965d51d1aab6ddd4 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Thu, 9 Jun 2016 18:13:18 +0800
Subject: [web] footer.js -> Footer.jsx

---
 web/src/js/components/ProxyApp.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 465cf272..e273fc92 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import { Splitter } from "./common.js"
 import { Header, MainMenu } from "./header.js"
 import EventLog from "./eventlog.js"
-import Footer from "./footer.js"
+import Footer from "./Footer"
 import { SettingsStore } from "../store/store.js"
 import { Key } from "../utils.js"
 
-- 
cgit v1.2.3


From 6c95635cb809d9261acc317f223ef80ba9c25f20 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Thu, 9 Jun 2016 18:40:59 +0800
Subject: [web] eventlog.js -> EventLog.jsx

---
 web/src/js/components/ProxyApp.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 e273fc92..bab8183d 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 
 import { Splitter } from "./common.js"
 import { Header, MainMenu } from "./header.js"
-import EventLog from "./eventlog.js"
+import EventLog from "./EventLog"
 import Footer from "./Footer"
 import { SettingsStore } from "../store/store.js"
 import { Key } from "../utils.js"
-- 
cgit v1.2.3


From 81a0c45c89df2dc94f7d97c4367f0e549495e4d0 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Thu, 9 Jun 2016 20:34:57 +0800
Subject: [web] header.js -> Header.js

---
 web/src/js/components/ProxyApp.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 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 bab8183d..81272268 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -4,7 +4,7 @@ import _ from "lodash"
 import { connect } from 'react-redux'
 
 import { Splitter } from "./common.js"
-import { Header, MainMenu } from "./header.js"
+import Header from "./Header"
 import EventLog from "./EventLog"
 import Footer from "./Footer"
 import { SettingsStore } from "../store/store.js"
@@ -134,7 +134,7 @@ class ProxyAppMain extends Component {
 
         if (name) {
             const headerComponent = this.refs.header
-            headerComponent.setState({ active: MainMenu }, () => {
+            headerComponent.setState({ active: Header.entries.MainMenu }, () => {
                 headerComponent.refs.active.refs[name].select()
             })
         }
-- 
cgit v1.2.3

