Merge pull request #3780 from benjiwheeler/fix-community

project-watcher can request eventual callback, or immediately call ca…

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

@@ -27,6 +27,7 @@ import TurboMode from '../../containers/turbo-mode.jsx';
 import {openTipsLibrary} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
 import {
+    autoUpdateProject,
     getIsUpdating,
     getIsShowingProject,
     manualUpdateProject,
@@ -170,19 +171,25 @@ class MenuBar extends React.Component {
         this.props.onClickSaveAsCopy();
         this.props.onRequestCloseFile();
     }
-    handleClickSeeCommunity (requestSeeCommunity) {
+    handleClickSeeCommunity (waitForUpdate) {
         if (this.props.canSave) { // save before transitioning to project page
-            this.props.onClickSave();
+            this.props.autoUpdateProject();
+            waitForUpdate(true); // queue the transition to project page
+        } else {
+            waitForUpdate(false); // immediately transition to project page
         }
-        requestSeeCommunity(); // queue the transition to project page
     }
-    handleClickShare (requestSeeCommunity) {
-        if (this.props.canSave && !this.props.isShared) { // save before transitioning to project page
-            this.props.onClickSave();
-        }
-        if (this.props.canShare && !this.props.isShared) { // save before transitioning to project page
-            this.props.onShare();
-            requestSeeCommunity(); // queue the transition to project page
+    handleClickShare (waitForUpdate) {
+        if (!this.props.isShared) {
+            if (this.props.canShare) { // save before transitioning to project page
+                this.props.onShare();
+            }
+            if (this.props.canSave) { // save before transitioning to project page
+                this.props.autoUpdateProject();
+                waitForUpdate(true); // queue the transition to project page
+            } else {
+                waitForUpdate(false); // immediately transition to project page
+            }
         }
     }
     handleRestoreOption (restoreFun) {
@@ -473,17 +480,15 @@ class MenuBar extends React.Component {
                     <div className={classNames(styles.menuBarItem)}>
                         {this.props.canShare ? (
                             (this.props.isShowingProject || this.props.isUpdating) && (
-                                <ProjectWatcher
-                                    onShowingWithId={this.props.onSeeCommunity}
-                                >
+                                <ProjectWatcher onDoneUpdating={this.props.onSeeCommunity}>
                                     {
-                                        setRequesting => (
+                                        waitForUpdate => (
                                             <ShareButton
                                                 className={styles.menuBarButton}
                                                 isShared={this.props.isShared}
                                                 /* eslint-disable react/jsx-no-bind */
                                                 onClick={() => {
-                                                    this.handleClickShare(setRequesting);
+                                                    this.handleClickShare(waitForUpdate);
                                                 }}
                                                 /* eslint-enable react/jsx-no-bind */
                                             />
@@ -503,16 +508,14 @@ class MenuBar extends React.Component {
                     <div className={classNames(styles.menuBarItem, styles.communityButtonWrapper)}>
                         {this.props.enableCommunity ? (
                             (this.props.isShowingProject || this.props.isUpdating) && (
-                                <ProjectWatcher
-                                    onShowingWithId={this.props.onSeeCommunity}
-                                >
+                                <ProjectWatcher onDoneUpdating={this.props.onSeeCommunity}>
                                     {
-                                        setRequesting => (
+                                        waitForUpdate => (
                                             <CommunityButton
                                                 className={styles.menuBarButton}
                                                 /* eslint-disable react/jsx-no-bind */
                                                 onClick={() => {
-                                                    this.handleClickSeeCommunity(setRequesting);
+                                                    this.handleClickSeeCommunity(waitForUpdate);
                                                 }}
                                                 /* eslint-enable react/jsx-no-bind */
                                             />
@@ -681,6 +684,7 @@ MenuBar.propTypes = {
     authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     authorThumbnailUrl: PropTypes.string,
     authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    autoUpdateProject: PropTypes.func,
     canCreateCopy: PropTypes.bool,
     canCreateNew: PropTypes.bool,
     canEditTitle: PropTypes.bool,
@@ -749,6 +753,7 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = dispatch => ({
+    autoUpdateProject: () => dispatch(autoUpdateProject()),
     onOpenTipLibrary: () => dispatch(openTipsLibrary()),
     onClickAccount: () => dispatch(openAccountMenu()),
     onRequestCloseAccount: () => dispatch(closeAccountMenu()),

src/containers/project-watcher.jsx

@@ -7,34 +7,48 @@ import {
     getIsShowingWithId
 } from '../reducers/project-state';
 
+/**
+ * Watches for project to finish updating before taking some action.
+ *
+ * To use ProjectWatcher, pass it a callback function using the onDoneUpdating prop.
+ * ProjectWatcher passes a waitForUpdate function to its children, which they can call
+ * to set ProjectWatcher to request that it call the onDoneUpdating callback when
+ * project is no longer updating.
+ */
 class ProjectWatcher extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'setRequesting'
+            'waitForUpdate'
         ]);
 
         this.state = {
-            requesting: false
+            waiting: false
         };
     }
     componentDidUpdate (prevProps) {
-        if (this.state.requesting && this.props.isShowingWithId && !prevProps.isShowingWithId) {
-            this.props.onShowingWithId();
-            this.setState({ // eslint-disable-line react/no-did-update-set-state
-                requesting: false
-            });
+        if (this.state.waiting && this.props.isShowingWithId && !prevProps.isShowingWithId) {
+            this.fulfill();
         }
-
     }
-    setRequesting () {
-        this.setState({
-            requesting: true
+    fulfill () {
+        this.props.onDoneUpdating();
+        this.setState({ // eslint-disable-line react/no-did-update-set-state
+            waiting: false
         });
     }
+    waitForUpdate (isUpdating) {
+        if (isUpdating) {
+            this.setState({
+                waiting: true
+            });
+        } else { // fulfill immediately
+            this.fulfill();
+        }
+    }
     render () {
         return this.props.children(
-            this.setRequesting
+            this.waitForUpdate
         );
     }
 }
@@ -42,11 +56,11 @@ class ProjectWatcher extends React.Component {
 ProjectWatcher.propTypes = {
     children: PropTypes.func,
     isShowingWithId: PropTypes.bool,
-    onShowingWithId: PropTypes.func
+    onDoneUpdating: PropTypes.func
 };
 
 ProjectWatcher.defaultProps = {
-    onShowingWithId: () => {}
+    onDoneUpdating: () => {}
 };
 
 const mapStateToProps = state => {