diff --git a/assets/js/src/form/form.jsx b/assets/js/src/form/form.jsx index 66d118581e..6dfc827b82 100644 --- a/assets/js/src/form/form.jsx +++ b/assets/js/src/form/form.jsx @@ -17,6 +17,11 @@ define( mixins: [ Router.History ], + getDefaultProps: function() { + return { + params: {}, + }; + }, getInitialState: function() { return { loading: false, @@ -158,7 +163,7 @@ define( var formClasses = classNames( 'mailpoet_form', - { 'mailpoet_form_loading': this.state.loading } + { 'mailpoet_form_loading': this.state.loading || this.props.loading } ); var fields = this.props.fields.map(function(field, i) { diff --git a/assets/js/src/newsletters/send.jsx b/assets/js/src/newsletters/send.jsx index 1225055920..e926f8b8cf 100644 --- a/assets/js/src/newsletters/send.jsx +++ b/assets/js/src/newsletters/send.jsx @@ -22,15 +22,6 @@ define( Breadcrumb ) { - var messages = { - onUpdate: function() { - MailPoet.Notice.success(MailPoet.I18n.t('newsletterUpdated')); - }, - onCreate: function() { - MailPoet.Notice.success(MailPoet.I18n.t('newsletterAdded')); - } - }; - var NewsletterSend = React.createClass({ mixins: [ Router.History @@ -38,11 +29,23 @@ define( getInitialState: function() { return { fields: [], - errors: [], item: {}, loading: false, }; }, + getFieldsByNewsletter: function(newsletter) { + switch(newsletter.type) { + case 'notification': return NotificationNewsletterFields; + case 'welcome': return WelcomeNewsletterFields; + default: return StandardNewsletterFields; + } + }, + isAutomatedNewsletter: function() { + return this.state.item.type !== 'standard'; + }, + isValid: function() { + return jQuery('#mailpoet_newsletter').parsley().isValid(); + }, componentDidMount: function() { if(this.isMounted()) { this.loadItem(this.props.params.id); @@ -76,23 +79,11 @@ define( } }); }, - getFieldsByNewsletter: function(newsletter) { - switch(newsletter.type) { - case 'notification': return NotificationNewsletterFields; - case 'welcome': return WelcomeNewsletterFields; - default: return StandardNewsletterFields; - } - }, - isValid: function() { - return jQuery('#mailpoet_newsletter').parsley().isValid(); - }, - isAutomatedNewsletter: function() { - return this.state.item.type !== 'standard'; - }, handleSend: function() { if(!this.isValid()) { jQuery('#mailpoet_newsletter').parsley().validate(); } else { + this.setState({ loading: true }); MailPoet.Ajax.post({ endpoint: 'newsletters', @@ -111,6 +102,7 @@ define( return response; } }).done((response) => { + this.setState({ loading: false }); if(response.result === true) { this.history.pushState(null, '/'); MailPoet.Notice.success( @@ -131,6 +123,7 @@ define( }, handleSave: function(e) { e.preventDefault(); + this.setState({ loading: true }); MailPoet.Ajax.post({ endpoint: 'newsletters', @@ -141,10 +134,12 @@ define( if(response.result === true) { this.history.pushState(null, '/'); - messages.onUpdate(); + MailPoet.Notice.success( + MailPoet.I18n.t('newsletterUpdated') + ); } else { - if(response.errors.length > 0) { - this.setState({ errors: response.errors }); + if(response.errors) { + MailPoet.Notice.error(response.errors); } } }); @@ -160,9 +155,6 @@ define( }); return true; }, - getParams: function() { - return {}; - }, render: function() { return (
@@ -174,8 +166,7 @@ define( id="mailpoet_newsletter" fields={ this.state.fields } item={ this.state.item } - params={ this.getParams() } - errors= { this.state.errors } + loading={ this.state.loading } onChange={this.handleFormChange} onSubmit={this.handleSave} >