Pagination

const totalPages = Math.ceil(totalItems / pageSize);

const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;

const visibleItems = items.slice(startIndex, endIndex);

/products?page=3&size=20

const params = new URLSearchParams(window.location.search);

const page = params.get('page');
const size = params.get('size');

import { useEffect, useMemo, useState } from 'react';

const products = Array.from({ length: 87 }, (_, index) => ({
  id: index + 1,
  name: `Товар ${index + 1}`,
  category: ['Електроніка', 'Книги', 'Одяг'][index % 3],
  price: 500 + index * 125,
}));

const allowedPageSizes = [5, 10, 20];

function getPaginationFromUrl() {
  const params = new URLSearchParams(window.location.search);

  const requestedSize = Number(params.get('size'));
  const pageSize = allowedPageSizes.includes(requestedSize)
    ? requestedSize
    : 10;

  const totalPages = Math.max(1, Math.ceil(products.length / pageSize));
  const requestedPage = Number(params.get('page'));
  const page = Number.isInteger(requestedPage)
    ? Math.min(Math.max(requestedPage, 1), totalPages)
    : 1;

  return {
    page,
    pageSize,
  };
}

function App() {
  const initialPagination = getPaginationFromUrl();

  const [page, setPage] = useState(initialPagination.page);
  const [pageSize, setPageSize] = useState(initialPagination.pageSize);

  const totalPages = Math.max(1, Math.ceil(products.length / pageSize));

  const visibleProducts = useMemo(() => {
    const startIndex = (page - 1) * pageSize;
    const endIndex = startIndex + pageSize;

    return products.slice(startIndex, endIndex);
  }, [page, pageSize]);

  useEffect(() => {
    function handlePopState() {
      const nextPagination = getPaginationFromUrl();

      setPage(nextPagination.page);
      setPageSize(nextPagination.pageSize);
    }

    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);

    params.set('page', String(page));
    params.set('size', String(pageSize));

    const nextSearch = `?${params.toString()}`;

    if (nextSearch !== window.location.search) {
      window.history.replaceState(null, '', nextSearch);
    }
  }, [page, pageSize]);

  useEffect(() => {
    if (page > totalPages) {
      setPage(totalPages);
    }
  }, [page, totalPages]);

  function handlePageChange(nextPage) {
    if (nextPage < 1 || nextPage > totalPages || nextPage === page) {
      return;
    }

    setPage(nextPage);
  }

  function handlePageSizeChange(event) {
    const nextPageSize = Number(event.target.value);

    setPageSize(nextPageSize);
    setPage(1);
  }

  return (
    <main style={{ maxWidth: 700, margin: '40px auto', padding: 16 }}>
      <h1>Каталог товарів</h1>

      <label>
        Товарів на сторінці:{' '}
        <select value={pageSize} onChange={handlePageSizeChange}>
          {allowedPageSizes.map((size) => (
            <option key={size} value={size}>
              {size}
            </option>
          ))}
        </select>
      </label>

      <p>
        Усього товарів: {products.length}. Поточна сторінка: {page} з{' '}
        {totalPages}.
      </p>

      <ul>
        {visibleProducts.map((product) => (
          <li key={product.id} style={{ marginBottom: 12 }}>
            <strong>{product.name}</strong>
            <br />
            Категорія: {product.category}
            <br />
            Ціна: {product.price} грн
          </li>
        ))}
      </ul>

      <nav aria-label="Пагінація">
        <button
          type="button"
          onClick={() => handlePageChange(page - 1)}
          disabled={page === 1}
        >
          Попередня
        </button>

        {Array.from({ length: totalPages }, (_, index) => {
          const pageNumber = index + 1;

          return (
            <button
              key={pageNumber}
              type="button"
              onClick={() => handlePageChange(pageNumber)}
              aria-current={pageNumber === page ? 'page' : undefined}
              style={{
                marginLeft: 4,
                fontWeight: pageNumber === page ? 'bold' : 'normal',
              }}
            >
              {pageNumber}
            </button>
          );
        })}

        <button
          type="button"
          onClick={() => handlePageChange(page + 1)}
          disabled={page === totalPages}
          style={{ marginLeft: 4 }}
        >
          Наступна
        </button>
      </nav>
    </main>
  );
}

export default App;

const params = new URLSearchParams(window.location.search);

const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + pageSize;

const visibleProducts = products.slice(startIndex, endIndex);

page = 3;
pageSize = 10;

startIndex = 20;
endIndex = 30;

window.history.replaceState(null, '', nextSearch);

window.history.pushState(null, '', nextSearch);

useEffect(() => {
  function handlePopState() {
    const nextPagination = getPaginationFromUrl();

    setPage(nextPagination.page);
    setPageSize(nextPagination.pageSize);
  }

  window.addEventListener('popstate', handlePopState);

  return () => {
    window.removeEventListener('popstate', handlePopState);
  };
}, []);

function handlePageSizeChange(event) {
  const nextPageSize = Number(event.target.value);

  setPageSize(nextPageSize);
  setPage(1);
}

/products?page=3&size=20

{
  "items": [
    {
      "id": 41,
      "name": "Товар 41"
    }
  ],
  "page": 3,
  "size": 20,
  "totalItems": 87
}

useEffect(() => {
  async function loadProducts() {
    const response = await fetch(`/api/products?page=${page}&size=${pageSize}`);
    const data = await response.json();

    setProducts(data.items);
    setTotalItems(data.totalItems);
  }

  loadProducts();
}, [page, pageSize]);

<nav aria-label="Пагінація">
  {/* Кнопки сторінок */}
</nav>

<button aria-current="page">3</button>

<button disabled={page === 1}>Попередня</button>
<button disabled={page === totalPages}>Наступна</button>

/products?page=-10&size=abc

const startIndex = (page - 1) * pageSize;

{visibleProducts.map((product) => (
  <li key={product.id}>{product.name}</li>
))}