Skip to content

Solution #1472

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

Solution #1472

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
e2a84b0
Solution
tavokina Apr 5, 2026
cb13433
Fixed
tavokina Apr 5, 2026
3bb1b65
URL synch
tavokina Apr 5, 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://tavokina.github.io/react_pagination/) and add it to the PR description.
107 changes: 99 additions & 8 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,18 @@
"classnames": "^2.5.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.14.0",
"react-transition-group": "^4.4.5"
},
"devDependencies": {
"@cypress/react18": "^2.0.1",
"@mate-academy/scripts": "^1.9.12",
"@mate-academy/scripts": "^2.1.3",
"@mate-academy/students-ts-config": "*",
"@mate-academy/stylelint-config": "*",
"@types/node": "^20.14.10",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@types/react-transition-group": "^4.4.10",
"@typescript-eslint/parser": "^7.16.0",
"@vitejs/plugin-react": "^4.3.1",
Expand Down
133 changes: 55 additions & 78 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,59 @@
import React from 'react';
import React, { useState } from 'react';
import './App.css';
import { getNumbers } from './utils';
import { Pagination } from './components/Pagination';
import { useSearchParams } from 'react-router-dom';

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

Comment on lines 3 to 9
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 5, 2026

Choose a reason for hiding this comment

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

According to the requirements, the currentPage prop should be optional with a default value of 1. Currently, it's defined as a required prop in the PaginationProps interface. You can make it optional in the interface (e.g., currentPage?: number) and then provide a default value within the component.

export const App: React.FC = () => {
const perPageOptions = [3, 5, 10, 20] as const;

type PerPageType = (typeof perPageOptions)[number];
const [searchParams, setSearchParams] = useSearchParams();
const pageFromURL = Number(searchParams.get('page')) || 1;
const perPageFromURL = Number(searchParams.get('perPage')) || 5;
const [currentPage, setCurrentPage] = useState(pageFromURL);
const [elementsPerPage, setElementsPerPage] = useState<PerPageType>(perPageFromURL as PerPageType);
Comment on lines +15 to +18
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 5, 2026

Choose a reason for hiding this comment

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

It's great that you're reading the page and perPage values from the URL. However, the current implementation doesn't validate these values before using them to initialize the state.

For example:

  1. If the URL has ?perPage=7, elementsPerPage becomes 7. This is not a valid option in the <select> dropdown, which can be confusing for the user. It's better to ensure the perPage value is one of the allowed options.
  2. If the URL has a page number that is out of bounds (e.g., ?page=100 when there are only 9 pages), the component will show an empty list of items and potentially confusing info text.

Consider adding validation for page and perPage from the URL to ensure they fall within a valid range before setting the state.

const firstItemOnPage = elementsPerPage * (currentPage - 1);
const startItem = firstItemOnPage + 1;
const endItem = Math.min(firstItemOnPage + elementsPerPage, items.length);

const visibleItems = items.slice(
firstItemOnPage,
firstItemOnPage + elementsPerPage,
);

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

Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Apr 5, 2026

Choose a reason for hiding this comment

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

The task requires the onPageChange callback to be triggered only if the page was changed. Currently, clicking on the active page link will still call this function. You should add a condition to call onPageChange only when the selected page is different from the currentPage.

<p className="lead" data-cy="info">
Page 1 (items 1 - 5 of 42)
{`Page ${currentPage} (items ${startItem} - ${endItem} of ${items.length})`}
</p>

<div className="form-group row">
<div className="col-3 col-sm-2 col-xl-1">
<select
value={elementsPerPage}
onChange={e => {
setElementsPerPage(Number(e.target.value) as PerPageType);
setCurrentPage(1);
setSearchParams({
page: '1',
perPage: e.target.value,
});
}}
data-cy="perPageSelector"
id="perPageSelector"
className="form-control">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
className="form-control"
>
{perPageOptions.map(n => (
<option key={n} value={n}>
{n}
</option>
))}
</select>
</div>

Expand All @@ -32,78 +62,25 @@ 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
perPage={elementsPerPage}
currentPage={currentPage}
total={items.length}
onPageChange={(page) => {
setCurrentPage(page);
setSearchParams({
page: page.toString(),
perPage: elementsPerPage.toString(),
});
}}
/>

<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 key={item} data-cy="item">
{item}
</li>
))}
</ul>
</div>
);
Expand Down
Loading
Loading