import React, { useState } from "react"; import CategorySection from "@/components/home/CategorySection"; import ProductSection from "@/components/Products/ProductSection"; import axios from "axios"; 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, setPagination, setProducts } from "@/Redux/productFiltersSlice"; import Head from "next/head"; import Image from "next/image"; export default function Product() { const { selectedCategory, selectedCategoryID } = useSelector( (state: RootState) => state.category ); const dispatch = useDispatch(); const [openMenu, setOpenMenu] = React.useState(false); const [selectedPriceRangeId, setSelectedPriceRangeId] = useState(null); const applyFilters = async () => { try { let allProducts :any = []; let currentPage = 1; let lastPage = 0; do { const response = await axios.get(`https://api.jazzagain.com/public/index.php/api/getRecomendedProducts?page=${currentPage}`); console.log(response.data) const productsData = response.data.products.data; // Assume this is the array of products // Add fetched products to the allProducts array allProducts = allProducts.concat(productsData); currentPage = response.data.products.current_page + 1; lastPage = response.data.products.last_page; } while (currentPage <= lastPage); console.log(allProducts) // Now, filter the allProducts if selectedPriceRangeId is set 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; } }); } // Dispatch the filtered (or all) products to your Redux store dispatch(setFilteredProducts(allProducts)); // If you're using a separate action to set all products without filtering, you might want to conditionally dispatch it // e.g., only if no price range is selected if (!selectedPriceRangeId) { dispatch(setProducts(allProducts)); } } catch (error) { console.error("Error fetching all products:", error); } }; React.useEffect(() => { applyFilters(); }, [selectedPriceRangeId]); const handleMenubar = () => { setOpenMenu(!openMenu); }; const handlePriceChange = async (id: any) => { // Toggle filter off if the same filter is selected again if (selectedPriceRangeId === id) { setSelectedPriceRangeId(null); applyFilters(); // Call without filter } else { setSelectedPriceRangeId(id); // Filtering logic is part of applyFilters or directly here before setting state applyFilters(); // Call with the new filter id } }; return ( <>