[web] bug fixs

8 files changed, 88 insertions, 151 deletions

diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 9d11ecd9..d6ee5497 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -5,83 +5,61 @@ import * as ContentViews from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
-import { setContentView } from '../ducks/ui'
+import { setContentView, setDisplayLarge } from '../ducks/ui'
 
-class ContentView extends Component {
+ContentView.propTypes = {
+    // It may seem a bit weird at the first glance:
+    // Every view takes the flow and the message as props, e.g.
+    // <Auto flow={flow} message={flow.request}/>
+    flow: React.PropTypes.object.isRequired,
+    message: React.PropTypes.object.isRequired,
+}
 
-    static propTypes = {
-        // It may seem a bit weird at the first glance:
-        // Every view takes the flow and the message as props, e.g.
-        // <Auto flow={flow} message={flow.request}/>
-        flow: React.PropTypes.object.isRequired,
-        message: React.PropTypes.object.isRequired,
-    }
+ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
-    constructor(props, context) {
-        super(props, context)
+function ContentView({ flow, message, contentView, selectView, displayLarge }) {
 
-        this.state = { displayLarge: false }
+    if (message.contentLength === 0) {
+        return <MetaViews.ContentEmpty {...this.props}/>
     }
 
-    displayLarge() {
-        this.setState({ displayLarge: true })
+    if (message.contentLength === null) {
+        return <MetaViews.ContentMissing {...this.props}/>
     }
 
-    componentWillReceiveProps(nextProps) {
-        // @todo move to ui ducks
-        if (nextProps.message !== this.props.message) {
-            this.setState({ displayLarge: false })
-        }
+    if (!displayLarge && ContentView.isContentTooLarge(message)) {
+        return <MetaViews.ContentTooLarge {...this.props} onClick={() => this.props.setDisplayLarge(true)}/>
     }
 
-    isContentTooLarge(msg) {
-        return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
-    }
-
-    render() {
-        const { flow, message, contentView, selectView } = this.props
-        const { displayLarge } = this.state
-
-        const View = ContentViews[contentView]
+    const View = ContentViews[contentView]
 
-        if (message.contentLength === 0) {
-            return <MetaViews.ContentEmpty {...this.props}/>
-        }
-
-        if (message.contentLength === null) {
-            return <MetaViews.ContentMissing {...this.props}/>
-        }
-
-        if (!displayLarge && this.isContentTooLarge(message)) {
-            return <MetaViews.ContentTooLarge {...this.props} onClick={this.displayLarge}/>
-        }
-
-        return (
-            <div>
-                {View.textView ? (
-                    <ContentLoader flow={flow} message={message}>
-                        <View content="" />
-                    </ContentLoader>
-                ) : (
-                    <View flow={flow} message={message} />
-                )}
-                <div className="view-options text-center">
-                    <ViewSelector onSelectView={selectView} active={View} message={message}/>
-                    &nbsp;
-                    <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
-                        <i className="fa fa-download"/>
-                    </a>
-                </div>
+    return (
+        <div>
+            {View.textView ? (
+                <ContentLoader flow={flow} message={message}>
+                    <View content="" />
+                </ContentLoader>
+            ) : (
+                <View flow={flow} message={message} />
+            )}
+            <div className="view-options text-center">
+                <ViewSelector onSelectView={selectView} active={View} message={message}/>
+                &nbsp;
+                <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
+                    <i className="fa fa-download"/>
+                </a>
             </div>
-        )
-    }
+        </div>
+    )
 }
 
 export default connect(
     state => ({
         contentView: state.ui.contentView,
+        displayLarge: state.ui.displayLarge,
     }),
     {
         selectView: setContentView,
+        setDisplayLarge,
     }
 )(ContentView)
diff --git a/web/src/js/components/ContentView/MetaViews.jsx b/web/src/js/components/ContentView/MetaViews.jsx
index 83720a13..2d064b54 100644
--- a/web/src/js/components/ContentView/MetaViews.jsx
+++ b/web/src/js/components/ContentView/MetaViews.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {formatSize} from '../../utils.js'
+import { formatSize } from '../../utils.js'
 
 export function ContentEmpty({ flow, message }) {
     return (
diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx
index 5b49b788..e421f1a4 100644
--- a/web/src/js/components/Header/FilterInput.jsx
+++ b/web/src/js/components/Header/FilterInput.jsx
@@ -7,10 +7,6 @@ import FilterDocs from './FilterDocs'
 
 export default class FilterInput extends Component {
 
-    static contextTypes = {
-        returnFocus: React.PropTypes.func,
-    }
-
     constructor(props, context) {
         super(props, context)
 
@@ -91,7 +87,6 @@ export default class FilterInput extends Component {
 
     blur() {
         ReactDOM.findDOMNode(this.refs.input).blur()
-        this.context.returnFocus()
     }
 
     select() {
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index 7bb6f196..756fa22e 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -69,5 +69,7 @@ export default connect(
         updateFlow: flowsActions.update,
     },
     undefined,
-    { withRef: true }
+    {
+        withRef: true
+    }
 )(MainView)
diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx
index e6564896..1c20b1a9 100755
--- a/web/src/js/components/Prompt.jsx
+++ b/web/src/js/components/Prompt.jsx
@@ -4,23 +4,15 @@ import _ from 'lodash'
 
 import {Key} from '../utils.js'
 
-Prompt.contextTypes = {
-    returnFocus: PropTypes.func
-}
-
 Prompt.propTypes = {
     options: PropTypes.array.isRequired,
     done: PropTypes.func.isRequired,
     prompt: PropTypes.string,
 }
 
-export default function Prompt({ prompt, done, options }, context) {
+export default function Prompt({ prompt, done, options }) {
     const opts = []
 
-    function keyTaken(k) {
-        return _.map(opts, 'key').includes(k)
-    }
-
     for (let i = 0; i < options.length; i++) {
         let opt = options[i]
         if (_.isString(opt)) {
@@ -35,7 +27,11 @@ export default function Prompt({ prompt, done, options }, context) {
         }
         opts.push(opt)
     }
-    
+
+    function keyTaken(k) {
+        return _.map(opts, 'key').includes(k)
+    }
+
     function onKeyDown(event) {
         event.stopPropagation()
         event.preventDefault()
@@ -44,7 +40,6 @@ export default function Prompt({ prompt, done, options }, context) {
             return
         }
         done(key.key || false)
-        context.returnFocus()
     }
 
     return (
diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index 28a91ff3..f0e33330 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -12,79 +12,35 @@ 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(this.context.router)
+        window.addEventListener('keydown', this.props.onKeyDown);
     }
 
-    componentWillMount() {
-        this.props.appInit()
+    componentWillUnmount() {
+        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 })
         }
     }
 
-    /**
-     * @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.shiftKey)
-        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,
@@ -102,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,
diff --git a/web/src/js/components/ValueEditor.jsx b/web/src/js/components/ValueEditor.jsx
index 0316924f..5f1bf2dc 100755
--- a/web/src/js/components/ValueEditor.jsx
+++ b/web/src/js/components/ValueEditor.jsx
@@ -4,27 +4,17 @@ import ValidateEditor from './ValueEditor/ValidateEditor'
 
 export default class ValueEditor extends Component {
 
-    static contextTypes = {
-        returnFocus: PropTypes.func,
-    }
-
     static propTypes = {
         content: PropTypes.string.isRequired,
         onDone: PropTypes.func.isRequired,
         inline: PropTypes.bool,
     }
 
-    constructor(props) {
-        super(props)
-        this.focus = this.focus.bind(this)
-    }
-
     render() {
-        var tag = this.props.inline ? "span" : 'div'
+        var tag = this.props.inline ? 'span' : 'div'
         return (
             <ValidateEditor
                 {...this.props}
-                onStop={() => this.context.returnFocus()}
                 tag={tag}
             />
         )
diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js
index bc64ffa8..15334f88 100644
--- a/web/src/js/ducks/ui.js
+++ b/web/src/js/ducks/ui.js
@@ -4,15 +4,17 @@ import * as flowsActions from '../ducks/flows'
 
 export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU'
 export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW'
-export const SET_SELECTED_INPUT = 'SET_SELECTED_INPUT'
-export const UPDATE_QUERY = 'UPDATE_QUERY'
-export const SELECT_TAB = 'SELECT_TAB'
-export const SELECT_TAB_RELATIVE = 'SELECT_TAB_RELATIVE'
-export const SET_PROMPT = 'SET_PROMPT'
+export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT'
+export const UPDATE_QUERY = 'UI_UPDATE_QUERY'
+export const SELECT_TAB = 'UI_SELECT_TAB'
+export const SELECT_TAB_RELATIVE = 'UI_SELECT_TAB_RELATIVE'
+export const SET_PROMPT = 'UI_SET_PROMPT'
+export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE'
 
 const defaultState = {
     activeMenu: 'Start',
     selectedInput: null,
+    displayLarge: false,
     promptOpen: false,
     contentView: 'ViewAuto',
     query: {},
@@ -32,6 +34,7 @@ export default function reducer(state = defaultState, action) {
             if (action.flowId && !action.currentSelection) {
                 return {
                     ...state,
+                    displayLarge: false,
                     activeMenu: 'Flow',
                 }
             }
@@ -39,11 +42,15 @@ export default function reducer(state = defaultState, action) {
             if (!action.flowId && state.activeMenu === 'Flow') {
                 return {
                     ...state,
+                    displayLarge: false,
                     activeMenu: 'Start',
                 }
             }
 
-            return state
+            return {
+                ...state,
+                displayLarge: false,
+            }
 
         case SET_CONTENT_VIEW:
             return {
@@ -88,6 +95,12 @@ export default function reducer(state = defaultState, action) {
                 promptOpen: action.open,
             }
 
+        case SET_DISPLAY_LARGE:
+            return {
+                ...state,
+                displayLarge: action.displayLarge,
+            }
+
         default:
             return state
     }
@@ -124,7 +137,17 @@ export function setPrompt(open) {
     return { type: SET_PROMPT, open }
 }
 
-export function onKeyDown(key, shiftKey) {
+export function setDisplayLarge(displayLarge) {
+    return { type: SET_DISPLAY_LARGE, displayLarge }
+}
+
+export function onKeyDown(e) {
+    if(e.ctrlKey) {
+        return () => {}
+    }
+    var key = e.keyCode
+    var shiftKey = e.shiftKey
+    e.preventDefault()
     return (dispatch, getState) => {
         switch (key) {
 
@@ -235,6 +258,5 @@ export function onKeyDown(key, shiftKey) {
             default:
                 return () => {}
         }
-        event.preventDefault()
     }
 }