fixed pagination bug

IET-NITK · Feb 28, 2024 · 16a964b · 16a964b
1 parent f50df76
commit 16a964b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,7 @@ const nextConfig = {
     compiler: {
         removeConsole: true,
     },
+    swcMinify: false
 }
 
 module.exports = nextConfig
diff --git a/src/components/ProjectsPage.js b/src/components/ProjectsPage.js
@@ -9,8 +9,8 @@ import { useMediaQuery } from "react-responsive";
 
 const ProjectsPage = ({ projects }) => {
   const [currentPage, setCurrentPage] = useState(0);
-  // const bigScreen = useMediaQuery({ minWidth: "1536px" });
-  const projectsPerPage = 8;
+  const bigScreen = useMediaQuery({ minWidth: "1536px" });
+  const projectsPerPage = bigScreen ? 8 : 6;
 
   const handlePageClick = (data) => {
     setCurrentPage(data.selected);
@@ -19,7 +19,7 @@ const ProjectsPage = ({ projects }) => {
   const indexOfLastProject = (currentPage + 1) * projectsPerPage;
   const indexOfFirstProject = indexOfLastProject - projectsPerPage;
   const currentProjects = projects.slice(indexOfFirstProject, indexOfLastProject);
-  const pageCount = Math.ceil(projects.length / 6);
+  const pageCount = Math.ceil(projects.length / projectsPerPage);
 
   return (
     <main className='mt-20 min-h-[90vh] relative'>

diff --git a/src/components/blog/blogList.jsx b/src/components/blog/blogList.jsx
@@ -10,8 +10,8 @@ import { useMediaQuery } from "react-responsive";
 const BlogList = () => {
   const [blogs, setBlogs] = useState([]);
   const [currentPage, setCurrentPage] = useState(0);
-  // const bigScreen = useMediaQuery({ minWidth: "1536px" });
-  const blogsPerPage = 8;
+  const bigScreen = useMediaQuery({ minWidth: "1536px" });
+  const blogsPerPage = bigScreen ? 8 : 6;
 
   useEffect(() => {
     const fetchData = async () => {
@@ -33,7 +33,7 @@ const BlogList = () => {
   const indexOfLastProject = (currentPage + 1) * blogsPerPage;
   const indexOfFirstProject = indexOfLastProject - blogsPerPage;
   const currentBlogs = blogs.slice(indexOfFirstProject, indexOfLastProject);
-  const pageCount = Math.ceil(blogs.length / 6);
+  const pageCount = Math.ceil(blogs.length / blogsPerPage);
 
   return (
     <>

diff --git a/src/components/event/eventList.jsx b/src/components/event/eventList.jsx
@@ -11,7 +11,7 @@ const EventList = () => {
   const [events, setEvents] = useState([]);
   const [currentPage, setCurrentPage] = useState(0);
   const bigScreen = useMediaQuery({ minWidth: "1536px" });
-  const eventsPerPage = 8;
+  const eventsPerPage = bigScreen ? 8 : 6;
 
   useEffect(() => {
     const fetchData = async () => {
@@ -30,7 +30,7 @@ const EventList = () => {
   const indexOfLastProject = (currentPage + 1) * eventsPerPage;
   const indexOfFirstProject = indexOfLastProject - eventsPerPage;
   const currentEvevnts = events.slice(indexOfFirstProject, indexOfLastProject);
-  const pageCount = Math.ceil(events.length / 6);
+  const pageCount = Math.ceil(events.length / eventsPerPage);
 
   const handlePageClick = (data) => {
     setCurrentPage(data.selected);