Skip to content

Commit

Permalink
added pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayush4345
ayush4345 committed Feb 28, 2024
1 parent 62d9dc8 commit 567451e
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 23 deletions.
28 changes: 26 additions & 2 deletions src/components/ProjectsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import React, { useState } from 'react';
import ProjectCard from './ProjectCard';
import ReactPaginate from 'react-paginate';
import './ProjectsPage.css'; // Import your CSS for styling
import { IoIosArrowForward } from "react-icons/io";
import { IoIosArrowBack } from "react-icons/io";

const ProjectsPage = ({ projects }) => {
const [currentPage, setCurrentPage] = useState(0);
const projectsPerPage = 5;
const projectsPerPage = 6;

const handlePageClick = (data) => {
setCurrentPage(data.selected);
Expand All @@ -15,9 +17,10 @@ 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);

return (
<main className='mt-20 min-h-[90vh]'>
<main className='mt-20 min-h-[90vh] relative'>
<section className="w-full bg-[#461461]">
<div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
Projects
Expand All @@ -36,6 +39,27 @@ const ProjectsPage = ({ projects }) => {
)
})}
</div>
<section className='flex justify-center my-5'>
<ReactPaginate
breakLabel="..."
nextLabel=<IoIosArrowForward />
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel=<IoIosArrowBack />
pageClassName="page-item font-medium"
pageLinkClassName="page-link"
previousClassName="page-item font-semibold"
previousLinkClassName="text-gray-800 font-semibold mr-4 block h-fit"
nextClassName="page-item font-semibold"
nextLinkClassName="text-gray-800 font-semibold ml-4 block h-fit"
breakClassName="page-item font-semibold"
breakLinkClassName="page-link"
containerClassName="bg-gray-100 p-4 px-6 flex gap-4 rounded-full shadow-md justify-center items-center"
activeClassName="bg-[#cfbae6] p-1 px-3 rounded-full text-gray-100 font-semibold"
renderOnZeroPageCount={null}
/>
</section>
</main>
);
};
Expand Down
45 changes: 38 additions & 7 deletions src/components/blog/blogList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
import React, { useEffect, useState } from 'react';
import BlogCard from './Blogcard';
import jsonData from '../../../public/blog-response.json';
import ReactPaginate from 'react-paginate';
import { IoIosArrowForward } from "react-icons/io";
import { IoIosArrowBack } from "react-icons/io";

