From 5ba1ec213ce71d747b9ab0059f4dddef8696a3f1 Mon Sep 17 00:00:00 2001 From: Nazar Date: Tue, 17 Feb 2026 22:14:54 +0100 Subject: [PATCH 1/3] sol1 --- README.md | 4 +- package-lock.json | 9 +- package.json | 2 +- src/App.tsx | 122 +++++++++-------------- src/components/Pagination/Pagination.tsx | 76 +++++++++++++- 5 files changed, 130 insertions(+), 83 deletions(-) diff --git a/README.md b/README.md index be8a8c6b6..4b13e90a6 100644 --- a/README.md +++ b/README.md @@ -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: @@ -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 `` with your Github username in the [DEMO LINK](https://.github.io/react_pagination/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://biconn.github.io/react_pagination/) and add it to the PR description. diff --git a/package-lock.json b/package-lock.json index bc04a7602..7fed12e13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,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", @@ -1183,10 +1183,11 @@ } }, "node_modules/@mate-academy/scripts": { - "version": "1.9.12", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", - "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index f412fefe6..617386d19 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.tsx b/src/App.tsx index 189a990c8..9b81e5fd4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,37 @@ -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}`); +export const items = getNumbers(1, 42).map(n => n); +// export const items = getNumbers(1, 42).map(n => `Item ${n}`); export const App: React.FC = () => { + const [page, setPage] = useState(1); + const [itemPerPage, setItemPerPage] = useState(5); + + function handlePageChange(newPageNum: number) { + setPage(newPageNum); + } + + function handlePerPageChange(tar: React.ChangeEvent) { + setItemPerPage(Number(tar.target.value)); + setPage(1); + } + + const start = itemPerPage * (page - 1) + 1; + const end = Math.min(itemPerPage * page, items.length); + + const pageStart = itemPerPage * (page - 1); + const pageEnd = itemPerPage * page; + return (

Items with Pagination

- Page 1 (items 1 - 5 of 42) + Page {page} (items {start} - {end} of {items.length})

@@ -19,11 +39,14 @@ export const App: React.FC = () => {
@@ -33,77 +56,26 @@ export const App: React.FC = () => {
{/* Move this markup to Pagination */} - + +
    -
  • Item 1
    • + {items + .filter(item => item > pageStart && item <= pageEnd) + .map(item => ( +
  • + Item {item} +
    • + ))} + {/*
  • Item 1
  • Item 2
  • Item 3
  • Item 4
    • -
  • Item 5
    • +
  • Item 5
    • */}
); diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index e417a09fc..9b6be9feb 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -1 +1,75 @@ -export const Pagination = () => {}; +// import { useState } from 'react'; +import { getNumbers } from '../../utils'; + +interface PaginationType { + total: number; + perPage: number; + currentPage: number; + onPageChange: ( + value: number, + ) => React.MouseEventHandler | undefined | void; +} + +export const Pagination = ({ + total, + perPage, + currentPage, + onPageChange, +}: PaginationType) => { + const lastPageNumber = Math.ceil(total / perPage); + const countOfPages = getNumbers(1, Math.ceil(total / perPage)); + + return ( + <> + + + ); +}; From 1afd378b3b9bda7e8b2d6b3c09d9e24bfe8fab2c Mon Sep 17 00:00:00 2001 From: Nazar Date: Sun, 22 Feb 2026 09:29:13 +0100 Subject: [PATCH 2/3] sol2 --- src/App.tsx | 13 +++++++------ src/components/Pagination/Pagination.tsx | 8 +++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 9b81e5fd4..0970368e1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,14 +11,15 @@ export const App: React.FC = () => { const [page, setPage] = useState(1); const [itemPerPage, setItemPerPage] = useState(5); - function handlePageChange(newPageNum: number) { - setPage(newPageNum); - } + const handlePageChange = (argPage: number) => { + setPage(argPage); + }; - function handlePerPageChange(tar: React.ChangeEvent) { - setItemPerPage(Number(tar.target.value)); + const handlePerPageChange = (e: React.ChangeEvent) => { + e.preventDefault(); + setItemPerPage(Number(e.target.value)); setPage(1); - } + }; const start = itemPerPage * (page - 1) + 1; const end = Math.min(itemPerPage * page, items.length); diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 9b6be9feb..3414361d0 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -4,16 +4,14 @@ import { getNumbers } from '../../utils'; interface PaginationType { total: number; perPage: number; - currentPage: number; - onPageChange: ( - value: number, - ) => React.MouseEventHandler | undefined | void; + currentPage?: number; + onPageChange: (value: number) => void; } export const Pagination = ({ total, perPage, - currentPage, + currentPage = 1, onPageChange, }: PaginationType) => { const lastPageNumber = Math.ceil(total / perPage); From 820b21e48add5b33d2f77f6f4d9bd44efc257e69 Mon Sep 17 00:00:00 2001 From: Nazar Date: Sun, 22 Feb 2026 09:45:32 +0100 Subject: [PATCH 3/3] sol3 --- src/components/Pagination/Pagination.tsx | 29 ++++++++++++++++-------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 3414361d0..5bc9f9777 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -26,9 +26,12 @@ export const Pagination = ({ className="page-link" href="#prev" aria-disabled={currentPage === 1 ? 'true' : 'false'} - onClick={ - currentPage !== 1 ? () => onPageChange(currentPage - 1) : () => {} - } + onClick={e => { + e.preventDefault(); + if (currentPage > 1) { + onPageChange(currentPage - 1); + } + }} > « @@ -43,7 +46,13 @@ export const Pagination = ({ data-cy="pageLink" className="page-link" href="#1" - onClick={() => onPageChange(item)} + onClick={e => { + e.preventDefault(); + + if (item !== currentPage) { + onPageChange(item); + } + }} > {item} @@ -58,11 +67,13 @@ export const Pagination = ({ className="page-link" href="#next" aria-disabled={currentPage === lastPageNumber ? 'true' : 'false'} - onClick={ - currentPage !== lastPageNumber - ? () => onPageChange(currentPage + 1) - : () => {} - } + onClick={e => { + e.preventDefault(); + + if (currentPage < lastPageNumber) { + onPageChange(currentPage + 1); + } + }} > »