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;