From d068099f9396eb3f002f22f9f89dfd5b781b4ed7 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Sat, 2 Jul 2022 10:29:36 +0430 Subject: [PATCH] =?UTF-8?q?=D8=A7=D8=AF=D8=A7=D9=85=D9=87=20=DA=A9=D8=A7?= =?UTF-8?q?=D8=B1=20=D8=A8=D8=B1=20=D8=B1=D9=88=DB=8C=20=D8=A7=D8=B6=D8=A7?= =?UTF-8?q?=D9=81=D9=87=20=DA=A9=D8=B1=D8=AF=D9=86=20=D8=B5=D9=81=D8=AD?= =?UTF-8?q?=D9=87=20=D8=A8=D9=86=D8=AF=DB=8C=20=D8=AF=D8=B1=20=D8=B5=D9=81?= =?UTF-8?q?=D8=AD=D9=87=20=D9=85=D8=AD=D8=B5=D9=88=D9=84=D8=A7=D8=AA=20|55?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Products/layouts/Desktop/Main.js | 18 ++++++++++-- .../Products/layouts/Desktop/Pagination.js | 28 +++++++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 src/views/Products/layouts/Desktop/Pagination.js diff --git a/src/views/Products/layouts/Desktop/Main.js b/src/views/Products/layouts/Desktop/Main.js index e41bb9a..45ba2ad 100644 --- a/src/views/Products/layouts/Desktop/Main.js +++ b/src/views/Products/layouts/Desktop/Main.js @@ -13,6 +13,7 @@ import moment from "jalali-moment"; import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg"; import Posts from "./Posts"; +import Pagination from "./Pagination"; export const Main = ({ books, @@ -131,7 +132,7 @@ export const Main = ({ const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(false); const [currentPage, setCurrentPage] = useState(1); - const [postsPerPage, setPostsPerPage] = useState(10); + const [postsPerPage] = useState(10); useEffect(() => { const fetchPosts = async () => { @@ -144,6 +145,14 @@ export const Main = ({ 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 (

My Blog

- + +
diff --git a/src/views/Products/layouts/Desktop/Pagination.js b/src/views/Products/layouts/Desktop/Pagination.js new file mode 100644 index 0000000..9d7495c --- /dev/null +++ b/src/views/Products/layouts/Desktop/Pagination.js @@ -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 ( +
+
    + {pageNumbers.map((number) => ( +
  • +

    paginate(number)} className=""> + {number} +

    +
  • + ))} +
+
+ ); +}; + +export default Pagination;