Query-параметри URL

const [searchParams, setSearchParams] = useSearchParams();

/products?category=books&page=2

const category = searchParams.get("category");
const page = searchParams.get("page");

console.log(category); // "books"
console.log(page); // "2"

const page = Number(searchParams.get("page")) || 1;

setSearchParams({
  category: "books",
  page: "1",
});

/products?category=books&page=1

setSearchParams({
  category: "",
  page: "1",
});

setSearchParams((currentParams) => {
  const nextParams = new URLSearchParams(currentParams);
  nextParams.delete("category");
  nextParams.set("page", "1");
  return nextParams;
});

/products?category=books

const category = searchParams.get("category") || "";

const filteredProducts = products.filter((product) => {
  return category === "" || product.category === category;
});

function handleCategoryChange(event) {
  const category = event.target.value;

  setSearchParams((currentParams) => {
    const nextParams = new URLSearchParams(currentParams);

    if (category) {
      nextParams.set("category", category);
    } else {
      nextParams.delete("category");
    }

    nextParams.set("page", "1");
    return nextParams;
  });
}

/products?sort=price-asc
/products?sort=price-desc

const sort = searchParams.get("sort") || "name-asc";

const sortedProducts = [...filteredProducts].sort((firstProduct, secondProduct) => {
  if (sort === "price-asc") {
    return firstProduct.price - secondProduct.price;
  }

  if (sort === "price-desc") {
    return secondProduct.price - firstProduct.price;
  }

  return firstProduct.name.localeCompare(secondProduct.name);
});

const page = Number(searchParams.get("page")) || 1;
const itemsPerPage = 3;

const startIndex = (page - 1) * itemsPerPage;
const visibleProducts = sortedProducts.slice(
  startIndex,
  startIndex + itemsPerPage
);

const totalPages = Math.ceil(sortedProducts.length / itemsPerPage);

function goToPage(nextPage) {
  setSearchParams((currentParams) => {
    const nextParams = new URLSearchParams(currentParams);
    nextParams.set("page", String(nextPage));
    return nextParams;
  });
}

import { BrowserRouter, useSearchParams } from "react-router-dom";

const products = [
  { id: 1, name: "React для початківців", category: "books", price: 450 },
  { id: 2, name: "JavaScript довідник", category: "books", price: 380 },
  { id: 3, name: "Бездротова клавіатура", category: "hardware", price: 1200 },
  { id: 4, name: "USB-мікрофон", category: "hardware", price: 2100 },
  { id: 5, name: "Навушники", category: "hardware", price: 850 },
  { id: 6, name: "CSS практикум", category: "books", price: 520 },
  { id: 7, name: "Підставка для ноутбука", category: "hardware", price: 900 },
];

function ProductCatalog() {
  const [searchParams, setSearchParams] = useSearchParams();

  const category = searchParams.get("category") || "";
  const sort = searchParams.get("sort") || "name-asc";
  const page = Math.max(1, Number(searchParams.get("page")) || 1);

  const itemsPerPage = 3;

  const filteredProducts = products.filter((product) => {
    return category === "" || product.category === category;
  });

  const sortedProducts = [...filteredProducts].sort(
    (firstProduct, secondProduct) => {
      if (sort === "price-asc") {
        return firstProduct.price - secondProduct.price;
      }

      if (sort === "price-desc") {
        return secondProduct.price - firstProduct.price;
      }

      return firstProduct.name.localeCompare(secondProduct.name);
    }
  );

  const totalPages = Math.max(
    1,
    Math.ceil(sortedProducts.length / itemsPerPage)
  );

  const safePage = Math.min(page, totalPages);
  const startIndex = (safePage - 1) * itemsPerPage;
  const visibleProducts = sortedProducts.slice(
    startIndex,
    startIndex + itemsPerPage
  );

  function updateParams(changes) {
    setSearchParams((currentParams) => {
      const nextParams = new URLSearchParams(currentParams);

      Object.entries(changes).forEach(([key, value]) => {
        if (value === "" || value === null) {
          nextParams.delete(key);
        } else {
          nextParams.set(key, String(value));
        }
      });

      return nextParams;
    });
  }

  function handleCategoryChange(event) {
    updateParams({
      category: event.target.value,
      page: 1,
    });
  }

  function handleSortChange(event) {
    updateParams({
      sort: event.target.value,
      page: 1,
    });
  }

  function goToPage(nextPage) {
    updateParams({ page: nextPage });
  }

  return (
    <main>
      <h1>Каталог товарів</h1>

      <label>
        Категорія{" "}
        <select value={category} onChange={handleCategoryChange}>
          <option value="">Усі категорії</option>
          <option value="books">Книги</option>
          <option value="hardware">Техніка</option>
        </select>
      </label>

      {" "}

      <label>
        Сортування{" "}
        <select value={sort} onChange={handleSortChange}>
          <option value="name-asc">За назвою</option>
          <option value="price-asc">Від дешевих до дорогих</option>
          <option value="price-desc">Від дорогих до дешевих</option>
        </select>
      </label>

      <ul>
        {visibleProducts.map((product) => (
          <li key={product.id}>
            {product.name} — {product.price} грн
          </li>
        ))}
      </ul>

      {visibleProducts.length === 0 && <p>Товарів не знайдено.</p>}

      <div>
        <button
          type="button"
          disabled={safePage === 1}
          onClick={() => goToPage(safePage - 1)}
        >
          Попередня
        </button>

        <span>
          {" "}
          Сторінка {safePage} з {totalPages}{" "}
        </span>

        <button
          type="button"
          disabled={safePage === totalPages}
          onClick={() => goToPage(safePage + 1)}
        >
          Наступна
        </button>
      </div>
    </main>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <ProductCatalog />
    </BrowserRouter>
  );
}

const query = searchParams.get("query") || "";

/products?tag=books&tag=new

const tags = searchParams.getAll("tag");

console.log(tags); // ["books", "new"]

setSearchParams({ page: "2" });

setSearchParams((currentParams) => {
  const nextParams = new URLSearchParams(currentParams);
  nextParams.set("page", "2");
  return nextParams;
});

/products?category=books&sort=price-asc&page=1

/products?category=books&sort=price-asc&page=2

const page = searchParams.get("page");

console.log(page + 1); // "21", якщо page дорівнює "2"

const page = Number(searchParams.get("page")) || 1;
console.log(page + 1); // 3

const category = searchParams.get("category");

const category = searchParams.get("category") || "";

nextParams.set("page", "1");

searchParams.set("page", "2");

setSearchParams((currentParams) => {
  const nextParams = new URLSearchParams(currentParams);
  nextParams.set("page", "2");
  return nextParams;
});

setSearchParams({
  query: "react router",
});

const query = searchParams.get("query") || "";