Skip to content

Solution#1479

Open
Anvrey wants to merge 3 commits into
mate-academy:masterfrom
Anvrey:develop
Open

Solution#1479
Anvrey wants to merge 3 commits into
mate-academy:masterfrom
Anvrey:develop

Conversation

@Anvrey
Copy link
Copy Markdown

@Anvrey Anvrey commented Apr 19, 2026

Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

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

Review Summary

Changes are needed before this solution can be accepted, mainly around the starred React Router requirement and the onPageChange behavior.

  1. Critical: URL query synchronization is missing. The task explicitly requires using React Router to read ?page and ?perPage from the URL on load and to keep them in sync when they change. Right now, currentPage and perPage are initialized with fixed values in App.tsx (and related components like ItemList, PerPageSelector, PageInfo) and there is no use of react-router-dom hooks such as useLocation / useNavigate or useSearchParams. You should:

    • Parse page and perPage from location.search (or useSearchParams) on initial render, validate them (clamp page to [1, totalPages] and perPage to one of 3, 5, 10, 20), and use those values to initialize state.
    • In your page change handler (e.g. handlePageChange in App.tsx) and per-page change handler (handlePerPageChange), update the URL query string via React Router (e.g. navigate({ search: ... })) so that ?page=...&perPage=... always reflects the current state and persists across reloads.
  2. Critical: onPageChange is fired even when clicking the current page. In Pagination.tsx (and any wrapper that uses it, such as App.tsx), the click handler for page links always calls onPageChange(page) even when page === currentPage, which violates the requirement that the callback should be triggered only if the page actually changes. Add a simple guard like if (page !== currentPage) onPageChange(page); inside the click handler, and likewise ensure that any higher-level handler in App.tsx also checks before updating state.

  3. Minor improvements (non-blocking): Consider renaming the VisiblevisibleItems interface in ItemList.tsx to something clearer like ItemListProps, and when you add query-string support, make sure your parsing is robust and clamps invalid values to safe defaults.

Once you implement URL syncing with React Router and adjust onPageChange so it only fires on actual page changes, the rest of your pagination logic and UI look solid and should meet the task requirements.


✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

Footnotes

  1. Rate AI review example

  2. Re-request AI review example

  3. Add AI review comments example

@@ -0,0 +1,15 @@
import React from 'react';
Copy link
Copy Markdown

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 apply query params (e.g. ?page=2&perPage=7). There are no react-router imports or usage in this file — you should parse page and perPage from the URL on load and keep the URL in sync when they change.

{item}
</li>
))}
</ul>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

currentPage is initialized to 1 but the spec requires applying ?page from the URL on load. Consider reading page from the query (via useLocation / URLSearchParams) and using it to initialize or set currentPage (validate/normalize the value).

</li>
))}
</ul>
);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

perPage is initialized to 5 but must also be loaded from the URL if ?perPage is present. Parse perPage from the query string on load and ensure the selector reflects it.

Comment on lines +49 to +51
onClick={e => {
e.preventDefault();
onPageChange(page);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The page link onClick handler always calls onPageChange(page) even when page === currentPage. The requirement says: "onPageChange callback should be triggered only if page was changed". Add a guard so you only call onPageChange when page !== currentPage.

Comment on lines +13 to +14
onPageChange,
}) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The component/app does not read ?page and ?perPage from the URL on load. The task requires using React Router to apply URL params on page load (e.g. ?page=2&perPage=7). Instead of initializing state with fixed values, read search params and initialize currentPage and perPage from them (with sensible fallbacks).

