working on pagination dynmaic values change

prasadhonrao · Nov 6, 2024 · 51ce254 · 51ce254
1 parent 890c155
commit 51ce254
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 22 deletions.
diff --git a/src/webapp/src/components/Pagination.jsx b/src/webapp/src/components/Pagination.jsx
@@ -2,31 +2,27 @@ import React, { useEffect, useState } from 'react';
 import { Row, Col, Form, Button } from 'react-bootstrap';
 import ReactPaginate from 'react-paginate';
 
-const Pagination = (total) => {
+function Pagination({ totalRec, itemsPerPage, currentPage, paginationData, onPageChange }) {
 
-  const [pageNo, setPageNo] = useState(1);
-  const [totalRec, setTotalrec] = useState(total.TotalCount);
-
-  const pagginationHandler = (page) => {
-    const currentPage = page.selected + 1;
-    setPageNo(currentPage);
-  };
+  const [pageCount, setPageCount] = useState(Math.ceil(totalRec / itemsPerPage));
 
   useEffect(() => {
-    setTotalrec(total.TotalCount);
-  }, [total.TotalCount])
+    setPageCount(Math.ceil(totalRec / itemsPerPage)); // Recalculate on totalRec change
+  }, [totalRec, itemsPerPage]);
+
 
   return (
     <div className=''>
       <Row>
         <Col md={4}>
           <ReactPaginate
             // nextLabel={<FontAwesomeIcon icon="chevron-right" size="sm" className="m-auto" />}
-            onPageChange={pagginationHandler}
+            pageCount={pageCount}
+            onPageChange={onPageChange}
+            activeClassName="active"
             pageRangeDisplayed={1}
             marginPagesDisplayed={1}
-            pageCount={totalRec}
-            forcePage={1}
+            forcePage={currentPage - 1}
             // previousLabel={<FontAwesomeIcon icon="chevron-left" size="sm" className="m-auto" />}
             pageClassName="page-item"
             pageLinkClassName="page-link"
@@ -38,7 +34,7 @@ const Pagination = (total) => {
             breakClassName="page-item"
             breakLinkClassName="page-link"
             containerClassName="pagination justify-content-between d-flex "
-            activeClassName="active"
+            // activeClassName="active"
             renderOnZeroPageCount={null}
           />
         </Col>

diff --git a/src/webapp/src/pages/bootcamps/BootcampsPage.jsx b/src/webapp/src/pages/bootcamps/BootcampsPage.jsx
@@ -8,18 +8,28 @@ const BootcampsPage = () => {
   const [bootcamps, setBootcamps] = useState([]);
   const [fetchError, setFetchError] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [Data, setData] = useState();
+  const [totalRec, setTotalRec] = useState();
+  const [itemsPerPage, setItemsPerPage] = useState([5]);  // Default items per page
+  const [currentPage, setCurrentPage] = useState([1]);
+  const [pagination, setPagination] = useState([]);
+
 
 
   // Load bootcamps from API
   useEffect(() => {
     const fetchBootcamps = async () => {
       try {
         const fields = ['photo', 'name', 'averageRating', 'location', 'careers', 'id'];
-        const res = await bootcampService.getBootcamps(fields);
+        var page = currentPage;
+        var limit = itemsPerPage;
+        console.log('page',page);
+        console.log('limit',limit);
+        const res = await bootcampService.getBootcamps(fields, page, limit);
+        console.log('res',res);
         setBootcamps(res.data);
-        console.log('res',res.total)
-        setData(res.total)
+        setPagination(res.pagination);
+        setTotalRec(res.total)
+        setItemsPerPage(res.count)
         setFetchError(null);
       } catch (error) {
         setFetchError(error.message);
@@ -28,8 +38,18 @@ const BootcampsPage = () => {
       }
     };
     fetchBootcamps();
-  }, []);
+  }, [currentPage]);
+
+  const handlePaginationChange = (selectedPage) => {
+    console.log('selectedPage',selectedPage);
+    const newPage = selectedPage.selected + 1; // Convert index to actual page number
+    console.log('newPage',newPage);
+    setCurrentPage([newPage])
+    setItemsPerPage([5])
+  };
+
 
+  console.log('totalRec bootcamp',totalRec);
 
   return (
     <section className="browse my-5">
@@ -49,7 +69,7 @@ const BootcampsPage = () => {
             ))}
           </div>
         )}
-        <Pagination TotalCount={Data}  />
+        <Pagination totalRec={totalRec} itemsPerPage={itemsPerPage} currentPage={currentPage} paginationData={pagination} onPageChange={handlePaginationChange} />
       </div>
     </section>
   );

diff --git a/src/webapp/src/services/bootcampService.js b/src/webapp/src/services/bootcampService.js
@@ -2,9 +2,11 @@ import { getAuthHeaders } from '../helpers/auth';
 import { fetchApiEndPoint } from '../utils/configService';
 
 const bootcampService = {
-  getBootcamps: async (fields) => {
+  getBootcamps: async (fields, page, limit) => {
     const query = fields ? `?select=${fields.join(',')}` : '';
-    const uri = await fetchApiEndPoint(`/bootcamps${query}`);
+    const Page = page ? `page=${page.join(',')}` : '';
+    const Limit = limit ? `limit=${limit.join(',')}` : '';
+    const uri = await fetchApiEndPoint(`/bootcamps${query}&${Page}&${Limit}`);
     const res = await fetch(uri);
     if (!res.ok) {
       console.log(`Failed to fetch bootcamps: ${res.status}`);