From c8a8152afc7ae8a1ca7385fe351abac6378abcdc Mon Sep 17 00:00:00 2001
From: PavloMolytovnyk <pavlomolytovny@icloud.com>
Date: Mon, 22 Jun 2026 22:11:42 +0300
Subject: [PATCH 1/2] Change 1

---
 package-lock.json                        |   9 +-
 package.json                             |   2 +-
 src/App.tsx                              | 123 +++++++++--------------
 src/components/Pagination/Pagination.tsx |  78 +++++++++++++-
 4 files changed, 132 insertions(+), 80 deletions(-)

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..063615efb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,47 @@
-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}`);
 
+interface RenderingPages {
+  item: string[];
+  before: number;
+  to: number;
+}
+
 export const App: React.FC = () => {
+  const [count, setCount] = useState(1);
+  const [pages, setPages] = useState(3);
+
+  const minPage = count * pages - (pages - 1);
+  const maxPage = count * pages > items.length ? items.length : count * pages;
+
+  const handlePerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setPages(+event.target.value);
+    setCount(1);
+  };
+
+  const pageChange = (num: number) => setCount(num);
+
+  const renderPerPage = ({ partOfPage, before, to }: RenderingPages) => {
+    const slicedItems = partOfPage.slice(before, to);
+
+    return slicedItems.map(item => (
+      <li data-cy="item" key={item}>
+        {item}
+      </li>
+    ));
+  };
+
   return (
     <div className="container">
       <h1>Items with Pagination</h1>
 
       <p className="lead" data-cy="info">
-        Page 1 (items 1 - 5 of 42)
+        Page {count} (items {minPage} - {maxPage} of 42)
       </p>
 
       <div className="form-group row">
@@ -19,7 +49,9 @@ export const App: React.FC = () => {
           <select
             data-cy="perPageSelector"
             id="perPageSelector"
-            className="form-control">
+            className="form-control"
+            onChange={handlePerPageChange}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -32,78 +64,21 @@ 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
+        total={items.length}
+        perPage={pages}
+        currentPage={count}
+        onPageChange={page => {
+          pageChange(page);
+        }}
+      />
+
       <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>
+        {renderPerPage({
+          item: items,
+          before: minPage - 1,
+          to: maxPage,
+        })}
       </ul>
     </div>
   );
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index e417a09fc..35ca71b9c 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1 +1,77 @@
-export const Pagination = () => {};
+import React from 'react';
+import cn from 'classnames';
+import { getNumbers } from '../../utils';
+
+interface PaginationType {
+  total: number;
+  perPage: number;
+  currentPage?: number;
+  onPageChange: (page: number) => void;
+}
+
+export const Pagination = ({
+  total,
+  perPage,
+  currentPage = 1,
+  onPageChange,
+}: PaginationType) => {
+  const pages = getNumbers(1, Math.ceil(total / perPage));
+
+  return (
+    <>
+      <ul className="pagination">
+        <li className={cn(`page-item ${currentPage === 1 ? `disabled` : ``}`)}>
+          <a
+            data-cy="prevLink"
+            className="page-link"
+            href="#prev"
+            aria-disabled={currentPage === 1}
+            onClick={e => {
+              e.preventDefault();
+              onPageChange(currentPage - 1);
+            }}
+          >
+            «
+          </a>
+        </li>
+        {pages.map(page => (
+          <li
+            key={page}
+            className={cn(`page-item ${currentPage === page ? 'active' : ''}`)}
+          >
+            <a
+              data-cy="pageLink"
+              className="page-link"
+              href={`#${page}`}
+              onClick={e => {
+                e.preventDefault();
+                onPageChange(page);
+              }}
+            >
+              {page}
+            </a>
+          </li>
+        ))}
+
+        <li
+          className={cn(
+            `page-item ${currentPage === pages.length ? `disabled` : ``}`,
+          )}
+        >
+          <a
+            data-cy="nextLink"
+            className="page-link"
+            href="#next"
+            aria-disabled={currentPage === pages.length}
+            onClick={e => {
+              e.preventDefault();
+              onPageChange(currentPage + 1);
+            }}
+          >
+            »
+          </a>
+        </li>
+      </ul>
+    </>
+  );
+};

From 671859702959189a3efe3d816f9e58e8e7efdace Mon Sep 17 00:00:00 2001
From: PavloMolytovnyk <pavlomolytovny@icloud.com>
Date: Mon, 22 Jun 2026 22:23:00 +0300
Subject: [PATCH 2/2] Fixed issues

---
 src/App.tsx                              |  7 ++++---
 src/components/Pagination/Pagination.tsx | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 063615efb..55cef9d9a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,14 +7,14 @@ import { Pagination } from './components/Pagination';
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 interface RenderingPages {
-  item: string[];
+  partOfPage: string[];
   before: number;
   to: number;
 }
 
 export const App: React.FC = () => {
   const [count, setCount] = useState(1);
-  const [pages, setPages] = useState(3);
+  const [pages, setPages] = useState(5);
 
   const minPage = count * pages - (pages - 1);
   const maxPage = count * pages > items.length ? items.length : count * pages;
@@ -51,6 +51,7 @@ export const App: React.FC = () => {
             id="perPageSelector"
             className="form-control"
             onChange={handlePerPageChange}
+            value={pages}
           >
             <option value="3">3</option>
             <option value="5">5</option>
@@ -75,7 +76,7 @@ export const App: React.FC = () => {
 
       <ul>
         {renderPerPage({
-          item: items,
+          partOfPage: items,
           before: minPage - 1,
           to: maxPage,
         })}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 35ca71b9c..606ad401c 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -28,7 +28,10 @@ export const Pagination = ({
             aria-disabled={currentPage === 1}
             onClick={e => {
               e.preventDefault();
-              onPageChange(currentPage - 1);
+
+              if (currentPage > 1) {
+                onPageChange(currentPage - 1);
+              }
             }}
           >
             «
@@ -45,7 +48,10 @@ export const Pagination = ({
               href={`#${page}`}
               onClick={e => {
                 e.preventDefault();
-                onPageChange(page);
+
+                if (page !== currentPage) {
+                  onPageChange(page);
+                }
               }}
             >
               {page}
@@ -65,7 +71,10 @@ export const Pagination = ({
             aria-disabled={currentPage === pages.length}
             onClick={e => {
               e.preventDefault();
-              onPageChange(currentPage + 1);
+
+              if (currentPage < pages.length) {
+                onPageChange(currentPage + 1);
+              }
             }}
           >
             »