don’t pass onUpdateProjectTitle below titledHIC

benjiwheeler · benjiwheeler · commit 22e2c17ff4a1 · 2019-10-17T13:26:33.000-04:00
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
@@ -94,7 +94,6 @@ const GUIComponent = props => {
         onLogOut,
         onOpenRegistration,
         onToggleLoginOpen,
-        onUpdateProjectTitle,
         onActivateCostumesTab,
         onActivateSoundsTab,
         onActivateTab,
@@ -228,7 +227,6 @@ const GUIComponent = props => {
                     onSeeCommunity={onSeeCommunity}
                     onShare={onShare}
                     onToggleLoginOpen={onToggleLoginOpen}
-                    onUpdateProjectTitle={onUpdateProjectTitle}
                 />
                 <Box className={styles.bodyWrapper}>
                     <Box className={styles.flexWrapper}>
@@ -406,7 +404,6 @@ GUIComponent.propTypes = {
     onTelemetryModalOptIn: PropTypes.func,
     onTelemetryModalOptOut: PropTypes.func,
     onToggleLoginOpen: PropTypes.func,
-    onUpdateProjectTitle: PropTypes.func,
     renderLogin: PropTypes.func,
     showComingSoon: PropTypes.bool,
     soundsTabVisible: PropTypes.bool,
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
@@ -395,7 +395,6 @@ class MenuBar extends React.Component {
                                         <SBFileUploader
                                             canSave={this.props.canSave}
                                             userOwnsProject={this.props.userOwnsProject}
-                                            onUpdateProjectTitle={this.props.onUpdateProjectTitle}
                                         >
                                             {(className, renderFileInput, handleLoadProject) => (
                                                 <MenuItem
@@ -495,7 +494,6 @@ class MenuBar extends React.Component {
                             >
                                 <ProjectTitleInput
                                     className={classNames(styles.titleFieldGrowable)}
-                                    onUpdateProjectTitle={this.props.onUpdateProjectTitle}
                                 />
                             </MenuBarItemTooltip>
                         </div>
@@ -746,7 +744,6 @@ MenuBar.propTypes = {
     onSeeCommunity: PropTypes.func,
     onShare: PropTypes.func,
     onToggleLoginOpen: PropTypes.func,
-    onUpdateProjectTitle: PropTypes.func,
     projectTitle: PropTypes.string,
     renderLogin: PropTypes.func,
     sessionExists: PropTypes.bool,
diff --git a/src/components/menu-bar/project-title-input.jsx b/src/components/menu-bar/project-title-input.jsx
@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import bindAll from 'lodash.bindall';
 import React from 'react';
 import {defineMessages, intlShape, injectIntl} from 'react-intl';
+import {setProjectTitle} from '../../reducers/project-title';
 
 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
 import Input from '../forms/input.jsx';
@@ -19,47 +19,37 @@ const messages = defineMessages({
     }
 });
 
-class ProjectTitleInput extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handleUpdateProjectTitle'
-        ]);
-    }
-    // call onUpdateProjectTitle if it is defined (only defined when gui
-    // is used within scratch-www)
-    handleUpdateProjectTitle (newTitle) {
-        if (this.props.onUpdateProjectTitle) {
-            this.props.onUpdateProjectTitle(newTitle);
-        }
-    }
-    render () {
-        return (
-            <BufferedInput
-                className={classNames(styles.titleField, this.props.className)}
-                maxLength="100"
-                placeholder={this.props.intl.formatMessage(messages.projectTitlePlaceholder)}
-                tabIndex="0"
-                type="text"
-                value={this.props.projectTitle}
-                onSubmit={this.handleUpdateProjectTitle}
-            />
-        );
-    }
-}
+const ProjectTitleInput = ({
+    className,
+    handleUpdateReduxProjectTitle,
+    intl,
+    projectTitle
+}) => (
+    <BufferedInput
+        className={classNames(styles.titleField, className)}
+        maxLength="100"
+        placeholder={intl.formatMessage(messages.projectTitlePlaceholder)}
+        tabIndex="0"
+        type="text"
+        value={projectTitle}
+        onSubmit={handleUpdateReduxProjectTitle}
+    />
+);
 
 ProjectTitleInput.propTypes = {
     className: PropTypes.string,
+    handleUpdateReduxProjectTitle: PropTypes.func,
     intl: intlShape.isRequired,
-    onUpdateProjectTitle: PropTypes.func,
     projectTitle: PropTypes.string
 };
 
 const mapStateToProps = state => ({
     projectTitle: state.scratchGui.projectTitle
 });
 
-const mapDispatchToProps = () => ({});
+const mapDispatchToProps = dispatch => ({
+    handleUpdateReduxProjectTitle: title => dispatch(setProjectTitle(title))
+});
 
 export default injectIntl(connect(
     mapStateToProps,
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
@@ -103,13 +103,11 @@ GUI.propTypes = {
     isLoading: PropTypes.bool,
     isScratchDesktop: PropTypes.bool,
     isShowingProject: PropTypes.bool,
-    isShowingWithoutId: PropTypes.bool,
     loadingStateVisible: PropTypes.bool,
     onProjectLoaded: PropTypes.func,
     onSeeCommunity: PropTypes.func,
     onStorageInit: PropTypes.func,
     onUpdateProjectId: PropTypes.func,
-    onUpdateProjectTitle: PropTypes.func,
     onVmInit: PropTypes.func,
     projectHost: PropTypes.string,
     projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
diff --git a/src/containers/sb-file-uploader.jsx b/src/containers/sb-file-uploader.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {setProjectTitle} from '../reducers/project-title';
 
 import log from '../lib/log';
 import sharedMessages from '../lib/shared-messages';
@@ -131,7 +132,7 @@ class SBFileUploader extends React.Component {
                     // This is necessary in case the user wants to reload a project
                     if (filename) {
                         const uploadedProjectTitle = this.getProjectTitleFromFilename(filename);
-                        this.props.onUpdateProjectTitle(uploadedProjectTitle);
+                        this.props.updateReduxProjectTitle(uploadedProjectTitle);
                     }
                     this.resetFileInput();
                 })
@@ -179,9 +180,9 @@ SBFileUploader.propTypes = {
     loadingState: PropTypes.oneOf(LoadingStates),
     onLoadingFinished: PropTypes.func,
     onLoadingStarted: PropTypes.func,
-    onUpdateProjectTitle: PropTypes.func,
     projectChanged: PropTypes.bool,
     requestProjectUpload: PropTypes.func,
+    updateReduxProjectTitle: PropTypes.func,
     userOwnsProject: PropTypes.bool,
     vm: PropTypes.shape({
         loadProject: PropTypes.func
@@ -209,7 +210,8 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
         dispatch(closeFileMenu());
     },
     requestProjectUpload: loadingState => dispatch(requestProjectUpload(loadingState)),
-    onLoadingStarted: () => dispatch(openLoadingProject())
+    onLoadingStarted: () => dispatch(openLoadingProject()),
+    updateReduxProjectTitle: title => dispatch(setProjectTitle(title))
 });
 
 // Allow incoming props to override redux-provided props. Used to mock in tests.
diff --git a/src/lib/titled-hoc.jsx b/src/lib/titled-hoc.jsx
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import bindAll from 'lodash.bindall';
 import {connect} from 'react-redux';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
@@ -21,23 +20,18 @@ const messages = defineMessages({
  */
 const TitledHOC = function (WrappedComponent) {
     class TitledComponent extends React.Component {
-        constructor (props) {
-            super(props);
-            bindAll(this, [
-                'handleUpdateProjectTitle'
-            ]);
-        }
         componentDidMount () {
-            this.setReduxTitle(this.props.projectTitle);
+            this.props.updateReduxProjectTitle(this.titleWithDefault(this.props.projectTitle));
         }
         componentDidUpdate (prevProps) {
             if (this.props.projectTitle !== prevProps.projectTitle) {
-                this.setReduxTitle(this.props.projectTitle);
+                this.props.updateReduxProjectTitle(this.titleWithDefault(this.props.projectTitle));
             }
-            if (this.props.isShowingWithoutId && !prevProps.isShowingWithoutId) {
-                const defaultProjectTitle = this.titleWithDefault();
-                this.setReduxTitle(defaultProjectTitle);
-                this.props.onUpdateProjectTitle(defaultProjectTitle);
+            // if the projectTitle hasn't changed, but the reduxProjectTitle
+            // HAS changed, we need to report that change to the projectTitle's owner
+            if (this.props.reduxProjectTitle !== prevProps.reduxProjectTitle &&
+                this.props.reduxProjectTitle !== this.props.projectTitle) {
+                this.props.onUpdateProjectTitle(this.props.reduxProjectTitle);
             }
         }
         titleWithDefault (title) {
@@ -46,36 +40,23 @@ const TitledHOC = function (WrappedComponent) {
             }
             return title;
         }
-        setReduxTitle (newTitle) {
-            if (newTitle === null || typeof newTitle === 'undefined') {
-                this.props.onUpdateReduxProjectTitle(
-                    this.props.intl.formatMessage(messages.defaultProjectTitle)
-                );
-            } else {
-                this.props.onUpdateReduxProjectTitle(newTitle);
-            }
-        }
-        handleUpdateProjectTitle (newTitle) {
-            this.setReduxTitle(newTitle);
-            this.props.onUpdateProjectTitle(newTitle);
-        }
         render () {
             const {
                 /* eslint-disable no-unused-vars */
                 intl,
                 isShowingWithoutId,
                 // for children, we replace onUpdateProjectTitle with our own
                 onUpdateProjectTitle,
-                onUpdateReduxProjectTitle,
                 // we don't pass projectTitle prop to children -- they must use
                 // redux value
                 projectTitle,
+                reduxProjectTitle,
+                updateReduxProjectTitle,
                 /* eslint-enable no-unused-vars */
                 ...componentProps
             } = this.props;
             return (
                 <WrappedComponent
-                    onUpdateProjectTitle={this.handleUpdateProjectTitle}
                     {...componentProps}
                 />
             );
@@ -86,8 +67,9 @@ const TitledHOC = function (WrappedComponent) {
         intl: intlShape,
         isShowingWithoutId: PropTypes.bool,
         onUpdateProjectTitle: PropTypes.func,
-        onUpdateReduxProjectTitle: PropTypes.func,
-        projectTitle: PropTypes.string
+        projectTitle: PropTypes.string,
+        reduxProjectTitle: PropTypes.string,
+        updateReduxProjectTitle: PropTypes.func
     };
 
     TitledComponent.defaultProps = {
@@ -97,12 +79,13 @@ const TitledHOC = function (WrappedComponent) {
     const mapStateToProps = state => {
         const loadingState = state.scratchGui.projectState.loadingState;
         return {
-            isShowingWithoutId: getIsShowingWithoutId(loadingState)
+            isShowingWithoutId: getIsShowingWithoutId(loadingState),
+            reduxProjectTitle: state.scratchGui.projectTitle
         };
     };
 
     const mapDispatchToProps = dispatch => ({
-        onUpdateReduxProjectTitle: title => dispatch(setProjectTitle(title))
+        updateReduxProjectTitle: title => dispatch(setProjectTitle(title))
     });
 
     return injectIntl(connect(
diff --git a/test/unit/containers/sb-file-uploader.test.jsx b/test/unit/containers/sb-file-uploader.test.jsx
@@ -11,7 +11,6 @@ describe('SBFileUploader Container', () => {
     const mockStore = configureStore();
     let onLoadingFinished;
     let onLoadingStarted;
-    let onUpdateProjectTitle;
     let store;
 
     // Wrap this in a function so it gets test specific states and can be reused.
@@ -20,7 +19,6 @@ describe('SBFileUploader Container', () => {
             <SBFileUploader
                 onLoadingFinished={onLoadingFinished}
                 onLoadingStarted={onLoadingStarted}
-                onUpdateProjectTitle={onUpdateProjectTitle}
             >
                 {(renderFileInput, loadProject) => (
                     <div
@@ -40,7 +38,6 @@ describe('SBFileUploader Container', () => {
                 vm: {}
             }
         });
-        onUpdateProjectTitle = jest.fn();
         onLoadingFinished = jest.fn();
         onLoadingStarted = jest.fn();
     });
