Subscriber Edit page

assets/js/src/listing/listing.jsx

@@ -76,8 +76,8 @@ define(
                   className="colspanchange">
                   {
                     (this.props.loading === true)
-                    ? MailPoetI18n.loading
-                    : MailPoetI18n.noRecordFound
+                    ? MailPoetI18n.loadingItems
+                    : MailPoetI18n.noItemsFound
                   }
                 </td>
               </tr>

assets/js/src/subscribers/form.jsx

@@ -3,13 +3,15 @@ define(
     'react',
     'react-router',
     'jquery',
-    'mailpoet'
+    'mailpoet',
+    'classnames',
   ],
   function(
     React,
     Router,
     jQuery,
-    MailPoet
+    MailPoet,
+    classNames
   ) {
 
     var Form = React.createClass({
@@ -19,9 +21,50 @@ define(
       getInitialState: function() {
         return {
           loading: false,
-          errors: []
+          errors: [],
+          item: {}
         };
       },
+      componentDidMount: function() {
+        if(this.props.params.id !== undefined) {
+          if(this.isMounted()) {
+            this.loadItem(this.props.params.id);
+          }
+        }
+      },
+      componentWillReceiveProps: function(props) {
+        if(props.params.id === undefined) {
+          this.setState({
+            loading: false,
+            item: {}
+          });
+        } else {
+          this.loadItem(props.params.id);
+        }
+      },
+      loadItem: function(id) {
+        this.setState({ loading: true });
+
+        MailPoet.Ajax.post({
+          endpoint: 'subscribers',
+          action: 'get',
+          data: { id: id }
+        }).done(function(response) {
+          if(response === false) {
+            this.setState({
+              loading: false,
+              item: {}
+            }, function() {
+              this.transitionTo('/new');
+            }.bind(this));
+          } else {
+            this.setState({
+              loading: false,
+              item: response
+            });
+          }
+        }.bind(this));
+      },
       handleSubmit: function(e) {
         e.preventDefault();
 
@@ -30,21 +73,31 @@ define(
         MailPoet.Ajax.post({
           endpoint: 'subscribers',
           action: 'save',
-          data: {
-            email: React.findDOMNode(this.refs.email).value,
-            first_name: React.findDOMNode(this.refs.first_name).value,
-            last_name: React.findDOMNode(this.refs.last_name).value
-          }
+          data: this.state.item
         }).done(function(response) {
           this.setState({ loading: false });
 
           if(response === true) {
             this.transitionTo('/');
+            if(this.props.params.id !== undefined) {
+              MailPoet.Notice.success('Subscriber succesfully updated!');
+            } else {
+              MailPoet.Notice.success('Subscriber succesfully added!');
+            }
+
           } else {
             this.setState({ errors: response });
           }
         }.bind(this));
       },
+      handleItemChange: function(e) {
+        var item = this.state.item;
+        item[e.target.name] = e.target.value;
+        this.setState({
+          item: item
+        });
+        return true;
+      },
       render: function() {
         var errors = this.state.errors.map(function(error, index) {
           return (
@@ -52,17 +105,38 @@ define(
           );
         });
 
+        var formClasses = classNames(
+          { 'mailpoet_form_loading': this.state.loading }
+        );
+
         return (
-          <form onSubmit={ this.handleSubmit }>
+          <form
+            className={ formClasses }
+            onSubmit={ this.handleSubmit }>
             { errors }
             <p>
-              <input type="text" placeholder="Email" ref="email" />
+              <input
+                type="text"
+                placeholder="Email"
+                name="email"
+                value={ this.state.item.email }
+                onChange={ this.handleItemChange }/>
             </p>
             <p>
-              <input type="text" placeholder="First name" ref="first_name" />
+              <input
+                type="text"
+                placeholder="First name"
+                name="first_name"
+                value={ this.state.item.first_name }
+                onChange={ this.handleItemChange }/>
             </p>
             <p>
-              <input type="text" placeholder="Last name" ref="last_name" />
+              <input
+                type="text"
+                placeholder="Last name"
+                name="last_name"
+                value={ this.state.item.last_name }
+                onChange={ this.handleItemChange }/>
             </p>
             <input
               className="button button-primary"

assets/js/src/subscribers/list.jsx

@@ -1,19 +1,21 @@
 define(
   [
     'react',
-    'jquery',
+    'react-router',
     'mailpoet',
     'listing/listing.jsx',
-    'classnames'
+    'classnames',
   ],
   function(
     React,
-    jQuery,
+    Router,
     MailPoet,
     Listing,
     classNames
   ) {
 
+    var Link = Router.Link;
+
     var columns = [
       {
         name: 'email',
@@ -47,26 +49,10 @@ define(
       },
     ];
 
-    var item_actions = [
-      {
-        name: 'view',
-        label: 'View',
-        onClick: function() {
-          this.transitionTo('/');
-        }
-      }
-    ];
-
     var bulk_actions = [
       {
         name: 'move',
-        label: 'Move to list...',
-        onSelect: function(e) {
-          console.log(e);
-        },
-        onApply: function(selected) {
-          console.log(selected);
-        }
+        label: 'Move to list...'
       },
       {
         name: 'add',
@@ -82,7 +68,7 @@ define(
       getItems: function(listing) {
         MailPoet.Ajax.post({
           endpoint: 'subscribers',
-          action: 'get',
+          action: 'listing',
           data: {
             offset: (listing.state.page - 1) * listing.state.limit,
             limit: listing.state.limit,
@@ -133,6 +119,13 @@ define(
               <strong>
                 <a>{ subscriber.email }</a>
               </strong>
+
+              <div className="row-actions">
+                <span className="edit">
+                  <Link to="edit" params={{ id: subscriber.id }}>Edit</Link>
+                </span>
+              </div>
+
               <button className="toggle-row" type="button">
                 <span className="screen-reader-text">Show more details</span>
               </button>
@@ -161,8 +154,7 @@ define(
             onRenderItem={ this.renderItem }
             items={ this.getItems }
             columns={ columns }
-            bulk_actions={ bulk_actions }
-            item_actions={ item_actions } />
+            bulk_actions={ bulk_actions } />
         );
       }
     });

assets/js/src/subscribers/subscribers.jsx

@@ -16,6 +16,7 @@ define(
     var Link = Router.Link;
     var Route = Router.Route;
     var RouteHandler = Router.RouteHandler;
+    var NotFoundRoute = Router.NotFoundRoute;
 
     var App = React.createClass({
       render: function() {
@@ -24,7 +25,7 @@ define(
             <h1>
               { MailPoetI18n.pageTitle }
               &nbsp;
-              <Link className="add-new-h2" to="form">New</Link>
+              <Link className="add-new-h2" to="new">New</Link>
             </h1>
 
             <RouteHandler/>
@@ -35,8 +36,9 @@ define(
 
     var routes = (
       <Route name="app" path="/" handler={App}>
-        <Route name="list" handler={List} />
-        <Route name="form" handler={Form} />
+        <Route name="new" path="/new" handler={Form} />
+        <Route name="edit" path="/edit/:id" handler={Form} />
+        <NotFoundRoute handler={List} />
         <DefaultRoute handler={List} />
       </Route>
     );