From a5721878716088dff33652b9a573890c5c7d7c45 Mon Sep 17 00:00:00 2001
From: naviailpach <ivan.chaplya13@gmail.com>
Date: Fri, 17 Apr 2026 16:13:11 +0300
Subject: [PATCH 1/3] add task solution

---
 README.md                                |  26 ++---
 src/App.tsx                              | 127 ++++++++++-------------
 src/components/Pagination/Pagination.tsx |  94 ++++++++++++++++-
 src/index.tsx                            |   7 +-
 4 files changed, 166 insertions(+), 88 deletions(-)

diff --git a/README.md b/README.md
index be8a8c6b6..568d448d8 100644
--- a/README.md
+++ b/README.md
@@ -2,29 +2,29 @@
 
 > 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:
-    ```jsx harmony
-    <Pagination
-      total={42} // total number of items to paginate
-      perPage={5} // number of items per page
-      currentPage={1} /* optional with 1 by default */
-      onPageChange={(page) => { ... }}
-    />
-    ```
+   ```jsx harmony
+   <Pagination
+     total={42} // total number of items to paginate
+     perPage={5} // number of items per page
+     currentPage={1} /* optional with 1 by default */
+     onPageChange={(page) => { ... }}
+   />
+   ```
 1. Keep the HTML stucture `data-cy` attributes;
 1. Show all the existing pages considering `total` and `perPage`
 1. Current page should be highlighted with `li.active`;
 1. `onPageChange` callback should be triggered only if page was changed;
 1. The `App` should listen to the `onPageChange` and save a new page;
 1. `«` and `»` links should open the prev and the next pages accordingly
-    - disable each of them if it is already the first or the last page (use `li.disabled` and `a[aria-disabled="true"]`)
+   - disable each of them if it is already the first or the last page (use `li.disabled` and `a[aria-disabled="true"]`)
 1. Show the pagination info inside `data-cy="info"` in the next format `Page 1 (items 1 - 5 of 42)`;
 1. Implement the `<select data-cy="perPageSelector">` with `3`, `5`, `10`, `20` options to change the `perPage`;
-    - show the 1st page after changing a `perPage`;
-1. (*) Use React Router to save `?page=2&perPage=7` in the URL and apply them on page load
+   - show the 1st page after changing a `perPage`;
+1. (\*) Use React Router to save `?page=2&perPage=7` in the URL and apply them on page load
 
 ## Instructions
 
