New newsletter dynamic form in a route.

assets/js/src/newsletters/form.jsx

@@ -1,5 +1,5 @@
 define(
-  'newsletters_form',
+  'form',
   [
     'react',
     'jquery',
@@ -11,70 +11,67 @@ define(
     MailPoet
   ) {
 
-  var NewslettersForm = React.createClass({
-    getInitialState: function() {
-      return {
-        disabled: false
-      };
-    },
+    var Form = React.createClass({
+      getInitialState: function() {
+        return {
+          disabled: false
+        };
+      },
 
-    post: function(data) {
-      MailPoet.Ajax.post({
-        endpoint: 'newsletters',
-        action: 'save',
-        data: data,
-        onSuccess: function(response) {
-        }.bind(this)
-      })
-    },
+      post: function(data) {
+        MailPoet.Ajax.post({
+          endpoint: 'newsletters',
+          action: 'save',
+          data: data,
+          onSuccess: function(response) {
+          }.bind(this)
+        })
+      },
 
-    handleSubmit: function(e) {
-      e.preventDefault();
-      this.setState({
-        disabled: true
-      });
+      handleSubmit: function(e) {
+        e.preventDefault();
+        this.setState({
+          disabled: true
+        });
 
-      var subject =
-        React.findDOMNode(this.refs.subject);
-      var body =
-        React.findDOMNode(this.refs.body);
+        var subject =
+          React.findDOMNode(this.refs.subject);
+        var body =
+          React.findDOMNode(this.refs.body);
+
+        if (!subject.value || !body.value) {
+          return;
+        }
+
+        this.post({
+          subject: subject.value,
+          body: body.value
+        });
+
+        subject.value = '';
+        body.value = '';
+        this.setState({
+          disabled: false
+        });
 
-      if (!subject.value || !body.value) {
         return;
-      }
+      },
 
-      this.post({
-        subject: subject.value,
-        body: body.value
-      });
-
-      subject.value = '';
-      body.value = '';
-      this.setState({
-        disabled: false
-      });
-
-      return;
-    },
-
-    render: function() {
-      return (
-          <form className="newslettersForm" onSubmit={this.handleSubmit}>
-          <input type="text" placeholder="Subject" ref="subject" />
-          <br />
-          <textarea placeholder="Body" ref="body" />
-          <br />
-          <input type="submit" value="Save" disabled={this.state.locked} />
-          </form>
-          );
-    }
-  });
-
-  var element = jQuery('#newsletters_form');
-  if(element.length > 0) {
-    React.render(
-        <NewslettersForm />,
-        element[0]
+      render: function() {
+        return (
+          <div>
+            <h1>New</h1>
+            <form className="newslettersForm" onSubmit={this.handleSubmit}>
+              <input type="text" placeholder="Subject" ref="subject" />
+              <br />
+              <textarea placeholder="Body" ref="body" />
+              <br />
+              <input type="submit" value="Save" disabled={this.state.locked} />
+            </form>
+          </div>
         );
-  }
-});
+      }
+    });
+
+    return Form;
+  });

assets/js/src/newsletters/newsletters.jsx

@@ -3,13 +3,11 @@ define(
   [
     'react',
     'react-router',
-    'mailpoet',
     'newsletters/form.jsx'
   ],
   function(
     React,
     Router,
-    MailPoet,
     Form
   ) {
 
@@ -28,7 +26,7 @@ define(
                   <Link to="listing">Newsletters</Link>
                 </li>
                 <li>
-                  <Link to="single">New</Link>
+                  <Link to="form">New</Link>
                 </li>
               </ul>
             </header>
@@ -49,20 +47,10 @@ define(
       }
     });
 
-    var Single = React.createClass({
-      render: function () {
-        return (
-          <div>
-            <h1>New</h1>
-          </div>
-        );
-      }
-    });
-
     var routes = (
       <Route name="app" path="/" handler={App}>
         <Route name="listing" handler={Listing}/>
-        <Route name="single" handler={Single}/>
+        <Route name="form" handler={Form}/>
         <DefaultRoute handler={Listing}/>
       </Route>
     );