1 files changed, 47 insertions, 100 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 3cd9990c..0b93d3f0 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -1,121 +1,68 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { MessageUtils } from '../flow/utils.js'
-import { ViewAuto, ViewImage } from './ContentView/ContentViews'
+import * as ContentViews from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
+import { setContentView, setDisplayLarge } from '../ducks/ui'
 import CodeEditor from './common/CodeEditor'
 import {setModifiedFlowContent} from '../ducks/flows'
 
+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,
+}
 
-class ContentView extends Component {
-
-    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,
-        onContentChange: React.PropTypes.func.isRequired
-    }
-
-    constructor(props, context) {
-        super(props, context)
-        this.state = { displayLarge: false, View: ViewAuto}
-        this.selectView = this.selectView.bind(this)
-    }
-
-    selectView(View) {
-        this.setState({ View })
-    }
+ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
-    displayLarge() {
-        this.setState({ displayLarge: true })
-    }
+function ContentView(props) {
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.message !== this.props.message) {
-            this.setState({ displayLarge: false, View: ViewAuto })
-        }
+    if (message.contentLength === 0) {
+        return <MetaViews.ContentEmpty {...props}/>
     }
 
-    isContentTooLarge(msg) {
-        return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2)
+    if (message.contentLength === null) {
+        return <MetaViews.ContentMissing {...props}/>
     }
 
-    onOpenFile(e) {
-        if (e.target.files.length > 0) {
-            this.props.onContentChange(e.target.files[0])
-        }
-        e.preventDefault()
+    if (!displayLarge && ContentView.isContentTooLarge(message)) {
+        return <MetaViews.ContentTooLarge {...props} onClick={() => setDisplayLarge(true)}/>
     }
 
-    render() {
-        const { flow, message, setModifiedFlowContent, isFlowEditorOpen } = this.props
-        const { displayLarge, View } = this.state
-
-        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>
-                {isFlowEditorOpen ? (
-                    <ContentLoader flow={flow} message={message}>
-                        <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/>
-                    </ContentLoader>
-                ): (<div>
-                    {View.textView ? (
-                        <ContentLoader  flow={flow} message={message}>
-                            <this.state.View content="" />
-                        </ContentLoader>
-                    ) : (
-                        <View flow={flow}  message={message} />
-                    )}
-
-
-
-                    <div className="view-options text-center">
-                        <ViewSelector onSelectView={this.selectView} active={View} message={message}/>
-                        &nbsp;
-                        <a  className="btn btn-default btn-xs"
-                            href={MessageUtils.getContentURL(flow, message)}
-                            title="Download the content of the flow."
-                        >
-                            <i className="fa fa-download"/>
-                        </a>
-                        &nbsp;
-                        <a  className="btn btn-default btn-xs"
-                            href="#"
-                            onClick={e => {this.fileInput.click(); e.preventDefault();}}
-                            title="Upload a file to replace the content."
-                        >
-                            <i className="fa fa-upload"/>
-                        </a>
-                        <input
-                            ref={ref => this.fileInput = ref}
-                            className="hidden"
-                            type="file"
-                            onChange={e => this.onOpenFile(e)}
-                        />
-                    </div>
-                </div>)}
+    const View = ContentViews[contentView]
+
+    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 => (
-        {isFlowEditorOpen : state.ui.isFlowEditorOpen}
-    ), {
-        setModifiedFlowContent
-    })(ContentView)
+    state => ({
+        contentView: state.ui.contentView,
+        displayLarge: state.ui.displayLarge,
+    }),
+    {
+        selectView: setContentView,
+        setDisplayLarge,
+    }
+)(ContentView)