import React, { useEffect, useState } from "react"; import CategorySection from "@/components/home/CategorySection"; import ProductSection from "@/components/Products/ProductSection"; import axios from "axios"; import { useRouter } from "next/router"; import { useDispatch, useSelector } from "react-redux"; import { RootState } from "@/Redux/store"; import { RxCross2 } from "react-icons/rx"; import ViewallFilterSection from "@/components/Products/ViewallFilterSection"; import { setFilteredProducts, setProducts } from "@/Redux/productFiltersSlice"; import Head from "next/head"; import FeaturedProductSection from "@/components/Products/FeaturedProductSection"; import Image from "next/image"; import { ApiBaseUrl } from "@/interceptor/instance"; export default function Product() { const { selectedCategory, selectedCategoryID } = useSelector( (state: RootState) => state.category ); const router = useRouter(); const dispatch = useDispatch(); const [openMenu, setOpenMenu] = React.useState(false); const [selectedPriceRangeId, setSelectedPriceRangeId] = useState(null); const [states, setStates] = useState([]); const [cities, setCities] = useState([]); const [selectedStateId, setSelectedStateId] = useState(); const [selectedCity, setSelectedCity] = useState(null); const handleMenubar = () => { setOpenMenu(!openMenu); }; //fetch all products const applyFilters = async () => { try { let allProducts: any = []; let currentPage = 1; let lastPage = 0; do { const response = await axios.get( `${ApiBaseUrl}/api/getFeaturedProducts?page=${currentPage}` ); const productsData = response.data.products.data; allProducts = allProducts.concat(productsData); currentPage = response.data.products.current_page + 1; lastPage = response.data.products.last_page; } while (currentPage <= lastPage); // filter by selectedPriceRange if (selectedPriceRangeId) { allProducts = allProducts.filter((product: any) => { switch (selectedPriceRangeId) { case `${selectedCategoryID}_1`: return product.productSellingPrice < 5000; case `${selectedCategoryID}_2`: return ( product.productSellingPrice >= 5001 && product.productSellingPrice <= 20000 ); case `${selectedCategoryID}_3`: return product.productSellingPrice > 20001; default: return true; } }); } // filter by selectedStateId if (selectedStateId) { allProducts = allProducts.filter((product: any) => { console.log({ selectedStateId }); return product.seller.stateId === selectedStateId; }); } dispatch(setFilteredProducts(allProducts)); if (!selectedPriceRangeId && !selectedCity && !selectedStateId) { dispatch(setProducts(allProducts)); } } catch (error) { console.error("Error fetching all products:", error); } }; const handlePriceChange = (id: any) => { if (selectedPriceRangeId === id) { setSelectedPriceRangeId(null); } else { setSelectedPriceRangeId(id); } }; const handleStateClick = async (id: string) => { setSelectedStateId(id); applyFilters(); }; React.useEffect(() => { //fetch states const fetchStates = async () => { try { const response = await axios.get( `${ApiBaseUrl}/api/getCountryStates/160` ); setStates(response.data.states); } catch (error) { console.log("Error fetching states", error); } }; fetchStates(); applyFilters(); }, [selectedPriceRangeId, selectedCity, selectedStateId]); return ( <>