working on pagination -> added react pagination library

prasadhonrao · Oct 24, 2024 · 7b3e7a3 · 7b3e7a3
1 parent d122569
commit 7b3e7a3
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 31 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -11,6 +11,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-loader-spinner": "^6.1.6",
+    "react-paginate": "^8.2.0",
     "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.6",

diff --git a/ui/src/components/Pagination.jsx b/ui/src/components/Pagination.jsx
@@ -1,35 +1,50 @@
-import React from 'react';
-const Pagination = () => {
+import React, { useEffect, useState } from 'react';
+import { Row, Col, Form, Button } from 'react-bootstrap';
+import ReactPaginate from 'react-paginate';
+
+const Pagination = (total) => {
+
+  const [pageNo, setPageNo] = useState(1);
+  const [totalRec, setTotalrec] = useState(total.TotalCount);
+
+  const pagginationHandler = (page) => {
+    const currentPage = page.selected + 1;
+    setPageNo(currentPage);
+  };
+
+  useEffect(() => {
+    setTotalrec(total.TotalCount);
+  }, [total.TotalCount])
+
   return (
-    <nav aria-label="Page navigation example">
-      <ul className="pagination">
-        <li className="page-item">
-          <a className="page-link" href="/">
-            Previous
-          </a>
-        </li>
-        <li className="page-item">
-          <a className="page-link" href="/">
-            1
-          </a>
-        </li>
-        <li className="page-item">
-          <a className="page-link" href="/">
-            2
-          </a>
-        </li>
-        <li className="page-item">
-          <a className="page-link" href="/">
-            3
-          </a>
-        </li>
-        <li className="page-item">
-          <a className="page-link" href="/">
-            Next
-          </a>
-        </li>
-      </ul>
-    </nav>
+    <div className=''>
+      <Row>
+        <Col md={4}>
+          <ReactPaginate
+            // nextLabel={<FontAwesomeIcon icon="chevron-right" size="sm" className="m-auto" />}
+            onPageChange={pagginationHandler}
+            pageRangeDisplayed={1}
+            marginPagesDisplayed={1}
+            pageCount={totalRec}
+            forcePage={1}
+            // previousLabel={<FontAwesomeIcon icon="chevron-left" size="sm" className="m-auto" />}
+            pageClassName="page-item"
+            pageLinkClassName="page-link"
+            previousClassName="page-item"
+            previousLinkClassName="page-link"
+            nextClassName="page-item"
+            nextLinkClassName="page-link"
+            breakLabel="..."
+            breakClassName="page-item"
+            breakLinkClassName="page-link"
+            containerClassName="pagination justify-content-between d-flex "
+            activeClassName="active"
+            renderOnZeroPageCount={null}
+          />
+        </Col>
+      </Row>
+
+    </div>
   );
 };
 

diff --git a/ui/src/pages/bootcamps/BootcampsPage.jsx b/ui/src/pages/bootcamps/BootcampsPage.jsx
@@ -2,11 +2,14 @@ import React, { useState, useEffect } from 'react';
 import { Oval } from 'react-loader-spinner';
 import { Bootcamp } from '../../components';
 import bootcampService from '../../services/bootcampService';
+import Pagination from '../../components/Pagination';
 
 const BootcampsPage = () => {
   const [bootcamps, setBootcamps] = useState([]);
   const [fetchError, setFetchError] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [Data, setData] = useState();
+
 
   // Load bootcamps from API
   useEffect(() => {
@@ -15,6 +18,8 @@ const BootcampsPage = () => {
         const fields = ['photo', 'name', 'averageRating', 'location', 'careers', 'id'];
         const res = await bootcampService.getBootcamps(fields);
         setBootcamps(res.data);
+        console.log('res',res.total)
+        setData(res.total)
         setFetchError(null);
       } catch (error) {
         setFetchError(error.message);
@@ -25,6 +30,7 @@ const BootcampsPage = () => {
     fetchBootcamps();
   }, []);
 
+
   return (
     <section className="browse my-5">
       <div className="container">
@@ -43,6 +49,7 @@ const BootcampsPage = () => {
             ))}
           </div>
         )}
+        <Pagination TotalCount={Data}  />
       </div>
     </section>
   );