import React, { useState, useEffect } from "react"; import axios from "axios"; import { useDispatch, useSelector } from "react-redux"; import { useRouter } from "next/router"; import Head from "next/head"; import Image from "next/image"; import { RxCross2 } from "react-icons/rx"; import CategorySection from "@/components/home/CategorySection"; import ProductSection from "@/components/Products/ProductSection"; import ViewallFilterSection from "@/components/Products/ViewallFilterSection"; import { RootState } from "@/Redux/store"; import { setFilteredProducts, setPagination } from "@/Redux/productFiltersSlice"; export default function Product() { const { selectedCategory, selectedCategoryID } = useSelector( (state: RootState) => state.category ); const filteredProducts = useSelector( (state: RootState) => state.productFilter.filteredProducts ); const dispatch = useDispatch(); const router = useRouter(); const [brandData, setBrandData] = useState([]); const [filteredBrandData, setFilteredBrandData] = useState([]); const [subcategoryData, setSubCategoryData] = useState([]); const [openMenu, setOpenMenu] = useState(false); const [selectedPriceRangeId, setSelectedPriceRangeId] = useState(null); const [currentPage, setCurrentPage] = useState(1); const [perPage, setPerPage] = useState(10); const [lastPage, setLastPage] = useState(1); const applyFilters = async (page: number = currentPage) => { const apiEndpoint = `https://api.jazzagain.com/public/index.php/api/getLatestProducts?page=${page}`; const searchResult = await axios.get(apiEndpoint); if (selectedPriceRangeId) { handlePriceChange(selectedPriceRangeId, page); } else { dispatch(setFilteredProducts(searchResult.data.products.data)); dispatch(setPagination(searchResult.data.products.pagination)); } setPerPage(searchResult.data.products.per_page); setLastPage(searchResult.data.products.last_page); }; const handlePriceChange = async (id: string | null, page: number = currentPage) => { setSelectedPriceRangeId(id); const apiEndpoint = `https://api.jazzagain.com/public/index.php/api/getLatestProducts?page=${page}`; const searchResult = await axios.get(apiEndpoint); const newFilter = searchResult.data.products.data.filter((item: any) => { if (id === `${selectedCategoryID}_1`) { return item.productSellingPrice < 5000; } else if (id === `${selectedCategoryID}_2`) { return item.productSellingPrice >= 5001 && item.productSellingPrice <= 20000; } else { return item.productSellingPrice > 20001; } }); dispatch(setFilteredProducts(newFilter)); setPerPage(searchResult.data.products.per_page); setLastPage(searchResult.data.products.last_page); }; useEffect(() => { const fetchCategoryData = async () => { try { const [brandsResponse, subCategoriesResponse] = await Promise.all([ axios.get(`https://api.jazzagain.com/public/index.php/api/getBrands?categoryId=${selectedCategoryID}`), axios.get(`https://api.jazzagain.com/public/index.php/api/getSubCategories/${selectedCategoryID}`), ]); setBrandData(brandsResponse.data.brands); setFilteredBrandData(brandsResponse.data.brands); setSubCategoryData(subCategoriesResponse.data.subCategories); } catch (error) { console.error("Error fetching category data:", error); } }; fetchCategoryData(); }, [selectedCategory, selectedCategoryID]); useEffect(() => { applyFilters(); }, [selectedPriceRangeId, currentPage]); const toggleMenu = () => { setOpenMenu(!openMenu); }; const goToPreviousPage = () => { if (currentPage > 1) { setCurrentPage(currentPage - 1); } }; const goToNextPage = () => { if (currentPage < lastPage) { setCurrentPage(currentPage + 1); } }; return ( <>