From 2dac6cf5cd64f922caeaf88e66697222cbb19418 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Fri, 5 Oct 2018 23:33:11 -0400
Subject: [PATCH] cleaning up react lifecycle functions

---
 src/lib/project-fetcher-hoc.jsx | 17 ++++++----------
 src/lib/project-saver-hoc.jsx   |  6 +++---
 src/lib/vm-manager-hoc.jsx      | 36 +++++++++++----------------------
 src/reducers/project-id.js      |  8 +++++---
 4 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/lib/project-fetcher-hoc.jsx b/src/lib/project-fetcher-hoc.jsx
index ff0d8aa88..10901d29f 100644
--- a/src/lib/project-fetcher-hoc.jsx
+++ b/src/lib/project-fetcher-hoc.jsx
@@ -27,9 +27,6 @@ const ProjectFetcherHOC = function (WrappedComponent) {
             bindAll(this, [
                 'fetchProject'
             ]);
-            this.state = {
-                fetchingProject: false
-            };
             storage.setProjectHost(props.projectHost);
             storage.setAssetHost(props.assetHost);
             storage.setTranslatorFunction(props.intl.formatMessage);
@@ -63,11 +60,7 @@ const ProjectFetcherHOC = function (WrappedComponent) {
                 .load(storage.AssetType.Project, projectId, storage.DataFormat.JSON)
                 .then(projectAsset => {
                     if (projectAsset) {
-                        this.setState({
-                            fetchingProject: false
-                        }, () => {
-                            this.props.doneFetchingProjectData(projectAsset.data, projectState);
-                        });
+                        this.props.doneFetchingProjectData(projectAsset.data, projectState);
                     }
                 })
                 .then(() => {
@@ -81,7 +74,9 @@ const ProjectFetcherHOC = function (WrappedComponent) {
                         });
                     }
                 })
