Solution1 #1482
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,91 @@ | ||
| import classNames from 'classnames'; | ||
| import React from 'react'; | ||
|
|
||
| type Props = { | ||
| total: number; | ||
| perPage: number; | ||
| onPageChange: (page: number) => void; | ||
| currentPage: number; | ||
|
Comment on lines
+4
to
+8
There was a problem hiding this comment. Props type still contains incorrect props not in the required API: |
||
| }; | ||
|
|
||
| export const Pagination: React.FC<Props> = ({ | ||
|
Comment on lines
+4
to
+11
There was a problem hiding this comment. The Pagination component's props and behavior don't match the task description. The description requires a stateless Pagination that accepts props: total, perPage, currentPage (optional default 1), and onPageChange (callback). In this file the component expects: |
||
| total, | ||
| perPage, | ||
| onPageChange, | ||
| currentPage, | ||
|
Comment on lines
+11
to
+15
There was a problem hiding this comment. Destructuring still includes non-standard props. Only destructure |
||
| }) => { | ||
|
Comment on lines
+11
to
+16
There was a problem hiding this comment. The component currently receives |
||
| const totalPage = Math.ceil(total / perPage); | ||
| const pages = Array.from({ length: totalPage }, (__dirname, i) => i + 1); | ||
| const lastPage = currentPage === totalPage; | ||
|
|
||
| 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={e => { | ||
| e.preventDefault(); | ||
| if (currentPage > 1) { | ||
| onPageChange(currentPage - 1); | ||
| } | ||
| }} | ||
|
Comment on lines
+37
to
+43
|
||
| > | ||
| « | ||
| </a> | ||
|
Comment on lines
+32
to
+46
There was a problem hiding this comment. The |
||
| </li> | ||
|
|
||
| {pages.map(pageNumber => { | ||
| return ( | ||
| <li | ||
|
There was a problem hiding this comment. Remove this
Comment on lines
+50
to
+51
There was a problem hiding this comment. Missing There was a problem hiding this comment. Remove |
||
| className={classNames('page-item', { | ||
| active: currentPage === pageNumber, | ||
| })} | ||
| key={pageNumber} | ||
|
Comment on lines
+51
to
+55
There was a problem hiding this comment.
|
||
| > | ||
| <a | ||
| data-cy="pageLink" | ||
| className="page-link" | ||
| href={`#${pageNumber}`} | ||
| onClick={e => { | ||
| e.preventDefault(); | ||
| onPageChange(pageNumber); | ||
|
There was a problem hiding this comment. Use only |
||
| }} | ||
|
Comment on lines
+57
to
+65
There was a problem hiding this comment. The component uses |
||
| > | ||
| {pageNumber} | ||
| </a> | ||
| </li> | ||
| ); | ||
| })} | ||
| <li | ||
| className={classNames('page-item', { | ||
| disabled: lastPage, | ||
| })} | ||
| > | ||
| <a | ||
| data-cy="nextLink" | ||
| className="page-link" | ||
| href="#next" | ||
| aria-disabled={lastPage ? 'true' : 'false'} | ||
| onClick={e => { | ||
| e.preventDefault(); | ||
|
|
||
| if (!lastPage) { | ||
|
There was a problem hiding this comment. Fix the callback parameter name typo |
||
| onPageChange(currentPage + 1); | ||
| } | ||
| }} | ||
|
Comment on lines
+82
to
+88
|
||
| > | ||
| » | ||
| </a> | ||
|
Comment on lines
+82
to
+91
There was a problem hiding this comment. Pass only the required props: |
||
| </li> | ||
| </ul> | ||
| ); | ||
| }; | ||
|
|
||
| export default Pagination; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,11 @@ | ||
| import { createRoot } from 'react-dom/client'; | ||
| import React from 'react'; | ||
|
|
||
| import { App } from './App'; | ||
|
There was a problem hiding this comment. The App component uses prop names and prop types for Pagination that do not match the task description. The task required a stateless API. Here the Pagination is used with props |
||
| import { HashRouter } from 'react-router-dom'; | ||
|
|
||
|
There was a problem hiding this comment. Remove this prop - it's not part of the required API. The component should use |
||
| createRoot(document.getElementById('root') as HTMLElement).render( | ||
| <HashRouter> | ||
|
There was a problem hiding this comment. Remove this prop - it's not part of the required API. Use |
||
| <App /> | ||
|
There was a problem hiding this comment. Remove this prop - it's not part of the required API. Compute disabled state internally as |
||
| </HashRouter>, | ||
| ); | ||
|
Comment on lines
4
to
+11
There was a problem hiding this comment. Props type includes wrong props. Task requires only: |
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The App component uses search params to manage page and perPage, but the task requires a stateless Pagination component that accepts props: total, perPage, currentPage (optional), and onPageChange. Here Pagination's props are different (pages, page, updateParams, handlePgeChange, lastPage, currentPage). This does not match the required API from the description — update the Pagination to accept the specified props (total, perPage, currentPage, onPageChange) or adjust the App to pass exactly those props as described in the task. (See checklist Core Functional Requirements.)