Untitled

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { NavLink, useParams } from "react-router-dom";
import {
  listProductCategories,
  listProducts,
} from "../redux/action/productActions";
import Product from "./Product";

const Home = () => {
  const dispatch = useDispatch();
  const productList = useSelector((state) => state.productList);
  const { loading, error, products } = productList;
  const { category = "all" } = useParams();
  const productCategoryList = useSelector((state) => state.productCategoryList);
  const {
    loading: loadingCategories,
    error: errorCategories,
    categories,
  } = productCategoryList;

  useEffect(() => {
    console.log(category);

    dispatch(
      listProducts({
        category: category !== "all" ? category : "",
      })
    );
    dispatch(listProductCategories());
  }, [category, dispatch]);

  const setFilter = (filter) => {
    const filterCategory = filter.category || category;
    console.log("filter category", category);
    return `/home/${filterCategory}`;
  };

  return (
    <div>
      <div
        id="carouselExampleIndicators"
        class="carousel slide"
        data-bs-ride="carousel"
      >
        <div class="carousel-indicators">
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="0"
            class="active"
            aria-current="true"
            aria-label="Slide 1"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="1"
            aria-label="Slide 2"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="2"
            aria-label="Slide 3"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="3"
            aria-label="Slide 4"
          ></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img
              src="/assets/images/home/img1.jpg"
              class="d-block w-100"
              alt="IPhone"
              height="500px"
            />
          </div>
          <div class="carousel-item">
            <img
              src="/assets/images/home/img2.jpg"
              class="d-block w-100"
              alt="IPhone"
              height="500px"
            />
          </div>
          <div class="carousel-item">
            <img
              src="/assets/images/home/img3.jpg"
              class="d-block w-100"
              alt="IPhone"
              height="500px"
            />
          </div>
          <div class="carousel-item">
            <img
              src="/assets/images/home/img4.jpg"
              class="d-block w-100"
              alt="IPhone"
              height="500px"
            />
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
      <div className="buttons d-flex justify-content-center mb-5 pb-5">
        <div>
          <button className="btn btn-outline-dark me-2">
            <NavLink
              className={category === "all" ? "active" : ""}
              to={setFilter({ category: "all" })}
            >
              all
            </NavLink>
          </button>
          {categories?.map((c) => (
            <button className="btn btn-outline-dark me-2">
              <NavLink
                className={category === c ? "active" : ""}
                to={setFilter({ category: c })}
              >
                {c}
              </NavLink>
            </button>
          ))}
        </div>
      </div>
      <Product />
    </div>
  );
};

export default Home;