pagination integrate

sujata
Commit f5aa0d6a authored 2024-11-26 10:40:31 +0530 by sujata
Showing 6 changed files with 187 additions and 55 deletions
package-lock.json
package.json
pages/budgetpanorama/index.js
pages/corpedia/index.js
pages/taxwire/index.js
styles/styles.css
--- a/package-lock.json
View file @f5aa0d6
+++ b/package-lock.json
View file @f5aa0d6
@@ -22,6 +22,7 @@
        "react-bootstrap": "^2.10.4",
        "react-dom": "^18.3.1",
        "react-hook-form": "^7.53.0",
+        "react-js-pagination": "^3.0.3",
        "react-paginate": "^8.2.0",
        "react-redux": "^9.1.2",
        "react-tabs": "^6.0.2",
@@ -856,6 +857,17 @@
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
+    "node_modules/block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha512-OorbnJVPII4DuUKbjARAe8u8EfqOmkEEaSFIyoQ7OjTHn6kafxWl0wLgoZ2rXaYd7MyLcDaU4TmhfxtwgcccMQ==",
+      "dependencies": {
+        "inherits": "~2.0.0"
+      },
+      "engines": {
+        "node": "0.4 || >=0.5.8"
+      }
+    },
    "node_modules/bootstrap": {
      "version": "5.3.3",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
@@ -2015,6 +2027,33 @@
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
    },
+    "node_modules/fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "deprecated": "This package is no longer supported.",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/fstream/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
    "node_modules/function-bind": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -2904,6 +2943,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3158,6 +3208,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/paginator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/paginator/-/paginator-1.0.0.tgz",
+      "integrity": "sha512-j2Y5AtF/NrXOEU9VVOQBGHnj81NveRQ/cDzySywqsWrAj+cxivMpMCkYJOds3ulQiDU4rQBWc0WoyyXMXOmuMA=="
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3435,6 +3490,32 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/react-js-pagination": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/react-js-pagination/-/react-js-pagination-3.0.3.tgz",
+      "integrity": "sha512-podyA6Rd0uxc8uQakXWXxnonoOPI6NnFOROXfc6qPKNYm44s+Bgpn0JkyflcfbHf/GFKahnL8JN8rxBHZiBskg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "fstream": "1.0.12",
+        "paginator": "^1.0.0",
+        "prop-types": "15.x.x - 16.x.x",
+        "react": "15.x.x - 16.x.x",
+        "tar": "2.2.2"
+      }
+    },
+    "node_modules/react-js-pagination/node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/react-lifecycles-compat": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -4016,6 +4097,17 @@
        "node": ">=6"
      }
    },
+    "node_modules/tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "deprecated": "This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.",
+      "dependencies": {
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      }
+    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

--- a/package.json
View file @f5aa0d6
+++ b/package.json
View file @f5aa0d6
@@ -23,6 +23,7 @@
    "react-bootstrap": "^2.10.4",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.0",
+    "react-js-pagination": "^3.0.3",
    "react-paginate": "^8.2.0",
    "react-redux": "^9.1.2",
    "react-tabs": "^6.0.2",

--- a/pages/budgetpanorama/index.js
View file @f5aa0d6
+++ b/pages/budgetpanorama/index.js
View file @f5aa0d6
@@ -14,7 +14,7 @@ import qs from "qs";
 import axios from "axios";
 import ReactPaginate from "react-paginate";
 import Seo from "@/components/reuseables/Seo/Seo";
+import Pagination from "react-js-pagination";
 // const services = [
 //   {
@@ -89,8 +89,7 @@ import Seo from "@/components/reuseables/Seo/Seo";
 //   },
 // ];
