[web] set display large

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)
+
+function ContentView({ flow, message, contentView, selectView, displayLarge }) {
+
+    if (message.contentLength === 0) {
+        return <MetaViews.ContentEmpty {...this.props}/>
     }
 
-    constructor(props, context) {
-        super(props, context)
-
-        this.state = { displayLarge: false }
+    if (message.contentLength === null) {
+        return <MetaViews.ContentMissing {...this.props}/>
     }
 
-    displayLarge() {
-        this.setState({ displayLarge: true })
+    if (!displayLarge && ContentView.isContentTooLarge(message)) {
+        return <MetaViews.ContentTooLarge {...this.props} onClick={() => this.props.setDisplayLarge(true)}/>
     }
 
-    componentWillReceiveProps(nextProps) {
-        // @todo move to ui ducks
-        if (nextProps.message !== this.props.message) {
-            this.setState({ displayLarge: false })
-        }
-    }
+    const View = ContentViews[contentView]
 
-    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]
-
-        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)

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 (

web/src/js/components/Prompt.jsx

@@ -13,10 +13,6 @@ Prompt.propTypes = {
 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)) {
@@ -32,6 +28,10 @@ export default function Prompt({ prompt, done, options }) {
         opts.push(opt)
     }
 
+    function keyTaken(k) {
+        return _.map(opts, 'key').includes(k)
+    }
+
     function onKeyDown(event) {
         event.stopPropagation()
         event.preventDefault()

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,

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,6 +137,10 @@ export function setPrompt(open) {
     return { type: SET_PROMPT, open }
 }
 
+export function setDisplayLarge(displayLarge) {
+    return { type: SET_DISPLAY_LARGE, displayLarge }
+}
+
 export function onKeyDown(key, shiftKey) {
     return (dispatch, getState) => {
         switch (key) {