diff --git a/assets/js/src/newsletters/list.jsx b/assets/js/src/newsletters/list.jsx new file mode 100644 index 0000000000..1d990064fc --- /dev/null +++ b/assets/js/src/newsletters/list.jsx @@ -0,0 +1,80 @@ +define( + 'list', + [ + 'react', + 'jquery', + 'mailpoet' + ], + function( + React, + jQuery, + MailPoet + ) { + + var Newsletter = React.createClass({ + send: function(e) { + e.preventDefault(); + MailPoet.Ajax.post({ + endpoint: 'newsletters', + action: 'send', + data: this.props.newsletter.id, + onSuccess: function(response) { + alert('Sent!'); + }, + onError: function(response) { + alert('Cannot send. Set the settings and add some subscribers!'); + } + }) + }, + + render: function() { + return ( +
+

+ {this.props.newsletter.subject} - + Send + +

+
+ ); + } + }); + + var List = React.createClass({ + load: function() { + MailPoet.Ajax.post({ + endpoint: 'newsletters', + action: 'get', + data: {}, + onSuccess: function(response) { + this.setState({data: response}); + }.bind(this) + }); + }, + + getInitialState: function() { + return {data: []}; + }, + + componentDidMount: function() { + this.load(); + setInterval(this.load, 2000); + }, + + render: function() { + var nodes = this.state.data.map(function (newsletter) { + return ( + + ); + }); + return ( +
+

Newsletters

+ {nodes} +
+ ); + } + }); + + return List; + }); diff --git a/assets/js/src/newsletters/listing.jsx b/assets/js/src/newsletters/listing.jsx deleted file mode 100644 index 48c0b97297..0000000000 --- a/assets/js/src/newsletters/listing.jsx +++ /dev/null @@ -1,86 +0,0 @@ -define( - 'listing', - [ - 'react', - 'jquery', - 'mailpoet' - ], - function( - React, - jQuery, - MailPoet - ) { - - var Newsletter = React.createClass({ - send: function(e) { - e.preventDefault(); - MailPoet.Ajax.post({ - endpoint: 'newsletters', - action: 'send', - data: this.props.newsletter.id, - onSuccess: function(response) { - alert('Sent!'); - }, - onError: function(response) { - alert('Cannot send. Set the settings and add some subscribers!'); - } - }) - }, - - render: function() { - return ( -
-

- {this.props.newsletter.subject} - - Send - -

-
- ); - } - }); - - var NewslettersList = React.createClass({ - load: function() { - MailPoet.Ajax.post({ - endpoint: 'newsletters', - action: 'get', - data: {}, - onSuccess: function(response) { - this.setState({data: response}); - }.bind(this) - }); - }, - - getInitialState: function() { - return {data: []}; - }, - - componentDidMount: function() { - this.load(); - setInterval(this.load, this.props.pollInterval); - }, - - render: function() { - var nodes = this.state.data.map(function (newsletter) { - return ( - - ); - }); - return ( -
- {nodes} -
- ); - } - }); - - var element = jQuery('#newsletters_list'); - - if(element.length > 0) { - React.render( - , - element[0] - ); - } -}); diff --git a/assets/js/src/newsletters/newsletters.jsx b/assets/js/src/newsletters/newsletters.jsx index a77d75d337..aff5542a90 100644 --- a/assets/js/src/newsletters/newsletters.jsx +++ b/assets/js/src/newsletters/newsletters.jsx @@ -3,12 +3,14 @@ define( [ 'react', 'react-router', - 'newsletters/form.jsx' + 'newsletters/form.jsx', + 'newsletters/list.jsx' ], function( React, Router, - Form + Form, + List ) { var DefaultRoute = Router.DefaultRoute; @@ -23,7 +25,7 @@ define(
  • - Newsletters + Newsletters
  • New @@ -37,21 +39,11 @@ define( } }); - var Listing = React.createClass({ - render: function () { - return ( -
    -

    Newsletters

    -
    - ); - } - }); - var routes = ( - + - + ); diff --git a/webpack.config.js b/webpack.config.js index f2c679fda4..daae589274 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -40,7 +40,7 @@ config.push(_.extend({}, baseConfig, { 'settings.jsx', 'subscribers.jsx', 'newsletters/newsletters.jsx', - 'newsletters/listing.jsx', + 'newsletters/list.jsx', 'newsletters/form.jsx' ] },