121 lines
3.6 KiB
JavaScript
121 lines
3.6 KiB
JavaScript
"use client";
|
|
import AppContext from "@ctx/AppContext";
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import { useContext, useEffect, useState } from "react";
|
|
|
|
const PaginationBlogs = ({ totalPage }) => {
|
|
const CTX = useContext(AppContext);
|
|
const searchParams = useSearchParams();
|
|
const pager = totalPage;
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const [currentPageIndex, setCurrentPageIndex] = useState(
|
|
Number(searchParams.get("page")) ? Number(searchParams.get("page")) : 0
|
|
);
|
|
useEffect(() => {
|
|
setCurrentPageIndex(
|
|
Number(searchParams.get("page")) ? Number(searchParams.get("page")) : 0
|
|
);
|
|
}, [searchParams]);
|
|
const renderPaginationButtons = () => {
|
|
const buttons = [];
|
|
const totalPages = pager?.totalPage;
|
|
const maxButtonsToShow = 7; // Maximum buttons to show
|
|
|
|
// If total pages are greater than maxButtonsToShow
|
|
if (totalPages > maxButtonsToShow) {
|
|
// Show buttons for the first page
|
|
buttons.push(renderPageButton(0));
|
|
|
|
// If current page is not too close to the start, show ellipsis
|
|
if (currentPageIndex > 2) {
|
|
buttons.push(renderEllipsis());
|
|
}
|
|
|
|
// Calculate the start index for buttons
|
|
const start = Math.max(1, currentPageIndex - 2);
|
|
|
|
// Calculate the end index for buttons
|
|
const end = Math.min(currentPageIndex + 3, totalPages - 1);
|
|
|
|
// Show buttons for pages within range
|
|
for (let i = start; i <= end; i++) {
|
|
buttons.push(renderPageButton(i));
|
|
}
|
|
|
|
// If current page is not too close to the end, show ellipsis
|
|
if (currentPageIndex < totalPages - 4) {
|
|
buttons.push(renderEllipsis());
|
|
}
|
|
|
|
// Show button for the last page
|
|
buttons.push(renderPageButton(totalPages - 1));
|
|
} else {
|
|
// Show buttons for all pages
|
|
for (let i = 0; i < totalPages; i++) {
|
|
buttons.push(renderPageButton(i));
|
|
}
|
|
}
|
|
|
|
return buttons;
|
|
};
|
|
|
|
const renderPageButton = (pageIndex) => (
|
|
<div
|
|
key={pageIndex}
|
|
className={`w-[25px] h-[25px] rounded-full tr03 bg-${
|
|
currentPageIndex === pageIndex ? "secondary-500" : "primary-200"
|
|
} mx-1 cursor-pointer`}
|
|
onClick={() => handlePageClick(pageIndex)}
|
|
>
|
|
<p className="mb-0 text-center pt-[2px] text-white">
|
|
<PersianNumber number={pageIndex + 1} style=" !text-[14px] " />
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
const renderEllipsis = () => (
|
|
<div key="ellipsis" className="mx-1">
|
|
...
|
|
</div>
|
|
);
|
|
|
|
const handlePageClick = (pageIndex) => {
|
|
setCurrentPageIndex(pageIndex);
|
|
//
|
|
// CTX.fetchProducts(
|
|
// pageIndex,
|
|
// props.id[0] != 0 ? props.id[0] : "",
|
|
// props.selectedBrands,
|
|
// props.isChecked,
|
|
// props.rangePrice,
|
|
// props.rangePrice,
|
|
// props.sortBy != -1 ? props.sortBy : "",
|
|
// props.isRangePrice,
|
|
// true //pagination say or not
|
|
// );
|
|
const nextPage = pageIndex;
|
|
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
params.set("page", nextPage);
|
|
router.push(`${pathname}?${params}`);
|
|
// CTX.setStopProducts(true);
|
|
// Your fetchProducts function call here
|
|
};
|
|
|
|
return (
|
|
<div className="flex justify-center rtl mb-10">
|
|
<div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
|
|
{/* Previous page button */}
|
|
</div>
|
|
{renderPaginationButtons()}
|
|
<div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
|
|
{/* Next page button */}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PaginationBlogs;
|