58

Author: kossiecoder

src/components/BlogList.js

@@ -13,7 +13,7 @@ const BlogList = ({ isAdmin }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [numberOfPosts, setNumberOfPosts] = useState(0);
   const [numberOfPages, setNumberOfPages] = useState(0);
-  const limit = 5;
+  const limit = 1;
 
   useEffect(() => {
     setNumberOfPages(Math.ceil(numberOfPosts/limit));

src/components/Pagination.js

@@ -1,15 +1,23 @@
 import propTypes from "prop-types";
 
-const Pagination = ({ currentPage, numberOfPages, onClick }) => {
+const Pagination = ({ currentPage, numberOfPages, onClick, limit }) => {
+  const currentSet = Math.ceil(currentPage/limit);
+  const lastSet = Math.ceil(numberOfPages/limit);
+  const startPage = limit * (currentSet - 1) + 1; 
+  const numberOfPageForSet = currentSet === lastSet ? numberOfPages%limit : limit
   return (
     <nav aria-label="Page navigation example">
       <ul className="pagination justify-content-center">
-        <li className="page-item disabled">
-          <a className="page-link" href="#">
+        {currentSet !== 1 && <li className="page-item">
+          <div 
+            className="page-link cursor-pointer" href="#"
+            onClick={() => onClick(startPage - limit)}
+          >
             Previous
-          </a>
-        </li>
-        {Array(numberOfPages).fill(1).map((value, index) => value + index)
+          </div>
+        </li>}
+        {Array(numberOfPageForSet).fill(startPage)
+          .map((value, index) => value + index)
           .map((pageNumber) => {
             return <li 
               key={pageNumber}
@@ -25,11 +33,14 @@ const Pagination = ({ currentPage, numberOfPages, onClick }) => {
               </div>
             </li>
           })}
-        <li className="page-item">
-          <a className="page-link" href="#">
+        {currentSet !== lastSet && <li className="page-item">
+          <div 
+            className="page-link cursor-pointer" href="#"
+            onClick={() => onClick(startPage + limit)}
+          >
             Next
-          </a>
-        </li>
+          </div>
+        </li>}
       </ul>
     </nav>
   )
@@ -38,11 +49,13 @@ const Pagination = ({ currentPage, numberOfPages, onClick }) => {
 Pagination.propTypes = {
   currentPage: propTypes.number,
   numberOfPages: propTypes.number.isRequired,
-  onClick: propTypes.func.isRequired
+  onClick: propTypes.func.isRequired,
+  limit: propTypes.number
 }
 
 Pagination.defaultProps = {
-  currentPage: 1
+  currentPage: 1,
+  limit: 5
 }
 
 export default Pagination;