add solution

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://RuslanV23.github.io/react_pagination/) and add it to the PR description.

src/App.tsx

@@ -1,25 +1,57 @@
 import React from 'react';
 import './App.css';
 import { getNumbers } from './utils';
+import { useSearchParams } from 'react-router-dom';
+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 [searchParams, setSearchParams] = useSearchParams();
+
+  const perPage = String(searchParams.get('perPage') || '5');
+  const page = String(searchParams.get('page') || '1');
+  const totalItems = items.length;
+
+  const start = +perPage * +page - +perPage;
+  const end = Math.min(+perPage * +page, totalItems);
+
+  const handlePageChange = (pageNumber: number) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('page', String(pageNumber));
+
+    setSearchParams(params);
+  };
+
   return (
     <div className="container">
       <h1>Items with Pagination</h1>
 
       <p className="lead" data-cy="info">
-        Page 1 (items 1 - 5 of 42)
+        {`Page ${page} (items ${start + 1} - ${end} of ${totalItems})`}
       </p>
 
       <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"
+            value={perPage}
+            onChange={event => {
+              const params = new URLSearchParams(searchParams);
+
+              if (page !== '1') {
+                params.set('page', '1');
+              }
+
+              params.set('perPage', event.target.value);
+
+              setSearchParams(params);
+            }}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -32,78 +64,23 @@ 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={totalItems}
+        perPage={+perPage}
+        currentPage={+page}
+        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>
+        {Array.from({ length: end - start }).map((_, index) => {
+          const correctIndex = index + start;
+
+          return (
+            <li data-cy="item" key={correctIndex}>
+              {items[correctIndex]}
+            </li>
+          );
+        })}
       </ul>
     </div>
   );

src/Root.tsx

@@ -0,0 +1,8 @@
+import { HashRouter } from 'react-router-dom';
+import App from './App';
+
+export const Root = () => (
+  <HashRouter>
+    <App />
+  </HashRouter>
+);

src/components/Pagination/Pagination.tsx

@@ -1 +1,86 @@
-export const Pagination = () => {};
+import classNames from 'classnames';
+import React from 'react';
+
+type Props = {
+  total: number;
+  perPage: number;
+  currentPage?: number;
+  onPageChange: (page: number) => void;
+};
+
+export const Pagination: React.FC<Props> = ({
+  total,
+  perPage,
+  currentPage = 1,
+  onPageChange,
+}) => {
+  const countPage = Math.ceil(total / perPage);
+
+  const disabledPrevLink = currentPage === 1;
+  const disabledNextLink = currentPage === countPage;
+
+  return (
+    <ul className="pagination">
+      <li className={classNames('page-item', { disabled: disabledPrevLink })}>
+        <a
+          data-cy="prevLink"
+          className="page-link"
+          href="#"
+          aria-disabled={disabledPrevLink}
+          onClick={event => {
+            event.preventDefault();
+            if (!disabledPrevLink) {
+              onPageChange(currentPage - 1);
+            }
+          }}
+        >
+          «
+        </a>
+      </li>
+      {Array.from({ length: countPage }, (_, index) => {
+        const count = index + 1;
+
+        return (
+          <li
+            className={classNames('page-item', {
+              active: currentPage === count,
+            })}
+            key={count}
+          >
+            <a
+              data-cy="pageLink"
+              className="page-link"
+              href="#"
+              onClick={event => {
+                event.preventDefault();
+                if (count !== currentPage) {
+                  onPageChange(count);
+                }
+              }}
+            >
+              {count}
+            </a>
+          </li>
+        );
+      })}
+      <li className={classNames('page-item', { disabled: disabledNextLink })}>
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={disabledNextLink}
+          onClick={event => {
+            event.preventDefault();
+            if (disabledNextLink) {
+              return;
+            }
+
+            onPageChange(currentPage + 1);
+          }}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};

src/index.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
 
-import { App } from './App';
+import { Root } from './Root';
 
-createRoot(document.getElementById('root') as HTMLElement).render(<App />);
+createRoot(document.getElementById('root') as HTMLElement).render(<Root />);