aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/src/js/components/ContentView.jsx8
-rw-r--r--web/src/js/components/ContentView/ContentLoader.jsx8
-rw-r--r--web/src/js/components/ContentView/ContentViews.jsx4
-rw-r--r--web/src/js/components/FlowView/Messages.jsx2
-rw-r--r--web/src/js/components/FlowView/ToggleEdit.jsx8
-rw-r--r--web/src/js/components/common/CodeEditor.jsx27
-rw-r--r--web/src/js/ducks/ui/flow.js41
-rw-r--r--web/src/js/utils.js14
8 files changed, 65 insertions, 47 deletions
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>
+ )
}
diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js
index e78f6373..26845955 100644
--- a/web/src/js/ducks/ui/flow.js
+++ b/web/src/js/ducks/ui/flow.js
@@ -1,4 +1,6 @@
import * as flowsActions from '../flows'
+import { getDiff } from "../../utils"
+
import _ from 'lodash'
export const SET_CONTENT_VIEW = 'UI_FLOWVIEW_SET_CONTENT_VIEW',
@@ -6,13 +8,15 @@ export const SET_CONTENT_VIEW = 'UI_FLOWVIEW_SET_CONTENT_VIEW',
SET_TAB = "UI_FLOWVIEW_SET_TAB",
START_EDIT = 'UI_FLOWVIEW_START_EDIT',
UPDATE_EDIT = 'UI_FLOWVIEW_UPDATE_EDIT',
- STOP_EDIT = 'UI_FLOWVIEW_STOP_EDIT'
+ STOP_EDIT = 'UI_FLOWVIEW_STOP_EDIT',
+ UPLOAD_CONTENT = 'UI_FLOWVIEW_UPLOAD_CONTENT'
const defaultState = {
displayLarge: false,
modifiedFlow: false,
contentView: 'ViewAuto',
+ lastFileUpload: false,
tab: 'request',
}
@@ -38,6 +42,12 @@ export default function reducer(state = defaultState, action) {
modifiedFlow: false
}
+ case UPLOAD_CONTENT:
+ return {
+ ... state,
+ lastFileUpload: new Date()
+ }
+
case flowsActions.SELECT:
return {
...state,
@@ -90,30 +100,25 @@ export function updateEdit(update) {
export function uploadContent(flow, content, type){
return (dispatch) => {
- dispatch(flowsActions.updateContent(flow, content, type)).then( () => {
- dispatch(flowsActions.updateFlow(flow))
- dispatch({ type: STOP_EDIT })
- })
+ dispatch(flowsActions.updateContent(flow, content, type))
+ dispatch({ type: UPLOAD_CONTENT })
}
}
-export function stopEdit(modified_flow, old_flow) {
- //make diff of modified_flow and old_flow
+export function stopEdit(flow, modified_flow) {
+ let diff = getDiff(flow, modified_flow)
return (dispatch) => {
- let flow = {...modified_flow}
-
- if (flow.response.content) {
- dispatch(flowsActions.updateContent(flow, flow.response.content, "response"))
- flow.response = _.omit(flow.response, "content")
+ if (diff.response && diff.response.content) {
+ dispatch(flowsActions.updateContent(flow, diff.response.content, "response"))
+ delete diff.response.content
}
- if (flow.request.content) {
- dispatch(flowsActions.updateContent(flow, flow.request.content, "request"))
- flow.request = _.omit(flow.request, "content")
+ if (diff.request && diff.request.content) {
+ dispatch(flowsActions.updateContent(flow, diff.request.content, "request"))
+ delete diff.request.content
}
-
- dispatch(flowsActions.update(flow)).then(() => {
- dispatch(flowsActions.updateFlow(flow))
+ dispatch(flowsActions.update(flow, diff)).then(() => {
+ dispatch(flowsActions.updateFlow(modified_flow))
dispatch({ type: STOP_EDIT })
})
}
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index eceda195..ba07b00a 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -105,3 +105,17 @@ fetchApi.put = (url, json, options) => fetchApi(
...options
}
)
+
+
+export function getDiff(obj1, obj2) {
+ let result = {...obj2};
+ _.forIn(obj1, (value, key) => {
+ if(_.isEqual(obj2[key], obj1[key]))
+ result[key] = undefined;
+ else if(typeof Array.isArray(obj2[key]) && Array.isArray(obj2[key]))
+ result[key] = {...obj2[key]};
+ else if(typeof obj2[key] == 'object' && typeof obj1[key] == 'object')
+ result[key] = getDiff(obj1[key], obj2[key]);
+ });
+ return result;
+}