ادامه کار بر روی اضافه کردن صفحه بندی در صفحه محصولات |55

temp
mahdi andalib 3 years ago
parent fac4b29c79
commit d068099f93
  1. 18
      src/views/Products/layouts/Desktop/Main.js
  2. 28
      src/views/Products/layouts/Desktop/Pagination.js

@ -13,6 +13,7 @@ import moment from "jalali-moment";
import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg"; import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
import Posts from "./Posts"; import Posts from "./Posts";
import Pagination from "./Pagination";
export const Main = ({ export const Main = ({
books, books,
@ -131,7 +132,7 @@ export const Main = ({
const [posts, setPosts] = useState([]); const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(10); const [postsPerPage] = useState(10);
useEffect(() => { useEffect(() => {
const fetchPosts = async () => { const fetchPosts = async () => {
@ -144,6 +145,14 @@ export const Main = ({
fetchPosts(); fetchPosts();
}, []); }, []);
// get current post
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
// change page
const paginate = (pageNumber) => setCurrentPage(pageNumber);
return ( return (
<div <div
className="flex flex-col w-3/4 pb-20 min-h-screen" className="flex flex-col w-3/4 pb-20 min-h-screen"
@ -151,7 +160,12 @@ export const Main = ({
> >
<div className="bg-red-400 "> <div className="bg-red-400 ">
<h1 className="mb-5">My Blog</h1> <h1 className="mb-5">My Blog</h1>
<Posts posts={posts} loading={loading} /> <Posts posts={currentPosts} loading={loading} />
<Pagination
postsPerPage={postsPerPage}
totalPosts={posts.length}
paginate={paginate}
/>
</div> </div>
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52"> <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
<div className="flex text-sm items-center mr-2 ml-4"> <div className="flex text-sm items-center mr-2 ml-4">

@ -0,0 +1,28 @@
import React from "react";
const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
pageNumbers.push(i);
}
return (
<div>
<ul className="flex gap-x-2 items-center mt-4">
{pageNumbers.map((number) => (
<li
key={number}
className="border border-blue-400 bg-blue-200 rounded-sm px-2 py-1"
>
<p onClick={() => paginate(number)} className="">
{number}
</p>
</li>
))}
</ul>
</div>
);
};
export default Pagination;
Loading…
Cancel
Save