const BlogList = () => {
const [blogs, setBlogs] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [currentPage, setCurrentPage] = useState(0);
const blogsPerPage = 6;

useEffect(() => {
Expand All @@ -21,10 +24,17 @@ const BlogList = () => {
fetchData();
}, []);

// Calculate the index range for the current page
const indexOfLastBlog = currentPage * blogsPerPage;
const indexOfFirstBlog = indexOfLastBlog - blogsPerPage;
const currentBlogs = blogs.slice(indexOfFirstBlog, indexOfLastBlog);
const handlePageClick = (data) => {
setCurrentPage(data.selected);
};

const indexOfLastProject = (currentPage + 1) * blogsPerPage;
const indexOfFirstProject = indexOfLastProject - blogsPerPage;
const currentBlogs = blogs.slice(indexOfFirstProject, indexOfLastProject);
const pageCount = Math.ceil(blogs.length / 6);




// Function to handle page change
const handlePageChange = (newPage) => {
Expand All @@ -33,14 +43,14 @@ const BlogList = () => {

return (
<>
<div className='mt-20 min-h-[90vh]'>
<div className='mt-20 min-h-[90vh] relative'>
<section className="w-full bg-[#461461]">
<div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
Blogs
</div>
</section>
<section className='py-6 p-5 md:p-8 grid justify-items-center gap-5 grid-cols-1 md:grid-cols-2 xl:px-20 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-max'>
{blogs.map((blog, index) => {
{currentBlogs.map((blog, index) => {
return (
<>
<BlogCard
Expand All @@ -56,6 +66,27 @@ const BlogList = () => {
)
})}
</section>
<section className='flex justify-center my-5'>
<ReactPaginate
breakLabel="..."
nextLabel=<IoIosArrowForward />
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel=<IoIosArrowBack />
pageClassName="page-item font-medium"
pageLinkClassName="page-link"
previousClassName="page-item font-semibold"
previousLinkClassName="text-gray-800 font-semibold mr-4 block h-fit"
nextClassName="page-item font-semibold"
nextLinkClassName="text-gray-800 font-semibold ml-4 block h-fit"
breakClassName="page-item font-semibold"
breakLinkClassName="page-link"
containerClassName="bg-gray-100 p-4 px-6 flex gap-4 rounded-full shadow-md justify-center items-center"
activeClassName="bg-[#cfbae6] p-1 px-3 rounded-full text-gray-100 font-semibold"
renderOnZeroPageCount={null}
/>
</section>
</div>
</>
);
Expand Down
51 changes: 37 additions & 14 deletions src/components/event/eventList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,21 @@
import React, { useEffect, useState } from 'react';
import BlogCard from './eventCard';
import jsonData from '../../../public/event-response.json'
import ReactPaginate from 'react-paginate';
import { IoIosArrowForward } from "react-icons/io";
import { IoIosArrowBack } from "react-icons/io";

const EventList = () => {
const [blogs, setBlogs] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const blogsPerPage = 6;
const [events, setEvents] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const eventsPerPage = 6;

useEffect(() => {
const fetchData = async () => {
try {
// const response = await fetch('/event-response.json');
const data = await jsonData;
setBlogs(data.items);
setEvents(data.items);
} catch (error) {
console.error('Error fetching data:', error);
}
Expand All @@ -22,33 +25,32 @@ const EventList = () => {
fetchData();
}, []);

// Calculate the index range for the current page
const indexOfLastBlog = currentPage * blogsPerPage;
const indexOfFirstBlog = indexOfLastBlog - blogsPerPage;
const currentBlogs = blogs.slice(indexOfFirstBlog, indexOfLastBlog);
const indexOfLastProject = (currentPage + 1) * eventsPerPage;
const indexOfFirstProject = indexOfLastProject - eventsPerPage;
const currentEvevnts = events.slice(indexOfFirstProject, indexOfLastProject);
const pageCount = Math.ceil(events.length / 6);

// Function to handle page change
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
const handlePageClick = (data) => {
setCurrentPage(data.selected);
};

return (
<>
<div className='mt-20 min-h-[90vh]'>
<div className='mt-20 min-h-[90vh] relative'>
<section className="w-full bg-[#461461]">
<div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
Events
</div>
</section>
<section className='py-6 p-5 md:p-8 grid justify-items-center gap-5 grid-cols-1 md:grid-cols-2 xl:px-20 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-max'>
{blogs.map((blog, index) => {
{currentEvevnts.map((blog, index) => {
return (
<>
<BlogCard
key={index}
title={blog.title}
organizer={blog.event_organizer}
img="https://images.unsplash.com/photo-1549451371-64aa98a6f660?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
img={blog.event_img_url}
description="A fun-filled event to bring out the gamer in you and compete to be the best gamer out there. Register in teams of 5 or individually and showcase your gaming talent! Individual registrants will be teamed up with other individual registrants to form teams of 5."
slug={blog.event_slug}
date={blog.event_date}
Expand All @@ -58,6 +60,27 @@ const EventList = () => {
)
})}
</section>
<section className='flex justify-center my-5'>
<ReactPaginate
breakLabel="..."
nextLabel=<IoIosArrowForward />
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel=<IoIosArrowBack />
pageClassName="page-item font-medium"
pageLinkClassName="page-link"
previousClassName="page-item font-semibold"
previousLinkClassName="text-gray-800 font-semibold mr-4 block h-fit"
nextClassName="page-item font-semibold"
nextLinkClassName="text-gray-800 font-semibold ml-4 block h-fit"
breakClassName="page-item font-semibold"
breakLinkClassName="page-link"
containerClassName="bg-gray-100 p-4 px-6 flex gap-4 rounded-full shadow-md justify-center items-center"
activeClassName="bg-[#cfbae6] p-1 px-3 rounded-full text-gray-100 font-semibold"
renderOnZeroPageCount={null}
/>
</section>
</div>
</>
);
Expand Down

0 comments on commit 567451e

Please sign in to comment.