return (
<div className="form-group row">
<div className="col-3 col-sm-2 col-xl-1">
<select
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

currentPage is initialized with a fixed value (useState(1)) but the spec requires applying ?page from the URL on page load. Parse search params and initialize or update currentPage from the URL (validate the value and ensure it fits within available pages).

<div className="form-group row">
<div className="col-3 col-sm-2 col-xl-1">
<select
data-cy="perPageSelector"
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

perPage is initialized with a fixed value (useState(5)) but must be read from ?perPage when present. On load, parse and apply perPage from the query string so the selector and pagination reflect the URL.

Comment on lines +19 to +21
>
<option value="3">3</option>
<option value="5">5</option>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

handlePageChange only updates component state. Per the requirements, page changes must be saved in the URL (e.g. ?page=2&perPage=5). Update this handler to push/replace query params via React Router so the URL reflects the current page.

Comment on lines +23 to +25
<option value="20">20</option>
</select>
</div>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

handlePerPageChange resets currentPage to 1 which is correct, but it doesn't update the URL. When perPage changes you must update the query string (e.g. ?page=1&perPage=10) so the selection persists and will be applied on reload.

@@ -0,0 +1,32 @@
import React from 'react';
interface PerPageSelectorProps {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Minor: the interface name VisiblevisibleItems in ItemList appears to be a typo and reduces readability. Consider renaming to e.g. ItemListProps (no functional impact but improves clarity).

Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

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

Review Summary

I am requesting changes because a core requirement of the task—synchronizing pagination with the URL via React Router—is not yet implemented, which means ?page=...&perPage=... is neither read on load nor persisted when state changes. The main critical issue is that in src/App.tsx, src/components/ItemList/ItemList.tsx, src/components/PageInfo.tsx, and src/components/Pagination/Pagination.tsx you still initialize currentPage and perPage with fixed defaults instead of parsing them from the query string and validating them (clamp page to [1, totalPages] and ensure perPage is one of 3, 5, 10, 20) as required [CHECKLIST ITEM #13, #14, #25]. Closely related, none of these components currently use React Router hooks (useSearchParams or useLocation + useNavigate) to read page/perPage from location.search on first render or to update the URL when pagination changes, so state does not persist across reloads or deep links [CHECKLIST ITEM #15, #17, #26]. In App.tsx (and wherever you handle page/perPage at the top level), your handlePageChange should guard against no-op updates with a check like if (page === currentPage) return; and then both update state and sync the query string, and likewise handlePerPageChange should validate the new value, reset the page to 1, avoid redundant updates, and write ?page=1&perPage=... back to the URL [CHECKLIST ITEM #6, #11, #12, #27, #28, #33]. These missing behaviors are considered blocking, because the assignment explicitly requires URL-controlled initial state and URL persistence for pagination, not just internal state management. As a minor, non-blocking improvement, consider renaming the props interface VisiblevisibleItems (e.g., in ItemList/PageInfo) to something clearer like ItemListProps to improve readability. Once you wire pagination state through React Router, validate/clamp query parameters, and add the guards to avoid redundant state/URL updates, your otherwise solid pagination UI will fully meet the task requirements, and your work will be in great shape.


✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

Footnotes

  1. Rate AI review example

  2. Re-request AI review example

  3. Add AI review comments example

@@ -0,0 +1,20 @@
import React from 'react';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You need to import React Router hooks (for example useSearchParams or useLocation + useNavigate) and use them to read and persist ?page=...&perPage=.... The app currently has no URL synchronization which is required by the task (checklist items #13, #25, #26).

Comment on lines +13 to +14
total,
}) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

currentPage and perPage are initialized with fixed defaults here. Per requirements you must initialize these values from the URL query string on first render (parse page and perPage, validate them: clamp page to [1, totalPages] and ensure perPage is one of [3,5,10,20]) so the initial state reflects ?page=...&perPage=... (checklist items #13, #14, #25).

@@ -0,0 +1,20 @@
import React from 'react';

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Minor: the props interface name VisiblevisibleItems is confusing. Consider renaming it to ItemListProps (or similar) for clarity — this doesn't affect functionality but improves readability.

Comment thread src/App.tsx
@@ -1,110 +1,53 @@
import React from 'react';
import React, { useState } from 'react';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You aren't using React Router here. To satisfy the starred requirement (#13/#25/#26) import and use React Router hooks (e.g. useSearchParams or useLocation + useNavigate) so you can read ?page=...&perPage=... on load and later update the URL when state changes.

Comment thread src/App.tsx
Comment on lines +13 to +14
const [currentPage, setCurrentPage] = useState(1);
const [perPage, setPerPage] = useState(5);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Don't initialize currentPage and perPage with hard-coded values. Parse page and perPage from the URL on initial render, validate them (clamp page to [1, totalPages] and ensure perPage is one of 3,5,10,20), and use those validated values to initialize state (lazy initializer or effect). This implements checklist items #13, #14 and #25.

perPage,
currentPage = 1,
onPageChange,
}) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Don't hardcode perPage to 5. Parse perPage from the URL on initial render (allowed values: 3, 5, 10, 20), validate it (fall back to 5 if invalid), and use that parsed value to initialize this state. The selector already provides these options but initial state must reflect the URL (checklist items #11, #14, #25).

Comment on lines +19 to +21
pages.push(i);
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The App-level handler should avoid unnecessary updates: add a guard if (page === currentPage) return; before calling setCurrentPage(...). Also, when the page actually changes, update the URL query string (e.g. via navigate({ search: ... }) or setSearchParams) so ?page=...&perPage=... stays in sync (checklist items #6, #26, #27, #28, #33).

Comment on lines +23 to +25
<ul className="pagination">
<li className={cn('page-item', { disabled: currentPage === 1 })}>
<a
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

When perPage changes, only update state if the new value differs from the current one, reset page to 1, and update the URL query string accordingly. Also validate the new perPage is one of [3,5,10,20] before applying it. This keeps state and URL synchronized and satisfies checklist items about per-page selector and URL persistence (#11, #12, #24, #26).

@@ -0,0 +1,15 @@
import React from 'react';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The task requires reading and writing pagination state from/to the URL using React Router (useSearchParams or useLocation/useNavigate). This file currently has no react-router usage: import and use the appropriate hooks so you can parse ?page and ?perPage on load and update the query string when the user changes page or perPage (check checklist items #13, #14, #15, #16, #17, #26).

Comment on lines +13 to +14
</ul>
);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

currentPage and perPage are initialized here with static defaults. Per checklist items #13/#25 you must instead initialize them from the URL query string on initial render, validating values (clamp page to [1, totalPages] and ensure perPage is one of 3,5,10,20). Use parsed & validated values to set initial state instead of always starting with 1 and 5.

Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

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

Review Summary

I am approving your solution as an educational override so you can keep progressing, but there are a few important areas to improve for full requirements compliance. You did a solid job on the visual pagination UI: the page list, active/disabled states, data-cy attributes, and the PerPageSelector markup and behavior all match the task expectations and are nicely separated into stateless components. The main missing piece is URL synchronization: in App.tsx (and related top-level state), currentPage and perPage are initialized with fixed defaults instead of being parsed from ?page and ?perPage using React Router hooks like useSearchParams or useLocation + useNavigate, and changes are not written back to the URL, which breaks deep links and reload persistence [CHECKLIST ITEM #1]. When you add that, remember to validate and clamp values (e.g., clamp page to [1, totalPages] and ensure perPage is one of 3, 5, 10, 20), and to guard handlers like handlePageChange/handlePerPageChange against no-op updates before updating state and search params [CHECKLIST ITEM #2]. Another small improvement is to rename confusing prop interfaces such as VisiblevisibleItems to something clearer like ItemListProps to improve readability and maintainability. Overall, your component structure and UI behavior are on the right track; once you wire the pagination state to the URL with proper validation, your solution will fully meet the assignment’s requirements.


✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨

Footnotes

  1. Rate AI review example

Comment thread src/App.tsx
@@ -1,110 +1,53 @@
import React from 'react';
import React, { useState } from 'react';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The component currently only imports React. To meet the requirement that ?page=...&perPage=... is read on load and persisted, import and use React Router hooks (e.g., useSearchParams or useLocation + useNavigate) so you can read query params on initial render and update them when pagination changes.

Comment thread src/App.tsx
const items = getNumbers(1, 42).map(n => `Item ${n}`);

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

Choose a reason for hiding this comment

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

Do not initialize currentPage with a fixed default here. Instead parse page from the URL on initial render, validate and clamp it to the range [1, totalPages], and use that validated value as the initial state.

Comment thread src/App.tsx

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

Choose a reason for hiding this comment

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

Do not initialize perPage with a fixed default here. Parse perPage from the URL, ensure it is one of the allowed values (3, 5, 10, 20), and default to 5 only if the query value is missing/invalid.

Comment thread src/App.tsx
Comment on lines +15 to +16
const startIndex = (currentPage - 1) * perPage;
const lastIndex = Math.min(startIndex + perPage, items.length);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Computing startIndex/lastIndex before validating / clamping currentPage can produce incorrect slices. Make sure currentPage is validated against totalPages first, then compute startIndex and lastIndex from the validated values.

Comment thread src/App.tsx
Comment on lines +19 to +21
const handlePageChange = (page: number) => {
setCurrentPage(page);
};
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

handlePageChange should guard against no-op updates (e.g., if (page === currentPage) return;) and also synchronize the new page to the URL (use setSearchParams or navigate to write ?page=...&perPage=...). Right now it only calls setCurrentPage, so URL persistence is missing.

Comment thread src/App.tsx
Comment on lines +23 to +26
const handlePerPageChange = (pages: number) => {
setPerPage(pages);
setCurrentPage(1);
};
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

handlePerPageChange needs to validate the incoming value (allow only 3,5,10,20), avoid redundant updates, reset page to 1, and persist ?page=1&perPage=... to the URL. Currently it updates state but does not validate or update the query string.

Comment thread src/App.tsx
Comment on lines +44 to +48
<Pagination
total={items.length}
perPage={perPage}
currentPage={currentPage}
onPageChange={handlePageChange}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You pass currentPage and perPage into Pagination, but because App doesn't read initial query params or write updates to the URL, deep links and reloads will not reflect the correct pagination state. Integrate React Router syncing so the values rendered come from the validated query params and updates modify the URL.

Comment thread src/App.tsx
@@ -1,110 +1,53 @@
import React from 'react';
import React, { useState } from 'react';
import './App.css';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Rename the props interface VisiblevisibleItems to a clearer name like ItemListProps for readability (this is a non-blocking suggestion but improves clarity).

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

export const App: React.FC = () => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Defaulting currentPage to 1 inside Pagination is acceptable for a stateless component, but it only meets the requirement when the App passes a validated value coming from the URL. Ensure the App provides a validated currentPage from parsed query params so the default isn't relied on unexpectedly.

@@ -1 +1,78 @@
export const Pagination = () => {};
import React from 'react';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You need to read initial pagination state from the URL and persist it back when it changes. Import and use React Router hooks (e.g., useSearchParams or useLocation + useNavigate) here to parse ?page and ?perPage on first render and to update the query string when state changes. This is required by the task (synchronize pagination with the URL).

Comment on lines +13 to +14
onPageChange,
}) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Avoid initializing currentPage and perPage with fixed defaults here. Instead parse page and perPage from the query string, validate them (clamp page between 1 and totalPages and ensure perPage is one of [3,5,10,20]), and use those validated values as initial state. The task requires applying query params on page load rather than always starting from fixed defaults.

Comment on lines +15 to +17
const totalPages = Math.ceil(total / perPage);
const pages = [];

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

startIndex/lastIndex/visibleItems are computed from the current state — make sure they are computed after you parse and validate page/perPage from the URL. If you don't clamp page to [1, totalPages], these indices can be out of expected range and break the displayed info/items.

Comment on lines +19 to +20
pages.push(i);
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Guard against no-op page changes and synchronize the URL. handlePageChange should do if (page === currentPage) return;, then update state and write the new ?page=...&perPage=... to the URL (e.g., via useNavigate/setSearchParams). The task requires triggering onPageChange only when the page actually changes and persisting it to the URL.

Comment on lines +23 to +25
<ul className="pagination" data-cy="pagination">
<li className={cn('page-item', { disabled: currentPage === 1 })}>
<a
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Validate the incoming perPage, avoid redundant updates, reset the page to 1 and persist ?page=1&perPage=... to the URL. handlePerPageChange should check that pages is one of [3,5,10,20], and skip updating if the selected value equals current perPage. Per the requirements, after changing perPage you must always show the 1st page and update the query string.

export const Pagination: React.FC<PaginationProps> = ({
total,
perPage,
currentPage = 1,
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pagination is currently implemented as a stateless component which is good, but relying on its internal default currentPage = 1 (here) is not sufficient: the top-level App must supply validated currentPage/perPage parsed from the URL. Ensure URL parsing/validation happens at the top level so Pagination receives correct values.

@@ -1 +1,78 @@
export const Pagination = () => {};
import React from 'react';
import cn from 'classnames';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Minor readability suggestion: rename the VisiblevisibleItems interface to something clearer like ItemListProps (or similar). This makes the component API clearer and was recommended in the checklist as a low-priority improvement.

@@ -0,0 +1,20 @@
import React from 'react';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The App component currently doesn't import or use any React Router hooks. The task requires reading ?page and ?perPage from the URL on load and persisting changes back to the URL. Import and use useSearchParams or useLocation + useNavigate in App to read/write the query string so pagination state survives reloads/deep links.

currentPage,
startIndex,
lastIndex,
total,
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Do not hardcode the initial currentPage with useState(1). You must parse page from the query string on initial render, clamp it to the valid range [1, totalPages], and initialize state from that parsed value (fallback to 1 only if the query param is missing/invalid).

startIndex,
lastIndex,
total,
}) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Do not hardcode the initial perPage with useState(5). Parse perPage from the query string and ensure it's one of the allowed options [3, 5, 10, 20]. Use a validated value (or fallback to a default) when initializing state so the app respects ?perPage=... on load.

export const PageInfo: React.FC<PageInfoProps> = ({
currentPage,
startIndex,
lastIndex,
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pagination is implemented as a stateless component, which is good. However, ensure the top-level App is the single source of truth for currentPage/perPage initialized from the URL; otherwise the UI may not reflect query params on load even though Pagination has a default currentPage=1.

@@ -0,0 +1,20 @@
import React from 'react';

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Minor: the props interface name VisiblevisibleItems is confusing. Consider renaming it to ItemListProps (or similar) for readability. This is non-blocking but improves maintainability.

{item}
</li>
))}
</ul>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You initialize currentPage with a fixed default. Per the task you must read page from the URL on initial load and validate/clamp it (to the range [1, totalPages]). Use React Router (e.g., useSearchParams or useLocation+useNavigate) to read the query params instead of hard-coded defaults.

</li>
))}
</ul>
);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You initialize perPage with a fixed default. The app must read perPage from the URL on load and validate it (ensure it's one of 3, 5, 10, 20). Replace the fixed default with a value parsed from the query string.

<li data-cy="item" key={item}>
{item}
</li>
))}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The top-level component should read page and perPage from the URL on first render (using React Router hooks), validate them (clamp page to [1, totalPages], ensure perPage ∈ {3,5,10,20}), and apply them to state so deep links work. Add that logic here before computing visible items.

@@ -0,0 +1,15 @@
import React from 'react';
interface VisiblevisibleItems {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Interface name VisiblevisibleItems is confusing. Consider renaming to something clearer like ItemListProps to improve readability (this is a minor, non-blocking suggestion from the checklist).

Comment on lines +17 to +18
value={perPage}
onChange={e => onPerPageChange(+e.target.value)}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The select and options are implemented correctly. Ensure the parent (App) validates that the perPage prop is one of the allowed values (3, 5, 10, 20) and resets to a valid default if not. If perPage is out of that set the select may have no matching option selected — validation/clamping should happen upstream per task requirements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants