Newsletters router with multi page links.

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 (
+          <div className="newsletter">
+            <p className="subject">
+              {this.props.newsletter.subject} - <a href="" onClick={this.send}>
+                Send
+              </a>
+            </p>
+          </div>
+        );
+      }
+    });
+
+    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 (
+            <Newsletter key={newsletter.id} newsletter={newsletter} />
+          );
+        });
+        return (
+          <div className="newslettersList">
+            <h1>Newsletters</h1>
+            {nodes}
+          </div>
+        );
+      }
+    });
+
+    return List;
+  });

assets/js/src/newsletters/listing.jsx

@@ -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 (
-        <div className="newsletter">
-          <p className="subject">
-            {this.props.newsletter.subject} - <a href="" onClick={this.send}>
-            Send
-            </a>
-          </p>
-        </div>
-      );
-    }
-  });
-
-  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 (
-          <Newsletter key={newsletter.id} newsletter={newsletter} />
-        );
-      });
-      return (
-        <div className="newslettersList">
-        {nodes}
-        </div>
-      );
-    }
-  });
-
-  var element = jQuery('#newsletters_list');
-
-  if(element.length > 0) {
-    React.render(
-      <NewslettersList pollInterval={2000} />,
-      element[0]
-    );
-  }
-});

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(
             <header>
               <ul>
                 <li>
-                  <Link to="listing">Newsletters</Link>
+                  <Link to="list">Newsletters</Link>
                 </li>
                 <li>
                   <Link to="form">New</Link>
@@ -37,21 +39,11 @@ define(
       }
     });
 
-    var Listing = React.createClass({
-      render: function () {
-        return (
-          <div>
-            <h1>Newsletters</h1>
-          </div>
-        );
-      }
-    });
-
     var routes = (
       <Route name="app" path="/" handler={App}>
-        <Route name="listing" handler={Listing}/>
+        <Route name="list" handler={List}/>
         <Route name="form" handler={Form}/>
-        <DefaultRoute handler={Listing}/>
+        <DefaultRoute handler={List}/>
       </Route>
     );
 

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