scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #2714 from LLK/hotfix/show-update-errors-hoc

Browse source 
[Master] Wrap project inputs to show server validation
This commit is contained in:
Ray Schamp 2019-01-25 11:49:02 -05:00 committed by GitHub
commit db99c12d89
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 178 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/views/preview/formsy-project-updater.jsx Normal file
View file

@ -0,0 +1,79 @@
const PropTypes = require('prop-types');
const React = require('react');
const bindAll = require('lodash.bindall');
const api = require('../../lib/api');
const connect = require('react-redux').connect;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
class FormsyProjectUpdater extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'setRef',
'handleUpdate'
]);
this.state = {
value: props.initialValue,
error: false
};
}
componentDidUpdate () {
if (this.state.error !== false) {
const errorMessageId = this.state.error === 400 ?
'project.inappropriateUpdate' : 'general.notAvailableHeadline';
this.ref.updateInputsWithError({
[this.props.field]: this.props.intl.formatMessage({
id: errorMessageId
})
});
}
}
handleUpdate (jsonData) {
// Ignore updates that would not change the value
if (jsonData[this.props.field] === this.state.value) return;
api({
uri: `/projects/${this.props.projectInfo.id}`,
authentication: this.props.user.token,
method: 'PUT',
json: jsonData
}, (err, body, res) => {
if (res.statusCode === 200) {
this.setState({value: body[this.props.field], error: false});
} else {
this.setState({error: res.statusCode});
}
});
}
setRef (ref) {
this.ref = ref;
}
render () {
return this.props.children(
this.state.value,
this.setRef,
this.handleUpdate
);
}
}
FormsyProjectUpdater.propTypes = {
children: PropTypes.func.isRequired,
field: PropTypes.string,
initialValue: PropTypes.string,
intl: intlShape,
projectInfo: PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}),
user: PropTypes.shape({
token: PropTypes.string
})
};
const mapStateToProps = state => ({
projectInfo: state.preview.projectInfo,
user: state.session.session.user
});
module.exports = connect(mapStateToProps)(injectIntl(FormsyProjectUpdater));

3
src/views/preview/l10n.json
View file

@ -43,5 +43,6 @@
"project.cloudDataAlert": "This project uses cloud data - a feature that is only available to signed in Scratchers.", "project.cloudDataAlert": "This project uses cloud data - a feature that is only available to signed in Scratchers.",
"project.cloudVariables": "Cloud Variables", "project.cloudVariables": "Cloud Variables",
"project.cloudDataLink": "See Data", "project.cloudDataLink": "See Data",
"project.usernameBlockAlert": "This project can detect who is using it, through the \"username\" block. To hide your identity, sign out before using the project." "project.usernameBlockAlert": "This project can detect who is using it, through the \"username\" block. To hide your identity, sign out before using the project.",
"project.inappropriateUpdate": "Hmm...the bad word detector thinks there is a problem with your text. Please change it and remember to be respectful."
} }

49
src/views/preview/presentation.jsx
View file

