[Data views]: Fix pagination (#55387)

WordPress · Oct 17, 2023 · eed2781 · eed2781
1 parent 7cbf38f
commit eed2781
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/edit-site/src/components/dataviews/pagination.js
@@ -36,7 +36,7 @@ function PageSizeControl( { view, onChangeView } ) {
 				label: pageSize,
 			} ) ) }
 			onChange={ ( value ) =>
-				onChangeView( { ...view, perPage: value } )
+				onChangeView( { ...view, perPage: value, page: 1 } )
 			}
 		/>
 	);
@@ -50,7 +50,6 @@ function Pagination( {
 	onChangeView,
 	paginationInfo: { totalItems = 0, totalPages },
 } ) {
-	const currentPage = view.page + 1;
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
@@ -75,8 +74,8 @@ function Pagination( {
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button
 						variant="tertiary"
-						onClick={ () => onChangeView( { ...view, page: 0 } ) }
-						disabled={ view.page === 0 }
+						onClick={ () => onChangeView( { ...view, page: 1 } ) }
+						disabled={ view.page === 1 }
 						aria-label={ __( 'First page' ) }
 					>
 						«
@@ -86,7 +85,7 @@ function Pagination( {
 						onClick={ () =>
 							onChangeView( { ...view, page: view.page - 1 } )
 						}
-						disabled={ view.page === 0 }
+						disabled={ view.page === 1 }
 						aria-label={ __( 'Previous page' ) }
 					>
 						‹
@@ -100,7 +99,7 @@ function Pagination( {
 							sprintf(
 								// translators: %1$s: Current page number, %2$s: Total number of pages.
 								_x( '<CurrenPageControl /> of %2$s', 'paging' ),
-								currentPage,
+								view.page,
 								totalPages
 							),
 							{
@@ -110,14 +109,20 @@ function Pagination( {
 										min={ 1 }
 										max={ totalPages }
 										onChange={ ( value ) => {
-											if ( value > totalPages ) return;
+											if (
+												! value ||
+												value < 1 ||
+												value > totalPages
+											) {
+												return;
+											}
 											onChangeView( {
 												...view,
-												page: view.page - 1,
+												page: value,
 											} );
 										} }
 										step="1"
-										value={ currentPage }
+										value={ view.page }
 										isDragEnabled={ false }
 										spinControls="none"
 									/>
@@ -130,17 +135,17 @@ function Pagination( {
 						onClick={ () =>
 							onChangeView( { ...view, page: view.page + 1 } )
 						}
-						disabled={ view.page >= totalPages - 1 }
+						disabled={ view.page >= totalPages }
 						aria-label={ __( 'Next page' ) }
 					>
 						›
 					</Button>
 					<Button
 						variant="tertiary"
 						onClick={ () =>
-							onChangeView( { ...view, page: totalPages - 1 } )
+							onChangeView( { ...view, page: totalPages } )
 						}
-						disabled={ view.page >= totalPages - 1 }
+						disabled={ view.page >= totalPages }
 						aria-label={ __( 'Last page' ) }
 					>
 						»

diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js
@@ -18,6 +18,7 @@ export default function TextFilter( { view, onChangeView } ) {
 		onChangeView( ( currentView ) => ( {
 			...currentView,
 			search: debouncedSearch,
+			page: 1,
 		} ) );
 	}, [ debouncedSearch, onChangeView ] );
 	const searchLabel = __( 'Filter list' );

diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
@@ -110,7 +110,7 @@ function PageSizeMenu( { view, onChangeView } ) {
 						onSelect={ ( event ) => {
 							// We need to handle this on DropDown component probably..
 							event.preventDefault();
-							onChangeView( { ...view, perPage: size, page: 0 } );
+							onChangeView( { ...view, perPage: size, page: 1 } );
 						} }
 						// TODO: check about role and a11y.
 						role="menuitemcheckbox"

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -27,7 +27,7 @@ export default function PagePages() {
 	const [ view, setView ] = useState( {
 		type: 'list',
 		search: '',
-		page: 0,
+		page: 1,
 		perPage: 5,
 		sort: {
 			field: 'date',
@@ -52,7 +52,7 @@ export default function PagePages() {
 	const queryArgs = useMemo(
 		() => ( {
 			per_page: view.perPage,
-			page: view.page + 1, // tanstack starts from zero.
+			page: view.page,
 			_embed: 'author',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,