Skip to content

add task solution #1473

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

add task solution #1473

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fabe1f6
add task solution
Cumacea Apr 6, 2026
16b19f7
fix optional type
Cumacea Apr 6, 2026
257b29c
add optional task
Cumacea Apr 6, 2026
cbb5e4a
fix task
Cumacea Apr 6, 2026
3e0bc1f
add package.json
Cumacea Apr 6, 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://Cumacea.github.io/react_pagination/) and add it to the PR description.
113 changes: 38 additions & 75 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,47 @@
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}`);
const TOTAL = 42;
const items = getNumbers(1, TOTAL).map(n => `Item ${n}`);

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

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

Choose a reason for hiding this comment

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

The state for perPage and currentPage is currently managed locally. According to the requirements, this state should be synchronized with the URL query parameters (e.g., ?page=2&perPage=5) using React Router. On page load, the initial state should also be read from these URL parameters. You can use the useSearchParams hook from react-router-dom to manage this.


const onPageChange = (page: number) => {
setCurrentPage(page);
};

const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setPerPage(Number(event.target.value));
setCurrentPage(1);
};

const start = (currentPage - 1) * perPage;
const end = start + perPage;
const startItem = start + 1;
const lastItem = Math.min(end, TOTAL);

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 {startItem} - {lastItem} of {TOTAL})
</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={handleSelectChange}
>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
Expand All @@ -32,78 +54,19 @@ 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={TOTAL}
perPage={perPage}
currentPage={currentPage}
onPageChange={onPageChange}
/>

<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>
{items.slice(start, end).map(item => (
<li key={item} data-cy="item">
{item}
</li>
))}
</ul>
</div>
);
Expand Down
81 changes: 80 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,80 @@
export const Pagination = () => {};
import React from 'react';
import classNames from 'classnames';
import { getNumbers } from '../../utils';

type Props = {
total: number;
perPage: number;
currentPage: number;
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

The task description states that currentPage should be an optional prop with a default value of 1. To implement this, you can change the type to currentPage?: number; and provide a default value for the prop in the component's signature.

onPageChange: (page: number) => void;
};

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

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 ? 'true' : 'false'}
onClick={() => {
if (currentPage !== 1) {
onPageChange(currentPage - 1);
}
}}
Copy link
Copy Markdown

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

Choose a reason for hiding this comment

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

It's a good practice to prevent the default browser navigation for <a> tags when the click is handled by JavaScript. You can do this by accepting the event object in your onClick handler and calling event.preventDefault(). This should be applied to all clickable links in this component to avoid unintended changes to the URL's hash.

>
«
</a>
</li>

{pages.map(page => (
<li
key={page}
className={classNames('page-item', { active: currentPage === 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 === pagesCount,
})}
>
<a
data-cy="nextLink"
className="page-link"
href="#next"
aria-disabled={currentPage === pagesCount ? 'true' : 'false'}
onClick={() => {
if (currentPage !== pagesCount) {
onPageChange(currentPage + 1);
}
}}
>
»
</a>
</li>
</ul>
);
};
Loading