created infinitescroll for showing product in home page

package.json

@@ -13,6 +13,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.8.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",

src/components/ui/ProductLoading.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { ProductCardSkeleton } from "./ProductCardSkeleton";
+
+export const ProductLoading = () => {
+  return (
+    <div className=" mb-7 grid gird-cols-1 justify-center xs:justify-start xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-2 gap-y-5">
+      <ProductCardSkeleton />
+      <ProductCardSkeleton />
+      <ProductCardSkeleton />
+      <ProductCardSkeleton />
+      <ProductCardSkeleton />
+    </div>
+  );
+};

src/features/product/productApi.js

@@ -8,9 +8,21 @@ export const productApi = apiSlice.injectEndpoints({
       }),
     }),
     getMoreProducts: builder.query({
-      query: ({ page, limit }) => ({
-        url: `/product/all?page=${page}&&limit=${limit}`,
+      query: (page) => ({
+        url: `/product/all?page=${page}&&limit=${process.env.REACT_APP_LIMIT_PER_PAGE}`,
       }),
+      async onQueryStarted(arg, { queryFulfilled, dispatch }) {
+        try {
+          const {data} = await queryFulfilled;
+          dispatch(
+            apiSlice.util.updateQueryData("getProducts", undefined, (draft) => {
+              draft.data = [...draft.data, ...data.data];
+              draft.totalItems = data.totalItems;
+              return draft;
+            })
+          );
+        } catch (err) {}
+      },
     }),
     getFeatureProducts: builder.query({
       query: () => ({

src/pages/User/Home/ForYouProduct.js

@@ -1,26 +1,56 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useDispatch } from "react-redux";
 import { ProductCardSkeleton } from "../../../components/ui/ProductCardSkeleton";
+import { ProductLoading } from "../../../components/ui/ProductLoading";
 import { ContainerHeader } from "../../../components/user/ContainerHeader";
 import { ProductCard } from "../../../components/user/ProductCard";
-import { useGetProductsQuery } from "../../../features/product/productApi";
+import {
+  productApi,
+  useGetProductsQuery,
+} from "../../../features/product/productApi";
 
 export const ForYouProduct = () => {
-  const {
-    data: products,
-    isLoading,
-    isSuccess,
-    isError,
-  } = useGetProductsQuery();
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+
+  const dispatch = useDispatch();
+
+  const { data, isLoading, isSuccess, isError } = useGetProductsQuery() || {};
+
+  const { data: products, totalItems } = data || {};
+
+  //get requrest for get more products
+  useEffect(() => {
+    if (page > 1) {
+      dispatch(productApi.endpoints.getMoreProducts.initiate(page));
+    }
+  }, [dispatch, page]);
+
+  //set hasMore true or false
+  useEffect(() => {
+    if (totalItems > 0) {
+      const more =
+        Math.ceil(totalItems / Number(process.env.REACT_APP_LIMIT_PER_PAGE)) >
+        page;
+      setHasMore(more);
+    }
+  }, [page, totalItems]);
+
+  //fetch more products handler
+  const getModeHandler = () => {
+    setPage((prev) => prev + 1);
+  };
 
   // decide what to render
   let content;
 
   if (isLoading)
     content = (
-      <>
+      <div className=" mb-7 grid gird-cols-1 justify-center xs:justify-start xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-2 gap-y-5">
         <ProductCardSkeleton /> <ProductCardSkeleton /> <ProductCardSkeleton />
         <ProductCardSkeleton /> <ProductCardSkeleton />
-      </>
+      </div>
     );
 
   if (!isLoading && isError)
@@ -35,16 +65,25 @@ export const ForYouProduct = () => {
       <p className="text-center uppercase font-medium">No Product found!</p>
     );
   if (!isError && !isLoading && products?.length > 0)
-    content = products.map((proudct) => (
-      <ProductCard key={proudct._id} product={proudct} />
-    ));
+    content = (
+      <InfiniteScroll
+        dataLength={products?.length}
+        hasMore={hasMore}
+        loader={<ProductLoading />}
+        next={() => getModeHandler()}
+      >
+        <div className=" mb-7 grid gird-cols-1 justify-center xs:justify-start xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-2 gap-y-5">
+          {products.map((proudct) => (
+            <ProductCard key={proudct._id} product={proudct} />
+          ))}
+        </div>
+      </InfiniteScroll>
+    );
 
   return (
     <div className="container mx-auto ">
       <ContainerHeader title="product for you!" />
-      <div className=" mb-7 grid gird-cols-1 justify-center xs:justify-start xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-2 gap-y-5">
-        {content}
-      </div>
+      {content}
     </div>
   );
 };

yarn.lock

@@ -7665,6 +7665,13 @@ react-icons@^4.8.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
   integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==
 
+react-infinite-scroll-component@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
+  integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==
+  dependencies:
+    throttle-debounce "^2.1.0"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8744,6 +8751,11 @@ throat@^6.0.1:
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.2.tgz#51a3fbb5e11ae72e2cf74861ed5c8020f89f29fe"
   integrity sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==
 
+throttle-debounce@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"