fix(pagination): issues/400 page reset on limit update (#405)

RedHatInsights · Sep 3, 2020 · d2b39ac · d2b39ac
1 parent 343efe9
commit d2b39ac
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 9 deletions.
diff --git a/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap b/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Pagination Component should handle per-page limit, and page offset updates: page, offset 1`] = `
+exports[`Pagination Component should handle per-page limit, and page offset updates through props: page, offset 1`] = `
 Object {
   "pageOffset": 0,
   "pagePage": 2,
   "pagePerPage": 20,
 }
 `;
 
-exports[`Pagination Component should handle per-page limit, and page offset updates: per-page, limit 1`] = `
+exports[`Pagination Component should handle per-page limit, and page offset updates through props: per-page, limit 1`] = `
 Object {
   "perPageOffset": 0,
   "perPagePage": 1,
@@ -44,6 +44,16 @@ Array [
   ],
   Array [
     Array [
+      Object {
+        "offset": 0,
+        "type": "SET_QUERY_RHSM_offset",
+        "viewId": "pagination",
+      },
+      Object {
+        "offset": 0,
+        "type": "SET_QUERY_RHSM_offset",
+        "viewId": "lorem",
+      },
       Object {
         "limit": 20,
         "type": "SET_QUERY_RHSM_limit",
@@ -121,3 +131,32 @@ exports[`Pagination Component should render a non-connected component: non-conne
   widgetId="pagination-options-menu"
 />
 `;
+
+exports[`Pagination Component should reset offset/pages when per-page limit is adjusted through redux state: dispatch per-page 1`] = `
+Array [
+  Array [
+    Array [
+      Object {
+        "offset": 0,
+        "type": "SET_QUERY_RHSM_offset",
+        "viewId": "pagination",
+      },
+      Object {
+        "offset": 0,
+        "type": "SET_QUERY_RHSM_offset",
+        "viewId": "lorem",
+      },
+      Object {
+        "limit": 100,
+        "type": "SET_QUERY_RHSM_limit",
+        "viewId": "pagination",
+      },
+      Object {
+        "limit": 100,
+        "type": "SET_QUERY_RHSM_limit",
+        "viewId": "lorem",
+      },
+    ],
+  ],
+]
+`;
diff --git a/src/components/pagination/__tests__/pagination.test.js b/src/components/pagination/__tests__/pagination.test.js
@@ -24,7 +24,7 @@ describe('Pagination Component', () => {
     expect(component).toMatchSnapshot('non-connected');
   });
 
-  it('should handle per-page limit, and page offset updates', () => {
+  it('should handle per-page limit, and page offset updates through props', () => {
     const props = {
       productId: 'lorem',
       itemCount: 39,
@@ -56,6 +56,23 @@ describe('Pagination Component', () => {
     }).toMatchSnapshot('page, offset');
   });
 
+  it('should reset offset/pages when per-page limit is adjusted through redux state', () => {
+    const props = {
+      productId: 'lorem',
+      itemCount: 11,
+      query: {
+        [RHSM_API_QUERY_TYPES.LIMIT]: 10,
+        [RHSM_API_QUERY_TYPES.OFFSET]: 10
+      }
+    };
+
+    const component = mount(<Pagination {...props} />);
+    const componentInstance = component.instance();
+    componentInstance.onPerPage({ perPage: 100 });
+
+    expect(mockDispatch.mock.calls).toMatchSnapshot('dispatch per-page');
+  });
+
   it('should handle updating paging for redux state', () => {
     const props = {
       productId: 'lorem',

diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
@@ -22,9 +22,9 @@ class Pagination extends React.Component {
    * @param {number} params.page
    */
   onPage = ({ page }) => {
-    const { query, perPageDefault, productId, viewId } = this.props;
+    const { offsetDefault, perPageDefault, productId, query, viewId } = this.props;
     const updatedPerPage = query?.[RHSM_API_QUERY_TYPES.LIMIT] || perPageDefault;
-    const offset = updatedPerPage * (page - 1) || 0;
+    const offset = updatedPerPage * (page - 1) || offsetDefault;
 
     store.dispatch([
       {
@@ -58,9 +58,19 @@ class Pagination extends React.Component {
    * @param {number} params.perPage
    */
   onPerPage = ({ perPage }) => {
-    const { productId, viewId } = this.props;
+    const { offsetDefault, productId, viewId } = this.props;
 
     store.dispatch([
+      {
+        type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.OFFSET],
+        viewId,
+        [RHSM_API_QUERY_TYPES.OFFSET]: offsetDefault
+      },
+      {
+        type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.OFFSET],
+        viewId: productId,
+        [RHSM_API_QUERY_TYPES.OFFSET]: offsetDefault
+      },
       {
         type: reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_TYPES.LIMIT],
         viewId,
@@ -81,7 +91,7 @@ class Pagination extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { query, dropDirection, isCompact, isDisabled, itemCount, perPageDefault, variant } = this.props;
+    const { dropDirection, isCompact, isDisabled, itemCount, perPageDefault, query, variant } = this.props;
     const updatedPage = query[RHSM_API_QUERY_TYPES.OFFSET] / query[RHSM_API_QUERY_TYPES.LIMIT] + 1 || 1;
     const updatedPerPage = query[RHSM_API_QUERY_TYPES.LIMIT] || perPageDefault;
 
@@ -105,7 +115,9 @@ class Pagination extends React.Component {
 /**
  * Prop types
  *
- * @type {{}}
+ * @type {{isCompact: boolean, viewId: string, productId: string, query: object,
+ *     dropDirection: string, offsetDefault: number, variant: string, perPageDefault: number,
+ *     isDisabled: boolean, itemCount: number}}
  */
 Pagination.propTypes = {
   query: PropTypes.shape({
@@ -116,6 +128,7 @@ Pagination.propTypes = {
   isCompact: PropTypes.bool,
   isDisabled: PropTypes.bool,
   itemCount: PropTypes.number,
+  offsetDefault: PropTypes.number,
   perPageDefault: PropTypes.number,
   productId: PropTypes.string.isRequired,
   variant: PropTypes.string,
@@ -125,14 +138,17 @@ Pagination.propTypes = {
 /**
  * Default props.
  *
- * @type {{}}
+ * @type {{isCompact: boolean, viewId: string, query: object, dropDirection: string,
+ *     offsetDefault: number, variant: null, perPageDefault: number, isDisabled: boolean,
+ *     itemCount: number}}
  */
 Pagination.defaultProps = {
   query: {},
   dropDirection: 'down',
   isCompact: false,
   isDisabled: false,
   itemCount: 0,
+  offsetDefault: 0,
   perPageDefault: 10,
   variant: null,
   viewId: 'pagination'