-                .catch(err => log.error(err));
+                .catch(err => {
+                    log.error(err);
+                });
         }
         render () {
             const {
@@ -89,18 +84,18 @@ const ProjectFetcherHOC = function (WrappedComponent) {
                 assetHost,
                 doneFetchingProjectData: doneFetchingProjectDataProp,
                 intl,
-                isFetchingProjectWithId: isFetchingProjectWithIdProp,
                 projectHost,
                 projectId,
                 projectState,
                 reduxProjectId,
                 setInitialProjectId: setInitialProjectIdProp,
                 /* eslint-enable no-unused-vars */
+                isFetchingProjectWithId: isFetchingProjectWithIdProp,
                 ...componentProps
             } = this.props;
             return (
                 <WrappedComponent
-                    fetchingProject={this.state.fetchingProject}
+                    fetchingProject={isFetchingProjectWithIdProp}
                     {...componentProps}
                 />
             );
diff --git a/src/lib/project-saver-hoc.jsx b/src/lib/project-saver-hoc.jsx
index 70257f2e2..1eb41b9b0 100644
--- a/src/lib/project-saver-hoc.jsx
+++ b/src/lib/project-saver-hoc.jsx
@@ -16,7 +16,7 @@ import {
 /* Higher Order Component to provide behavior for saving projects.
  */
 const ProjectSaverHOC = function (WrappedComponent) {
-    class ProjectSaverToPCComponent extends React.Component {
+    class ProjectSaverComponent extends React.Component {
         constructor (props) {
             super(props);
             bindAll(this, [
@@ -101,7 +101,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
             );
         }
     }
-    ProjectSaverToPCComponent.propTypes = {
+    ProjectSaverComponent.propTypes = {
         doneCreatingNew: PropTypes.func,
         doneSavingWithId: PropTypes.func,
         goToErrorState: PropTypes.func,
@@ -129,7 +129,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
     return connect(
         mapStateToProps,
         mapDispatchToProps
-    )(ProjectSaverToPCComponent);
+    )(ProjectSaverComponent);
 };
 
 export {
diff --git a/src/lib/vm-manager-hoc.jsx b/src/lib/vm-manager-hoc.jsx
index 808198384..361210535 100644
--- a/src/lib/vm-manager-hoc.jsx
+++ b/src/lib/vm-manager-hoc.jsx
@@ -25,7 +25,6 @@ const vmManagerHOC = function (WrappedComponent) {
                 'loadProject'
             ]);
             this.state = {
-                isLoading: !props.vm.initialized,
                 isStarted: false,
                 loadingError: false,
                 errorMessage: ''
@@ -35,33 +34,22 @@ const vmManagerHOC = function (WrappedComponent) {
             if (this.props.vm.initialized) return;
             this.audioEngine = new AudioEngine();
             this.props.vm.attachAudioEngine(this.audioEngine);
+            this.props.vm.initialized = true;
         }
-        componentWillReceiveProps (nextProps) {
-            if (nextProps.isLoadingProjectWithId && !this.props.isLoadingProjectWithId) {
-                this.loadProject(nextProps.projectData, nextProps.projectState);
-                if (!this.props.vm.initialized) {
-                    this.props.vm.initialized = true;
-                }
-            }
-            // if we went from loading to showing, we're done starting the vm
-            if (nextProps.isShowingProjectWithId && this.props.isLoadingProjectWithId) {
-                this.setState({isStarted: true});
+        componentDidUpdate (prevProps) {
+            if (this.props.isLoadingProjectWithId && !prevProps.isLoadingProjectWithId) {
+                this.loadProject(this.props.projectData, this.props.projectState);
             }
         }
         loadProject (projectData, projectState) {
             return this.props.vm.loadProject(projectData)
                 .then(() => {
-                    this.setState({isLoading: false}, () => {
-                        if (!this.state.isStarted) {
-                            this.props.vm.setCompatibilityMode(true);
-                            this.props.vm.start();
-                            // NOTE: this logic is slightly different from previous
-                            // https://github.com/LLK/scratch-gui/blob/develop/src/containers/gui.jsx
-                            // Here, we relied on an explicit initial call in componentDidMount
-                            // to setCompatibilityMode and start().
-                        }
-                        this.props.doneLoading(projectState);
-                    });
+                    if (!this.state.isStarted) {
+                        this.props.vm.setCompatibilityMode(true);
+                        this.props.vm.start();
+                        this.setState({isStarted: true});
+                    }
+                    this.props.doneLoading(projectState);
                 })
                 .catch(e => {
                     // Need to catch this error and update component state so that
@@ -73,12 +61,12 @@ const vmManagerHOC = function (WrappedComponent) {
             const {
                 /* eslint-disable no-unused-vars */
                 doneLoading: doneLoadingProp,
-                isLoadingProjectWithId: isLoadingProjectWithIdProp,
                 isShowingProjectWithId: isShowingProjectWithIdProp,
                 projectData,
                 projectId,
                 projectState,
                 /* eslint-enable no-unused-vars */
+                isLoadingProjectWithId: isLoadingProjectWithIdProp,
                 vm,
                 ...componentProps
             } = this.props;
@@ -89,7 +77,7 @@ const vmManagerHOC = function (WrappedComponent) {
             return (
                 <WrappedComponent
                     errorMessage={this.state.errorMessage}
-                    isLoading={this.state.isLoading}
+                    isLoading={isLoadingProjectWithIdProp}
                     loadingError={this.state.loadingError}
                     vm={vm}
                     {...componentProps}
diff --git a/src/reducers/project-id.js b/src/reducers/project-id.js
index 0b2007132..0dcc8e8b1 100644
--- a/src/reducers/project-id.js
+++ b/src/reducers/project-id.js
@@ -161,7 +161,8 @@ const reducer = function (state, action) {
     case DONE_SAVING_WITH_ID_BEFORE_NEW:
         if (state.projectState === ProjectState.SAVING_WITH_ID_BEFORE_NEW) {
             return Object.assign({}, state, {
-                projectState: ProjectState.FETCHING_NEW_DEFAULT_TO_SAVE
+                projectState: ProjectState.FETCHING_NEW_DEFAULT_TO_SAVE,
+                projectId: defaultProjectId
             });
         }
         break;
@@ -203,7 +204,7 @@ const reducer = function (state, action) {
         ]) {
             return Object.assign({}, state, {
                 projectState: ProjectState.FETCHING_NEW_DEFAULT,
-                projectId: null
+                projectId: defaultProjectId
             });
         }
         break;
@@ -215,7 +216,8 @@ const reducer = function (state, action) {
             ProjectState.SHOWING_NEW_DEFAULT
         ]) {
             return Object.assign({}, state, {
-                projectState: ProjectState.LOADING_FILE_UPLOAD
+                projectState: ProjectState.LOADING_FILE_UPLOAD,
+                projectId: null // clear any current projectId
             });
         }
         break;