renamed many properties and functions of project-state

Author: benjiwheeler

src/components/menu-bar/menu-bar.jsx

@@ -10,7 +10,7 @@ import Button from '../button/button.jsx';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import Divider from '../divider/divider.jsx';
 import LanguageSelector from '../../containers/language-selector.jsx';
-import FileLoaderFromLocal from '../../containers/file-loader-from-local.jsx';
+import SBFileUploader from '../../containers/sb-file-uploader.jsx';
 import MenuBarMenu from './menu-bar-menu.jsx';
 import {MenuItem, MenuSection} from '../menu/menu.jsx';
 import ProjectTitleInput from './project-title-input.jsx';
@@ -23,9 +23,8 @@ import TurboMode from '../../containers/turbo-mode.jsx';
 import {openTipsLibrary} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
 import {
-    doneLoadingFileUpload,
-    isUpdating,
-    isShowingProject,
+    getIsUpdating,
+    getIsShowingProject,
     newProjectRequested,
     saveRequested
 } from '../../reducers/project-state';
@@ -329,7 +328,7 @@ class MenuBar extends React.Component {
                                     </MenuItemTooltip>
                                 </MenuSection>
                                 <MenuSection>
-                                    <FileLoaderFromLocal
+                                    <SBFileUploader
                                         onUpdateProjectTitle={this.props.onUpdateProjectTitle}
                                     >
                                         {(renderFileInput, loadProject) => (
@@ -346,7 +345,7 @@ class MenuBar extends React.Component {
                                                 {renderFileInput()}
                                             </MenuItem>
                                         )}
-                                    </FileLoaderFromLocal>
+                                    </SBFileUploader>
                                     <SB3Downloader>{downloadProject => (
                                         <MenuItem
                                             onClick={this.handleCloseFileMenuAndThen(downloadProject)}
@@ -620,14 +619,13 @@ MenuBar.propTypes = {
     accountMenuOpen: PropTypes.bool,
     canUpdateProject: PropTypes.bool,
     className: PropTypes.string,
-    doneLoadingFileUpload: PropTypes.func,
     editMenuOpen: PropTypes.bool,
     enableCommunity: PropTypes.bool,
     fileMenuOpen: PropTypes.bool,
     intl: intlShape,
     isRtl: PropTypes.bool,
-    isUpdating: PropTypes.bool,
     isShowingProject: PropTypes.bool,
+    isUpdating: PropTypes.bool,
     languageMenuOpen: PropTypes.bool,
     loginMenuOpen: PropTypes.bool,
     onClickAccount: PropTypes.func,
@@ -636,6 +634,7 @@ MenuBar.propTypes = {
     onClickLanguage: PropTypes.func,
     onClickLogin: PropTypes.func,
     onClickNew: PropTypes.func,
+    onClickSave: PropTypes.func,
     onLogOut: PropTypes.func,
     onOpenRegistration: PropTypes.func,
     onOpenTipLibrary: PropTypes.func,
@@ -655,16 +654,16 @@ MenuBar.propTypes = {
 };
 
 const mapStateToProps = state => {
-    const projectState = state.scratchGui.projectId.projectState;
+    const loadingState = state.scratchGui.projectId.loadingState;
     const user = state.session && state.session.session && state.session.session.user;
     return {
         accountMenuOpen: accountMenuOpen(state),
         canUpdateProject: typeof user !== 'undefined',
         fileMenuOpen: fileMenuOpen(state),
         editMenuOpen: editMenuOpen(state),
         isRtl: state.locales.isRtl,
-        isUpdating: isUpdating(projectState),
-        isShowingProject: isShowingProject(projectState),
+        isUpdating: getIsUpdating(loadingState),
+        isShowingProject: getIsShowingProject(loadingState),
         languageMenuOpen: languageMenuOpen(state),
         loginMenuOpen: loginMenuOpen(state),
         sessionExists: state.session && typeof state.session.session !== 'undefined',
@@ -673,7 +672,6 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = dispatch => ({
-    doneLoadingFileUpload: () => dispatch(doneLoadingFileUpload()),
     onOpenTipLibrary: () => dispatch(openTipsLibrary()),
     onClickAccount: () => dispatch(openAccountMenu()),
     onRequestCloseAccount: () => dispatch(closeAccountMenu()),

src/containers/gui.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {compose} from 'redux';
 import {connect} from 'react-redux';
 import ReactModal from 'react-modal';
+import VM from 'scratch-vm';
 
 import ErrorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 import {openExtensionLibrary} from '../reducers/modals';
@@ -85,7 +86,8 @@ GUI.propTypes = {
     onUpdateReduxProjectTitle: PropTypes.func,
     previewInfoVisible: PropTypes.bool,
     projectHost: PropTypes.string,
-    projectTitle: PropTypes.string
+    projectTitle: PropTypes.string,
+    vm: PropTypes.instanceOf(VM).isRequired
 };
 
 const mapStateToProps = (state, ownProps) => ({
@@ -106,7 +108,8 @@ const mapStateToProps = (state, ownProps) => ({
         state.scratchGui.targets.stage.id === state.scratchGui.targets.editingTarget
     ),
     soundsTabVisible: state.scratchGui.editorTab.activeTabIndex === SOUNDS_TAB_INDEX,
-    tipsLibraryVisible: state.scratchGui.modals.tipsLibrary
+    tipsLibraryVisible: state.scratchGui.modals.tipsLibrary,
+    vm: state.scratchGui.vm
 });
 
 const mapDispatchToProps = dispatch => ({

src/containers/file-loader-from-local.jsx renamed to src/containers/sb-file-uploader.jsx

@@ -7,27 +7,27 @@ import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import analytics from '../lib/analytics';
 import log from '../lib/log';
 import {setProjectTitle} from '../reducers/project-title';
-import {startLoadingFileUpload, doneLoadingFileUpload} from '../reducers/project-state';
+import {onLoadedProject, onProjectUploadStarted} from '../reducers/project-state';
 
 import {
     openLoadingProject,
     closeLoadingProject
 } from '../reducers/modals';
 
 /**
- * FileLoaderFromLocal component passes a file input, load handler and props to its child.
+ * SBFileUploader component passes a file input, load handler and props to its child.
  * It expects this child to be a function with the signature
  *     function (renderFileInput, loadProject) {}
  * The component can then be used to attach project loading functionality
  * to any other component:
  *
- * <FileLoaderFromLocal>{(renderFileInput, loadProject) => (
+ * <SBFileUploader>{(renderFileInput, loadProject) => (
  *     <MyCoolComponent
  *         onClick={loadProject}
  *     >
  *         {renderFileInput()}
  *     </MyCoolComponent>
- * )}</FileLoaderFromLocal>
+ * )}</SBFileUploader>
  */
 
 const messages = defineMessages({
@@ -38,7 +38,7 @@ const messages = defineMessages({
     }
 });
 
-class FileLoaderFromLocal extends React.Component {
+class SBFileUploader extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
@@ -61,21 +61,21 @@ class FileLoaderFromLocal extends React.Component {
                     action: 'Import Project File',
                     nonInteraction: true
                 });
-                this.props.closeLoadingState();
+                this.props.onLoadingFinished();
                 // Reset the file input after project is loaded
                 // This is necessary in case the user wants to reload a project
                 thisFileInput.value = null;
             })
             .catch(error => {
                 log.warn(error);
                 alert(this.props.intl.formatMessage(messages.loadError)); // eslint-disable-line no-alert
-                this.props.closeLoadingState();
+                this.props.onLoadingFinished();
                 // Reset the file input after project is loaded
                 // This is necessary in case the user wants to reload a project
                 thisFileInput.value = null;
             });
         if (thisFileInput.files) { // Don't attempt to load if no file was selected
-            this.props.openLoadingState();
+            this.props.onLoadingStarted();
             reader.readAsArrayBuffer(thisFileInput.files[0]);
             // extract the title from the file and set it as current project title
             if (thisFileInput.files[0].name) {
@@ -113,13 +113,13 @@ class FileLoaderFromLocal extends React.Component {
     }
 }
 
-FileLoaderFromLocal.propTypes = {
+SBFileUploader.propTypes = {
     children: PropTypes.func,
-    closeLoadingState: PropTypes.func,
     intl: intlShape.isRequired,
+    onLoadingFinished: PropTypes.func,
+    onLoadingStarted: PropTypes.func,
     onSetReduxProjectTitle: PropTypes.func,
     onUpdateProjectTitle: PropTypes.func,
-    openLoadingState: PropTypes.func,
     vm: PropTypes.shape({
         loadProject: PropTypes.func
     })
@@ -129,18 +129,18 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-    closeLoadingState: () => {
-        dispatch(doneLoadingFileUpload());
+    onLoadingFinished: () => {
+        dispatch(onLoadedProject());
         dispatch(closeLoadingProject());
     },
     onSetReduxProjectTitle: title => dispatch(setProjectTitle(title)),
-    openLoadingState: () => {
+    onLoadingStarted: () => {
         dispatch(openLoadingProject());
-        dispatch(startLoadingFileUpload());
+        dispatch(onProjectUploadStarted());
     }
 });
 
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(injectIntl(FileLoaderFromLocal));
+)(injectIntl(SBFileUploader));

src/lib/hash-parser-hoc.jsx

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 
 import {
     defaultProjectId,
-    isFetchingProjectWithNoURLId,
+    getIsFetchingWithoutId,
     setProjectId
 } from '../reducers/project-state';
 
@@ -31,7 +31,7 @@ const HashParserHOC = function (WrappedComponent) {
         }
         componentDidUpdate (prevProps) {
             // if we are newly fetching a non-hash project...
-            if (this.props.isFetchingProjectWithNoURLId && !prevProps.isFetchingProjectWithNoURLId) {
+            if (this.props.isFetchingWithoutId && !prevProps.isFetchingWithoutId) {
                 // ...clear the hash from the url
                 history.pushState('new-project', 'new-project',
                     window.location.pathname + window.location.search);
@@ -44,7 +44,7 @@ const HashParserHOC = function (WrappedComponent) {
             const hashMatch = window.location.hash.match(/#(\d+)/);
             const hashProjectId = hashMatch === null ? defaultProjectId : hashMatch[1];
             if (hashProjectId !== this.props.reduxProjectId) {
-                this.props.setHashProjectId(hashProjectId);
+                this.props.setProjectId(hashProjectId);
             }
             if (hashProjectId !== defaultProjectId) {
                 this.setState({hideIntro: true});
@@ -53,9 +53,9 @@ const HashParserHOC = function (WrappedComponent) {
         render () {
             const {
                 /* eslint-disable no-unused-vars */
-                isFetchingProjectWithNoURLId: isFetchingProjectWithNoURLIdProp,
+                isFetchingWithoutId: isFetchingWithoutIdProp,
                 reduxProjectId,
-                setHashProjectId: setHashProjectIdProp,
+                setProjectId: setProjectIdProp,
                 /* eslint-enable no-unused-vars */
                 ...componentProps
             } = this.props;
@@ -68,19 +68,19 @@ const HashParserHOC = function (WrappedComponent) {
         }
     }
     HashParserComponent.propTypes = {
-        isFetchingProjectWithNoURLId: PropTypes.bool,
+        isFetchingWithoutId: PropTypes.bool,
         reduxProjectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        setHashProjectId: PropTypes.func
+        setProjectId: PropTypes.func
     };
     const mapStateToProps = state => {
-        const projectState = state.scratchGui.projectId.projectState;
+        const loadingState = state.scratchGui.projectId.loadingState;
         return {
-            isFetchingProjectWithNoURLId: isFetchingProjectWithNoURLId(projectState),
+            isFetchingWithoutId: getIsFetchingWithoutId(loadingState),
             reduxProjectId: state.scratchGui.projectId.projectId
         };
     };
     const mapDispatchToProps = dispatch => ({
-        setHashProjectId: projectId => dispatch(setProjectId(projectId))
+        setProjectId: projectId => dispatch(setProjectId(projectId))
     });
     return connect(
         mapStateToProps,

src/lib/project-fetcher-hoc.jsx

@@ -5,10 +5,10 @@ import bindAll from 'lodash.bindall';
 import {connect} from 'react-redux';
 
 import {
-    ProjectStates,
+    LoadingStates,
     defaultProjectId,
     onFetchedProjectData,
-    isFetchingProjectWithId,
+    getIsFetchingWithId,
     setProjectId
 } from '../reducers/project-state';
 
@@ -50,16 +50,16 @@ const ProjectFetcherHOC = function (WrappedComponent) {
             if (prevProps.assetHost !== this.props.assetHost) {
                 storage.setAssetHost(this.props.assetHost);
             }
-            if (this.props.isFetchingProjectWithId && !prevProps.isFetchingProjectWithId) {
-                this.fetchProject(this.props.reduxProjectId, this.props.projectState);
+            if (this.props.isFetchingWithId && !prevProps.isFetchingWithId) {
+                this.fetchProject(this.props.reduxProjectId, this.props.loadingState);
             }
         }
-        fetchProject (projectId, projectState) {
+        fetchProject (projectId, loadingState) {
             return storage
                 .load(storage.AssetType.Project, projectId, storage.DataFormat.JSON)
                 .then(projectAsset => {
                     if (projectAsset) {
-                        this.props.onFetchedProjectData(projectAsset.data, projectState);
+                        this.props.onFetchedProjectData(projectAsset.data, loadingState);
                     }
                 })
                 .then(() => {
@@ -85,16 +85,16 @@ const ProjectFetcherHOC = function (WrappedComponent) {
                 intl,
                 projectHost,
                 projectId,
-                projectState,
+                loadingState,
                 reduxProjectId,
                 setProjectId: setProjectIdProp,
                 /* eslint-enable no-unused-vars */
-                isFetchingProjectWithId: isFetchingProjectWithIdProp,
+                isFetchingWithId: isFetchingWithIdProp,
                 ...componentProps
             } = this.props;
             return (
                 <WrappedComponent
-                    fetchingProject={isFetchingProjectWithIdProp}
+                    fetchingProject={isFetchingWithIdProp}
                     {...componentProps}
                 />
             );
@@ -103,11 +103,11 @@ const ProjectFetcherHOC = function (WrappedComponent) {
     ProjectFetcherComponent.propTypes = {
         assetHost: PropTypes.string,
         intl: intlShape.isRequired,
-        isFetchingProjectWithId: PropTypes.bool,
+        isFetchingWithId: PropTypes.bool,
+        loadingState: PropTypes.oneOf(LoadingStates),
         onFetchedProjectData: PropTypes.func,
         projectHost: PropTypes.string,
         projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        projectState: PropTypes.oneOf(ProjectStates),
         reduxProjectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         setProjectId: PropTypes.func
     };
@@ -117,13 +117,13 @@ const ProjectFetcherHOC = function (WrappedComponent) {
     };
 
     const mapStateToProps = state => ({
-        isFetchingProjectWithId: isFetchingProjectWithId(state.scratchGui.projectId.projectState),
-        projectState: state.scratchGui.projectId.projectState,
+        isFetchingWithId: getIsFetchingWithId(state.scratchGui.projectId.loadingState),
+        loadingState: state.scratchGui.projectId.loadingState,
         reduxProjectId: state.scratchGui.projectId.projectId
     });
     const mapDispatchToProps = dispatch => ({
-        onFetchedProjectData: (projectData, projectState) =>
-            dispatch(onFetchedProjectData(projectData, projectState)),
+        onFetchedProjectData: (projectData, loadingState) =>
+            dispatch(onFetchedProjectData(projectData, loadingState)),
         setProjectId: projectId => dispatch(setProjectId(projectId))
     });
     return injectIntl(connect(