Breaking News: Grepper is joining You.com. Read the official announcement!

infinite scroll in react with redux

WinMaw answered on January 24, 2024 Popularity 3/10 Helpfulness 2/10

answer infinite scroll in react with redux

infinite scroll in react with redux

Comment

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;

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: infinite-scroll javascript redux

Link to this answer
Share Copy Link

Contributed on Jan 24 2024

WinMaw

0 Answers Avg Quality 2/10

infinite scroll in react with redux

Contents

More Related Answers

infinite scroll in react with redux

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.