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 1 commit
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.
9 changes: 5 additions & 4 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.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
},
"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",
Expand Down
119 changes: 41 additions & 78 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,51 @@
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}`);

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 [elementsPerPage, setElementsPerPage] = useState<PerPageType>(5);
const [currentPage, setCurrentPage] = useState(1);
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 current page and items per page should be stored in the URL (e.g., ?page=2&perPage=5). Currently, the component uses local state that isn't synchronized with the URL.

You should use the useSearchParams hook from react-router-dom to:

  1. Read the page and perPage values from the URL when the component first loads to initialize the state.
  2. Update the URL search parameters whenever currentPage or elementsPerPage changes.

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);
}}
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 +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
perPage={elementsPerPage}
currentPage={currentPage}
total={items.length}
onPageChange={setCurrentPage}
/>

<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
77 changes: 76 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,76 @@
export const Pagination = () => {};
import { getNumbers } from '../../utils';

interface PaginationProps {
perPage: number;
currentPage: number;
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 description specifies that the currentPage prop should be optional with a default value of 1. Here, it is defined as a required prop. You can make it optional in the PaginationProps interface (e.g., currentPage?: number) and then provide a default value when destructuring the component's props.

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

export const Pagination: React.FC<PaginationProps> = ({
perPage,
currentPage,
total,
Comment on lines +12 to +13
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 task description, page and perPage should be stored in the URL. On page load, their values should be read from the URL query parameters. When they change, the URL should be updated. Consider using the useSearchParams hook from react-router-dom to manage this.

onPageChange,
}) => {
const totalPages = Math.ceil(total / perPage);
const pageSelector = getNumbers(1, totalPages).map(page => (
<li
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.

The component correctly reads page and perPage from the URL, but it doesn't validate these values. This can lead to a couple of issues:

  1. If the URL has a perPage value that isn't in perPageOptions (e.g., ?perPage=7), the select element won't display it correctly, and the type assertion as PerPageType is unsafe.
  2. If the URL has a page value that is out of bounds (e.g., ?page=99), the component will show an empty list of items.

It's best practice to validate input from external sources like URLs. You should check if perPageFromURL is a valid option and clamp pageFromURL to be within the valid page range (1 to totalPages).

key={page}
className={`page-item ${page === currentPage ? 'active' : ''}`}
>
<a
data-cy="pageLink"
className="page-link"
href={`#${page}`}
onClick={() => onPageChange(page)}
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 onPageChange callback is triggered even when clicking on the currently active page. The requirements state it should be triggered "only if page was changed". You should add a condition to call onPageChange only when the selected page is different from currentPage.

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 a good practice to prevent the default browser action for <a> tag clicks when handling navigation with JavaScript. This will stop the URL from being updated with the href hash (e.g., #2). You can achieve this by using the event object in your onClick handler and calling event.preventDefault(). This applies to all page links, including the "previous" and "next" buttons.

>
{page}
</a>
</li>
));

return (
<ul className="pagination">
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
<a
data-cy="prevLink"
className="page-link"
href="#prev"
aria-disabled={currentPage === 1 ? 'true' : 'false'}
onClick={() => {
if (currentPage === 1) {
return;
}

onPageChange(currentPage - 1);
}}
>
«
</a>
</li>

{pageSelector}

<li
className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}
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.

This check for disabling the 'next' button should use >= (i.e., currentPage >= totalPages). If currentPage is greater than totalPages (for example, from a URL parameter), this check fails, and the button remains enabled.

The same change is needed for the aria-disabled attribute on line 70 and in the onClick handler on line 73 to make the component robust against out-of-bounds page numbers.

>
<a
data-cy="nextLink"
className="page-link"
href="#next"
aria-disabled={currentPage === totalPages ? 'true' : 'false'}
onClick={() => {
if (currentPage === totalPages) {
return;
}

onPageChange(currentPage + 1);
}}
>
»
</a>
</li>
</ul>
);
};
Loading