example using react-waypoint

assets/css/src/admin.styl

@@ -8,3 +8,10 @@
 @require 'validation_engine'
 
 @require 'form_editor'
+
+
+.infinite-scroll-example__scrollable-parent {
+  height: 500px;
+  overflow-y: scroll;
+  position: relative;
+}

assets/js/src/subscribers/listing.jsx

@@ -1,11 +1,24 @@
 define('subscribers.listing',
-  ['react/addons', 'jquery', 'mailpoet', 'classnames'],
-  function(React, jQuery, MailPoet, classNames) {
+  ['mailpoet', 'jquery', 'react/addons', 'classnames'],
+  function(MailPoet, jQuery, React, classNames) {
 
     var ListingGroups = React.createClass({
       render: function() {
         return (
-          <div></div>
+          <ul className="subsubsub">
+            <li>
+              <a className="current">
+                All
+                <span className="count">(0)</span>
+              </a> |
+            </li>
+            <li>
+              <a>
+                Subscribed
+                <span className="count">(0)</span>
+              </a>
+            </li>
+          </ul>
         );
       }
     });
@@ -49,7 +62,9 @@ define('subscribers.listing',
     var ListingPages = React.createClass({
       render: function() {
         return (
-          <div></div>
+          <div className="tablenav-pages">
+            <span className="displaying-num">{this.props.items.length} item(s)</span>
+          </div>
         );
       }
     });
@@ -257,8 +272,9 @@ define('subscribers.listing',
         return (
           <div>
             <ListingSearch onSearch={this.handleSearch} />
-            <div className="tablenav top">
-
+            <div className="tablenav top clearfix">
+              <ListingGroups />
+              <ListingPages items={items} />
             </div>
             <table className="wp-list-table widefat fixed">
               <thead>
@@ -283,7 +299,8 @@ define('subscribers.listing',
 
             </table>
             <div className="tablenav bottom">
-
+              <ListingGroups />
+              <ListingPages items={items} />
             </div>
           </div>
         );

assets/js/src/subscribers/table.jsx

@@ -0,0 +1,84 @@
+define('subscribers.table',
+  ['mailpoet', 'jquery', 'react/addons', 'react-waypoint'],
+  function(MailPoet, jQuery, React, Waypoint) {
+
+    var InfiniteScrollExample = React.createClass({
+      _loadMoreItems: function() {
+        this.setState({ loading: true });
+
+        this.setState({ page: (this.state.page + 1) }, function() {
+          this.loadItems();
+        }.bind(this));
+      },
+      loadItems: function() {
+        MailPoet.Ajax.post({
+          endpoint: 'subscribers',
+          action: 'get',
+          data: {
+            offset: (this.state.page - 1) * this.state.limit,
+            limit: this.state.limit
+          },
+          onSuccess: function(response) {
+            if(this.isMounted()) {
+              var items = jQuery.merge(this.state.items, response);
+              this.setState({
+                items: items,
+                loading: false
+              });
+            }
+          }.bind(this)
+        });
+      },
+      componentDidMount: function() {
+        this.loadItems();
+      },
+      getInitialState: function() {
+        // set up list of items ...
+        return {
+          loading: false,
+          items: [],
+          page: 1,
+          limit: 50
+        };
+      },
+
+      _renderItems: function() {
+        return this.state.items.map(function(subscriber, index) {
+          return (
+            <p key={index}>{subscriber.email}</p>
+          );
+        });
+      },
+
+      _renderWaypoint: function() {
+        if (!this.state.loading) {
+          return (
+            <Waypoint
+              onEnter={this._loadMoreItems}
+              threshold={2.0} />
+          );
+        }
+      },
+
+      render: function() {
+        //MailPoet.Modal.loading(this.state.loading);
+        return (
+          <div>
+            <p>{this.state.items.length} items</p>
+            <div className="infinite-scroll-example">
+              <div className="infinite-scroll-example__scrollable-parent">
+                {this._renderItems()}
+                {this._renderWaypoint()}
+              </div>
+            </div>
+          </div>
+        );
+      }
+    });
+
+    React.render(
+      <InfiniteScrollExample />,
+      document.getElementById('example')
+    )
+  }
+);

lib/Router/Subscribers.php

@@ -9,7 +9,14 @@ class Subscribers {
   }
 
   function get() {
+    if(isset($_POST['data'])) {
+      $data = $_POST['data'];
+      $offset = (isset($data['offset']) ? (int)$data['offset'] : 0);
+      $limit = (isset($data['limit']) ? (int)$data['limit'] : 50);
+      $collection = Subscriber::offset($offset)->limit($limit)->find_array();
+    } else {
       $collection = Subscriber::find_array();
+    }
     wp_send_json($collection);
   }
 

package.json

@@ -23,6 +23,9 @@
     "napa": "^1.2.0",
     "papaparse": "4.1.1",
     "react": "^0.13.3",
+    "react-infinity": "^1.2.2",
+    "react-prefixr": "^0.1.0",
+    "react-waypoint": "^1.0.2",
     "select2": "3.5.1",
     "spectrum-colorpicker": "^1.6.2",
     "tinymce": "4.1.10",

tests/unit/Models/SubscriberCest.php

@@ -11,11 +11,19 @@ class SubscriberCest {
       'email'      => 'john@mailpoet.com'
     );
 
+    for ($i=0; $i < 10000; $i++) {
+      $data = array(
+        'first_name' => 'John'.mt_rand(0,9999),
+      'last_name'  => 'Mailer'.mt_rand(0,9999),
+      'email'      => 'john'.mt_rand(0,9999).'@mailpoet.com'
+      );
       $this->subscriber = Subscriber::create();
-    $this->subscriber->hydrate($this->data);
+    $this->subscriber->hydrate($data);
     $this->saved = $this->subscriber->save();
     }
 
+  }
+
   function itCanBeCreated() {
     expect($this->saved)->equals(true);
   }

views/subscribers.html

@@ -2,5 +2,6 @@
 
 <% block content %>
   <h1><%= __('Subscribers') %></h1>
-  <div id="mailpoet_subscribers_listing"></div>
+  <!-- <div id="mailpoet_subscribers_listing"></div> -->
+  <div id="example"></div>
 <% endblock %>

webpack.config.js

@@ -1,5 +1,6 @@
 var webpack = require('webpack'),
     _ = require('underscore'),
+    path = require('path'),
     baseConfig = {},
     config = [];
 
@@ -35,7 +36,8 @@ config.push(_.extend({}, baseConfig, {
     vendor: ['handlebars', 'handlebars_helpers'],
     mailpoet: ['mailpoet', 'ajax', 'modal', 'notice'],
     admin: [
-      'subscribers/listing.jsx',
+      'subscribers/table.jsx',
+      // 'subscribers/listing.jsx',
       'settings.jsx',
       'subscribers.jsx',
       'newsletters_list.jsx',