Skip to content

add solution #1437

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

Open
gallik-dev wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add solution #1437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
249c392
add solution
gallik-dev Feb 15, 2026
29fb7fb
fix solution
gallik-dev Feb 15, 2026
a088436
add new solution
gallik-dev Feb 15, 2026
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
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

> Here is the [working version](https://mate-academy.github.io/react_pagination/)

You a given a list of items and markup for the `Pagination`. Implement the
You a given a list of items and markup for the `Pagination`. Implement the
`Pagination` as a stateless component to show only the items for a current page.

1. The `Pagination` should be used with the next props:
Expand Down Expand Up @@ -32,4 +32,4 @@ You a given a list of items and markup for the `Pagination`. Implement the
- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
- Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
- Open one more terminal and run tests with `npm test` to ensure your solution is correct.
- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_pagination/) and add it to the PR description.
- Replace `<your_account>` with your Github username in the [DEMO LINK](https://gallik-dev.github.io/react_pagination/) and add it to the PR description.
105 changes: 31 additions & 74 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,40 @@
import React from 'react';
import React, { useState } from 'react';
import './App.css';
import { getNumbers } from './utils';
import { Pagination } from './components/Pagination';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const items = getNumbers(1, 42).map(n => `Item ${n}`);

export const App: React.FC = () => {
const [perPage, setPerPage] = useState(5);
const [currentPage, setCurrentPage] = useState(1);

const start = (currentPage - 1) * perPage;
const end = start + perPage;

const visibleItems = items.slice(start, end);

return (
<div className="container">
<h1>Items with Pagination</h1>

<p className="lead" data-cy="info">
Page 1 (items 1 - 5 of 42)
{`Page ${currentPage} (items ${start + 1} - ${Math.min(end, items.length)} of ${items.length})`}
</p>

<div className="form-group row">
<div className="col-3 col-sm-2 col-xl-1">
<select
data-cy="perPageSelector"
id="perPageSelector"
className="form-control">
className="form-control"
value={perPage}
onChange={event => {
setPerPage(+event.target.value);
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This condition for aria-disabled can cause issues when total is 0, as pages[0] would be undefined. To make it more robust and consistent with the li's disabled class, consider using currentPage <= 1.

setCurrentPage(1);
}}
>
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check has the same potential issue as the aria-disabled attribute when the pages array is empty. A simpler and safer condition would be to check if currentPage > 1 before calling onPageChange.

<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
Expand All @@ -32,78 +47,20 @@ export const App: React.FC = () => {
</label>
</div>

{/* Move this markup to Pagination */}
<ul className="pagination">
<li className="page-item disabled">
<a
data-cy="prevLink"
className="page-link"
href="#prev"
aria-disabled="true">
«
</a>
</li>
<li className="page-item active">
<a data-cy="pageLink" className="page-link" href="#1">
1
</a>
</li>
<li className="page-item">
<a data-cy="pageLink" className="page-link" href="#2">
2
</a>
</li>
<li className="page-item">
<a data-cy="pageLink" className="page-link" href="#3">
3
</a>
</li>
<li className="page-item">
<a data-cy="pageLink" className="page-link" href="#4">
4
</a>
</li>
<li className="page-item">
<a data-cy="pageLink" className="page-link" href="#5">
5
</a>
</li>
<li className="page-item">
<a data-cy="pageLink" className="page-link" href="#6">
6
</a>
</li>
<li className="page-item">
<a data-cy="pageLink" className="page-link" href="#7">
7
</a>
</li>
<li className="page-item">
<a data-cy="pageLink" className="page-link" href="#8">
8
</a>
</li>
<li className="page-item">
<a data-cy="pageLink" className="page-link" href="#9">
9
</a>
</li>
<li className="page-item">
<a
data-cy="nextLink"
className="page-link"
href="#next"
aria-disabled="false">
»
</a>
</li>
</ul>
<Pagination
total={items.length}
perPage={perPage}
currentPage={currentPage}
onPageChange={page => {
setCurrentPage(page);
}}
/>
<ul>
<li data-cy="item">Item 1</li>
<li data-cy="item">Item 2</li>
<li data-cy="item">Item 3</li>
<li data-cy="item">Item 4</li>
<li data-cy="item">Item 5</li>
{visibleItems.map(item => (
<li data-cy="item" key={item}>
{item}
</li>
))}
</ul>
</div>
);
Expand Down
93 changes: 92 additions & 1 deletion src/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,92 @@
export const Pagination = () => {};
import classNames from 'classnames';
import React from 'react';

type Props = {
total: number;
perPage: number;
currentPage?: number;
onPageChange: (value: number) => void;
};

export const Pagination: React.FC<Props> = ({
total,
perPage,
currentPage = 1,
onPageChange,
}) => {
const pages = Array.from(
{ length: Math.ceil(total / perPage) },
(_, i) => i + 1,
);

const totalPages = Math.ceil(total / perPage);

return (
<ul className="pagination">
<li
className={classNames('page-item', {
disabled: currentPage <= 1,
})}
>
<a
data-cy="prevLink"
className="page-link"
href="#prev"
aria-disabled={currentPage === pages[0]}
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This condition can cause issues when total is 0, as pages will be an empty array and pages[0] will be undefined. To make this more robust, consider using a condition similar to the one you used for the disabled class, like currentPage <= 1.

onClick={event => {
event.preventDefault();
if (currentPage !== pages[0]) {
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check has the same issue as the aria-disabled attribute. When there are no pages, pages[0] is undefined, and this condition doesn't correctly prevent the onPageChange call. A safer check would be if (currentPage > 1).

onPageChange(currentPage - 1);
}
}}
>
«
</a>
</li>

{pages.map(page => {
return (
<li
className={classNames('page-item', {
active: page === currentPage,
})}
key={page}
>
<a
data-cy="pageLink"
className="page-link"
href={`#${page}`}
onClick={() => {
if (page !== currentPage) {
onPageChange(page);
}
}}
>
{page}
</a>
</li>
);
})}
<li
className={classNames('page-item', {
disabled: currentPage >= totalPages,
})}
>
<a
data-cy="nextLink"
className="page-link"
href="#next"
aria-disabled={currentPage === pages[pages.length - 1]}
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to the 'previous' button, this condition is not safe for the case where total is 0, as pages[pages.length - 1] will be undefined. It would be better to use the totalPages variable for this check, for example: currentPage >= totalPages.

onClick={event => {
event.preventDefault();
if (currentPage !== pages[pages.length - 1]) {
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This condition also fails when the pages array is empty. To correctly prevent navigation beyond the last page, a condition like if (currentPage < totalPages) would be more reliable.

onPageChange(currentPage + 1);
}
}}
>
»
</a>
</li>
</ul>
);
};