Merge pull request #73 from BooDoo/issue/18/paginate-show-blocks

show_blocks pagination

blocktogether.js

@@ -1,6 +1,7 @@
 // TODO: Add CSRF protection on POSTs
 // TODO: Log off using GET allows drive-by logoff, fix that.
 var express = require('express'), // Web framework
+    url = require('url'),
     bodyParser = require('body-parser'),
     cookieSession = require('cookie-session'),
     crypto = require('crypto'),
@@ -466,6 +467,13 @@ function renderHtmlError(message) {
 function showBlocks(req, res, btUser, ownBlocks) {
   // The user viewing this page may not be logged in.
   var logged_in_screen_name = undefined;
+  // For pagination
+  // N.B.: currentPage IS 1-INDEXED, NOT ZERO-INDEXED
+  var currentPage = parseInt(req.query.page, 10) || 1,
+      perPage = 500;
+  if (currentPage < 1) {
+    currentPage = 1;
+  }
   if (req.user) {
     logged_in_screen_name = req.user.screen_name;
   }
@@ -481,8 +489,12 @@ function showBlocks(req, res, btUser, ownBlocks) {
     if (!blockBatch) {
       renderHtmlError('No blocks fetched yet. Please try again soon.');
     } else {
-      blockBatch.getBlocks({
-        limit: 5000,
+      Block.findAndCountAll({
+        where: {
+          blockBatchId: blockBatch.id
+        },
+        limit: perPage,
+        offset: perPage * (currentPage - 1),
         include: [{
           model: TwitterUser,
           required: false
@@ -492,7 +504,10 @@ function showBlocks(req, res, btUser, ownBlocks) {
       }).success(function(blocks) {
         // Create a list of users that has at least a uid entry even if the
         // TwitterUser doesn't yet exist in our DB.
-        var blockedUsersList = blocks.map(function(block) {
+        var blocksCount = blocks.count,
+            blocksRows = blocks.rows,
+            pageCount = Math.ceil(blocksCount / perPage);
+        var blockedUsersList = blocksRows.map(function(block) {
           if (block.twitterUser) {
             return block.twitterUser;
           } else {
@@ -507,10 +522,20 @@ function showBlocks(req, res, btUser, ownBlocks) {
           author_screen_name: btUser.screen_name,
           // The uid of the user whose blocks we are viewing.
           author_uid: btUser.uid,
-          // TODO: We could get the full count even when we are only displaying
-          // 5000.
-          block_count: blocks.length,
-          theres_more: blocks.length === 5000,
+          block_count: blocksCount,
+          paginate: pageCount > 1,
+          // Array of objects (1-indexed) for use in pagination template.
+          pages: _.range(1, pageCount + 1).map(function(pageNum) {
+            return {
+              page_num: pageNum,
+              active: pageNum === currentPage
+            };
+          }),
+          // Previous/next page indices for use in pagination template.
+          previous_page: currentPage - 1 || false,
+          next_page: currentPage === pageCount ? false : currentPage + 1,
+          // Base URL for appending pagination querystring.
+          path_name: url.parse(req.url).pathname,
           blocked_users: blockedUsersList,
           own_blocks: ownBlocks
         };

static/pagination.js

@@ -0,0 +1 @@
+

templates/pagination.mustache

@@ -0,0 +1,18 @@
+<script defer type='text/javascript' src='/static/pagination.js'></script>
+<ol class="pagination">
+  {{#previous_page}}
+  <li class="nav-previous">
+    <a class="page-link" href="{{path_name}}?page={{previous_page}}">&laquo;</a>
+  </li>
+  {{/previous_page}}
+  {{#pages}}
+  <li class="nav-page{{#active}} active{{/active}}">
+    <a class="page-link" href="{{path_name}}?page={{page_num}}">{{page_num}}</a>
+  </li>
+  {{/pages}}
+  {{#next_page}}
+  <li class="nav-next">
+    <a class="page-link" href="{{path_name}}?page={{next_page}}">&raquo;</a>
+  </li>
+  {{/next_page}}
+</ol>

templates/show-blocks.mustache

@@ -3,26 +3,28 @@
   {{^own_blocks}}
     User <a href='https://mobile.twitter.com/{{author_screen_name}}' class='screen-name'
       >@{{author_screen_name}}</a>
-    is blocking {{block_count}}
-    {{#theres_more}}+{{/theres_more}}
-    users on Twitter (updated {{updated}}):
+    is blocking {{block_count}} users on Twitter (updated {{updated}}):
   {{/own_blocks}}
   {{#own_blocks}}
-    You are blocking {{block_count}}
-    {{#theres_more}}+{{/theres_more}} users on Twitter (updated {{updated}}):
+    You are blocking {{block_count}} users on Twitter (updated {{updated}}):
   {{/own_blocks}}
   {{! When displaying someone else's blocks, give an option to block all the
-      same ones.  }}
+      same ones on this page.  }}
   {{^own_blocks}}
   <div>
-    <button class='btn btn-primary block-all'>Block All</button>
+    <button class='btn btn-primary block-all'>Block All{{#paginate}} on Page{{/paginate}}</button>
     <div class='block-all-processing'>
       Block Together will now block {{block_count}} users using your account
       @{{logged_in_screen_name}}. This may take some time. You can check
       on progress at <a href='/actions'>the Actions page</a>.
     </div>
   </div>
   {{/own_blocks}}
+  {{#paginate}}
+  <div id='pagination-bar'>
+  {{>pagination.mustache}}
+  </div>
+  {{/paginate}}
   <table data-author-uid='{{author_uid}}'
     class='table table-condensed table-hover all-blocks'>
     <thead>