diff --git a/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap b/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap index c33c32594..b6036024f 100644 --- a/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap +++ b/src/components/pagination/__tests__/__snapshots__/pagination.test.js.snap @@ -1,6 +1,6 @@ // 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, @@ -8,7 +8,7 @@ Object { } `; -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 index d4614d24f..19a6cece6 100644 --- 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(); + 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 index f0386257e..8b2758d7c 100644 --- 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,7 +138,9 @@ 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: {}, @@ -133,6 +148,7 @@ Pagination.defaultProps = { isCompact: false, isDisabled: false, itemCount: 0, + offsetDefault: 0, perPageDefault: 10, variant: null, viewId: 'pagination'