@@ -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://naviailpach.github.io/react_pagination/) and add it to the PR description.
diff --git a/src/App.tsx b/src/App.tsx
index 189a990c8..06f812691 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,54 @@
+import { useSearchParams } from 'react-router-dom';
 import React 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}`);
+const total = items.length;
 
 export const App: React.FC = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const currentPage = Number(searchParams.get('page')) || 1;
+  const perPage = Number(searchParams.get('perPage')) || 5;
+
+  const totalPages = Math.max(1, Math.ceil(total / perPage));
+  const safePage = Math.min(currentPage, totalPages);
+
+  const handlePageChange = (page: number) => {
+    if (page !== safePage) {
+      setSearchParams({
+        page: String(page),
+        perPage: String(perPage),
+      });
+    }
+  };
+
+  const startIndex = (safePage - 1) * perPage;
+  const endIndex = startIndex + perPage;
+
+  const startItem = startIndex + 1;
+  const endItem = Math.min(endIndex, total);
+
+  const visibleItems = items.slice(startIndex, endIndex);
+
+  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = Number(event.currentTarget.value);
+
+    setSearchParams({
+      page: '1',
+      perPage: String(value),
+    });
+  };
+
   return (
     <div className="container">
       <h1>Items with Pagination</h1>
 
       <p className="lead" data-cy="info">
-        Page 1 (items 1 - 5 of 42)
+        {`Page ${safePage} (items ${startItem} - ${endItem} of ${total})`}
       </p>
 
       <div className="form-group row">
@@ -19,7 +56,10 @@ export const App: React.FC = () => {
           <select
             data-cy="perPageSelector"
             id="perPageSelector"
-            className="form-control">
+            className="form-control"
+            value={perPage}
+            onChange={handleSelectChange}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -32,78 +72,19 @@ 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={total}
+        perPage={perPage}
+        currentPage={safePage}
+        onPageChange={handlePageChange}
+      />
+
       <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..55af6192b 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1 +1,93 @@
-export const Pagination = () => {};
+import cn from 'classnames';
+
+import React from 'react';
+
+interface Props {
+  total: number;
+  perPage: number;
+  currentPage?: number;
+  onPageChange: (page: number) => void;
+}
+
+export const Pagination: React.FC<Props> = ({
+  total,
+  perPage,
+  currentPage = 1,
+  onPageChange,
+}) => {
+  const totalPages = Math.max(1, Math.ceil(total / perPage));
+
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+
+  return (
+    <ul className="pagination">
+      <li
+        className={cn('page-item', {
+          disabled: currentPage === 1,
+        })}
+      >
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={currentPage === 1}
+          onClick={event => {
+            event.preventDefault();
+
+            if (currentPage > 1) {
+              onPageChange(currentPage - 1);
+            }
+          }}
+        >
+          «
+        </a>
+      </li>
+
+      {pages.map(page => (
+        <li
+          key={page}
+          className={cn('page-item', {
+            active: page === currentPage,
+          })}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href="#page"
+            onClick={event => {
+              event.preventDefault();
+
+              if (page !== currentPage) {
+                onPageChange(page);
+              }
+            }}
+          >
+            {page}
+          </a>
+        </li>
+      ))}
+
+      <li
+        className={cn('page-item', {
+          disabled: currentPage === totalPages,
+        })}
+      >
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={currentPage === totalPages}
+          onClick={event => {
+            event.preventDefault();
+
+            if (currentPage < totalPages) {
+              onPageChange(currentPage + 1);
+            }
+          }}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
index 226f3f4bd..e928d76a6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,10 @@
+import { BrowserRouter } from 'react-router-dom';
 import { createRoot } from 'react-dom/client';
 
 import { App } from './App';
 
-createRoot(document.getElementById('root') as HTMLElement).render(<App />);
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);

From 1c04e68cf54767dd27e5468434fb9961eb0a1101 Mon Sep 17 00:00:00 2001
From: naviailpach <ivan.chaplya13@gmail.com>
Date: Fri, 17 Apr 2026 16:31:05 +0300
Subject: [PATCH 2/3] add task solution

---
 src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 06f812691..5ea572346 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,7 +15,7 @@ export const App: React.FC = () => {
   const perPage = Number(searchParams.get('perPage')) || 5;
 
   const totalPages = Math.max(1, Math.ceil(total / perPage));
-  const safePage = Math.min(currentPage, totalPages);
+  const safePage = Math.max(1, Math.min(currentPage, totalPages));
 
   const handlePageChange = (page: number) => {
     if (page !== safePage) {

From af0501f0c30e00990cea99ef130fabae97f73470 Mon Sep 17 00:00:00 2001
From: naviailpach <ivan.chaplya13@gmail.com>
Date: Sat, 18 Apr 2026 22:40:32 +0300
Subject: [PATCH 3/3] solution

---
 package-lock.json | 70 +++++++++++++++++++++++++++++++++++++++++++----
 package.json      |  3 +-
 2 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bc04a7602..4945a9803 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": "^7.14.1",
         "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",
@@ -3256,7 +3258,8 @@
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
     },
     "node_modules/clean-stack": {
       "version": "2.2.0",
@@ -3403,6 +3406,19 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -8734,6 +8750,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.1.tgz",
+      "integrity": "sha512-5BCvFskyAAVumqhEKh/iPhLOIkfxcEUz8WqFIARCkMg8hZZzDYX9CtwxXA0e+qT8zAxmMC0x3Ckb9iMONwc5jg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.14.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.1.tgz",
+      "integrity": "sha512-ZkrQuwwhGibjQLqH1eCdyiZyLWglPxzxdl5tgwgKEyCSGC76vmAjleGocRe3J/MLfzMUIKwaFJWpFVJhK3d2xA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.14.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -9232,6 +9286,12 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "dev": true
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
diff --git a/package.json b/package.json
index f412fefe6..43d2f9d9a 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": "^7.14.1",
     "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",