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),
};