From f578bf512248c609296d2ff0ea2007a6feac561f Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Fri, 22 Jul 2016 19:07:53 +0200
Subject: file upload updates contentview, editable contentloader, diffs on
 upload

---
 web/src/js/components/ContentView.jsx              |  8 +++----
 .../js/components/ContentView/ContentLoader.jsx    |  8 +++++--
 web/src/js/components/ContentView/ContentViews.jsx |  4 ++--
 web/src/js/components/FlowView/Messages.jsx        |  2 +-
 web/src/js/components/FlowView/ToggleEdit.jsx      |  8 +++----
 web/src/js/components/common/CodeEditor.jsx        | 27 +++++++++-------------
 6 files changed, 28 insertions(+), 29 deletions(-)

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 06272627..7c8ac510 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -18,7 +18,7 @@ ContentView.propTypes = {
 ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
 function ContentView(props) {
-    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, uploadContent, onContentChange, readonly } = props
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, lastFileUpload, uploadContent, onContentChange, content, readonly } = props
 
     if (message.contentLength === 0) {
         return <MetaViews.ContentEmpty {...props}/>
@@ -33,15 +33,14 @@ function ContentView(props) {
     }
 
     const View = ContentViews[contentView]
-
     return (
         <div>
             {View.textView ? (
-                <ContentLoader flow={flow} message={message}>
+                <ContentLoader flow={flow} lastFileUpload={lastFileUpload} readonly={readonly} message={message}>
                     <View readonly={readonly} onChange={onContentChange} content="" />
                 </ContentLoader>
             ) : (
-                <View flow={flow} readonly={readonly} message={message} />
+                <View flow={flow} lastFileUpload={lastFileUpload} readonly={readonly} content={content} message={message} />
             )}
             <div className="view-options text-center">
                 <ViewSelector onSelectView={selectView} active={View} message={message}/>
@@ -73,6 +72,7 @@ export default connect(
     state => ({
         contentView: state.ui.flow.contentView,
         displayLarge: state.ui.flow.displayLarge,
+        lastFileUpload: state.ui.flow.lastFileUpload
     }),
     {
         selectView: setContentView,
diff --git a/web/src/js/components/ContentView/ContentLoader.jsx b/web/src/js/components/ContentView/ContentLoader.jsx
index 1a23325c..503ea758 100644
--- a/web/src/js/components/ContentView/ContentLoader.jsx
+++ b/web/src/js/components/ContentView/ContentLoader.jsx
@@ -46,9 +46,13 @@ export default class ContentLoader extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        if (nextProps.message !== this.props.message) {
+        let reload = nextProps.message !== this.props.message || nextProps.lastFileUpload !== this.props.lastFileUpload
+        let isUserEdit = !nextProps.readonly && nextProps.message.content
+
+        if (isUserEdit)
+            this.setState({content: nextProps.message.content})
+        else if(reload)
             this.requestContent(nextProps)
-        }
     }
 
     componentWillUnmount() {
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index 6c7f4900..4ae6044b 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -60,10 +60,10 @@ ViewAuto.propTypes = {
     flow: React.PropTypes.object.isRequired,
 }
 
-export function ViewAuto({ message, flow, readonly }) {
+export function ViewAuto({ message, flow, readonly, lastFileUpload }) {
     const View = ViewAuto.findView(message)
     if (View.textView) {
-        return <ContentLoader message={message} flow={flow}><View readonly={readonly}  content="" /></ContentLoader>
+        return <ContentLoader message={message} lastFileUpload={lastFileUpload} flow={flow}><View readonly={readonly}  content="" /></ContentLoader>
     } else {
         return <View readonly={readonly} message={message} flow={flow} />
     }
diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx
index 0f6df8da..a3beaf84 100644
--- a/web/src/js/components/FlowView/Messages.jsx
+++ b/web/src/js/components/FlowView/Messages.jsx
@@ -68,7 +68,7 @@ function ResponseLine({ flow, readonly, updateFlow }) {
 
 const Message = connect(
     state => ({
-        flow: state.flows.byId[state.flows.selected[0]],
+        flow: state.ui.flow.modifiedFlow || state.flows.byId[state.flows.selected[0]],
         isEdit: !!state.ui.flow.modifiedFlow,
     }),
     {
diff --git a/web/src/js/components/FlowView/ToggleEdit.jsx b/web/src/js/components/FlowView/ToggleEdit.jsx
index cf197998..9016348e 100644
--- a/web/src/js/components/FlowView/ToggleEdit.jsx
+++ b/web/src/js/components/FlowView/ToggleEdit.jsx
@@ -10,11 +10,11 @@ ToggleEdit.propTypes = {
     stopEdit: PropTypes.func.isRequired,
 }
 
-function ToggleEdit({ isEdit, startEdit, stopEdit, flow, old_flow }) {
+function ToggleEdit({ isEdit, startEdit, stopEdit, flow, modifiedFlow }) {
     return (
         <div className="edit-flow-container">
             {isEdit ?
-                <a className="edit-flow" onClick={() => stopEdit(flow, old_flow)}>
+                <a className="edit-flow" onClick={() => stopEdit(flow, modifiedFlow)}>
                     <i className="fa fa-check"/>
                 </a>
                 :
@@ -29,8 +29,8 @@ function ToggleEdit({ isEdit, startEdit, stopEdit, flow, old_flow }) {
 export default connect(
     state => ({
         isEdit: !!state.ui.flow.modifiedFlow,
-        flow: state.ui.flow.modifiedFlow || state.flows.byId[state.flows.selected[0]],
-        old_flow: state.flows.byId[state.flows.selected[0]]
+        modifiedFlow: state.ui.flow.modifiedFlow || state.flows.byId[state.flows.selected[0]],
+        flow: state.flows.byId[state.flows.selected[0]]
     }),
     {
         startEdit,
diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx
index ad7af39d..95f1b98b 100644
--- a/web/src/js/components/common/CodeEditor.jsx
+++ b/web/src/js/components/common/CodeEditor.jsx
@@ -3,24 +3,19 @@ import { render } from 'react-dom';
 import Codemirror from 'react-codemirror';
 
 
-export default class CodeEditor extends Component{
-     static propTypes = {
+CodeEditor.propTypes = {
         content: PropTypes.string.isRequired,
         onChange: PropTypes.func.isRequired,
-    }
+}
 
-    constructor(props){
-        super(props)
-    }
+export default function CodeEditor ( { content, onChange} ){
 
-    render() {
-        let options = {
-            lineNumbers: true
-        };
-        return (
-            <div onKeyDown={e => e.stopPropagation()}>
-                <Codemirror value={this.props.content} onChange={this.props.onChange} options={options}/>
-            </div>
-        )
-    }
+    let options = {
+        lineNumbers: true
+    };
+    return (
+        <div onKeyDown={e => e.stopPropagation()}>
+            <Codemirror value={content} onChange={onChange} options={options}/>
+        </div>
+    )
 }
-- 
cgit v1.2.3