From a9cecd0ae69d304a57c8403cd195008b0361bd99 Mon Sep 17 00:00:00 2001
From: Yuliia Voroniuk <juliasemchishin1545@gmail.com>
Date: Thu, 15 Jan 2026 15:58:49 +0200
Subject: [PATCH 1/5] added solution

---
 src/App.tsx                              | 112 ++++++++---------------
 src/components/Pagination/Pagination.tsx |  82 ++++++++++++++++-
 src/utils.ts                             |  10 ++
 3 files changed, 128 insertions(+), 76 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 189a990c8..49404ae21 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,25 +1,45 @@
-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);
+
+  function onPageChange(page: number): void {
+    if (page !== currentPage) {
+      setCurrentPage(page);
+    }
+  }
+
+  const startIndex = (currentPage - 1) * perPage;
+  const calculatedEndIndex = startIndex + perPage;
+  const endIndex = Math.min(calculatedEndIndex, items.length);
+
   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>
 
+      {/* зміна items на сторінці */}
       <div className="form-group row">
         <div className="col-3 col-sm-2 col-xl-1">
           <select
             data-cy="perPageSelector"
             id="perPageSelector"
-            className="form-control">
+            className="form-control"
+            onChange={e => {
+              setPerPage(Number(e.target.value));
+              setCurrentPage(1);
+            }}
+            value={perPage}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -32,78 +52,20 @@ 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={onPageChange}
+      />
+
+      {/*Items - список який відображаєтьс на сторінці, змінюється в залежності від вибраної кількості*/}
       <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>
