Merge pull request #2637 from woocommerce/fix/report-table-pagination

Fix "page" parameter collision between routing and table pagination.
woocommerce · Jul 11, 2019 · 306e7a0 · 306e7a0
2 parents c5ccd0b + 697b8a7
commit 306e7a0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 17 deletions.
diff --git a/client/analytics/report/revenue/table.js b/client/analytics/report/revenue/table.js
@@ -228,7 +228,7 @@ export default compose(
 			interval: 'day',
 			orderby: query.orderby || 'date',
 			order: query.order || 'desc',
-			page: query.page || 1,
+			page: query.paged || 1,
 			per_page: query.per_page || QUERY_DEFAULTS.pageSize,
 			after: appendTimestamp( datesFromQuery.primary.after, 'start' ),
 			before: appendTimestamp( datesFromQuery.primary.before, 'end' ),

diff --git a/client/layout/controller.js b/client/layout/controller.js
@@ -4,7 +4,7 @@
  */
 import { Component, createElement } from '@wordpress/element';
 import { parse, stringify } from 'qs';
-import { find, isEqual, last } from 'lodash';
+import { find, isEqual, last, omit } from 'lodash';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 
@@ -86,11 +86,11 @@ export class Controller extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const prevQuery = this.getQuery( prevProps.location.search );
-		const prevBaseQuery = this.getBaseQuery( prevProps.location.search );
-		const baseQuery = this.getBaseQuery( this.props.location.search );
+		const prevBaseQuery = omit( this.getQuery( prevProps.location.search ), 'paged' );
+		const baseQuery = omit( this.getQuery( this.props.location.search ), 'paged' );
 
-		if ( prevQuery.page > 1 && ! isEqual( prevBaseQuery, baseQuery ) ) {
-			getHistory().replace( getNewPath( { page: 1 } ) );
+		if ( prevQuery.paged > 1 && ! isEqual( prevBaseQuery, baseQuery ) ) {
+			getHistory().replace( getNewPath( { paged: 1 } ) );
 		}
 
 		if ( prevProps.match.url !== this.props.match.url ) {
@@ -107,16 +107,10 @@ export class Controller extends Component {
 		return parse( search );
 	}
 
-	getBaseQuery( searchString ) {
-		const query = this.getQuery( searchString );
-		delete query.page;
-		return query;
-	}
-
 	render() {
 		const { page, match, location } = this.props;
 		const { url, params } = match;
-		const query = this.getBaseQuery( location.search );
+		const query = this.getQuery( location.search );
 
 		window.wpNavMenuUrlUpdate( page, query );
 		window.wpNavMenuClassChange( page, url );

diff --git a/client/wc-api/reports/utils.js b/client/wc-api/reports/utils.js
@@ -349,7 +349,7 @@ export function getReportTableQuery( options ) {
 		order: query.order || 'desc',
 		after: noIntervals ? undefined : appendTimestamp( datesFromQuery.primary.after, 'start' ),
 		before: noIntervals ? undefined : appendTimestamp( datesFromQuery.primary.before, 'end' ),
-		page: query.page || 1,
+		page: query.paged || 1,
 		per_page: query.per_page || QUERY_DEFAULTS.pageSize,
 		...filterQuery,
 		...tableQuery,

diff --git a/packages/components/src/table/index.js b/packages/components/src/table/index.js
@@ -175,7 +175,7 @@ class TableCard extends Component {
 			onPageChange( ...params );
 		}
 		if ( onQueryChange ) {
-			onQueryChange( 'page' )( ...params );
+			onQueryChange( 'paged' )( ...params );
 		}
 	}
 
@@ -391,8 +391,8 @@ class TableCard extends Component {
 				) }
 
 				<Pagination
-					key={ parseInt( query.page ) || 1 }
-					page={ parseInt( query.page ) || 1 }
+					key={ parseInt( query.paged ) || 1 }
+					page={ parseInt( query.paged ) || 1 }
 					perPage={ rowsPerPage }
 					total={ totalRows }
 					onPageChange={ this.onPageChange }