scroll infinito de productos

apps/web/feactures/inventory/components/products/product-list-scroll.tsx

@@ -0,0 +1,80 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { useAllProductInfiniteQuery } from '@/feactures/inventory/hooks/use-query-products';
+import { ProductCard } from '@/feactures/inventory/components/products/productCard';
+import { allProducts } from '@/feactures/inventory/schemas/inventory';
+import { useRef, useEffect } from 'react';
+
+export function ProductList() {
+  const router = useRouter();
+  const lastProductRef = useRef(null);
+  
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading
+  } = useAllProductInfiniteQuery();
+
+  const handle = (id: number) => {
+    router.push(`/dashboard/productos/${id}`);
+  };
+
+  const products = data?.pages.flatMap(page => page.data) || [];
+
+  useEffect(() => {
+    if (!lastProductRef.current || !hasNextPage || isFetchingNextPage) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          fetchNextPage();
+        }
+      },
+      {
+        root: null,
+        rootMargin: '200px',
+        threshold: 1.0,
+      }
+    );
+
+    observer.observe(lastProductRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  return (
+    <div className="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+      {isLoading ? (
+        <section className="col-span-full text-center py-10">
+          <p className="text-muted-foreground">Cargando productos...</p>
+        </section>
+      ) : products.length === 0 ? (
+        <section className="col-span-full text-center py-10">
+          <p className="text-muted-foreground">
+            No hay productos disponibles en este momento.
+          </p>
+        </section>
+      ) : (
+        <>
+          {products.map((item, index) => {
+            const isLastElement = index === products.length - 1;
+            return (
+              <div ref={isLastElement ? lastProductRef : null} key={item.id}>
+                <ProductCard product={item} onClick={() => handle(Number(item.id))} />
+              </div>
+            );
+          })}
+          {isFetchingNextPage && (
+            <section className="col-span-full text-center py-10">
+              <p className="text-muted-foreground">Cargando más productos...</p>
+            </section>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

apps/web/feactures/inventory/components/products/product-list.tsx

@@ -1,21 +1,12 @@
 'use client';
-
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@repo/shadcn/card';
 import { useRouter } from 'next/navigation';
 import { useAllProductQuery } from '@/feactures/inventory/hooks/use-query-products';
 import { allProducts } from '../../schemas/inventory';
-// import { ImageIcon } from 'lucide-react';
+import { ProductCard } from '@/feactures/inventory/components/products/productCard'
 
 export function ProductList() {
   const router = useRouter();
   const { data: produts } = useAllProductQuery();
-  // console.log(produts);
 
   const handle = (id: number) => {
     router.push(`/dashboard/productos/${id}`);
@@ -31,30 +22,7 @@ export function ProductList() {
         </section>
       ) : (
         produts?.data.map((data: allProducts) => (
-          <Card
-            key={data.id}
-            className="cursor-pointer flex flex-col"
-            onClick={() => handle(Number(data.id))}
-          >
-            {/* <CardHeader> */}
-              <CardTitle className="text-base font-bold truncate p-3 text-primary">
-                {data.title.charAt(0).toUpperCase() + data.title.slice(1)}
-              </CardTitle>
-            {/* </CardHeader> */}
-            <CardContent className="p-0 flex-grow">
-              <img
-                className="object-cover w-full h-full aspect-square border"
-                src={`/uploads/inventory/${data.userId}/${data.id}/${data.urlImg}`}
-                alt=""
-              />
-            </CardContent>
-            <CardFooter className="flex-col items-start p-4">
-              {data.status === 'AGOTADO' ? (
-              <p className="font-semibold text-lg text-red-900">AGOTADO</p>
-              ): ('')}
-              <p className="font-semibold text-lg">$ {data.price}</p>
-            </CardFooter>
-          </Card>
+          <ProductCard product={data} onClick={() => handle(Number(data.id))} key={data.id} />
         ))
       )}
     </div>

apps/web/feactures/inventory/components/products/productCard.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@repo/shadcn/card';
+import { allProducts } from '../../schemas/inventory';
+
+interface cardProps {
+    product: allProducts;
+    onClick?: () => void;
+}
+
+export function ProductCard({ product, onClick }: cardProps) {
+
+  return (
+          <Card className="cursor-pointer flex flex-col" onClick={onClick}
+          >
+            {/* <CardHeader> */}
+              <CardTitle className="text-base font-bold truncate p-3 text-primary">
+                {product.title.charAt(0).toUpperCase() + product.title.slice(1)}
+              </CardTitle>
+            {/* </CardHeader> */}
+            <CardContent className="p-0 flex-grow">
+              <img
+                className="object-cover w-full h-full aspect-square border"
+                src={`/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`}
+                alt=""
+              />
+            </CardContent>
+            <CardFooter className="flex-col items-start p-4">
+              {product.status === 'AGOTADO' ? (
+              <p className="font-semibold text-lg text-red-900">AGOTADO</p>
+              ): ('')}
+              <p className="font-semibold text-lg">$ {product.price}</p>
+            </CardFooter>
+          </Card>
+
+  )
+}