Skip to content

add solution #1484

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
RuslanV23 wants to merge 2 commits into
base: master
Choose a base branch
from
+148 −78
Open

add solution #1484

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ac0748
add solution
RuslanV23 Apr 24, 2026
9584f3c
add fix
RuslanV23 Apr 24, 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://RuslanV23.github.io/react_pagination/) and add it to the PR description.
123 changes: 50 additions & 73 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,57 @@
import React from 'react';
import './App.css';
import { getNumbers } from './utils';
import { useSearchParams } from 'react-router-dom';
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 [searchParams, setSearchParams] = useSearchParams();

const perPage = String(searchParams.get('perPage') || '5');
const page = String(searchParams.get('page') || '1');
const totalItems = items.length;

const start = +perPage * +page - +perPage;
const end = Math.min(+perPage * +page, totalItems);

const handlePageChange = (pageNumber: number) => {
const params = new URLSearchParams(searchParams);

params.set('page', String(pageNumber));

setSearchParams(params);
};

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

<p className="lead" data-cy="info">
Page 1 (items 1 - 5 of 42)
{`Page ${page} (items ${start + 1} - ${end} of ${totalItems})`}
</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 => {
const params = new URLSearchParams(searchParams);

if (page !== '1') {
params.set('page', '1');
}

params.set('perPage', event.target.value);

setSearchParams(params);
}}
>
<option value="3">3</option>
<option value="5">5</option>
Comment on lines +53 to 56
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

The onPageChange(count) callback is called even when count === currentPage. Per requirement #5, the callback should only be triggered if the page actually changed. Consider adding a condition: if (count !== currentPage) { onPageChange(count); }

<option value="10">10</option>
Expand All @@ -32,78 +64,23 @@ 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={totalItems}
perPage={+perPage}
currentPage={+page}
onPageChange={handlePageChange}
/>

<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>
{Array.from({ length: end - start }).map((_, index) => {
const correctIndex = index + start;

return (
<li data-cy="item" key={correctIndex}>
{items[correctIndex]}
</li>
);
})}
</ul>
</div>
);
Expand Down
8 changes: 8 additions & 0 deletions src/Root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { HashRouter } from 'react-router-dom';
import App from './App';

export const Root = () => (
<HashRouter>
<App />
</HashRouter>
);
140 changes: 139 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,139 @@
export const Pagination = () => {};
import classNames from 'classnames';
import React from 'react';

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

export const Pagination: React.FC<Props> = ({
total,
perPage,
currentPage = 1,
onPageChange,
}) => {
const countPage = Math.ceil(total / perPage);

const disabledPrevLink = currentPage === 1;
const disabledNextLink = currentPage === countPage;

return (
<ul className="pagination">
<li className={classNames('page-item', { disabled: disabledPrevLink })}>
<a
data-cy="prevLink"
className="page-link"
href="#"
aria-disabled={disabledPrevLink}
onClick={event => {
event.preventDefault();
if (!disabledPrevLink) {
onPageChange(currentPage - 1);
}
}}
>
«
</a>
</li>
{Array.from({ length: countPage }, (_, index) => {
const count = index + 1;

return (
<li
className={classNames('page-item', {
active: currentPage === count,
})}
key={count}
>
<a
data-cy="pageLink"
className="page-link"
href="#"
onClick={event => {
event.preventDefault();
Comment on lines +53 to +55
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

The event parameter is unused in this onClick handler. Consider prefixing with underscore (_event) to indicate intentionally unused parameter.

onPageChange(count);
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

This calls onPageChange(count) whenever any page link is clicked, even if it's already the current page. Requirement #5 states the callback should only trigger when the page actually changes. Consider adding a check like if (currentPage !== count) before calling the callback.

}}
>
{count}
</a>
</li>
);
})}
<li className={classNames('page-item', { disabled: disabledNextLink })}>
<a
data-cy="nextLink"
className="page-link"
href="#next"
aria-disabled={disabledNextLink}
onClick={event => {
event.preventDefault();
if (disabledNextLink) {
return;
}

onPageChange(currentPage + 1);
}}
>
»
</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> */}
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

There's a large block of commented-out HTML (lines 82-136) that serves no purpose in the final implementation. This should be removed to keep the code clean.

</ul>
);
};
4 changes: 2 additions & 2 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createRoot } from 'react-dom/client';

import { App } from './App';
import { Root } from './Root';

createRoot(document.getElementById('root') as HTMLElement).render(<App />);
createRoot(document.getElementById('root') as HTMLElement).render(<Root />);
Loading