diff --git a/projects/plugins/protect/src/js/components/threats-list/pagination.jsx b/projects/plugins/protect/src/js/components/threats-list/pagination.jsx
index 97128a2f4ab9f..aba26e9242bfc 100644
--- 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 (
-
-
- { getPageNumbers().map( ( pageNumber, index ) =>
- typeof pageNumber === 'number' ? (
-
- ) : (
-
- { pageNumber }
-
- )
- ) }
-
-
- );
+ if ( totalPages > 1 ) {
+ return (
+
+
+ { getPageNumbers().map( ( pageNumber, index ) =>
+ typeof pageNumber === 'number' ? (
+
+ ) : (
+
+ { pageNumber }
+
+ )
+ ) }
+
+
+ );
+ }
};
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
index ee961d32e7a31..bc1ea8297e573 100644
--- 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
index a82cc01aa3a4e..b46dd4388e20c 100644
--- 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;