combine clientside and serverside contentviews

2 files changed, 18 insertions, 38 deletions

diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index a1bee54e..3b2af0a9 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -18,31 +18,19 @@ function ViewImage({ flow, message }) {
     )
 }
 
-
-ViewRaw.matches = () => true
-ViewRaw.propTypes = {
+Edit.propTypes = {
     content: React.PropTypes.string.isRequired,
 }
-function ViewRaw({ content, readonly, onChange }) {
-    return readonly ? <pre>{content}</pre> : <CodeEditor content={content} onChange={onChange}/>
-}
-ViewRaw = ContentLoader(ViewRaw)
 
-ViewAuto.matches = () => false
-ViewAuto.findView = msg => [ViewImage, ViewRaw].find(v => v.matches(msg)) || ViewRaw
-ViewAuto.propTypes = {
-    message: React.PropTypes.object.isRequired,
-    flow: React.PropTypes.object.isRequired,
-}
-function ViewAuto({ message, flow, readonly, onChange }) {
-    const View = ViewAuto.findView(message)
-    return <View message={message} flow={flow} readonly={readonly} onChange={onChange}/>
+function Edit({ content, onChange }) {
+    return <CodeEditor content={content} onChange={onChange}/>
 }
+Edit = ContentLoader(Edit)
 
 
-function ViewServer({content, contentView, message, flow}){
+function ViewServer(props){
+    const {content, contentView, message} = props
     let data = JSON.parse(content)
-    let showImage = isImage.test(MessageUtils.getContentType(message))
 
     return <div>
             {contentView != data.description &&
@@ -59,14 +47,12 @@ function ViewServer({content, contentView, message, flow}){
                     </div>
                 )}
             </pre>
-            {showImage &&
-                <div className="flowview-image">
-                    <img src={MessageUtils.getContentURL(flow, message)} alt="preview" className="img-thumbnail"/>
-                </div>
+            {ViewImage.matches(message) &&
+                <ViewImage {...props} />
             }
         </div>
 }
 
 ViewServer = ContentLoader(ViewServer)
 
-export { ViewImage, ViewRaw, ViewAuto, ViewServer }
+export { Edit, ViewServer, ViewImage }
diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx
index e031b51f..c5670328 100644
--- a/web/src/js/components/ContentView/ViewSelector.jsx
+++ b/web/src/js/components/ContentView/ViewSelector.jsx
@@ -24,31 +24,25 @@ ViewButton = connect(state => ({
 ViewSelector.propTypes = {
     message: PropTypes.object.isRequired,
 }
-function ViewSelector({ message, contentViews }) {
-
-    let autoView = ContentViews.ViewAuto.findView(message)
-    let autoViewName = (autoView.displayName || autoView.name)
-        .toLowerCase()
-        .replace('view', '')
-        .replace(/ContentLoader\((.+)\)/,"$1")
-
+function ViewSelector({contentViews, isEdit }) {
+    let edit = ContentViews.Edit.displayName
     return (
         <div className="view-selector btn-group btn-group-xs">
 
-            {Object.keys(ContentViews).map(name =>
-                name === "ViewRaw"  &&
-                <ViewButton key={name} name={name}>{name.toLowerCase().replace('view', '')}</ViewButton>
-            )}
-
             {contentViews.map(name =>
-                <ViewButton key={name} name={name}>{name.toLowerCase().replace('view', '')}</ViewButton>
+                <ViewButton key={name} name={name}>{name.toLowerCase().replace('_', ' ')}</ViewButton>
             )}
 
+            {isEdit &&
+                <ViewButton key={edit} name={edit}>{edit.toLowerCase()}</ViewButton>
+            }
+
         </div>
     )
 }
 
 export default connect (
     state => ({
-        contentViews: state.settings.contentViews
+        contentViews: state.settings.contentViews,
+        isEdit: !!state.ui.flow.modifiedFlow,
     }))(ViewSelector)