Skip to content

solution #1438

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
aakash1sadhu wants to merge 3 commits into
base: master
Choose a base branch
from
Open

solution #1438

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
8163edb
solution
aakash1sadhu Feb 16, 2026
24c914c
fix solution
aakash1sadhu Feb 16, 2026
0a50cd6
fixed solution x2
aakash1sadhu Feb 16, 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
26 changes: 13 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,34 @@

> 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:
```jsx harmony
<Pagination
total={42} // total number of items to paginate
perPage={5} // number of items per page
currentPage={1} /* optional with 1 by default */
onPageChange={(page) => { ... }}
/>
```
```jsx harmony
<Pagination
total={42} // total number of items to paginate
perPage={5} // number of items per page
currentPage={1} /* optional with 1 by default */
onPageChange={(page) => { ... }}
/>
```
1. Keep the HTML stucture `data-cy` attributes;
1. Show all the existing pages considering `total` and `perPage`
1. Current page should be highlighted with `li.active`;
1. `onPageChange` callback should be triggered only if page was changed;
1. The `App` should listen to the `onPageChange` and save a new page;
1. `«` and `»` links should open the prev and the next pages accordingly
- disable each of them if it is already the first or the last page (use `li.disabled` and `a[aria-disabled="true"]`)
- disable each of them if it is already the first or the last page (use `li.disabled` and `a[aria-disabled="true"]`)
1. Show the pagination info inside `data-cy="info"` in the next format `Page 1 (items 1 - 5 of 42)`;
1. Implement the `<select data-cy="perPageSelector">` with `3`, `5`, `10`, `20` options to change the `perPage`;
- show the 1st page after changing a `perPage`;
1. (*) Use React Router to save `?page=2&perPage=7` in the URL and apply them on page load
- show the 1st page after changing a `perPage`;
1. (\*) Use React Router to save `?page=2&perPage=7` in the URL and apply them on page load

## Instructions

- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
- 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://aakash1sadhu.github.io/react_pagination/) and add it to the PR description.
106 changes: 32 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);
Comment on lines +10 to +11
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

The task requires using React Router to manage state in the URL. Currently, perPage and currentPage are stored in local component state using useState. This state should be synchronized with the URL query parameters (e.g., ?page=...&perPage=...) so that the values are applied on page load and the URL reflects the current pagination state.


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);
setCurrentPage(1);
}}
>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
Expand All @@ -32,78 +47,21 @@ 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 <= 1}
onClick={event => {
event.preventDefault();
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]}
onClick={event => {
event.preventDefault();
if (currentPage !== pages[pages.length - 1]) {
onPageChange(currentPage + 1);
}
Comment on lines +79 to +84
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

Your logic for disabling the 'next' link is correct. For consistency, consider using the totalPages variable here, just as you did for the li element's disabled class on line 72. Using totalPages consistently makes the code more readable and avoids relying on the last element of the pages array.

}}
>
»
</a>
</li>
</ul>
);
};