diff --git a/frontend/components/MarkdownEditor/MarkdownEditor.js b/frontend/components/MarkdownEditor/MarkdownEditor.js index c527cf2c..143e7fbd 100644 --- a/frontend/components/MarkdownEditor/MarkdownEditor.js +++ b/frontend/components/MarkdownEditor/MarkdownEditor.js @@ -26,6 +26,7 @@ class MarkdownEditor extends React.Component { // This is actually not used but it triggers // re-render to help with CodeMirror focus issues preview: React.PropTypes.bool, + toggleUploadingIndicator: React.PropTypes.func, } onChange = (newText) => { @@ -42,6 +43,8 @@ class MarkdownEditor extends React.Component { const insertOnNewLine = cursorPosition.ch !== 0; let newCursorPositionLine; + this.props.toggleUploadingIndicator(); + // Lets set up the upload text const pendingUploadTag = `![${file.name}](Uploading...)`; if (insertOnNewLine) { @@ -78,6 +81,7 @@ class MarkdownEditor extends React.Component { body: formData, }) .then(_s3Response => { + this.props.toggleUploadingIndicator(); this.props.replaceText({ original: pendingUploadTag, new: `![${file.name}](${data.asset.url})`, @@ -85,12 +89,16 @@ class MarkdownEditor extends React.Component { editor.setCursor(newCursorPositionLine, 0); }) .catch(_err => { + this.props.toggleUploadingIndicator(); this.props.replaceText({ original: pendingUploadTag, new: '', }); editor.setCursor(newCursorPositionLine, 0); }); + }) + .catch(_err => { + this.props.toggleUploadingIndicator(); }); } diff --git a/frontend/scenes/DocumentEdit/DocumentEdit.js b/frontend/scenes/DocumentEdit/DocumentEdit.js index 2aef063c..0c742dec 100644 --- a/frontend/scenes/DocumentEdit/DocumentEdit.js +++ b/frontend/scenes/DocumentEdit/DocumentEdit.js @@ -34,10 +34,6 @@ class DocumentEdit extends Component { params: React.PropTypes.object, } - state = { - scrollTop: 0, - } - constructor(props) { super(props); this.store = new DocumentEditStore( @@ -45,6 +41,10 @@ class DocumentEdit extends Component { ); } + state = { + scrollTop: 0, + } + componentDidMount = () => { if (this.props.route.newDocument) { this.store.collectionId = this.props.params.id; @@ -70,7 +70,7 @@ class DocumentEdit extends Component { if (this.store.hasPendingChanges) { return confirm(DISREGARD_CHANGES); } - return; + return null; }); } @@ -154,7 +154,7 @@ class DocumentEdit extends Component { title={ title } titleText={ titleText } fixed - loading={ this.store.isSaving } + loading={ this.store.isSaving || this.store.isUploading } search={ false } > { (this.store.isFetching || !('Editor' in this.state)) ? ( diff --git a/frontend/scenes/DocumentEdit/DocumentEditStore.js b/frontend/scenes/DocumentEdit/DocumentEditStore.js index 3e8ed2a5..a9109add 100644 --- a/frontend/scenes/DocumentEdit/DocumentEditStore.js +++ b/frontend/scenes/DocumentEdit/DocumentEditStore.js @@ -32,6 +32,7 @@ class DocumentEditStore { @observable preview; @observable isFetching; @observable isSaving; + @observable isUploading; /* Actions */ @@ -122,6 +123,10 @@ class DocumentEditStore { this.text = '# Lets start with a title\n\nAnd continue from there...'; } + @action toggleUploadingIndicator = () => { + this.isUploading = !this.isUploading; + } + // Generic persistSettings = () => { diff --git a/frontend/scenes/DocumentEdit/components/Editor.js b/frontend/scenes/DocumentEdit/components/Editor.js index 0d632d5d..0a600d3b 100644 --- a/frontend/scenes/DocumentEdit/components/Editor.js +++ b/frontend/scenes/DocumentEdit/components/Editor.js @@ -25,6 +25,7 @@ const Editor = observer((props) => { onSave={ props.onSave } onCancel={ props.onCancel } togglePreview={ props.togglePreview } + toggleUploadingIndicator={ store.toggleUploadingIndicator } /> { store.preview ? (