Created React component for pagination

ui/jstests/test_pagination.jsx

@@ -0,0 +1,181 @@
+define(['QUnit', 'jquery', 'pagination', 'react',
+  'test_utils'],
+  function(QUnit, $, Pagination, React, TestUtils) {
+    'use strict';
+
+    var PaginationComponent = Pagination.Pagination;
+
+    QUnit.module('Test pagination', {
+      beforeEach: function () {
+        TestUtils.setup();
+      },
+      afterEach: function () {
+        TestUtils.cleanup();
+      }
+    });
+
+    QUnit.test('Assert pagination state changes', function(assert) {
+      var done = assert.async();
+
+      var newPage = null;
+      var updatePage = function(page) {
+        newPage = page;
+      };
+
+      var afterMount = function(component) {
+        assert.deepEqual(component.state, {
+          isEditing: false,
+          textPageNum: 3
+        });
+
+        // Left click
+        var $node = $(React.findDOMNode(component));
+        React.addons.TestUtils.Simulate.click($node.find("a")[0]);
+        component.forceUpdate(function() {
+          assert.equal(newPage, 2);
+
+          // Right click
+          React.addons.TestUtils.Simulate.click($node.find("a")[2]);
+          component.forceUpdate(function() {
+            assert.equal(newPage, 4);
+
+            // Middle click
+            React.addons.TestUtils.Simulate.click($node.find("a")[1]);
+            component.forceUpdate(function() {
+              assert.deepEqual(component.state, {
+                isEditing: true,
+                textPageNum: 3
+              });
+
+              // Change text value
+              React.addons.TestUtils.Simulate.change($node.find("input")[0], {
+                target: {
+                  value: 1
+                }
+              });
+              component.forceUpdate(function() {
+                assert.deepEqual(component.state, {
+                  isEditing: true,
+                  textPageNum: 1
+                });
+
+                // Hit enter
+                React.addons.TestUtils.Simulate.keyUp($node.find("input")[0], {
+                  key: "Enter"
+                });
+                component.forceUpdate(function() {
+                  assert.deepEqual(component.state, {
+                    isEditing: false,
+                    textPageNum: 1
+                  });
+                  assert.equal(newPage, 1);
+
+                  // Bring back textbox
+                  React.addons.TestUtils.Simulate.click($node.find("a")[1]);
+                  component.forceUpdate(function() {
+                    newPage = null;
+
+                    // Focus elsewhere
+                    $node.find("a").first().focus();
+                    component.forceUpdate(function() {
+                      // Loss of focus caused page to be set
+                      assert.deepEqual(component.state, {
+                        isEditing: false,
+                        textPageNum: 1
+                      });
+                      assert.equal(newPage, 1);
+
+                      $("#testingDiv").remove();
+                      done();
+                    });
+                  });
+                });
+              });
+            });
+          });
+        });
+      };
+
+      // Must render on page to test loss of focus
+      $("body").append($("<div id='testingDiv' />"));
+
+      React.render(
+        <PaginationComponent
+          numPages={5}
+          pageNum={3}
+          updatePage={updatePage}
+          ref={afterMount}
+          />, $("#testingDiv")[0]
+      );
+    });
+
+    QUnit.test('Assert that loader works', function(assert) {
+      var div = document.createElement("div");
+      assert.equal(0, $(div).html().length);
+      Pagination.loader(1, 1, function() {}, div);
+      assert.ok($(div).html().length > 0);
+    });
+
+    QUnit.test('Assert no previous link if at page 1', function(assert) {
+      var done = assert.async();
+      var afterMount = function(component) {
+        var $node = $(React.findDOMNode(component));
+
+        assert.equal($node.find(".fa-angle-right").size(), 1);
+        assert.equal($node.find(".fa-angle-left").size(), 0);
+
+        done();
+      };
+
+      React.addons.TestUtils.renderIntoDocument(
+        <PaginationComponent
+          numPages={3}
+          pageNum={1}
+          updatePage={function() {}}
+          ref={afterMount}
+          />
+      );
+    });
+
+    QUnit.test('Assert no next link if at last page', function(assert) {
+      var done = assert.async();
+      var afterMount = function(component) {
+        var $node = $(React.findDOMNode(component));
+
+        assert.equal($node.find(".fa-angle-right").size(), 0);
+        assert.equal($node.find(".fa-angle-left").size(), 1);
+
+        done();
+      };
+
+      React.addons.TestUtils.renderIntoDocument(
+        <PaginationComponent
+          numPages={3}
+          pageNum={3}
+          updatePage={function() {}}
+          ref={afterMount}
+          />
+      );
+    });
+
+    QUnit.test('Assert nothing displayed if only one page', function(assert) {
+      var done = assert.async();
+      var afterMount = function(component) {
+        var $node = $(React.findDOMNode(component));
+
+        assert.equal($node.html(), undefined);
+
+        done();
+      };
+
+      React.addons.TestUtils.renderIntoDocument(
+        <PaginationComponent
+          numPages={1}
+          pageNum={1}
+          updatePage={function() {}}
+          ref={afterMount}
+          />
+      );
+    });
+  }
+);

