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'
]
},