Skip to content

add task solution #1429

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

add task solution #1429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ba279e
add task solution
butko9595 Jan 28, 2026
c1c1756
add task solutio
butko9595 Jan 28, 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://butko9595.github.io/react_pagination/) and add it to the PR description.
Loading