Rest Api

import { useEffect, useState } from "react";
import axios from "axios";
// bootstrap
import Form from "react-bootstrap/Form";
// preloader
import { InfinitySpin } from "react-loader-spinner";
 
// components
import Product from "./Product";
 
const ProductsList = () => {
  const [products, setProducts] = useState([]);
  const [category, setCategory] = useState("");
  const [search, setSearch] = useState("");
  //   base url
  const BASE_URL = `https://fakestoreapi.com/products`;
  //  fetch functions
  const fetchAll = async () => {
    const response = await axios.get(`${BASE_URL}`);
    setProducts(response.data);
  };
  const fetchJewelry = async () => {
    const response = await axios.get(`${BASE_URL}/category/jewelery`);
    setProducts(response.data);
  };
  const fetchElectronics = async () => {
    const response = await axios.get(`${BASE_URL}/category/electronics`);
    setProducts(response.data);
  };
  const fetchmens = async () => {
    const response = await axios.get(`${BASE_URL}/category/men's clothing`);
    setProducts(response.data);
  };
  const fetchWomens = async () => {
    const response = await axios.get(`${BASE_URL}/category/women's clothing`);
    setProducts(response.data);
  };
  // fetch all products onMount
  useEffect(() => {
    fetchAll();
  }, []);
  // fetch based on category
  useEffect(() => {
    switch (category) {
      case "Все категории":
        fetchAll();
        break;
      case "Ювелирка":
        fetchJewelry();
        break;
      case "Электроника":
        fetchElectronics();
        break;
      case "Мужская одежда":
        fetchmens();
        break;
      case "Женская одежда":
        fetchWomens();
        break;
 
      default:
        fetchAll();
        break;
    }
  }, [category]);
  // delete handle
  const deleteHandle = (id) => {
    const filteredItems = products.filter((item) => item.id !== id);
    setProducts(filteredItems);
  };
  // search
  const searchProducts = products.filter((item) =>
    item.title.toLowerCase().includes(search.toLocaleLowerCase())
  );
 
  if (!products.length)
    return (
      <div className="spinner">
        <InfinitySpin width="200" color="#4834d4" />
      </div>
    );
  return (
    <div>
      <div className="products-container">
        {/* search */}
        <div class="input-container-search">
        <input
          className="search-vacancys"
          type="search"
          placeholder="Поиск..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <span class="icon-search-vacancy"> 
    <svg width="19px" height="19px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="1" d="M14 5H20" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M14 8H17" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M22 22L20 20" stroke="#000" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
  </span>
  </div>
        {/* filter */}
        <Form.Select
          className="m-auto"
          size="sm"
          value={category}
          onChange={(e) => setCategory(e.target.value)}
          style={{ width: "180px" }}
        >
          <option>Все категории</option>
          <option>Ювелирка</option>
          <option>Электроника</option>
          <option>Мужская одежда</option>
          <option>Женская одежда</option>
        </Form.Select>
        <div className="carderrs">
        {searchProducts.map((item) => (
          <Product key={item.id} data={item} deleteHandle={deleteHandle} />
        ))}
        </div>
      </div>
    </div>
  );
};
 
export default ProductsList;

// base url
const BASE_URL = `https://fakestoreapi.com/products`;
// добавочные пути
const def = {
    "Ювелирка": '/category/jewelery',
    "Электроника": '/category/electronics',
    "Мужская одежда": "/category/men's clothing",
    "Женская одежда": "/category/women's clothing"
}
 
const ProductsList = () => {
    // ...
    //  fetch functions
    const fetchTest = async (target) => {
        const response = await axios.get(BASE_URL + target);
        setProducts(response.data);
    };
    // ...
    useEffect(() => {
        const target = def[category] ?? ''
        fetchTest(target);
    }, [category]);
    // ...
};