Settings JSX

- fixed issue with token in MailPoet Ajax / JSX
- added settings form with get/set
- reformated some code in subscribers.jsx

assets/js/src/ajax.js

@@ -1,12 +1,13 @@
 define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
   "use strict";
   MailPoet.Ajax = {
-      version: 0.1,
+      version: 0.5,
       options: {},
       defaults: {
         url: null,
         endpoint: null,
         action: null,
+        token: null,
         data: {},
         onSuccess: function(data, textStatus, xhr) {},
         onError: function(xhr, textStatus, errorThrown) {}
@@ -31,7 +32,7 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
 
         // set default token
         if(this.options.token === null) {
-          this.options.token = mailpoet_token;
+          this.options.token = window.mailpoet_token;
         }
       },
       request: function(method, options) {
@@ -44,7 +45,7 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
           token: this.options.token,
           endpoint: this.options.endpoint,
           method: this.options.action,
-          data: this.options.data
+          data: this.options.data || {}
         };
 
         // make ajax request depending on method
@@ -65,6 +66,9 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
             error : this.options.onError
           });
         }
+
+        // clear options
+        this.options = {};
       }
   };
 });

assets/js/src/settings.jsx

@@ -1,19 +1,118 @@
-define('settings', ['react'], function(React) {
+define('settings', ['react/addons', 'jquery', 'mailpoet'], function(React, jQuery, MailPoet) {
-  var CommentBox = React.createClass({
+  var SettingsForm = React.createClass({
+    mixins: [React.addons.LinkedStateMixin],
+    load: function() {
+      this.setState({ loading: true });
+
+      MailPoet.Ajax.post({
+        endpoint: 'settings',
+        action: 'get',
+        onSuccess: function(response) {
+          // index settings by key
+          var settings = {};
+
+          jQuery.each(response, function(i, setting) {
+            settings[setting.name] = setting.value;
+          });
+
+          this.setState({
+            loading: false,
+            settings: settings
+          });
+        }.bind(this)
+      });
+    },
+    save: function(e) {
+      this.setState({ loading: true });
+
+      e.preventDefault();
+
+      // format data
+      var settings = [];
+
+      jQuery.each(this.state.settings, function(name, value) {
+        settings.push({
+          name: name,
+          value: value
+        });
+      });
+
+      MailPoet.Ajax.post({
+        endpoint: 'settings',
+        action: 'set',
+        data: settings,
+        onSuccess: function(response) {
+          this.setState({ loading: false });
+        }.bind(this)
+      })
+    },
+    getInitialState: function() {
+      return {
+        loading: false,
+        settings: {}
+      };
+    },
+    linkSettingValue: function(key) {
+      return {
+        value: this.state['settings'][key],
+        requestChange: function(newValue) {
+          var settings = this.state.settings;
+          settings[key] = newValue;
+          this.setState({ 'settings': settings });
+        }.bind(this)
+      };
+    },
+    componentDidMount: function() {
+      this.load();
+    },
     render: function() {
       return (
-          <div className="commentBox">
+        <form className="mailpoet_settings_form">
-          Hello, world! I am a CommentBox.
+          <p>
-          </div>
+            <label>
-          );
+              From name:
+              <input
+                type="text"
+                valueLink={this.linkSettingValue('from_name')} />
+            </label>
+          </p>
+
+          <p>
+            <label>
+              From email:
+              <input
+                type="text"
+                valueLink={this.linkSettingValue('from_email')} />
+            </label>
+          </p>
+
+          <p>
+            <label>
+              API key:
+              <input
+                type="text"
+                valueLink={this.linkSettingValue('api_key')} />
+            </label>
+          </p>
+
+          <input
+            ref="submit"
+            type="submit"
+            onClick={this.save}
+            className="button button-primary"
+            disabled={this.state.loading}
+            value="Save" />
+        </form>
+      );
     }
   });
 
-  var element = document.getElementById('settings-container');
+  var element = jQuery('#mailpoet_settings');
-  if (element) {
+
+  if(element.length > 0) {
     React.render(
-        <CommentBox />,
+      <SettingsForm />,
-        document.getElementById('settings-container')
+      element[0]
-        );
+    );
   }
 });

assets/js/src/subscribers.jsx

@@ -1,4 +1,4 @@
-define('subscribers', ['react', 'jquery'], function(React, jQuery) {
+define('subscribers', ['react', 'jquery', 'mailpoet'], function(React, jQuery, MailPoet) {
 
   var data = [
   {
@@ -16,29 +16,23 @@ define('subscribers', ['react', 'jquery'], function(React, jQuery) {
   var Subscriber = React.createClass({
     render: function() {
       return (
-          <div className="subscriber">
+        <div className="subscriber">
           <h3 className="name">
-          {this.props.subscriber.first_name} {this.props.subscriber.last_name}
+            {this.props.subscriber.first_name} {this.props.subscriber.last_name}
           </h3>
           {this.props.subscriber.email}
-          </div>
+        </div>
-          );
+      );
     }
   });
 
   var SubscribersList = React.createClass({
     load: function() {
-      jQuery.ajax({
+      MailPoet.Ajax.post({
-        url: ajaxurl,
+        endpoint: 'subscribers',
-        type: 'post',
+        action: 'get',
-        data: {
+        data: {},
-          action: 'mailpoet',
+        onSuccess: function(response) {
-          token: mailpoet_token,
-          endpoint: 'subscribers',
-          method: 'get',
-          data: ''
-        },
-        success : function(response) {
           this.setState({data: response});
         }.bind(this)
       });
@@ -53,23 +47,23 @@ define('subscribers', ['react', 'jquery'], function(React, jQuery) {
     render: function() {
       var nodes = this.state.data.map(function (subscriber) {
         return (
-            <Subscriber key={subscriber.id} subscriber={subscriber} />
+          <Subscriber key={subscriber.id} subscriber={subscriber} />
-            );
+        );
       });
       return (
-          <div className="subscribersList">
+        <div className="subscribersList">
-          {nodes}
+        {nodes}
-          </div>
+        </div>
-          );
+      );
     }
   });
 
+  var element = jQuery('#mailpoet_subscribers');
 
-  var element = document.getElementById('mailpoet_subscribers');
+  if(element.length > 0) {
-  if (element) {
     React.render(
-        <SubscribersList data={data} pollInterval={2000} />,
+      <SubscribersList data={data} pollInterval={2000} />,
-        document.getElementById('mailpoet_subscribers')
+      element[0]
-        );
+    );
   }
 });

lib/Router/Router.php

@@ -24,7 +24,7 @@ class Router {
     $class = ucfirst($_POST['endpoint']);
     $endpoint =  __NAMESPACE__ . "\\" . $class;
     $method = $_POST['method'];
-    $data = $_POST['data'];
+    $data = isset($_POST['data']) ? $_POST['data'] : array();
     $endpoint = new $endpoint();
     $endpoint->$method($data);
   }

views/settings.html

@@ -1,55 +1,7 @@
 <% extends 'layout.html' %>
 
 <% block content %>
-  <h1><%= 'Settings' %></h1>
+  <h1><%= __('Settings') %></h1>
 
-  <form id="mailpoet_settings" novalidate>
+  <div id="mailpoet_settings"></div>
-    <p>
-      <label>
-        <%= __('First Name') %>
-        <input type="text" name="first_name" />
-      </label>
-    </p>
-
-    <p>
-      <label>
-        <%= __('Last Name') %>
-        <input type="text" name="last_name" />
-      </label>
-    </p>
-
-    <p>
-      <label>
-        <%= __('Email') %>
-        <input type="email" name="email" />
-      </label>
-    </p>
-
-    <p>
-      <input type="submit" class="button-secondary"
-        value="<%= __('Submit') %>"
-      />
-    </p>
-  </form>
-
-<script type="text/javascript">
-jQuery(function($) {
-
-  // dom loaded
-  $(function() {
-
-    MailPoet.Ajax.post({
-      endpoint: 'settings',
-      action: 'get',
-      data: {
-        first_name: 'John'
-      },
-      onSuccess: function(response) {
-        console.log(response['0'].value);
-      }
-    });
-
-  });
-});
-</script>
 <% endblock %>

views/subscribers.html

@@ -1,6 +1,7 @@
 <% extends 'layout.html' %>
 
 <% block content %>
-  <h1><%= 'Subscribers' %></h1>
+  <h1><%= __('Subscribers') %></h1>
+
   <div id="mailpoet_subscribers"></div>
 <% endblock %>