@ -29,6 +29,7 @@ const TopLevelComment = require('./comment/top-level-comment.jsx');
const ComposeComment = require('./comment/compose-comment.jsx'); const ComposeComment = require('./comment/compose-comment.jsx');
const ExtensionChip = require('./extension-chip.jsx'); const ExtensionChip = require('./extension-chip.jsx');
const thumbnailUrl = require('../../lib/user-thumbnail'); const thumbnailUrl = require('../../lib/user-thumbnail');
const FormsyProjectUpdater = require('./formsy-project-updater.jsx');
const projectShape = require('./projectshape.jsx').projectShape; const projectShape = require('./projectshape.jsx').projectShape;
require('./preview.scss'); require('./preview.scss');
@ -107,7 +108,6 @@ const PreviewPresentation = ({
onShare, onShare,
onToggleComments, onToggleComments,
onToggleStudio, onToggleStudio,
onUpdate,
onUpdateProjectId, onUpdateProjectId,
onUpdateProjectThumbnail, onUpdateProjectThumbnail,
originalInfo, originalInfo,
@ -233,10 +233,18 @@ const PreviewPresentation = ({
</a> </a>
<div className="title"> <div className="title">
{editable ? {editable ?
<Formsy onKeyPress={onKeyPress}> <FormsyProjectUpdater
field="title"
initialValue={projectInfo.title}
>
{(value, ref, handleUpdate) => (
<Formsy
ref={ref}
onKeyPress={onKeyPress}
>
<InplaceInput <InplaceInput
className="project-title" className="project-title"
handleUpdate={onUpdate} handleUpdate={handleUpdate}
name="title" name="title"
validationErrors={{ validationErrors={{
maxLength: intl.formatMessage({ maxLength: intl.formatMessage({
@ -246,9 +254,11 @@ const PreviewPresentation = ({
validations={{ validations={{
maxLength: 100 maxLength: 100
}} }}
value={projectInfo.title} value={value}
/> />
</Formsy> : </Formsy>
)}
</FormsyProjectUpdater> :
<React.Fragment> <React.Fragment>
<div <div
className="project-title no-edit" className="project-title no-edit"
@ -377,8 +387,14 @@ const PreviewPresentation = ({
<FormattedMessage id="project.instructionsLabel" /> <FormattedMessage id="project.instructionsLabel" />
</div> </div>
{editable ? {editable ?
<FormsyProjectUpdater
field="instructions"
initialValue={projectInfo.instructions}
>
{(value, ref, handleUpdate) => (
<Formsy <Formsy
className="project-description-form" className="project-description-form"
ref={ref}
onKeyPress={onKeyPress} onKeyPress={onKeyPress}
> >
<InplaceInput <InplaceInput
@ -386,7 +402,7 @@ const PreviewPresentation = ({
'project-description-edit', 'project-description-edit',
{remixes: parentInfo && parentInfo.author} {remixes: parentInfo && parentInfo.author}
)} )}
handleUpdate={onUpdate} handleUpdate={handleUpdate}
name="instructions" name="instructions"
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'project.descriptionPlaceholder' id: 'project.descriptionPlaceholder'
@ -400,9 +416,11 @@ const PreviewPresentation = ({
validations={{ validations={{
maxLength: 5000 maxLength: 5000
}} }}
value={projectInfo.instructions} value={value}
/> />
</Formsy> : </Formsy>
)}
</FormsyProjectUpdater> :
<div className="project-description"> <div className="project-description">
{decorateText(projectInfo.instructions, { {decorateText(projectInfo.instructions, {
usernames: true, usernames: true,
@ -419,8 +437,14 @@ const PreviewPresentation = ({
<FormattedMessage id="project.notesAndCreditsLabel" /> <FormattedMessage id="project.notesAndCreditsLabel" />
</div> </div>
{editable ? {editable ?
<FormsyProjectUpdater
field="description"
initialValue={projectInfo.description}
>
{(value, ref, handleUpdate) => (
<Formsy <Formsy
className="project-description-form" className="project-description-form"
ref={ref}
onKeyPress={onKeyPress} onKeyPress={onKeyPress}
> >
<InplaceInput <InplaceInput
@ -429,7 +453,7 @@ const PreviewPresentation = ({
'last', 'last',
{remixes: parentInfo && parentInfo.author} {remixes: parentInfo && parentInfo.author}
)} )}
handleUpdate={onUpdate} handleUpdate={handleUpdate}
name="description" name="description"
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'project.notesPlaceholder' id: 'project.notesPlaceholder'
@ -443,9 +467,11 @@ const PreviewPresentation = ({
validations={{ validations={{
maxLength: 5000 maxLength: 5000
}} }}
value={projectInfo.description} value={value}
/> />
</Formsy> : </Formsy>
)}
</FormsyProjectUpdater> :
<div className="project-description last"> <div className="project-description last">
{decorateText(projectInfo.description, { {decorateText(projectInfo.description, {
usernames: true, usernames: true,
@ -675,7 +701,6 @@ PreviewPresentation.propTypes = {
onShare: PropTypes.func, onShare: PropTypes.func,
onToggleComments: PropTypes.func, onToggleComments: PropTypes.func,
onToggleStudio: PropTypes.func, onToggleStudio: PropTypes.func,
onUpdate: PropTypes.func,
onUpdateProjectId: PropTypes.func, onUpdateProjectId: PropTypes.func,
onUpdateProjectThumbnail: PropTypes.func, onUpdateProjectThumbnail: PropTypes.func,
originalInfo: projectShape, originalInfo: projectShape,

2
src/views/preview/preview.scss
View file

@ -149,7 +149,7 @@ $stage-width: 480px;
$arrow-border-width: 1rem; $arrow-border-width: 1rem;
display: block; display: block;
position: absolute; position: absolute;
z-index: 1; z-index: 5;
margin-top: $arrow-border-width; margin-top: $arrow-border-width;
border: 1px solid $active-gray; border: 1px solid $active-gray;
border-radius: 5px; border-radius: 5px;

11
src/views/preview/project-view.jsx
View file

@ -82,7 +82,6 @@ class Preview extends React.Component {
'handleShare', 'handleShare',
'handleUpdateProjectId', 'handleUpdateProjectId',
'handleUpdateProjectTitle', 'handleUpdateProjectTitle',
'handleUpdate',
'handleToggleComments', 'handleToggleComments',
'initCounts', 'initCounts',
'pushHistory', 'pushHistory',
@ -523,19 +522,14 @@ class Preview extends React.Component {
justShared: true justShared: true
}); });
} }
handleUpdate (jsonData) { handleUpdateProjectTitle (title) {
this.props.updateProject( this.props.updateProject(
this.props.projectInfo.id, this.props.projectInfo.id,
jsonData, {title: title},
this.props.user.username, this.props.user.username,
this.props.user.token this.props.user.token
); );
} }
handleUpdateProjectTitle (title) {
this.handleUpdate({
title: title
});
}
handleSetLanguage (locale) { handleSetLanguage (locale) {
jar.set('scratchlanguage', locale); jar.set('scratchlanguage', locale);
} }
@ -696,7 +690,6 @@ class Preview extends React.Component {
onShare={this.handleShare} onShare={this.handleShare}
onToggleComments={this.handleToggleComments} onToggleComments={this.handleToggleComments}
onToggleStudio={this.handleToggleStudio} onToggleStudio={this.handleToggleStudio}
onUpdate={this.handleUpdate}
onUpdateProjectId={this.handleUpdateProjectId} onUpdateProjectId={this.handleUpdateProjectId}
onUpdateProjectThumbnail={this.props.handleUpdateProjectThumbnail} onUpdateProjectThumbnail={this.props.handleUpdateProjectThumbnail}
/> />