+        {items.slice(startIndex, calculatedEndIndex).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..ee85d7024 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1 +1,81 @@
-export const Pagination = () => {};
+import { pagesArray } from '../../utils';
+
+interface PaginationType {
+  total: number;
+  perPage: number;
+  currentPage?: number;
+  onPageChange?: (page: number) => void;
+}
+
+// total - загальна кількісьть елементів
+// perPage - кількість елементів на сторінці
+// currentPage = 1 - //кількість сторінок яка може бути
+
+export const Pagination = ({
+  total,
+  perPage,
+  currentPage = 1,
+  onPageChange = () => {},
+}: PaginationType) => {
+  const pagesAmount = Math.ceil(total / perPage);
+  const pagesCountArray: number[] = pagesArray(pagesAmount);
+
+  return (
+    <ul className="pagination">
+      <li className={currentPage === 1 ? 'page-item disabled' : 'page-item'}>
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#prev"
+          aria-disabled={currentPage === 1 ? 'true' : 'false'}
+          onClick={() => {
+            if (currentPage > 1) {
+              onPageChange(currentPage - 1);
+            }
+          }}
+        >
+          «
+        </a>
+      </li>
+
+      {pagesCountArray.map(page => (
+        <li
+          className={page === currentPage ? 'page-item active' : 'page-item'}
+          key={page}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href={`#${page}`}
+            onClick={() => onPageChange(page)}
+          >
+            {page}
+          </a>
+        </li>
+      ))}
+      <li
+        className={
+          currentPage === pagesCountArray.length
+            ? 'page-item disabled'
+            : 'page-item'
+        }
+      >
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={
+            currentPage === pagesCountArray.length ? 'true' : 'false'
+          }
+          onClick={() => {
+            if (currentPage < pagesAmount) {
+              onPageChange(currentPage + 1);
+            }
+          }}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};
diff --git a/src/utils.ts b/src/utils.ts
index ab24e2b56..6f32ca84f 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -7,3 +7,13 @@ export function getNumbers(from: number, to: number): number[] {
 
   return numbers;
 }
+
+export function pagesArray(number: number): number[] {
+  const pages = [];
+
+  for (let i = 1; i <= number; i++) {
+    pages.push(i);
+  }
+
+  return pages;
+}

From 379cd72f8ed2154b0bbbeb486e0bd613481ecead Mon Sep 17 00:00:00 2001
From: Yuliia Voroniuk <juliasemchishin1545@gmail.com>
Date: Thu, 15 Jan 2026 16:41:45 +0200
Subject: [PATCH 2/5] added solution

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

diff --git a/src/App.tsx b/src/App.tsx
index 49404ae21..62572e503 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -61,7 +61,7 @@ export const App: React.FC = () => {
 
       {/*Items - список який відображаєтьс на сторінці, змінюється в залежності від вибраної кількості*/}
       <ul>
-        {items.slice(startIndex, calculatedEndIndex).map(item => (
+        {items.slice(startIndex, endIndex).map(item => (
           <li key={item} data-cy="item">
             {item}
           </li>
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index ee85d7024..c5d25159e 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -47,7 +47,11 @@ export const Pagination = ({
             data-cy="pageLink"
             className="page-link"
             href={`#${page}`}
-            onClick={() => onPageChange(page)}
+            onClick={() => {
+              if (page !== currentPage) {
+                onPageChange(page);
+              }
+            }}
           >
             {page}
           </a>

From 14426a435df0f8dc6c876d68c6e992e0b4cba7f9 Mon Sep 17 00:00:00 2001
From: Yuliia Voroniuk <juliasemchishin1545@gmail.com>
Date: Thu, 15 Jan 2026 22:44:52 +0200
Subject: [PATCH 3/5] added sol

---
 src/App.tsx                              | 18 +++++++++++++++---
 src/components/Pagination/Pagination.tsx | 19 ++++++++++---------
 src/index.tsx                            |  7 ++++++-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 62572e503..f1115c635 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,16 +2,27 @@ import React, { useState } from 'react';
 import './App.css';
 import { getNumbers } from './utils';
 import { Pagination } from './components/Pagination';
-
+import { useNavigate, useLocation } from 'react-router-dom';
 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 location = useLocation();
+  const navigate = useNavigate();
+  const params = new URLSearchParams(location.search);
+  const pageFromUrl = Number(params.get('page')) || 1;
+  const perPageFromUrl = Number(params.get('perPage')) || 5;
+
+  const [currentPage, setCurrentPage] = useState(pageFromUrl);
+  const [perPage, setPerPage] = useState(perPageFromUrl);
+
+  function udateUrl(page: number, perrPage: number) {
+    navigate(`?page=${page}&perPage=${perrPage}`, { replace: true });
+  }
 
   function onPageChange(page: number): void {
     if (page !== currentPage) {
       setCurrentPage(page);
+      udateUrl(page, perPage);
     }
   }
 
@@ -37,6 +48,7 @@ export const App: React.FC = () => {
             onChange={e => {
               setPerPage(Number(e.target.value));
               setCurrentPage(1);
+              udateUrl(1, Number(e.target.value));
             }}
             value={perPage}
           >
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index c5d25159e..31c7fb5df 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,4 +1,5 @@
 import { pagesArray } from '../../utils';
+import { Link } from 'react-router-dom';
 
 interface PaginationType {
   total: number;
@@ -23,10 +24,10 @@ export const Pagination = ({
   return (
     <ul className="pagination">
       <li className={currentPage === 1 ? 'page-item disabled' : 'page-item'}>
-        <a
+        <Link
+          to={`/?page=${currentPage - 1}&perPage=${perPage}`}
           data-cy="prevLink"
           className="page-link"
-          href="#prev"
           aria-disabled={currentPage === 1 ? 'true' : 'false'}
           onClick={() => {
             if (currentPage > 1) {
@@ -35,7 +36,7 @@ export const Pagination = ({
           }}
         >
           «
-        </a>
+        </Link>
       </li>
 
       {pagesCountArray.map(page => (
@@ -43,10 +44,10 @@ export const Pagination = ({
           className={page === currentPage ? 'page-item active' : 'page-item'}
           key={page}
         >
-          <a
+          <Link
+            to={`/?page=${page}&perPage=${perPage}`}
             data-cy="pageLink"
             className="page-link"
-            href={`#${page}`}
             onClick={() => {
               if (page !== currentPage) {
                 onPageChange(page);
@@ -54,7 +55,7 @@ export const Pagination = ({
             }}
           >
             {page}
-          </a>
+          </Link>
         </li>
       ))}
       <li
@@ -64,10 +65,10 @@ export const Pagination = ({
             : 'page-item'
         }
       >
-        <a
+        <Link
+          to={`/?page=${currentPage + 1}&perPage=${perPage}`}
           data-cy="nextLink"
           className="page-link"
-          href="#next"
           aria-disabled={
             currentPage === pagesCountArray.length ? 'true' : 'false'
           }
@@ -78,7 +79,7 @@ export const Pagination = ({
           }}
         >
           »
-        </a>
+        </Link>
       </li>
     </ul>
   );
diff --git a/src/index.tsx b/src/index.tsx
index 226f3f4bd..202bc516f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,10 @@
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 
 import { App } from './App';
 
-createRoot(document.getElementById('root') as HTMLElement).render(<App />);
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);

From 36602db54e79b80276dccd6eb118455712bd4180 Mon Sep 17 00:00:00 2001
From: Yuliia Voroniuk <juliasemchishin1545@gmail.com>
Date: Thu, 15 Jan 2026 23:24:07 +0200
Subject: [PATCH 4/5] added fix

---
 src/App.tsx                              | 36 +++++++++++-------------
 src/components/Pagination/Pagination.tsx | 17 +----------
 2 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f1115c635..4b8648bc7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,29 +1,29 @@
-import React, { useState } from 'react';
 import './App.css';
 import { getNumbers } from './utils';
 import { Pagination } from './components/Pagination';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
+import React from 'react';
 const items = getNumbers(1, 42).map(n => `Item ${n}`);
 
 export const App: React.FC = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const params = new URLSearchParams(location.search);
-  const pageFromUrl = Number(params.get('page')) || 1;
-  const perPageFromUrl = Number(params.get('perPage')) || 5;
+  const [searchParams, setSearchParams] = useSearchParams();
 
-  const [currentPage, setCurrentPage] = useState(pageFromUrl);
-  const [perPage, setPerPage] = useState(perPageFromUrl);
+  const currentPage = Number(searchParams.get('page')) || 1;
+  const perPage = Number(searchParams.get('perPage')) || 5;
 
-  function udateUrl(page: number, perrPage: number) {
-    navigate(`?page=${page}&perPage=${perrPage}`, { replace: true });
+  function onPageChange(newPage: number): void {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('page', newPage.toString());
+    setSearchParams(params);
   }
 
-  function onPageChange(page: number): void {
-    if (page !== currentPage) {
-      setCurrentPage(page);
-      udateUrl(page, perPage);
-    }
+  function onPerPageChange(newPerPage: number): void {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('perPage', newPerPage.toString());
+    params.set('page', '1');
+    setSearchParams(params);
   }
 
   const startIndex = (currentPage - 1) * perPage;
@@ -46,9 +46,7 @@ export const App: React.FC = () => {
             id="perPageSelector"
             className="form-control"
             onChange={e => {
-              setPerPage(Number(e.target.value));
-              setCurrentPage(1);
-              udateUrl(1, Number(e.target.value));
+              onPerPageChange(Number(e.target.value));
             }}
             value={perPage}
           >
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 31c7fb5df..5d865fb8a 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -29,11 +29,6 @@ export const Pagination = ({
           data-cy="prevLink"
           className="page-link"
           aria-disabled={currentPage === 1 ? 'true' : 'false'}
-          onClick={() => {
-            if (currentPage > 1) {
-              onPageChange(currentPage - 1);
-            }
-          }}
         >
           «
         </Link>
@@ -48,11 +43,6 @@ export const Pagination = ({
             to={`/?page=${page}&perPage=${perPage}`}
             data-cy="pageLink"
             className="page-link"
-            onClick={() => {
-              if (page !== currentPage) {
-                onPageChange(page);
-              }
-            }}
           >
             {page}
           </Link>
@@ -66,17 +56,12 @@ export const Pagination = ({
         }
       >
         <Link
-          to={`/?page=${currentPage + 1}&perPage=${perPage}`}
+          to={`/?page=${currentPage < pagesAmount ? currentPage + 1 : pagesAmount}&perPage=${perPage}`}
           data-cy="nextLink"
           className="page-link"
           aria-disabled={
             currentPage === pagesCountArray.length ? 'true' : 'false'
           }
-          onClick={() => {
-            if (currentPage < pagesAmount) {
-              onPageChange(currentPage + 1);
-            }
-          }}
         >
           »
         </Link>

From 1c482d4948de3597ad142f563423e01a698fd8b4 Mon Sep 17 00:00:00 2001
From: Yuliia Voroniuk <juliasemchishin1545@gmail.com>
Date: Thu, 15 Jan 2026 23:28:21 +0200
Subject: [PATCH 5/5] added fix

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

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 5d865fb8a..c09554890 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -16,7 +16,6 @@ export const Pagination = ({
   total,
   perPage,
   currentPage = 1,
-  onPageChange = () => {},
 }: PaginationType) => {
   const pagesAmount = Math.ceil(total / perPage);
   const pagesCountArray: number[] = pagesArray(pagesAmount);