Merge pull request #2052 from benjiwheeler/rename_title

pass project title to GUI, and disable submit when editing title

src/lib/render.jsx

@@ -37,7 +37,7 @@ const render = (jsx, element, reducers, initialState, enhancer) => {
     }
 
     const allReducers = reducer(reducers);
-    
+
     const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || redux.compose;
     const enhancers = enhancer ?
         composeEnhancers(

src/views/preview/l10n.json

@@ -1,6 +1,7 @@
 {
     "addToStudio.title": "Add to Studio",
     "addToStudio.finishing": "Finishing up...",
+    "preview.titleMaxLength": "Title is too long",
     "preview.musicExtensionChip": "Music",
     "preview.penExtensionChip": "Pen",
     "preview.speechExtensionChip": "Google Speech",

src/views/preview/presentation.jsx

@@ -1,6 +1,7 @@
 const FormattedDate = require('react-intl').FormattedDate;
 const injectIntl = require('react-intl').injectIntl;
 const PropTypes = require('prop-types');
+const intlShape = require('react-intl').intlShape;
 const React = require('react');
 const Formsy = require('formsy-react').default;
 const classNames = require('classnames');
@@ -27,6 +28,16 @@ const ExtensionChip = require('./extension-chip.jsx');
 const projectShape = require('./projectshape.jsx').projectShape;
 require('./preview.scss');
 
+// disable enter key submission on formsy input fields; otherwise formsy thinks
+// we meant to trigger the "See inside" button. Instead, treat these keypresses
+// as a blur, which will trigger a save.
+const onKeyPress = e => {
+    if (e.target.type === 'text' && e.which === 13 /* Enter */) {
+        e.preventDefault();
+        e.target.blur();
+    }
+};
+
 const PreviewPresentation = ({
     assetHost,
     backpackOptions,
@@ -35,6 +46,7 @@ const PreviewPresentation = ({
     extensions,
     faved,
     favoriteCount,
+    intl,
     isFullScreen,
     isLoggedIn,
     isShared,
@@ -70,7 +82,7 @@ const PreviewPresentation = ({
             <ShareBanner shared={isShared} />
 
             { projectInfo && projectInfo.author && projectInfo.author.id && (
-                <Formsy>
+                <Formsy onKeyPress={onKeyPress}>
                     <div className="inner">
                         <FlexRow className="preview-row">
                             <FlexRow className="project-header">
@@ -88,10 +100,9 @@ const PreviewPresentation = ({
                                             handleUpdate={onUpdate}
                                             name="title"
                                             validationErrors={{
-                                                maxLength: 'Sorry title is too long'
-                                                // maxLength: props.intl.formatMessage({
-                                                //     id: 'project.titleMaxLength'
-                                                // })
+                                                maxLength: intl.formatMessage({
+                                                    id: 'preview.titleMaxLength'
+                                                })
                                             }}
                                             validations={{
                                                 maxLength: 100
@@ -365,6 +376,7 @@ PreviewPresentation.propTypes = {
     extensions: PropTypes.arrayOf(PropTypes.object),
     faved: PropTypes.bool,
     favoriteCount: PropTypes.number,
+    intl: intlShape,
     isFullScreen: PropTypes.bool,
     isLoggedIn: PropTypes.bool,
     isShared: PropTypes.bool,

src/views/preview/preview.jsx

@@ -42,6 +42,7 @@ class Preview extends React.Component {
             'handleAddToStudioClick',
             'handleAddToStudioClose',
             'handleSeeInside',
+            'handleUpdateProjectTitle',
             'handleUpdate',
             'initCounts',
             'isShared',
@@ -277,6 +278,11 @@ class Preview extends React.Component {
             this.props.user.token
         );
     }
+    handleUpdateProjectTitle (title) {
+        this.handleUpdate({
+            title: title
+        });
+    }
     initCounts (favorites, loves) {
         this.setState({
             favoriteCount: favorites,
@@ -356,7 +362,9 @@ class Preview extends React.Component {
                     className="gui"
                     projectHost={this.props.projectHost}
                     projectId={this.state.projectId}
+                    projectTitle={this.props.projectInfo.title}
                     onClickLogout={this.handleLogout}
+                    onUpdateProjectTitle={this.handleUpdateProjectTitle}
                 />
         );
     }
@@ -456,7 +464,6 @@ const consolidateStudiosInfo = (curatedStudios, projectStudios, currentStudioIds
 };
 
 const mapStateToProps = state => ({
-    projectInfo: state.preview.projectInfo,
     comments: state.preview.comments,
     faved: state.preview.faved,
     loved: state.preview.loved,
@@ -465,6 +472,7 @@ const mapStateToProps = state => ({
     remixes: state.preview.remixes,
     replies: state.preview.replies,
     sessionStatus: state.session.status,
+    projectInfo: state.preview.projectInfo,
     projectStudios: state.preview.projectStudios,
     studios: consolidateStudiosInfo(state.preview.curatedStudios,
         state.preview.projectStudios, state.preview.currentStudioIds,