+const BudgetPanorama = ({ BudgetData }) => {
-const BudgetPanorama = ({BudgetData}) => {
  const banners = [
    {
      imageSrc: cleanImage(BudgetData?.Banner?.Image?.url),
@@ -106,25 +105,21 @@ const BudgetPanorama = ({BudgetData}) => {
    dispatch(fetchBudgetList());
  }, []);
-  const budgetlist = useSelector((state) => state.budgetlist.data)
+  const budgetlist = useSelector((state) => state.budgetlist.data);
  // Pagination setup
-    const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1); // Start at page 1
-    const postsPerPage = 6; // Define the number of items per page
+  const postsPerPage = 6; // Number of items per page
-    const pageCount = budgetlist ? Math.ceil(budgetlist.length / postsPerPage) : 0;
+  const offset = (currentPage - 1) * postsPerPage; // Calculate offset
-    // Get current posts for pagination
-    const offset = currentPage * postsPerPage;
  const currentItems = budgetlist?.slice(offset, offset + postsPerPage);
-    const handlePageClick = ({ selected }) => {
+  // Handle page click
-      setCurrentPage(selected);
+  const handlePageClick = (pageNumber) => {
+    setCurrentPage(pageNumber); // Update current page
  };
  const seo = BudgetData?.seo;
-     console.log(seo)
+  console.log(seo);
  return (
    <>
      <Seo seo={seo} />
@@ -133,7 +128,6 @@ const BudgetPanorama = ({BudgetData}) => {
        <Container>
          <div className="section-title">
            <Heading heading={BudgetData?.Heading?.Title} el="h2" />
          </div>
          <p className="text-center mb-3 mb-lg-5">
            {BudgetData?.Heading?.Description}
@@ -152,7 +146,11 @@ const BudgetPanorama = ({BudgetData}) => {
                      <div className="d-flex align-items-center">
                        <Image
                          src={cleanImage(service?.Image?.url)}
-                        alt={service?.alternativeText ? service?.alternativeText : "image"}
+                          alt={
+                            service?.alternativeText
+                              ? service?.alternativeText
+                              : "image"
+                          }
                          width={40}
                          height={40}
                          className="img-fluid me-3"
@@ -193,9 +191,7 @@ const BudgetPanorama = ({BudgetData}) => {
                              }`
                        }
                        target={
-                      service?.slug?.endsWith(".pdf")
+                          service?.slug?.endsWith(".pdf") ? "_blank" : "_self"
-                        ? "_blank"
-                        : "_self"
                        }
                        rel={
                          service?.slug?.endsWith(".pdf")
@@ -203,7 +199,6 @@ const BudgetPanorama = ({BudgetData}) => {
                            : undefined
                        }
                        className="default-btn"
                      >
                        Read More
                        <i className="ri-arrow-right-line"></i>
@@ -215,7 +210,7 @@ const BudgetPanorama = ({BudgetData}) => {
          </Row>
          {/* Pagination */}
-           <ReactPaginate
+          {/* <ReactPaginate
            previousLabel={"<<"}
            nextLabel={">>"}
            breakLabel={"..."}
@@ -225,7 +220,23 @@ const BudgetPanorama = ({BudgetData}) => {
            onPageChange={handlePageClick}
            containerClassName={"pagination custom-pagination"}
            activeClassName={"active"}
+          /> */}
+          {budgetlist?.length > postsPerPage && (
+            <div className="custom-pagination">
+              <Pagination
+                activePage={currentPage}
+                itemsCountPerPage={postsPerPage}
+                totalItemsCount={budgetlist?.length}
+                onChange={handlePageClick}
+                hideNavigation={true}
+                itemClass="page-item"
+                linkClass="page-numbers"
+                linkClassFirst="prev"
+                linkClassLast="next"
              />
+            </div>
+          )}
        </Container>
      </div>
    </>
@@ -234,8 +245,6 @@ const BudgetPanorama = ({BudgetData}) => {
 export default BudgetPanorama;
 export async function getServerSideProps() {
  try {
    const query1 = {
@@ -265,4 +274,3 @@ export async function getServerSideProps() {
    console.log("Error", error);
  }
 }
--- a/pages/corpedia/index.js
View file @f5aa0d6
+++ b/pages/corpedia/index.js
View file @f5aa0d6
@@ -13,6 +13,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchCorpediaList } from "@/redux/slices/corpediaslice";
 import ReactPaginate from "react-paginate";
 import Seo from "@/components/reuseables/Seo/Seo";
+import Pagination from "react-js-pagination";
 // const services = [
 //   {
@@ -121,23 +122,19 @@ const CorpediaPage = ({ CorpediaData }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchCorpediaList());
-  }, []);
+  }, [dispatch]);
  const corpedialist = useSelector((state) => state.corpedialist.data);
  // Pagination setup
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1); // Start at page 1
  const postsPerPage = 6; // Number of items per page
-  const pageCount = corpedialist
+  const offset = (currentPage - 1) * postsPerPage; // Calculate offset
-    ? Math.ceil(corpedialist.length / postsPerPage)
-    : 0;
-// console.log(pageCount)
-  // Get current posts
-  const offset = currentPage * postsPerPage;
  const currentItems = corpedialist?.slice(offset, offset + postsPerPage);
-  const handlePageClick = ({ selected }) => {
+  // Handle page click
-    setCurrentPage(selected);
+  const handlePageClick = (pageNumber) => {
+    setCurrentPage(pageNumber); // Update current page
  };
  const seo = CorpediaData?.seo;
@@ -210,14 +207,10 @@ const CorpediaPage = ({ CorpediaData }) => {
                        href={
                          service?.slug?.endsWith(".pdf")
                            ? `https://api.advithconsulting.in/uploads/${service.slug}`
-                        : `/corpedia/${
+                            : `/corpedia/${service?.slug ? service.slug : "#"}`
-                            service?.slug ? service.slug : "#"
-                          }`
                        }
                        target={
-                      service?.slug?.endsWith(".pdf")
+                          service?.slug?.endsWith(".pdf") ? "_blank" : "_self"
-                        ? "_blank"
-                        : "_self"
                        }
                        rel={
                          service?.slug?.endsWith(".pdf")
@@ -225,7 +218,6 @@ const CorpediaPage = ({ CorpediaData }) => {
                            : undefined
                        }
                        className="default-btn"
                      >
                        Read More
                        <i className="ri-arrow-right-line"></i>
@@ -236,7 +228,7 @@ const CorpediaPage = ({ CorpediaData }) => {
              ))}
          </Row>
-          <ReactPaginate
+          {/* <ReactPaginate
            previousLabel={"<<"}
            nextLabel={">>"}
            breakLabel={"..."}
@@ -246,7 +238,23 @@ const CorpediaPage = ({ CorpediaData }) => {
            onPageChange={handlePageClick}
            containerClassName={"pagination custom-pagination"}
            activeClassName={"active"}
+          /> */}
+          {corpedialist?.length > postsPerPage && (
+            <div className="custom-pagination">
+              <Pagination
+                activePage={currentPage}
+                itemsCountPerPage={postsPerPage}
+                totalItemsCount={corpedialist?.length}
+                onChange={handlePageClick}
+                hideNavigation={true}
+                itemClass="page-item"
+                linkClass="page-numbers"
+                linkClassFirst="prev"
+                linkClassLast="next"
              />
+            </div>
+          )}
        </Container>
      </div>
    </>

--- a/pages/taxwire/index.js
View file @f5aa0d6
+++ b/pages/taxwire/index.js
View file @f5aa0d6
@@ -14,6 +14,7 @@ import qs from "qs";
 import axios from "axios";
 import ReactPaginate from "react-paginate";
 import Seo from "@/components/reuseables/Seo/Seo";
+import Pagination from "react-js-pagination";
 // const services = [
 //   {
@@ -237,20 +238,18 @@ const TaxWire = ({ TaxwireData }) => {
  const taxwirelist = useSelector((state) => state.taxwirelist.data);
  // Pagination setup
-  const [currentPage, setCurrentPage] = useState(0);
+   // Pagination setup
-  const taxwirePerPage = 6; // Number of items per page
+   const [currentPage, setCurrentPage] = useState(1); // Start at page 1
-  const pageCount = taxwirelist
+   const postsPerPage = 6; // Number of items per page
-    ? Math.ceil(taxwirelist.length / taxwirePerPage)
+   const offset = (currentPage - 1) * postsPerPage; // Calculate offset
-    : 0;
+   const currentItems = taxwirelist?.slice(offset, offset + postsPerPage);
-  // Get current posts
-  const offset = currentPage * taxwirePerPage;
-  const currentItems = taxwirelist?.slice(offset, offset + taxwirePerPage);
-  const handlePageClick = ({ selected }) => {
+   // Handle page click
-    setCurrentPage(selected);
+   const handlePageClick = (pageNumber) => {
+     setCurrentPage(pageNumber); // Update current page
   };
  const seo = TaxwireData?.seo;
  //  console.log(seo)
@@ -342,7 +341,7 @@ const TaxWire = ({ TaxwireData }) => {
              ))}
          </Row>
-          <ReactPaginate
+          {/* <ReactPaginate
            previousLabel={"<<"}
            nextLabel={">>"}
            breakLabel={"..."}
@@ -352,7 +351,25 @@ const TaxWire = ({ TaxwireData }) => {
            onPageChange={handlePageClick}
            containerClassName={"pagination custom-pagination"}
            activeClassName={"active"}
+          /> */}
+          {taxwirelist?.length > postsPerPage && (
+            <div className="custom-pagination">
+              <Pagination
+                activePage={currentPage}
+                itemsCountPerPage={postsPerPage}
+                totalItemsCount={taxwirelist?.length}
+                onChange={handlePageClick}
+                hideNavigation={true}
+                itemClass="page-item"
+                linkClass="page-numbers"
+                linkClassFirst="prev"
+                linkClassLast="next"
              />
+            </div>
+          )}
        </Container>
      </div>
    </>

--- a/styles/styles.css
View file @f5aa0d6
+++ b/styles/styles.css
View file @f5aa0d6
@@ -8311,6 +8311,7 @@ span.error{
 }
 .pagination .active a {
  font-weight: bold;
+  color: #fff!important;
 }
 ul.pagination.custom-pagination {
@@ -8347,3 +8348,8 @@ ul.pagination.custom-pagination {
  align-items: center;
  justify-content: center;
 }
+.custom-pagination li a:hover{
+  color: #fff;
+  background-color: var(--mainColor);
+}
\ No newline at end of file