import Menu from "../../components/customers/layout/Menu"; import { useMutationApiMutation } from "../../features/api"; import { endPoint } from "../../features/api/endPoint"; ]import { useEffect, useState } from "react"; import { FaFire } from "react-icons/fa6"; const CardItem = lazy(() => import("@components/customers/shared/CardItem")); import CardItemSkeleton from "@components/customers/shared/CardItemSkeleton"; const Home = () => { const [items, setItems] = useState([]); const [isLoadingMore, setIsLoadingMore] = useState(false); const [page,setPage] = useState(1); const [hasMore, setHasMore] = useState(true); const [mutationApi, { isLoading }] = useMutationApiMutation(); const fetchItem = async (pageNum) => { try { const response = await mutationApi({ endpoint: `${endPoint.itemEndPoint}?page=${pageNum}&limit=10`, method: "GET", }); if(response.data.data.meals && response.data.data.meals.length > 0){ setItems((prevItems) => [...prevItems, ...response.data.data.meals]); }else{ setHasMore(false); setIsLoadingMore(false); } return response.data.data.meals; } catch (error) { return null; } }; // const fetchData = async () => { // try { // const data = await fetchItem(page); // // console.log("data",data) // // if(data && data.length > 20){ // // // dispatch(setMeals(data)) // // // setItems((prevItems) => [...prevItems, ...data]); // // console.log("just data", data) // // }else{ // // console.log("No items found"); // // } // } catch (error) { // console.log("Error in handleClick:", error); // } // }; if(hasMore){ window.onscroll = () => { if ( window.innerHeight + window.scrollY >= document.body.offsetHeight - 100 && !isLoadingMore ) { handleLoadMore(); } }; } const handleLoadMore = () => { setIsLoadingMore(true); setPage((prevPage) => prevPage + 1); }; useEffect(() => { fetchItem(page); }, []); useEffect(() => { if (isLoadingMore) { fetchItem(page); } }, [isLoadingMore, page]); useEffect(() => { setIsLoadingMore(false); // Reset loading state when new data is loaded }, [items]); return ( <> <div> <div> <div className="container mx-auto p-3 "> <div className="flex justify-start items-baseline mb-2"> <FaFire className="text-primary me-2 " /> <p className=" capitalize text-xl font-bold"> All meal from swal </p> </div> <p className="text-foreground/70 ">Most ordered right now</p> </div> <div className="container mx-auto my-5 "> <div className="flex flex-wrap flex-row justify-start items-start"> <Suspense fallback={<CardItemSkeleton />} > {items?.map((item , index) => ( <div key={index} className="w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5" > <div className="p-1 md:p-2"> <CardItem data={item} /> </div> </div> ))} </Suspense> {isLoadingMore && <CardItemSkeleton />} </div> {hasMore && <button onClick={handleLoadMore} disabled={isLoadingMore}> {isLoadingMore ? "Loading..." : "Load More"} </button> } <div className="py-10"></div> </div> </div> </div> </> ); }; export default Home;