diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx index 5e0cf172099103bb9dc03bd458d1f75f9c505cb2..7d0f3002081f64effafb0acccfa76e527f17ed07 100644 --- a/src/containers/gui.jsx +++ b/src/containers/gui.jsx @@ -70,7 +70,7 @@ class GUI extends React.Component { } = this.props; return ( <GUIComponent - loading={fetchingProject || this.state.loading} + loading={fetchingProject || this.state.loading || this.props.loadingStateVisible} vm={vm} {...componentProps} > @@ -85,6 +85,7 @@ GUI.propTypes = { feedbackFormVisible: PropTypes.bool, fetchingProject: PropTypes.bool, importInfoVisible: PropTypes.bool, + loadingStateVisible: PropTypes.bool, previewInfoVisible: PropTypes.bool, projectData: PropTypes.string, vm: PropTypes.instanceOf(VM) @@ -98,6 +99,7 @@ const mapStateToProps = state => ({ costumesTabVisible: state.editorTab.activeTabIndex === COSTUMES_TAB_INDEX, feedbackFormVisible: state.modals.feedbackForm, importInfoVisible: state.modals.importInfo, + loadingStateVisible: state.modals.loadingProject, previewInfoVisible: state.modals.previewInfo, soundsTabVisible: state.editorTab.activeTabIndex === SOUNDS_TAB_INDEX }); diff --git a/src/containers/load-button.jsx b/src/containers/load-button.jsx index da88c6ebed2da06235a3c9b8989f1bab12d4b7c7..b3804d8c5b1529bdd2f35589cb92032f12d9bb87 100644 --- a/src/containers/load-button.jsx +++ b/src/containers/load-button.jsx @@ -5,6 +5,11 @@ import {connect} from 'react-redux'; import LoadButtonComponent from '../components/load-button/load-button.jsx'; +import { + openLoadingProject, + closeLoadingProject +} from '../reducers/modals'; + class LoadButton extends React.Component { constructor (props) { super(props); @@ -13,10 +18,21 @@ class LoadButton extends React.Component { 'handleChange', 'handleClick' ]); + this.state = { + loadingError: false, + errorMessage: '' + }; } handleChange (e) { + this.props.openLoadingState(); const reader = new FileReader(); - reader.onload = () => this.props.vm.loadProjectLocal(reader.result); + reader.onload = () => this.props.vm.loadProjectLocal(reader.result) + .then(() => { + this.props.closeLoadingState(); + }) + .catch(error => { + this.setState({loadingError: true, errorMessage: error}); + }); reader.readAsArrayBuffer(e.target.files[0]); } handleClick () { @@ -26,7 +42,10 @@ class LoadButton extends React.Component { this.fileInput = input; } render () { + if (this.state.loadingError) throw new Error(`Failed to load project: ${this.state.errorMessage}`); const { + closeLoadingState, // eslint-disable-line no-unused-vars + openLoadingState, // eslint-disable-line no-unused-vars vm, // eslint-disable-line no-unused-vars ...props } = this.props; @@ -42,6 +61,8 @@ class LoadButton extends React.Component { } LoadButton.propTypes = { + closeLoadingState: PropTypes.func, + openLoadingState: PropTypes.func, vm: PropTypes.shape({ loadProjectLocal: PropTypes.func }) @@ -51,7 +72,12 @@ const mapStateToProps = state => ({ vm: state.vm }); +const mapDispatchToProps = dispatch => ({ + closeLoadingState: () => dispatch(closeLoadingProject()), + openLoadingState: () => dispatch(openLoadingProject()) +}); + export default connect( mapStateToProps, - () => ({}) // omit dispatch prop + mapDispatchToProps )(LoadButton); diff --git a/src/reducers/modals.js b/src/reducers/modals.js index ba038ff3464e2d3c33373e5fb54f9d92fe1544f3..2a3772e59935d359a8345c8a422cf6a666b20ec1 100644 --- a/src/reducers/modals.js +++ b/src/reducers/modals.js @@ -8,6 +8,7 @@ const MODAL_COSTUME_LIBRARY = 'costumeLibrary'; const MODAL_EXTENSION_LIBRARY = 'extensionLibrary'; const MODAL_FEEDBACK_FORM = 'feedbackForm'; const MODAL_IMPORT_INFO = 'importInfo'; +const MODAL_LOADING_PROJECT = 'loadingProject'; const MODAL_PREVIEW_INFO = 'previewInfo'; const MODAL_SOUND_LIBRARY = 'soundLibrary'; const MODAL_SPRITE_LIBRARY = 'spriteLibrary'; @@ -20,6 +21,7 @@ const initialState = { [MODAL_EXTENSION_LIBRARY]: false, [MODAL_FEEDBACK_FORM]: false, [MODAL_IMPORT_INFO]: false, + [MODAL_LOADING_PROJECT]: false, [MODAL_PREVIEW_INFO]: true, [MODAL_SOUND_LIBRARY]: false, [MODAL_SPRITE_LIBRARY]: false, @@ -73,6 +75,10 @@ const openImportInfo = function () { analytics.pageview('modals/import'); return openModal(MODAL_IMPORT_INFO); }; +const openLoadingProject = function () { + analytics.pageview('modals/loading'); + return openModal(MODAL_LOADING_PROJECT); +}; const openPreviewInfo = function () { analytics.pageview('/modals/preview'); return openModal(MODAL_PREVIEW_INFO); @@ -104,6 +110,9 @@ const closeFeedbackForm = function () { const closeImportInfo = function () { return closeModal(MODAL_IMPORT_INFO); }; +const closeLoadingProject = function () { + return closeModal(MODAL_LOADING_PROJECT); +}; const closePreviewInfo = function () { return closeModal(MODAL_PREVIEW_INFO); }; @@ -123,6 +132,7 @@ export { openExtensionLibrary, openFeedbackForm, openImportInfo, + openLoadingProject, openPreviewInfo, openSoundLibrary, openSpriteLibrary, @@ -132,6 +142,7 @@ export { closeExtensionLibrary, closeFeedbackForm, closeImportInfo, + closeLoadingProject, closePreviewInfo, closeSpriteLibrary, closeSoundLibrary,