From 39c3d799e28f1527cfe75adb34f5a34a95372e4d Mon Sep 17 00:00:00 2001
From: masteryada378 <masteryada378@gmail.com>
Date: Fri, 26 Jun 2026 08:22:43 +0300
Subject: [PATCH 1/7] paginator

---
 src/App.tsx                              | 115 ++++++++---------------
 src/components/Pagination/Pagination.tsx |  80 +++++++++++++++-
 2 files changed, 118 insertions(+), 77 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 189a990c8..a6b3715cb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,36 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import { getNumbers } from './utils';
+import { Pagination } from './components/Pagination/Pagination';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const items = getNumbers(1, 42).map(n => `Item ${n}`);
+const items = getNumbers(1, 420).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [perPage, setPerPage] = useState<number>(5);
+
+  const indexOfLastItem = currentPage * perPage;
+  const indexOfFirstItem = indexOfLastItem - perPage;
+  const visibleItems = items.slice(indexOfFirstItem, indexOfLastItem);
+
+  const startItemNum = items.length === 0 ? 0 : indexOfFirstItem + 1;
+  const endItemNum = Math.min(indexOfLastItem, items.length);
+
+  const handlePerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setPerPage(Number(event.target.value));
+    setCurrentPage(1);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
   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 ${startItemNum} - ${endItemNum} of ${items.length})`}
       </p>
 
       <div className="form-group row">
@@ -19,7 +38,10 @@ export const App: React.FC = () => {
           <select
             data-cy="perPageSelector"
             id="perPageSelector"
-            className="form-control">
+            className="form-control"
+            value={perPage}
+            onChange={handlePerPageChange}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -32,78 +54,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={items.length}
+        perPage={perPage}
+        currentPage={currentPage}
+        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..72f957278 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1 +1,79 @@
-export const Pagination = () => {};
+import React from 'react';
+import { getNumbers } from '../../utils';
+
+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.ceil(total / perPage);
+
+  // Якщо сторінка всього одна або їх немає, пагінацію можна не показувати (або показувати 1 сторінку)
+  const pages = getNumbers(1, totalPages);
+
+  const handlePageClick = (
+    event: React.MouseEvent<HTMLAnchorElement>,
+    page: number,
+  ) => {
+    event.preventDefault();
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange(page);
+    }
+  };
+
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+
+  return (
+    <ul className="pagination">
+      <li className={`page-item ${isFirstPage ? 'disabled' : ''}`}>
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={isFirstPage ? 'true' : 'false'}
+          onClick={e => handlePageClick(e, currentPage - 1)}
+        >
+          «
+        </a>
+      </li>
+
+      {pages.map(page => (
+        <li
+          key={page}
+          className={`page-item ${currentPage === page ? 'active' : ''}`}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href={`#${page}`}
+            onClick={e => handlePageClick(e, page)}
+          >
+            {page}
+          </a>
+        </li>
+      ))}
+
+      <li className={`page-item ${isLastPage ? 'disabled' : ''}`}>
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={isLastPage ? 'true' : 'false'}
+          onClick={e => handlePageClick(e, currentPage + 1)}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};

From 80b74f69789779b8d2dc6814de172504ea5eeed7 Mon Sep 17 00:00:00 2001
From: masteryada378 <masteryada378@gmail.com>
Date: Fri, 26 Jun 2026 08:52:24 +0300
Subject: [PATCH 2/7] upd

---
 src/App.tsx | 46 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a6b3715cb..86fdd0c73 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,44 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import './App.css';
 import { getNumbers } from './utils';
 import { Pagination } from './components/Pagination/Pagination';
 
-const items = getNumbers(1, 420).map(n => `Item ${n}`);
+const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const [perPage, setPerPage] = useState<number>(5);
+  const getParamsFromUrl = () => {
+    const params = new URLSearchParams(window.location.search);
+    const page = Number(params.get('page')) || 1;
+    const perPage = Number(params.get('perPage')) || 5;
+
+    return { page, perPage };
+  };
+
+  const [{ page: currentPage, perPage }, setQueryParams] =
+    useState(getParamsFromUrl);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      setQueryParams(getParamsFromUrl());
+    };
+
+    window.addEventListener('popstate', handlePopState);
+
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  const updateUrlParams = (pageValue: number, perPageValue: number) => {
+    const params = new URLSearchParams();
+
+    params.set('page', String(pageValue));
+    params.set('perPage', String(perPageValue));
+
+    const newUrl = `${window.location.pathname}?${params.toString()}`;
+
+    window.history.pushState({}, '', newUrl);
+
+    setQueryParams({ page: pageValue, perPage: perPageValue });
+  };
 
   const indexOfLastItem = currentPage * perPage;
   const indexOfFirstItem = indexOfLastItem - perPage;
