7 files changed, 27 insertions, 18 deletions
diff --git a/web/src/js/__tests__/components/FlowView/ToggleEditSpec.js b/web/src/js/__tests__/components/FlowView/ToggleEditSpec.js
index 4578fdc8..ec3a8462 100644
--- a/web/src/js/__tests__/components/FlowView/ToggleEditSpec.js
+++ b/web/src/js/__tests__/components/FlowView/ToggleEditSpec.js
@@ -6,6 +6,7 @@ import { Provider } from 'react-redux'
 import { startEdit, stopEdit } from '../../../ducks/ui/flow'
 import { TFlow, TStore } from '../../ducks/tutils'
 
+global.fetch = jest.fn()
 let tflow = new TFlow()
 
 describe('ToggleEdit Component', () => {
@@ -24,7 +25,7 @@ describe('ToggleEdit Component', () => {
 
     it('should handle click on stopEdit', () => {
         tree.children[0].props.onClick()
-        expect(store.getActions()).toEqual([stopEdit(tflow, true)])
+        expect(fetch).toBeCalled()
     })
 
     it('should handle click on startEdit', () => {
diff --git a/web/src/js/__tests__/ducks/ui/flowSpec.js b/web/src/js/__tests__/ducks/ui/flowSpec.js
index cd6ffa2f..11ca021e 100644
--- a/web/src/js/__tests__/ducks/ui/flowSpec.js
+++ b/web/src/js/__tests__/ducks/ui/flowSpec.js
@@ -11,7 +11,7 @@ import reducer, {
                     displayLarge
                 } from '../../../ducks/ui/flow'
 
-import { select, updateFlow } from '../../../ducks/flows'
+import * as flowActions from '../../../ducks/flows'
 
 describe('flow reducer', () => {
     it('should return initial state', () => {
@@ -61,11 +61,11 @@ describe('flow reducer', () => {
     })
 
     it('should not change the contentview mode', () => {
-        expect(reducer({contentView: 'foo'}, select(1)).contentView).toEqual('foo')
+        expect(reducer({contentView: 'foo'}, flowActions.select(1)).contentView).toEqual('foo')
     })
 
     it('should change the contentview mode to auto after editing when a new flow will be selected', () => {
-        expect(reducer({contentView: 'foo', modifiedFlow : 'test_flow'}, select(1)).contentView).toEqual('Auto')
+        expect(reducer({contentView: 'foo', modifiedFlow : 'test_flow'}, flowActions.select(1)).contentView).toEqual('Auto')
     })
 
     it('should set update and merge the modifiedflow with the update values', () => {
@@ -84,7 +84,11 @@ describe('flow reducer', () => {
     it('should stop editing when the selected flow is updated', () => {
         let modifiedFlow = {id: 1}
         let updatedFlow = {id: 1}
-        expect(reducer({modifiedFlow}, stopEdit(updatedFlow, modifiedFlow)).modifiedFlow).toBeFalsy()
+        expect(reducer(
+            { modifiedFlow },
+            {type: flowActions.UPDATE, data: modifiedFlow}
+            ).modifiedFlow
+        ).toBeFalsy()
     })
 
     it('should set content view', () => {
diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx
index a94d2ef6..76720124 100644
--- a/web/src/js/app.jsx
+++ b/web/src/js/app.jsx
@@ -9,13 +9,13 @@ import rootReducer from './ducks/index'
 import { add as addLog } from './ducks/eventLog'
 import useUrlState from './urlState'
 import WebSocketBackend from './backends/websocket'
+import { logger } from 'redux-logger'
 
 
 const middlewares = [thunk];
 
 if (process.env.NODE_ENV !== 'production') {
-  const createLogger = require('redux-logger');
-  middlewares.push(createLogger());
+  middlewares.push(logger);
 }
 
 // logger must be last
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index a79bf9e5..cb4749c5 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import * as ContentViews from './ContentView/ContentViews'
+import { Edit, ViewServer, ViewImage } from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ShowFullContentButton from './ContentView/ShowFullContentButton'
 
@@ -16,7 +16,7 @@ ContentView.propTypes = {
     message: PropTypes.object.isRequired,
 }
 
-ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
+ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2)
 
 function ContentView(props) {
     const { flow, message, contentView, isDisplayLarge, displayLarge, onContentChange, readonly } = props
@@ -33,10 +33,15 @@ function ContentView(props) {
         return <MetaViews.ContentTooLarge {...props} onClick={displayLarge}/>
     }
 
-    const View = ContentViews[contentView] || ContentViews['ViewServer']
+    let view;
+    if(contentView === "Edit") {
+        view = <Edit flow={flow} message={message} onChange={onContentChange}/>
+    } else {
+        view = <ViewServer flow={flow} message={message} contentView={contentView}/>
+    }
     return (
         <div className="contentview">
-            <View flow={flow} message={message} contentView={contentView} readonly={readonly} onChange={onContentChange}/>
+            {view}
             <ShowFullContentButton/>
         </div>
     )
diff --git a/web/src/js/components/ContentView/ContentLoader.jsx b/web/src/js/components/ContentView/ContentLoader.jsx
index 69e4a988..44716e12 100644
--- a/web/src/js/components/ContentView/ContentLoader.jsx
+++ b/web/src/js/components/ContentView/ContentLoader.jsx
@@ -55,7 +55,7 @@ export default function withContentLoader(View) {
                 return this.setState({request: undefined, content: ""})
             }
 
-            let requestUrl = MessageUtils.getContentURL(props.flow, props.message, (View.name == 'ViewServer' ? props.contentView : undefined))
+            let requestUrl = MessageUtils.getContentURL(props.flow, props.message, props.contentView)
 
             // We use XMLHttpRequest instead of fetch() because fetch() is not (yet) abortable.
             let request = new XMLHttpRequest();
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index dfae937e..387c940a 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { setContentViewDescription, setContent } from '../../ducks/ui/flow'
-import ContentLoader from './ContentLoader'
+import withContentLoader from './ContentLoader'
 import { MessageUtils } from '../../flow/utils'
 import CodeEditor from './CodeEditor'
 
@@ -28,7 +28,7 @@ Edit.propTypes = {
 function Edit({ content, onChange }) {
     return <CodeEditor content={content} onChange={onChange}/>
 }
-Edit = ContentLoader(Edit)
+Edit = withContentLoader(Edit)
 
 export class PureViewServer extends Component {
     static propTypes  = {
@@ -94,6 +94,6 @@ const ViewServer = connect(
         setContentViewDescription,
         setContent
     }
-)(ContentLoader(PureViewServer))
+)(withContentLoader(PureViewServer))
 
 export { Edit, ViewServer, ViewImage }
diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js
index 51ad4184..ea31db19 100644
--- a/web/src/js/ducks/ui/flow.js
+++ b/web/src/js/ducks/ui/flow.js
@@ -148,7 +148,6 @@ export function setContent(content){
     return { type: SET_CONTENT, content }
 }
 
-export function stopEdit(data, modifiedFlow) {
-    let diff = getDiff(data, modifiedFlow)
-    return {type: flowsActions.UPDATE, data, diff }
+export function stopEdit(flow, modifiedFlow) {
+    return flowsActions.update(flow, getDiff(flow, modifiedFlow))
 }