Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit f5aa0d6a by sujata
Options

pagination integrate

1 parent b5a2e931
Inline Side-by-side
Showing 6 changed files with 248 additions and 116 deletions
package-lock.json
......@@ -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",
......
package.json
......@@ -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",
......
pages/budgetpanorama/index.js
......@@ -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,59 +105,58 @@ 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 postsPerPage = 6; // Define the number of items per page
const pageCount = budgetlist ? Math.ceil(budgetlist.length / postsPerPage) : 0;
// Get current posts for pagination
const offset = currentPage * postsPerPage;
const currentItems = budgetlist?.slice(offset, offset + postsPerPage);
const handlePageClick = ({ selected }) => {
setCurrentPage(selected);
};
// Pagination setup
const [currentPage, setCurrentPage] = useState(1); // Start at page 1
const postsPerPage = 6; // Number of items per page
const offset = (currentPage - 1) * postsPerPage; // Calculate offset
const currentItems = budgetlist?.slice(offset, offset + postsPerPage);
// Handle page click
const handlePageClick = (pageNumber) => {
setCurrentPage(pageNumber); // Update current page
};
const seo = BudgetData?.seo;
console.log(seo)
const seo = BudgetData?.seo;
console.log(seo);
return (
<>
<Seo seo={seo} />
<Seo seo={seo} />
<PageBanner banners={banners} />
<div className="budget-panorama-page-area pt-70 pb-100 bg-light">
<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}
</p>
{BudgetData?.Heading?.Description}
</p>
<Row className="align-items-center">
{currentItems &&
currentItems.map((service, index) => (
<Col lg={4} md={6} sm={12} key={service.id}>
<motion.div
variants={slideFromLeft(0.5)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.4 }}
>
<div className="services-box-budget">
<div className="d-flex align-items-center">
<Image
src={cleanImage(service?.Image?.url)}
alt={service?.alternativeText ? service?.alternativeText : "image"}
width={40}
height={40}
className="img-fluid me-3"
/>
<h3>
<Link
<motion.div
variants={slideFromLeft(0.5)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.4 }}
>
<div className="services-box-budget">
<div className="d-flex align-items-center">
<Image
src={cleanImage(service?.Image?.url)}
alt={
service?.alternativeText
? service?.alternativeText
: "image"
}
width={40}
height={40}
className="img-fluid me-3"
/>
<h3>
<Link
href={
service?.slug?.endsWith(".pdf")
? `https://api.advithconsulting.in/uploads/${service.slug}`
......@@ -179,43 +177,40 @@ const BudgetPanorama = ({BudgetData}) => {
>
{service?.Title || "Default Service Name"}
</Link>
</h3>
</div>
</h3>
</div>
<p>{service.Description}</p>
<p>{service.Description}</p>
<Link
href={
service?.slug?.endsWith(".pdf")
? `https://api.advithconsulting.in/uploads/${service.slug}`
: `/budgetpanorama/${
service?.slug ? service.slug : "#"
}`
}
target={
service?.slug?.endsWith(".pdf")
? "_blank"
: "_self"
}
rel={
service?.slug?.endsWith(".pdf")
? "noopener noreferrer"
: undefined
}
<Link
href={
service?.slug?.endsWith(".pdf")
? `https://api.advithconsulting.in/uploads/${service.slug}`
: `/budgetpanorama/${
service?.slug ? service.slug : "#"
}`
}
target={
service?.slug?.endsWith(".pdf") ? "_blank" : "_self"
}
rel={
service?.slug?.endsWith(".pdf")
? "noopener noreferrer"
: undefined
}
className="default-btn"
>
Read More
<i className="ri-arrow-right-line"></i>
</Link>
</div>
</motion.div>
</Col>
</div>
</motion.div>
</Col>
))}
</Row>
{/* Pagination */}
<ReactPaginate
{/* Pagination */}
{/* <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);
}
}
pages/corpedia/index.js
......@@ -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
? Math.ceil(corpedialist.length / postsPerPage)
: 0;
// console.log(pageCount)
// Get current posts
const offset = currentPage * postsPerPage;
const offset = (currentPage - 1) * postsPerPage; // Calculate offset
const currentItems = corpedialist?.slice(offset, offset + postsPerPage);
const handlePageClick = ({ selected }) => {
setCurrentPage(selected);
// Handle page click
const handlePageClick = (pageNumber) => {
setCurrentPage(pageNumber); // Update current page
};
const seo = CorpediaData?.seo;
......@@ -207,25 +204,20 @@ const CorpediaPage = ({ CorpediaData }) => {
<p>{service.Description}</p>
<Link
href={
service?.slug?.endsWith(".pdf")
? `https://api.advithconsulting.in/uploads/${service.slug}`
: `/corpedia/${
service?.slug ? service.slug : "#"
}`
}
target={
service?.slug?.endsWith(".pdf")
? "_blank"
: "_self"
}
rel={
service?.slug?.endsWith(".pdf")
? "noopener noreferrer"
: undefined
}
href={
service?.slug?.endsWith(".pdf")
? `https://api.advithconsulting.in/uploads/${service.slug}`
: `/corpedia/${service?.slug ? service.slug : "#"}`
}
target={
service?.slug?.endsWith(".pdf") ? "_blank" : "_self"
}
rel={
service?.slug?.endsWith(".pdf")
? "noopener noreferrer"
: 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>
</>
......
pages/taxwire/index.js
......@@ -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,19 +238,17 @@ const TaxWire = ({ TaxwireData }) => {
const taxwirelist = useSelector((state) => state.taxwirelist.data);
// Pagination setup
const [currentPage, setCurrentPage] = useState(0);
const taxwirePerPage = 6; // Number of items per page
const pageCount = taxwirelist
? Math.ceil(taxwirelist.length / taxwirePerPage)
: 0;
// Get current posts
const offset = currentPage * taxwirePerPage;
const currentItems = taxwirelist?.slice(offset, offset + taxwirePerPage);
const handlePageClick = ({ selected }) => {
setCurrentPage(selected);
};
// Pagination setup
const [currentPage, setCurrentPage] = useState(1); // Start at page 1
const postsPerPage = 6; // Number of items per page
const offset = (currentPage - 1) * postsPerPage; // Calculate offset
const currentItems = taxwirelist?.slice(offset, offset + postsPerPage);
// Handle page click
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>
</>
......
styles/styles.css
......@@ -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
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!