paginator

src/App.tsx

@@ -1,25 +1,81 @@
-import React from 'react';
+import React, { useState, useEffect } 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}`);
 
 export const App: React.FC = () => {
+  const getParamsFromUrl = () => {
+    const params = new URLSearchParams(window.location.search);
+    const perPageValue = Number(params.get('perPage')) || 5;
+    const rawPage = Number(params.get('page')) || 1;
+
+    const totalPages = Math.ceil(items.length / perPageValue) || 1;
+    const pageValue = Math.max(1, Math.min(rawPage, totalPages));
+
+    return { page: pageValue, perPage: perPageValue };
+  };
+
+  const [{ page, perPage }, setQueryParams] = useState(getParamsFromUrl);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      setQueryParams(getParamsFromUrl());
+    };
+
+    window.addEventListener('popstate', handlePopState);
+
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  const updateUrlParams = (newPage: number, newPerPage: number) => {
+    const params = new URLSearchParams();
+
+    params.set('page', String(newPage));
+    params.set('perPage', String(newPerPage));
+
+    const newUrl = `${window.location.pathname}?${params.toString()}`;
+
+    window.history.pushState({}, '', newUrl);
+
+    setQueryParams({ page: newPage, perPage: newPerPage });
+  };
+
+  const indexOfLastItem = page * 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>) => {
+    const newPerPage = Number(event.target.value);
+
+    updateUrlParams(1, newPerPage);
+  };
+
+  const handlePageChange = (newPageNum: number) => {
+    updateUrlParams(newPageNum, perPage);
+  };
+
   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 ${startItemNum} - ${endItemNum} of ${items.length})`}
       </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={handlePerPageChange}
+          >
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="10">10</option>
@@ -32,78 +88,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={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>
+        {visibleItems.map(item => (
+          <li key={item} data-cy="item">
+            {item}
+          </li>
+        ))}
       </ul>
     </div>
   );

src/components/Pagination/Pagination.tsx

@@ -1 +1,78 @@
-export const Pagination = () => {};
+import React from 'react';
+import classNames from 'classnames';
+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);
+
+  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={classNames('page-item', { disabled: isFirstPage })}>
+        <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={classNames('page-item', { active: currentPage === page })}
+        >
+          <a
+            data-cy="pageLink"
+            className="page-link"
+            href={`#${page}`}
+            onClick={e => handlePageClick(e, page)}
+          >
+            {page}
+          </a>
+        </li>
+      ))}
+
+      <li className={classNames('page-item', { disabled: isLastPage })}>
+        <a
+          data-cy="nextLink"
+          className="page-link"
+          href="#next"
+          aria-disabled={isLastPage ? 'true' : 'false'}
+          onClick={e => handlePageClick(e, currentPage + 1)}
+        >
+          »
+        </a>
+      </li>
+    </ul>
+  );
+};