diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/src/js/components/ContentView.jsx | 8 | ||||
-rw-r--r-- | web/src/js/components/ContentView/ContentLoader.jsx | 8 | ||||
-rw-r--r-- | web/src/js/components/ContentView/ContentViews.jsx | 4 | ||||
-rw-r--r-- | web/src/js/components/FlowView/Messages.jsx | 2 | ||||
-rw-r--r-- | web/src/js/components/FlowView/ToggleEdit.jsx | 8 | ||||
-rw-r--r-- | web/src/js/components/common/CodeEditor.jsx | 27 | ||||
-rw-r--r-- | web/src/js/ducks/ui/flow.js | 41 | ||||
-rw-r--r-- | web/src/js/utils.js | 14 |
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; +} |