combine clientside and serverside contentviews

5 files changed, 31 insertions, 43 deletions

diff --git a/web/src/css/contentview.less b/web/src/css/contentview.less
index 327dd689..becac9a2 100644
--- a/web/src/css/contentview.less
+++ b/web/src/css/contentview.less
@@ -1,10 +1,14 @@
 .contentview {
      .header {
-         font-weight: bold;
+        font-weight: bold;
      }
     .highlight{
-        color: pink;
+        font-weight: bold;
+    }
+    .offset{
+        color: blue
+    }
+    .text{
+
     }
-    .offset{  }
-    .text{  }
 }
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)
diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js
index 549efb1d..d9811a33 100644
--- a/web/src/js/ducks/ui/flow.js
+++ b/web/src/js/ducks/ui/flow.js
@@ -19,12 +19,14 @@ const defaultState = {
 }
 
 export default function reducer(state = defaultState, action) {
+    let wasInEditMode = !!(state.modifiedFlow)
     switch (action.type) {
 
         case START_EDIT:
             return {
                 ...state,
                 modifiedFlow: action.flow,
+                contentView: 'Edit'
             }
 
         case UPDATE_EDIT:
@@ -38,6 +40,7 @@ export default function reducer(state = defaultState, action) {
                 ...state,
                 modifiedFlow: false,
                 displayLarge: false,
+                contentView: (wasInEditMode ? 'Auto' : state.contentView)
             }
 
         case flowsActions.UPDATE:
@@ -49,6 +52,7 @@ export default function reducer(state = defaultState, action) {
                     ...state,
                     modifiedFlow: false,
                     displayLarge: false,
+                    contentView: (wasInEditMode ? 'Auto' : state.contentView)
                 }
             } else {
                 return state
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index b8435aa0..cd174069 100644
--- a/web/src/js/flow/utils.js
+++ b/web/src/js/flow/utils.js
@@ -49,7 +49,7 @@ export var MessageUtils = {
         } else if (message === flow.response) {
             message = "response";
         }
-        return `/flows/${flow.id}/${message}/content` +  (view ? `?cv=${view}` : '');
+        return `/flows/${flow.id}/${message}/content` +  (view ? `/${view}` : '');
     }
 };