robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination count fix on change page size

Browse Source
This commit is contained in:
robbond
2022-02-10 17:06:51 +00:00
parent 4ae5f93e48
commit d59b59c016
8 changed files with 149 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/search/pagination.js
+48 -10
View File
@@ -1,6 +1,9 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useState } from "react";
import { connect } from "react-redux";
import { setCurrentPage } from "../../store/currentView/action";
const PaginationControl = (props) => {
const {
@@ -12,6 +15,7 @@ const PaginationControl = (props) => {
currentPage,
spinnerState,
getSearchPageResults,
setCurrentPage,
} = props;
let { t } = useTranslation();
@@ -32,13 +36,14 @@ const PaginationControl = (props) => {
const paginationNumbers = (currentPage, pageCount) => {
let delta;
if (pageCount <= showNoOfRecords) {
if (pageCount <= 7) {
// delta === 7: [1 2 3 4 5 6 7]
delta = 4;
delta = 7;
} else {
// delta === 2: [1 ... 4 5 6 ... 10]
// delta === 4: [1 2 3 4 5 ... 10]
delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
//delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
delta = currentPage > 4 && currentPage < pageCount - 3 ? 2 : 4;
}
const range = {
@@ -76,6 +81,7 @@ const PaginationControl = (props) => {
const paginationArray = paginationNumbers(currentPage, pagesCount);
console.log(props);
return (
<>
{" "}
@@ -83,13 +89,18 @@ const PaginationControl = (props) => {
<div className="govuk-!-margin-bottom-7 ">
<div className="govuk-grid-row paginationWrapper">
<div className="govuk-grid-column-one-quarter paginationPrevious">
{currentPage != 1 ? (
{props.currentView.currentPage != 1 ? (
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => {
spinnerState(),
setCurrentPage(
props.currentView.currentPage -
1
),
getSearchPageResults(
currentPage - 1,
props.currentView.currentPage -
1,
orderBy,
fieldSort
);
@@ -105,7 +116,7 @@ const PaginationControl = (props) => {
</div>
<div className="govuk-grid-column-one-half paginationContainer">
{paginationArray.map((e, i) =>
currentPage == i + 1 ? (
props.currentView.currentPage == e ? (
<span
key={i}
className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
@@ -125,8 +136,9 @@ const PaginationControl = (props) => {
key={i}
onClick={() => {
spinnerState(),
setCurrentPage(e),
getSearchPageResults(
i + 1,
e,
orderBy,
fieldSort
);
@@ -138,13 +150,25 @@ const PaginationControl = (props) => {
)}
</div>
<div className="govuk-grid-column-one-quarter paginationNext">
{currentPage != pagesCount ? (
{/* {"current page state: " +
props.currentView.currentPage}{" "}
<br />
{"current page: " + currentPage} <br />
{"total pages: " + pagesCount}
<br />
{/* {thisCurrentPage != currentPage &&
setThisCurrentPage(currentPage)} */}{" "}
{props.currentView.currentPage < pagesCount ? (
<span
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => {
spinnerState(),
setCurrentPage(
props.currenView.currentPage + 1
),
getSearchPageResults(
currentPage + 1,
props.currentView.currentPage +
1,
orderBy,
fieldSort
);
@@ -170,4 +194,18 @@ const PaginationControl = (props) => {
);
};
export default PaginationControl;
const mapStateToProps = (state) => {
return {
currentView: state.currentView,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentPage: (currentPage) => {
dispatch(setCurrentPage(currentPage));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(PaginationControl);