Skip to content

add task solution #1436

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

add task solution #1436

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
90dfa8f
add task solution
maksymkolomiiets2-svg Feb 14, 2026
0e19e8c
add task solution
maksymkolomiiets2-svg Feb 14, 2026
98e6ae3
add task solution
maksymkolomiiets2-svg Feb 14, 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://maksymkolomiiets2-svg.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
103 changes: 30 additions & 73 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,38 @@
import React from 'react';
import React, { useState } from 'react';
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

The task requires using React Router to save and read ?page=...&perPage=.... Currently there is no import/use of router hooks — add imports (e.g. useSearchParams from react-router-dom for v6 or useLocation/useHistory for v5) and use them to sync URL and state.

Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

You call setSearchParams later but never import or initialize it. Import useSearchParams from react-router-dom and call const [searchParams, setSearchParams] = useSearchParams() (and import useEffect if you plan to apply params on mount). Without this, the call at line 55 will cause a runtime error.

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}`);

export const App: React.FC = () => {
const [amount, setAmount] = useState(5);
const [currentPage, setCurrentPage] = useState(1);
Comment on lines +10 to +11
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

Initial state for amount and currentPage is hardcoded to 5 and 1. To satisfy the requirement to apply URL params on load, derive these initial values from the query string (or read them in a useEffect on mount) and fall back to defaults. Consider parsing page and perPage from the URL and passing them to useState initializers.

Comment on lines +10 to +11
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

You initialize amount and currentPage with hardcoded values here. The task requires reading page and perPage from the URL query parameters on page load (e.g. ?page=2&perPage=7). Use React Router (for example useSearchParams from react-router-dom v6) to parse these params on mount, validate/parse them to integers with sensible fallbacks, and use them as the initial values instead of hardcoded 5 and 1. See the task description requirement to apply URL params on load.

Comment on lines +10 to +11
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

State variables amount and currentPage are initialized with hard-coded values. The task requires applying ?page and ?perPage from the URL on load. Use useSearchParams() to read and parse page and perPage (as integers), validate perPage against allowed options (3, 5, 10, 20), and clamp page into [1, totalPages]. Use a lazy initializer or a useEffect to set these on mount.

const total = 42;
const end = Math.min(currentPage * amount, total);
const start = amount * (currentPage - 1) + 1;

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 {start} - {end} 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={amount}
onChange={e => {
setAmount(Number(e.target.value));
setCurrentPage(1);
}}
Comment on lines +31 to +34
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

When the per-page selector changes you reset state (setAmount and setCurrentPage(1)) which is correct, but you also must update the URL query params (set page=1&perPage=<value>). Update this onChange handler to push the new query params to the router so the URL and state stay in sync (per task requirement).

Comment on lines +31 to +34
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

When the per-page <select> changes you update local state and reset to page 1, but you do not update the URL. After calling setAmount(...) and setCurrentPage(1), also update the router search params so the address bar becomes ?page=1&perPage=<selected>. This is required by the checklist (sync perPage to URL).

Comment on lines +31 to +34
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

When the per-page <select> changes you reset local state to page 1 but do not update the URL. Per the requirements you must also write query params (e.g. setSearchParams({ page: '1', perPage: String(newAmount) })) so the address bar reflects the new state and the page is shareable/restorable.

>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
Expand All @@ -33,77 +46,21 @@ export const App: React.FC = () => {
</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={amount}
currentPage={currentPage}
onPageChange={newPage => {
setCurrentPage(newPage);
setSearchParams({ page: String(newPage), perPage: String(amount) });
Comment on lines +53 to +55
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

In the onPageChange handler you call setSearchParams({ page: String(newPage), perPage: String(amount) }) but setSearchParams isn't defined in this file. Initialize setSearchParams via useSearchParams. Also ensure you preserve the current perPage when updating only page (or derive perPage from searchParams to avoid stale closures).

}}
Comment on lines +53 to +56
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

The onPageChange handler updates local currentPage only. Per requirements, also persist the new page in the URL (update page query param) — otherwise pagination state won't be reflected in the address bar and won't be restored on reload.

Comment on lines +53 to +56
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 14, 2026

Choose a reason for hiding this comment

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

The onPageChange handler updates currentPage locally but does not update the URL query parameter page. To meet the task requirements, whenever the page changes (via page links or prev/next), update the search params (e.g. setSearchParams({ page: String(newPage), perPage: String(amount) })) so the address bar reflects the current page. Also ensure any search-param change from the URL (if you support it) updates the component state.

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

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

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

return (
<ul className="pagination">
<li className={currentPage === 1 ? 'page-item disabled' : 'page-item'}>
<a
data-cy="prevLink"
className="page-link"
href="#"
aria-disabled={currentPage === 1 ? 'true' : 'false'}
onClick={e => {
e.preventDefault();
if (currentPage > 1) {
onPageChange(currentPage - 1);
}
}}
>
«
</a>
</li>
{getNumbers(1, pages).map(num => (
<li
className={`page-item ${currentPage === num ? 'active' : ''}`}
key={num}
>
<a
data-cy="pageLink"
className="page-link"
href={`#${num}`}
onClick={e => {
e.preventDefault();
if (currentPage !== num) {
onPageChange(num);
}
}}
>
{num}
</a>
</li>
))}
<li
className={currentPage === pages ? 'page-item disabled' : 'page-item'}
>
<a
data-cy="nextLink"
className="page-link"
href="#next"
aria-disabled={currentPage === pages ? 'true' : 'false'}
onClick={e => {
e.preventDefault();
if (currentPage < pages) {
onPageChange(currentPage + 1);
}
}}
>
»
</a>
</li>
</ul>
);
};
Loading