diff --git a/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx b/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx index f0a65982a..59542a93a 100644 --- a/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx +++ b/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx @@ -32,9 +32,26 @@ function StudyListContainer({ history, data: studies }) { Object.assign({}, defaultFilterValues, queryFilterValues) ); const debouncedFilterValues = useDebounce(filterValues, 500); + const { resultsPerPage, pageNumber } = filterValues; // ~ Rows & Studies const [expandedRows, setExpandedRows] = useState([]); const numOfStudies = studies.length; + const totalPages = Math.floor(numOfStudies / resultsPerPage); + + const onPageNumberChange = newPageNumber => { + if (newPageNumber > totalPages) { + return; + } + setFilterValues({ ...filterValues, pageNumber: newPageNumber }); + }; + + const onResultsPerPageChange = newResultsPerPage => { + setFilterValues({ + ...filterValues, + pageNumber: 1, + resultsPerPage: Number(newResultsPerPage), + }); + }; // Set body style useEffect(()=> { @@ -284,22 +301,6 @@ function StudyListContainer({ history, data: studies }) { }; }); - const [currentPage, setCurrentPage] = useState(1); - const [perPage, setPerPage] = useState(25); - const totalPages = Math.floor(numOfStudies / perPage); - - const onChangePage = page => { - if (page > totalPages) { - return; - } - setCurrentPage(page); - }; - - const onChangePerPage = perPage => { - setPerPage(perPage); - setCurrentPage(1); - }; - const hasStudies = numOfStudies > 0; return ( @@ -343,17 +344,17 @@ function StudyListContainer({ history, data: studies }) { <> ) : ( @@ -388,7 +389,7 @@ const defaultFilterValues = { accession: '', sortBy: '', sortDirection: 'none', - page: 0, + pageNumber: 1, resultsPerPage: 25, }; @@ -407,7 +408,7 @@ function _getQueryFilterValues(query) { accession: query.get('accession'), sortBy: query.get('soryBy'), sortDirection: query.get('sortDirection'), - page: _tryParseInt(query.get('page'), undefined), + pageNumber: _tryParseInt(query.get('pageNumber'), undefined), resultsPerPage: _tryParseInt(query.get('resultsPerPage'), undefined), };