Skip to content

feat(pagination): integrate Pagination component for article navigation #266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BirushaNdegeya merged 1 commit into from
Dec 18, 2025
+22 −38
Merged

feat(pagination): integrate Pagination component for article navigation #266

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 22 additions & 38 deletions src/pages/TopAfrica.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ListArticlesResult from '../components/ArticleView/ArticleList';
import DatePicker from '../components/ArticleForm/DatePicker';
import ArticleCardSkeletton from '../components/ArticleView/ArticleCardSkeletton';
import getTrueArticles from '../helpers/getTrueArticles';
import Pagination from '../components/common/Pagination';

const africanCountries = countries.Africa;

Expand All @@ -31,7 +32,8 @@ export default function Africa() {

// Pagination states
const [currentPage, setCurrentPage] = useState(1);
const articlesPerPage = showCard ? 12 : 18; // Display 9 or 12 items per page
const [currentArticles, setCurrentArticles] = useState([]);
const articlesPerPage = showCard ? 12 : 18;

const handleClicked = () => {
setShowCard(!showCard);
Expand Down Expand Up @@ -84,30 +86,19 @@ export default function Africa() {
fetchDataForAllCountries();
}, [date]);

// Calculate pagination values
const indexOfLastArticle = currentPage * articlesPerPage;
const indexOfFirstArticle = indexOfLastArticle - articlesPerPage;
const currentArticles = data.slice(indexOfFirstArticle, indexOfLastArticle);
// Compute total pages
const totalPages = Math.ceil(data.length / articlesPerPage);

// Handle pagination changes
const paginate = (pageNumber) => setCurrentPage(pageNumber);

// Render page numbers for pagination
const renderPageNumbers = () => {
const pageNumbers = [];
for (let i = 1; i <= totalPages; i++) {
pageNumbers.push(
<button
key={i}
onClick={() => paginate(i)}
className={`px-2 py-1 mx-1 ${currentPage === i ? 'bg-blue-500 text-white' : 'bg-gray-300'}`}
>
{i}
</button>,
);
}
return pageNumbers;
// Keep a local slice of current page articles; Pagination component will call onPageChange
useEffect(() => {
const initial = data.slice(0, articlesPerPage);
setCurrentArticles(initial);
setCurrentPage(1);
}, [data, articlesPerPage]);

const handlePageChange = (page, paginatedItems) => {
setCurrentPage(page);
setCurrentArticles(paginatedItems);
};

// Display loading component if data is loading
Expand Down Expand Up @@ -175,21 +166,14 @@ export default function Africa() {
)}

<div className='flex items-center justify-center gap-4 my-5 mb-12'>
<button
onClick={() => paginate(currentPage - 1)}
disabled={currentPage === 1}
className='px-4 py-2 bg-gray-300 rounded disabled:opacity-50'
>
&larr;
</button>
<div className='flex'>{renderPageNumbers()}</div>
<button
onClick={() => paginate(currentPage + 1)}
disabled={currentPage === totalPages}
className='px-4 py-2 bg-gray-300 rounded disabled:opacity-50'
>
&rarr;
</button>
<Pagination
items={data}
itemsPerPage={articlesPerPage}
onPageChange={handlePageChange}
onCurrentChange={setCurrentPage}
currentPage={currentPage}
totalPages={totalPages}
/>
</div>
</div>
</main>
Expand Down