Add items per page constant, and handling

Automattic · Aug 23, 2024 · 53bec44 · 53bec44
1 parent b532fc1
commit 53bec44
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 40 deletions.
diff --git a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx b/projects/plugins/protect/src/js/components/threats-list/pagination.jsx
@@ -54,38 +54,40 @@ const Pagination = ( { currentPage, totalPages, onPageChange } ) => {
 		return pageNumbers;
 	}, [ currentPage, totalPages ] );
 
-	return (
-		<div className={ styles[ 'pagination-container' ] }>
-			<Button
-				onClick={ handlePreviousPageClick }
-				disabled={ currentPage === 1 }
-				variant={ 'secondary' }
-			>
-				{ '<' }
-			</Button>
-			{ getPageNumbers().map( ( pageNumber, index ) =>
-				typeof pageNumber === 'number' ? (
-					<PaginationButton
-						key={ index }
-						pageNumber={ pageNumber }
-						currentPage={ currentPage }
-						onPageChange={ onPageChange }
-					/>
-				) : (
-					<span key={ index } className={ styles.ellipsis }>
-						{ pageNumber }
-					</span>
-				)
-			) }
-			<Button
-				onClick={ handleNextPageClick }
-				disabled={ currentPage === totalPages }
-				variant={ 'secondary' }
-			>
-				{ '>' }
-			</Button>
-		</div>
-	);
+	if ( totalPages > 1 ) {
+		return (
+			<div className={ styles[ 'pagination-container' ] }>
+				<Button
+					onClick={ handlePreviousPageClick }
+					disabled={ currentPage === 1 }
+					variant={ 'secondary' }
+				>
+					{ '<' }
+				</Button>
+				{ getPageNumbers().map( ( pageNumber, index ) =>
+					typeof pageNumber === 'number' ? (
+						<PaginationButton
+							key={ index }
+							pageNumber={ pageNumber }
+							currentPage={ currentPage }
+							onPageChange={ onPageChange }
+						/>
+					) : (
+						<span key={ index } className={ styles.ellipsis }>
+							{ pageNumber }
+						</span>
+					)
+				) }
+				<Button
+					onClick={ handleNextPageClick }
+					disabled={ currentPage === totalPages }
+					variant={ 'secondary' }
+				>
+					{ '>' }
+				</Button>
+			</div>
+		);
+	}
 };
 
 export default Pagination;
diff --git a/projects/plugins/protect/src/js/components/threats-list/use-pagination.js b/projects/plugins/protect/src/js/components/threats-list/use-pagination.js
@@ -1,19 +1,16 @@
 import { useState, useCallback, useMemo } from 'react';
+import { ITEMS_PER_PAGE } from '../../constants';
 
 const usePagination = list => {
-	const itemsPerPage = 5;
 	const [ currentPage, setCurrentPage ] = useState( 1 );
 
-	const totalPages = useMemo(
-		() => Math.ceil( list.length / itemsPerPage ),
-		[ list, itemsPerPage ]
-	);
+	const totalPages = useMemo( () => Math.ceil( list.length / ITEMS_PER_PAGE ), [ list ] );
 
 	const currentItems = useMemo( () => {
-		const indexOfLastItem = currentPage * itemsPerPage;
-		const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+		const indexOfLastItem = currentPage * ITEMS_PER_PAGE;
+		const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
 		return list.slice( indexOfFirstItem, indexOfLastItem );
-	}, [ currentPage, itemsPerPage, list ] );
+	}, [ currentPage, list ] );
 
 	const handlePageChange = useCallback( pageNumber => {
 		setCurrentPage( pageNumber );

diff --git a/projects/plugins/protect/src/js/constants.js b/projects/plugins/protect/src/js/constants.js
@@ -17,3 +17,8 @@ export const SCAN_IN_PROGRESS_STATUSES = [
 	SCAN_STATUS_SCANNING,
 	SCAN_STATUS_OPTIMISTICALLY_SCANNING,
 ];
+
+/**
+ * Items per page for pagination
+ */
+export const ITEMS_PER_PAGE = 10;