ui/static/ui/js/listing.js

@@ -1,12 +1,13 @@
 define('listing',
-  ['jquery', 'lodash', 'manage_taxonomies',
+  ['jquery', 'lodash', 'uri', 'manage_taxonomies',
     'learning_resources', 'static_assets', 'utils',
-    'lr_exports', 'listing_resources', 'bootstrap', 'icheck', 'csrf'],
-  function ($, _, ManageTaxonomies, LearningResources, StaticAssets,
-            Utils, Exports, ListingResources) {
+    'lr_exports', 'listing_resources', 'pagination',
+    'bootstrap', 'icheck', 'csrf'],
+  function ($, _, URI, ManageTaxonomies, LearningResources, StaticAssets,
+            Utils, Exports, ListingResources, Pagination) {
     'use strict';
 
-    var loader = function (listingOptions, container) {
+    var loader = function (listingOptions, pageNum, numPages, container) {
       var repoSlug = listingOptions.repoSlug;
       var loggedInUsername = listingOptions.loggedInUsername;
 
@@ -81,83 +82,6 @@ define('listing',
           });
       }
 
-      /**
-       * If page number is change and it is valid then navigate user to new page
-       *
-       * @param {Number} pageNum - current page number
-       * @param {Number} maxPages - total number of pages
-       * @param {jQuery} $replaceWith - text field selector
-       * @param {jQuery} $callerSelector - pagination status selector
-       */
-      function processPage(pageNum, maxPages, $replaceWith, $callerSelector) {
-        var newPageNum = $replaceWith.val();
-        $replaceWith.remove();
-        if (newPageNum !== pageNum &&
-          newPageNum > 0 &&
-          newPageNum <= maxPages) {
-          var href = $(location).attr('href');
-          var url;
-          if (href.toLowerCase().indexOf("page=") >= 0) {
-            url = href.replace(
-              "page=" + pageNum,
-              "page=" + newPageNum
-            );
-          } else {
-            if (href[href.length - 1] === "/") {
-              url = href + "?page=" + newPageNum;
-            } else {
-              url = href + "&page=" + newPageNum;
-            }
-          }
-          $(location).attr(
-            'href',
-            url
-          );
-        }
-        $callerSelector.show();
-      }
-
-      /**
-       * Change page number in edit mode. Navigate to new page of it is valid
-       *
-       * @param {Number} pageNum - current page number
-       * @param {Number} maxPages - total number of pages
-       * @param {Element} callerElem - Reference to pagination status link
-       */
-      function navigateToPage(pageNum, maxPages, callerElem) {
-        var $replaceWith = $(
-          '<input name="search_temp" type="number" ' +
-            'value="' + pageNum + '" size="10" ' +
-          'class="form-control repo-page-status"/>'
-        );
-        var $callerSelector = $(callerElem);
-
-        $callerSelector.hide();
-        $callerSelector.after($replaceWith);
-        $replaceWith.focus();
-        $replaceWith.focusout(function() {
-          processPage(
-              pageNum,
-              maxPages,
-              $replaceWith,
-              $callerSelector
-            );
-        });
-        $replaceWith.keypress(function(e) {
-          var key = e.which;
-          // the enter key code
-          if (key === 13) {
-            e.preventDefault();
-            processPage(
-              pageNum,
-              maxPages,
-              $replaceWith,
-              $callerSelector
-            );
-          }
-        });
-      }
-
       $('[data-toggle=popover]').popover();
       //Close panels on escape keypress
       $(document).keyup(function(event) {
@@ -400,12 +324,14 @@ define('listing',
         });
       });
 
-      $("a#repo_page_status").click(function() {
-        var pageNum = $(this).data('page-num');
-        var maxPages = $(this).data('max-page-num');
-        navigateToPage(pageNum, maxPages, this);
-      });
+      var updatePage = function(newPageNum) {
+        var urlMap = URI(window.location).query(true);
+        urlMap.page = newPageNum;
+        window.location = "?" + URI().search(urlMap).query();
+      };
 
+      Pagination.loader(pageNum, numPages, updatePage,
+        $("#lore-pagination")[0]);
       ManageTaxonomies.loader(repoSlug, $('#taxonomy-component')[0]);
     };