@@ -17,12 +48,13 @@ export const App: React.FC = () => {
   const endItemNum = Math.min(indexOfLastItem, items.length);
 
   const handlePerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setPerPage(Number(event.target.value));
-    setCurrentPage(1);
+    const newPerPage = Number(event.target.value);
+
+    updateUrlParams(1, newPerPage);
   };
 
   const handlePageChange = (page: number) => {
-    setCurrentPage(page);
+    updateUrlParams(page, perPage);
   };
 
   return (

From 587f3196b646b51a9f0324be696a8aafd42f2b13 Mon Sep 17 00:00:00 2001
From: masteryada378 <masteryada378@gmail.com>
Date: Fri, 26 Jun 2026 09:03:00 +0300
Subject: [PATCH 3/7] 2upd

---
 src/App.tsx | 51 +++++++++++++++------------------------------------
 1 file changed, 15 insertions(+), 36 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 86fdd0c73..5523f543f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
 import './App.css';
 import { getNumbers } from './utils';
 import { Pagination } from './components/Pagination/Pagination';
@@ -6,39 +7,13 @@ import { Pagination } from './components/Pagination/Pagination';
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
-  const getParamsFromUrl = () => {
-    const params = new URLSearchParams(window.location.search);
-    const page = Number(params.get('page')) || 1;
-    const perPage = Number(params.get('perPage')) || 5;
+  const [searchParams, setSearchParams] = useSearchParams();
 
-    return { page, perPage };
-  };
-
-  const [{ page: currentPage, perPage }, setQueryParams] =
-    useState(getParamsFromUrl);
-
-  useEffect(() => {
-    const handlePopState = () => {
-      setQueryParams(getParamsFromUrl());
-    };
-
-    window.addEventListener('popstate', handlePopState);
-
-    return () => window.removeEventListener('popstate', handlePopState);
-  }, []);
-
-  const updateUrlParams = (pageValue: number, perPageValue: number) => {
-    const params = new URLSearchParams();
+  const perPage = Number(searchParams.get('perPage')) || 5;
+  const rawPage = Number(searchParams.get('page')) || 1;
 
-    params.set('page', String(pageValue));
-    params.set('perPage', String(perPageValue));
-
-    const newUrl = `${window.location.pathname}?${params.toString()}`;
-
-    window.history.pushState({}, '', newUrl);
-
-    setQueryParams({ page: pageValue, perPage: perPageValue });
-  };
+  const totalPages = Math.ceil(items.length / perPage);
+  const currentPage = Math.max(1, Math.min(rawPage, totalPages));
 
   const indexOfLastItem = currentPage * perPage;
   const indexOfFirstItem = indexOfLastItem - perPage;
@@ -48,13 +23,17 @@ export const App: React.FC = () => {
   const endItemNum = Math.min(indexOfLastItem, items.length);
 
   const handlePerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const newPerPage = Number(event.target.value);
-
-    updateUrlParams(1, newPerPage);
+    setSearchParams({
+      page: '1',
+      perPage: event.target.value,
+    });
   };
 
   const handlePageChange = (page: number) => {
-    updateUrlParams(page, perPage);
+    setSearchParams({
+      page: String(page),
+      perPage: String(perPage),
+    });
   };
 
   return (

From 66bd539f3a35c76dce98cac38a4234ce212c12ad Mon Sep 17 00:00:00 2001
From: masteryada378 <masteryada378@gmail.com>
Date: Fri, 26 Jun 2026 10:55:07 +0300
Subject: [PATCH 4/7] 2.1upd

---
 src/App.tsx | 69 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5523f543f..be02dedb4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useSearchParams } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
 import './App.css';
 import { getNumbers } from './utils';
 import { Pagination } from './components/Pagination/Pagination';
@@ -7,15 +6,50 @@ import { Pagination } from './components/Pagination/Pagination';
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
+  // Функція для зчитування параметрів прямо з URL
+  const getParamsFromUrl = () => {
+    const params = new URLSearchParams(window.location.search);
+    const perPageValue = Number(params.get('perPage')) || 5;
+    const rawPage = Number(params.get('page')) || 1;
 
-  const perPage = Number(searchParams.get('perPage')) || 5;
-  const rawPage = Number(searchParams.get('page')) || 1;
+    // Валідація (clamping) сторінки, про яку просив ментор
+    const totalPages = Math.ceil(items.length / perPageValue) || 1;
+    const pageValue = Math.max(1, Math.min(rawPage, totalPages));
 
-  const totalPages = Math.ceil(items.length / perPage);
-  const currentPage = Math.max(1, Math.min(rawPage, totalPages));
+    return { page: pageValue, perPage: perPageValue };
+  };
+
+  // Єдиний стейт для синхронізації з URL
+  const [{ page, perPage }, setQueryParams] = useState(getParamsFromUrl);
+
+  // Слухаємо кнопку "Назад/Вперед" у браузері
+  useEffect(() => {
+    const handlePopState = () => {
+      setQueryParams(getParamsFromUrl());
+    };
+
+    window.addEventListener('popstate', handlePopState);
+
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  // Оновлюємо URL та стейт без використання react-router-dom
+  const updateUrlParams = (newPage: number, newPerPage: number) => {
+    const params = new URLSearchParams();
 
-  const indexOfLastItem = currentPage * perPage;
+    params.set('page', String(newPage));
+    params.set('perPage', String(newPerPage));
+
+    const newUrl = `${window.location.pathname}?${params.toString()}`;
+
+    window.history.pushState({}, '', newUrl);
+
+    // Оновлюємо стейт (використовуємо правильні ключі для TypeScript)
+    setQueryParams({ page: newPage, perPage: newPerPage });
+  };
+
+  // Обчислюємо індекси для відображення елементів
+  const indexOfLastItem = page * perPage;
   const indexOfFirstItem = indexOfLastItem - perPage;
   const visibleItems = items.slice(indexOfFirstItem, indexOfLastItem);
 
@@ -23,17 +57,14 @@ export const App: React.FC = () => {
   const endItemNum = Math.min(indexOfLastItem, items.length);
 
   const handlePerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSearchParams({
-      page: '1',
-      perPage: event.target.value,
-    });
+    const newPerPage = Number(event.target.value);
+
+    // При зміні кількості елементів завжди скидаємо на 1 сторінку
+    updateUrlParams(1, newPerPage);
   };
 
-  const handlePageChange = (page: number) => {
-    setSearchParams({
-      page: String(page),
-      perPage: String(perPage),
-    });
+  const handlePageChange = (newPageNum: number) => {
+    updateUrlParams(newPageNum, perPage);
   };
 
   return (
@@ -41,7 +72,7 @@ export const App: React.FC = () => {
       <h1>Items with Pagination</h1>
 
       <p className="lead" data-cy="info">
-        {`Page ${currentPage} (items ${startItemNum} - ${endItemNum} of ${items.length})`}
+        {`Page ${page} (items ${startItemNum} - ${endItemNum} of ${items.length})`}
       </p>
 
       <div className="form-group row">
@@ -68,7 +99,7 @@ export const App: React.FC = () => {
       <Pagination
         total={items.length}
         perPage={perPage}
-        currentPage={currentPage}
+        currentPage={page}
         onPageChange={handlePageChange}
       />
 

From 084b54f2b008f3816c543cccc4e9f1b7bec976b3 Mon Sep 17 00:00:00 2001
From: masteryada378 <masteryada378@gmail.com>
Date: Fri, 26 Jun 2026 11:25:02 +0300
Subject: [PATCH 5/7] 2.2 upd

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

diff --git a/src/App.tsx b/src/App.tsx
index be02dedb4..ffc5d1628 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,23 +6,19 @@ import { Pagination } from './components/Pagination/Pagination';
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
-  // Функція для зчитування параметрів прямо з URL
   const getParamsFromUrl = () => {
     const params = new URLSearchParams(window.location.search);
     const perPageValue = Number(params.get('perPage')) || 5;
     const rawPage = Number(params.get('page')) || 1;
 
-    // Валідація (clamping) сторінки, про яку просив ментор
     const totalPages = Math.ceil(items.length / perPageValue) || 1;
     const pageValue = Math.max(1, Math.min(rawPage, totalPages));
 
     return { page: pageValue, perPage: perPageValue };
   };
 
-  // Єдиний стейт для синхронізації з URL
   const [{ page, perPage }, setQueryParams] = useState(getParamsFromUrl);
 
-  // Слухаємо кнопку "Назад/Вперед" у браузері
   useEffect(() => {
     const handlePopState = () => {
       setQueryParams(getParamsFromUrl());
@@ -33,7 +29,6 @@ export const App: React.FC = () => {
     return () => window.removeEventListener('popstate', handlePopState);
   }, []);
 
-  // Оновлюємо URL та стейт без використання react-router-dom
   const updateUrlParams = (newPage: number, newPerPage: number) => {
     const params = new URLSearchParams();
 
@@ -44,11 +39,9 @@ export const App: React.FC = () => {
 
     window.history.pushState({}, '', newUrl);
 
-    // Оновлюємо стейт (використовуємо правильні ключі для TypeScript)
     setQueryParams({ page: newPage, perPage: newPerPage });
   };
 
-  // Обчислюємо індекси для відображення елементів
   const indexOfLastItem = page * perPage;
   const indexOfFirstItem = indexOfLastItem - perPage;
   const visibleItems = items.slice(indexOfFirstItem, indexOfLastItem);
@@ -59,7 +52,6 @@ export const App: React.FC = () => {
   const handlePerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newPerPage = Number(event.target.value);
 
-    // При зміні кількості елементів завжди скидаємо на 1 сторінку
     updateUrlParams(1, newPerPage);
   };
 

From a100682d01d392e3c0d9d9774f89d252a3a6c599 Mon Sep 17 00:00:00 2001
From: masteryada378 <masteryada378@gmail.com>
Date: Fri, 26 Jun 2026 11:26:49 +0300
Subject: [PATCH 6/7] 2.21 upd

---
 src/components/Pagination/Pagination.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 72f957278..187282c75 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -14,10 +14,8 @@ export const Pagination: React.FC<Props> = ({
   currentPage = 1,
   onPageChange,
 }) => {
-  // Рахуємо загальну кількість сторінок
   const totalPages = Math.ceil(total / perPage);
 
-  // Якщо сторінка всього одна або їх немає, пагінацію можна не показувати (або показувати 1 сторінку)
   const pages = getNumbers(1, totalPages);
 
   const handlePageClick = (

From 6513e8bf94937e78c347d43496fe23064b5cbe07 Mon Sep 17 00:00:00 2001
From: masteryada378 <masteryada378@gmail.com>
Date: Sat, 27 Jun 2026 21:40:59 +0300
Subject: [PATCH 7/7] add classNames

---
 src/components/Pagination/Pagination.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 187282c75..5056513e3 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { getNumbers } from '../../utils';
 
 interface Props {
@@ -33,7 +34,7 @@ export const Pagination: React.FC<Props> = ({
 
   return (
     <ul className="pagination">
-      <li className={`page-item ${isFirstPage ? 'disabled' : ''}`}>
+      <li className={classNames('page-item', { disabled: isFirstPage })}>
         <a
           data-cy="prevLink"
           className="page-link"
@@ -48,7 +49,7 @@ export const Pagination: React.FC<Props> = ({
       {pages.map(page => (
         <li
           key={page}
-          className={`page-item ${currentPage === page ? 'active' : ''}`}
+          className={classNames('page-item', { active: currentPage === page })}
         >
           <a
             data-cy="pageLink"
@@ -61,7 +62,7 @@ export const Pagination: React.FC<Props> = ({
         </li>
       ))}
 
-      <li className={`page-item ${isLastPage ? 'disabled' : ''}`}>
+      <li className={classNames('page-item', { disabled: isLastPage })}>
         <a
           data-cy="nextLink"
           className="page-link"