pedwfrontend/components/search/pagination.js

import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { setCurrentPage } from "../../store/currentView/action";

const PaginationControl = (props) => {
    const {
        showNoOfRecords,
        orderBy,
        fieldSort,
        searchString,
        searchResultsObj,
        currentPage,
        spinnerState,
        getSearchPageResults,
        setCurrentPage
    } = props;
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    const pagesCount = Math.ceil(
        searchResultsObj["@odata.count"] / showNoOfRecords
    );

    const getRange = (start, end) => {
        //console.log(start, end);
        return Array(end - start + 1)
            .fill()
            .map((v, i) => i + start);
    };

    const paginationNumbers = (currentPage, pageCount) => {
        //console.log(currentPage);
        let delta;

        if (pageCount <= 7) {
            // delta === 7: [1 2 3 4 5 6 7]
            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;
        }

        const range = {
            start: Math.round(currentPage - delta / 2),
            end: Math.round(currentPage + delta / 2)
        };

        if (range.start - 1 === 1 || range.end + 1 === pageCount) {
            range.start += 1;
            range.end += 1;
        }

        let pages =
            currentPage > delta
                ? getRange(
                      Math.min(range.start, pageCount - delta),
                      Math.min(range.end, pageCount)
                  )
                : getRange(1, Math.min(pageCount, delta + 1));

        const withDots = (value, pair) =>
            pages.length + 1 !== pageCount ? pair : [value];

        if (pages[0] !== 1) {
            pages = withDots(1, [1, "..."]).concat(pages);
        }

        if (pages[pages.length - 1] < pageCount) {
            pages = pages.concat(withDots(pageCount, ["...", pageCount]));
        }

        //console.log(pages);
        return pages;
    };

    const paginationArray = paginationNumbers(
        props.currentView.currentPage,
        pagesCount
    );
    return (
        <>
            {pagesCount > 1 && (
                <div className="govuk-!-margin-bottom-7 ">
                    <div className="govuk-grid-row paginationWrapper">
                        <div className="govuk-grid-column-one-quarter paginationPrevious">
                            {props.currentView.currentPage != 1 ? (
                                <button
                                    className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                    onClick={() => {
                                        (spinnerState(),
                                            setCurrentPage(
                                                props.currentView.currentPage -
                                                    1
                                            ),
                                            getSearchPageResults(
                                                props.currentView.currentPage -
                                                    1,
                                                orderBy,
                                                fieldSort
                                            ));
                                    }}
                                >
                                    {t("common:previous-link-button")}
                                </button>
                            ) : (
                                <span className="govuk-body leftTextButton govuk-!-font-weight-bold">
                                    {t("common:previous-link-button")}
                                </span>
                            )}
                        </div>
                        <div className="govuk-grid-column-one-half paginationContainer">
                            {paginationArray.map((e, i) =>
                                props.currentView.currentPage == e ? (
                                    <span
                                        key={i}
                                        className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
                                    >
                                        {e}
                                    </span>
                                ) : e == "..." ? (
                                    <span
                                        key={i}
                                        className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
                                    >
                                        {e}
                                    </span>
                                ) : (
                                    <button
                                        className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
                                        key={i}
                                        onClick={() => {
                                            (spinnerState(),
                                                setCurrentPage(e),
                                                getSearchPageResults(
                                                    e,
                                                    orderBy,
                                                    fieldSort
                                                ));
                                        }}
                                    >
                                        {e}
                                    </button>
                                )
                            )}
                        </div>
                        <div className="govuk-grid-column-one-quarter paginationNext">
                            {props.currentView.currentPage < pagesCount ? (
                                <button
                                    className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                    onClick={() => {
                                        (spinnerState(),
                                            setCurrentPage(
                                                props.currentView.currentPage +
                                                    1
                                            ),
                                            getSearchPageResults(
                                                props.currentView.currentPage +
                                                    1,
                                                orderBy,
                                                fieldSort
                                            ));
                                    }}
                                >
                                    {t("common:next-link-button")}
                                </button>
                            ) : (
                                <span className="govuk-body rightTextButton govuk-!-font-weight-bold">
                                    {" "}
                                    {t("common:next-link-button")}
                                </span>
                            )}
                        </div>
                    </div>
                    <div className="govuk-body-s mobilePageCount">
                        {t("common:pages-label")}{" "}
                        {props.currentView.currentPage} {t("common:of-label")}{" "}
                        {pagesCount}
                    </div>
                </div>
            )}
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        currentView: state.currentView
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentPage: (currentPage) => {
            dispatch(setCurrentPage(currentPage));
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(PaginationControl);