From cf563314934f788c5ed13562fe4626f45e4ea84e Mon Sep 17 00:00:00 2001
From: Iryna <Yurchak.Iryna2017@gmail.com>
Date: Wed, 28 Jan 2026 17:11:50 +0200
Subject: [PATCH 1/4] Solution

---
 src/App.tsx                              | 104 +++++++----------------
 src/components/Pagination/Pagination.tsx |  79 ++++++++++++++++-
 2 files changed, 107 insertions(+), 76 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 189a990c8..382dcaa40 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,25 @@
-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 App: React.FC = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [perPage, setPerPage] = useState(5);
+  const startIndex = (currentPage - 1) * perPage;
+  const endIndex = Math.min(startIndex + perPage, items.length);
+  const visibleItems = items.slice(startIndex, startIndex + perPage);
+
   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 {startIndex + 1} - {endIndex} of{' '}
+        {items.length})
       </p>
 
       <div className="form-group row">
@@ -19,7 +27,14 @@ export const App: React.FC = () => {
           <select
             data-cy="perPageSelector"
             id="perPageSelector"
-            className="form-control">
+            className="form-control"
+            value={perPage}
+            onChange={event => {
+              setPerPage(Number(event.target.value));
+
+              setCurrentPage(1);
+            }}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -31,79 +46,18 @@ export const App: React.FC = () => {
           items per page
         </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={perPage}
+        currentPage={currentPage}
+        onPageChange={setCurrentPage}
+      />
       <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>
+        {visibleItems.map(item => (
+          <li key={item} data-cy="item">
+            {item}
+          </li>
+        ))}
       </ul>
     </div>
   );
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index e417a09fc..63aef1555 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1 +1,78 @@
-export const Pagination = () => {};
+import React from 'react';
+type PaginationProps = {
+  total: number;
+  perPage: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+};
+export const Pagination: React.FC<PaginationProps> = ({
+  total,
+  perPage,
+  currentPage,
+  onPageChange,
+}) => {
+  const pagesCount = Math.ceil(total / perPage);
+  const pages = Array.from({ length: pagesCount }, (_, index) => index + 1);
+
+  return (
+    <ul className="pagination">
+      <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={currentPage === 1}
+          onClick={e => {
+            e.preventDefault();
+            if (currentPage > 1) {
+              onPageChange(currentPage - 1);
+            }
+          }}
+        >
+          «
+        </a>
+      </li>
+
+      {pages.map(page => (
+        <li
+          key={page}
+          className={`page-item ${page === currentPage ? 'active' : ''}`}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href={`#${page}`}
+            onClick={e => {
+              e.preventDefault();
+              if (page !== currentPage) {
+                onPageChange(page);
+              }
+            }}
+          >
+            {page}
+          </a>
+        </li>
+      ))}
+
+      {/* Next */}
+      <li
+        className={`page-item ${currentPage === pagesCount ? 'disabled' : ''}`}
+      >
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={currentPage === pagesCount}
+          onClick={e => {
+            e.preventDefault();
+            if (currentPage < pagesCount) {
+              onPageChange(currentPage + 1);
+            }
+          }}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};

From 601a2634c3ac083f921b3f09792bbcb446f21923 Mon Sep 17 00:00:00 2001
From: Iryna <Yurchak.Iryna2017@gmail.com>
Date: Wed, 28 Jan 2026 18:28:08 +0200
Subject: [PATCH 2/4] New solution

---
 src/App.tsx                              | 34 +++++++++++++++++-------
 src/components/Pagination/Pagination.tsx |  5 ++--
 src/index.tsx                            | 16 ++++++++---
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 382dcaa40..1b048a691 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,33 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './App.css';
 import { getNumbers } from './utils';
 import { Pagination } from './components/Pagination';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useSearchParams } from 'react-router-dom';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [perPage, setPerPage] = useState(5);
+  const [searchParams, setSearchParams] = useSearchParams();
+  // Беремо currentPage і perPage з URL, дефолт 1 та 5
+  const currentPage = Number(searchParams.get('page') ?? 1);
+  const perPage = Number(searchParams.get('perPage') ?? 5);
+
+  // Функція для зміни сторінки
+  const setPage = (page: number) => {
+    setSearchParams({ page: String(page), perPage: String(perPage) });
+  };
+
+  // Функція для зміни perPage (скидає сторінку на 1)
+  const setPerPageValue = (value: number) => {
+    setSearchParams({ page: '1', perPage: String(value) });
+  };
+
+  // Обчислюємо які елементи показувати
   const startIndex = (currentPage - 1) * perPage;
   const endIndex = Math.min(startIndex + perPage, items.length);
-  const visibleItems = items.slice(startIndex, startIndex + perPage);
+  const visibleItems = items.slice(startIndex, endIndex);
 
   return (
     <div className="container">
@@ -29,11 +45,7 @@ export const App: React.FC = () => {
             id="perPageSelector"
             className="form-control"
             value={perPage}
-            onChange={event => {
-              setPerPage(Number(event.target.value));
-
-              setCurrentPage(1);
-            }}
+            onChange={event => setPerPageValue(Number(event.target.value))}
           >
             <option value="3">3</option>
             <option value="5">5</option>
@@ -46,12 +58,14 @@ export const App: React.FC = () => {
           items per page
         </label>
       </div>
+
       <Pagination
         total={items.length}
         perPage={perPage}
         currentPage={currentPage}
-        onPageChange={setCurrentPage}
+        onPageChange={setPage}
       />
+
       <ul>
         {visibleItems.map(item => (
           <li key={item} data-cy="item">
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 63aef1555..6c3c4a5bb 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 type PaginationProps = {
   total: number;
   perPage: number;
-  currentPage: number;
+  currentPage?: number;
   onPageChange: (page: number) => void;
 };
 export const Pagination: React.FC<PaginationProps> = ({
   total,
   perPage,
-  currentPage,
+  currentPage = 1,
   onPageChange,
 }) => {
   const pagesCount = Math.ceil(total / perPage);
@@ -54,7 +54,6 @@ export const Pagination: React.FC<PaginationProps> = ({
         </li>
       ))}
 
-      {/* Next */}
       <li
         className={`page-item ${currentPage === pagesCount ? 'disabled' : ''}`}
       >
diff --git a/src/index.tsx b/src/index.tsx
index 226f3f4bd..4099a6974 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,15 @@
-import { createRoot } from 'react-dom/client';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { BrowserRouter } from 'react-router-dom';
 
-import { App } from './App';
+const root = ReactDOM.createRoot(document.getElementById('root')!);
 
-createRoot(document.getElementById('root') as HTMLElement).render(<App />);
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+);

From 7b883fb91fd49f7b869b15c25ee1955fb5d854ec Mon Sep 17 00:00:00 2001
From: Iryna <Yurchak.Iryna2017@gmail.com>
Date: Wed, 28 Jan 2026 18:48:37 +0200
Subject: [PATCH 3/4] Impruved solution

---
 src/App.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1b048a691..5c497f7b8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,21 +10,17 @@ const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  // Беремо currentPage і perPage з URL, дефолт 1 та 5
   const currentPage = Number(searchParams.get('page') ?? 1);
   const perPage = Number(searchParams.get('perPage') ?? 5);
 
-  // Функція для зміни сторінки
   const setPage = (page: number) => {
     setSearchParams({ page: String(page), perPage: String(perPage) });
   };
 
-  // Функція для зміни perPage (скидає сторінку на 1)
   const setPerPageValue = (value: number) => {
     setSearchParams({ page: '1', perPage: String(value) });
   };
 
-  // Обчислюємо які елементи показувати
   const startIndex = (currentPage - 1) * perPage;
   const endIndex = Math.min(startIndex + perPage, items.length);
   const visibleItems = items.slice(startIndex, endIndex);

From 508c7b7a2d686d7bfc8543898ef1c2737292e103 Mon Sep 17 00:00:00 2001
From: Iryna <Yurchak.Iryna2017@gmail.com>
Date: Wed, 28 Jan 2026 21:46:56 +0200
Subject: [PATCH 4/4] Fixed solution

---
 README.md                                |  4 +-
 package-lock.json                        | 51 ++++++++++++++++++++++--
 package.json                             |  3 +-
 src/components/Pagination/Pagination.tsx |  1 +
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index be8a8c6b6..f1ac4f68e 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 `<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://IrynaYurchak.github.io/react_pagination/) and add it to the PR description.
diff --git a/package-lock.json b/package-lock.json
index bc04a7602..1ad7247b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,11 +15,12 @@
         "classnames": "^2.5.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.22.3",
         "react-transition-group": "^4.4.5"
       },
       "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 +1184,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",
@@ -1874,6 +1876,15 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
@@ -8734,6 +8745,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.2",
+        "react-router": "6.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index f412fefe6..20e092058 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,12 @@
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.3",
     "react-transition-group": "^4.4.5"
   },
   "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/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 6c3c4a5bb..18a209a1b 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 type PaginationProps = {
   total: number;
   perPage: number;