agregado Scroll infinito para las encuestas

apps/web/feactures/inventory/components/inventory/update-product-form.tsx

@@ -24,7 +24,7 @@ import { Textarea } from '@repo/shadcn/components/ui/textarea';
 import {STATUS} from '@/constants/status'
 import { useState, useEffect } from 'react';
 import {sizeFormate} from "@/feactures/inventory/utils/sizeFormate"
-import { z } from 'zod'; // Asegúrate de importar Zod
+// import { z } from 'zod'; // Asegúrate de importar Zod
 
 // --- MODIFICACIÓN CLAVE ---
 // Extiende tu esquema para incluir el campo de imagen como FileList para el frontend

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

@@ -2,7 +2,7 @@
 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 { allProducts } from '@/feactures/inventory/schemas/inventory';
 import { useRef, useEffect, useState } from 'react';
 import { Input } from '@repo/shadcn/components/ui/input';
 import { Button } from '@repo/shadcn/components/ui/button';
@@ -20,21 +20,6 @@ export function ProductList() {
     isLoading
   } = useAllProductInfiniteQuery(search);
 
-  // Funcion al hacer click en un producto
-  const goTo = (id: number) => {
-    router.push(`/dashboard/productos/${id}`);
-  };
-
-  // funcion para el buscador
-  const formSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const formdata = new FormData(e.currentTarget)
-    setSearch(formdata.get('search') as string)
-    console.log('submit')
-  }
-
-  const products = data?.pages.flatMap(page => page.data) || [];
-
   useEffect(() => {
     if (!lastProductRef.current || !hasNextPage || isFetchingNextPage) return;
 
@@ -58,26 +43,39 @@ export function ProductList() {
     };
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
+  // Funcion al hacer click en un producto
+  const goTo = (id: number) => {
+    router.push(`/dashboard/productos/${id}`);
+  };
+
+  // funcion para el buscador
+  const formSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formdata = new FormData(e.currentTarget)
+    setSearch(formdata.get('search') as string)
+    console.log('submit')
+  }
+
+  const products = data?.pages.flatMap(page => page.data) || [];
+
   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">
+      <form onSubmit={formSubmit} action={''} className='col-span-full text-center py-3 flex gap-3'>
+        <Input name='search' type='text' placeholder='Buscar...' className='' defaultValue={search}/>
+        <Button variant={'outline'} className=''>Buscar</Button>
+      </form>
       {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>
+          <p className="text-muted-foreground">No hay productos disponibles en este momento.</p>
         </section>
       ) : (
         <>
-          <form onSubmit={formSubmit} action={''} className='col-span-full text-center py-3 flex gap-3'>
-            <Input name='search' type='text' placeholder='Buscar...' className='' defaultValue={search}/>
-            <Button variant={'outline'} className=''>Buscar</Button>
-          </form>
           {products.map((item, index) => {
-            const isLastElement = index === products.length - 1;
+            const isLastElement = index === products.length - 1;           
             return (
               <div ref={isLastElement ? lastProductRef : null} key={item.id}>
                 <ProductCard product={item} onClick={() => goTo(Number(item.id))} />

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

@@ -1,30 +0,0 @@
-'use client';
-import { useRouter } from 'next/navigation';
-import { useAllProductQuery } from '@/feactures/inventory/hooks/use-query-products';
-import { allProducts } from '../../schemas/inventory';
-import { ProductCard } from '@/feactures/inventory/components/products/productCard'
-
-export function ProductList() {
-  const router = useRouter();
-  const { data: produts } = useAllProductQuery();
-
-  const handle = (id: number) => {
-    router.push(`/dashboard/productos/${id}`);
-  };
-
-  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">
-      {produts?.meta.totalPages === 0 ? (
-        <section className="col-span-full text-center py-10">
-          <p className="text-muted-foreground">
-            No hay productos disponibles en este momento.
-          </p>
-        </section>
-      ) : (
-        produts?.data.map((data: allProducts) => (
-          <ProductCard product={data} onClick={() => handle(Number(data.id))} key={data.id} />
-        ))
-      )}
-    </div>
-  );
-}

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

@@ -10,34 +10,30 @@ import {
 import { allProducts } from '../../schemas/inventory';
 
 interface cardProps {
-    product: allProducts;
-    onClick?: () => void;
+  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>
-
+    <Card className="cursor-pointer flex flex-col" onClick={onClick}>
+      <CardTitle className="text-base font-bold truncate p-3 text-primary">
+        {product.title.charAt(0).toUpperCase() + product.title.slice(1)}
+      </CardTitle>
+      <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>
   )
 }

apps/web/feactures/surveys/components/survey-card.tsx

@@ -0,0 +1,55 @@
+import { Button } from '@repo/shadcn/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@repo/shadcn/card';
+import { Badge } from '@repo/shadcn/badge';
+import { BadgeCheck } from 'lucide-react';
+import { SurveyAnswerForUser } from '../schemas/survey';
+
+
+interface cardProps {
+    data: SurveyAnswerForUser;
+    onClick: (id: number) => void;
+}
+
+export function SurveyCard ({ data, onClick }: cardProps) {
+    return (
+        <Card key={data.surveys.id} className="flex flex-col">
+            <CardHeader>
+            <CardTitle>{data.surveys.title}</CardTitle>
+            <CardDescription>{data.surveys.description}</CardDescription>
+            </CardHeader>
+            <CardContent className="flex-grow">
+            <section className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                    <span className="text-muted-foreground">Fecha de creación:</span>
+                    <span>{new Date(data.surveys.created_at).toLocaleDateString()}</span>
+                </div>
+                {data.surveys.closingDate && (
+                    <div className="flex justify-between">
+                        <span className="text-muted-foreground">Fecha de cierre:</span>
+                        <span>{new Date(data.surveys.closingDate).toLocaleDateString()}</span>
+                    </div>
+                )}
+            </section>
+            </CardContent>
+            <CardFooter className="flex justify-center">
+            {data.answers_surveys === null ? (
+                <Button className="w-full" onClick={() => onClick(Number(data.surveys.id))}>
+                    Responder
+                </Button>
+            ) : (
+                <Badge className="px-4 py-2 w-full  bg-green-600 text-black">
+                    <BadgeCheck size={28} />
+                    Realizada
+                </Badge>
+            )}
+            </CardFooter>
+        </Card>
+    )
+}

apps/web/feactures/surveys/components/survey-list.tsx

@@ -4,83 +4,99 @@
 // - Permite editar encuestas existentes
 // - Permite eliminar encuestas con confirmación
 // - Muestra el estado (publicada/borrador), fechas y conteo de respuestas
-
-
 'use client';
 
 import { Button } from '@repo/shadcn/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@repo/shadcn/card';
 import { useRouter } from 'next/navigation';
-import { useSurveysForUserQuery } from '@/feactures/surveys/hooks/use-query-surveys';
-import {  SurveyAnswerForUser } from '../schemas/survey';
-import { Badge } from '@repo/shadcn/badge';
-import { BadgeCheck } from 'lucide-react';
+import { useAllSurveysInfiniteQuery } from '@/feactures/surveys/hooks/use-query-surveys';
+import { SurveyCard } from '@/feactures/surveys/components/survey-card';
+
+import { SurveyAnswerForUser } from '../schemas/survey';
+
+import { useEffect, useRef, useState } from 'react';
+import { Input } from '@repo/shadcn/components/ui/input';
 
 export function SurveyList() {
-
   const router = useRouter();
-  const {data: surveys} =  useSurveysForUserQuery()
+  const lastProductRef = useRef(null);
+  const [search, setSearch] = useState("")
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading
+  } = useAllSurveysInfiniteQuery(search)
+
+  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]);
+
+  const surveys = data?.pages.flatMap(page => page.data) || [];
+
+  // funcion para el buscador
+  const formSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formdata = new FormData(e.currentTarget)
+    setSearch(formdata.get('search') as string)
+    // console.log('submit')
+  }
 
   const handleRespond = (surveyId: number) => {
     router.push(`/dashboard/encuestas/${surveyId}/responder`);
   };
 
-  // console.log(surveys?.data)
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {surveys?.meta.totalPages === 0 ? (
-        <div className="col-span-full text-center py-10">
+      <form onSubmit={formSubmit} action={''} className='col-span-full text-center py-3 flex gap-3'>
+        <Input name='search' type='text' placeholder='Buscar...' className='' defaultValue={search}/>
+        <Button variant={'outline'} className=''>Buscar</Button>
+      </form>
+      {isLoading ? (
+        <section className="col-span-full text-center py-10">
+          <p className="text-muted-foreground">Cargando productos...</p>
+        </section>
+      ) : surveys.length === 0 ? (
+        <section className="col-span-full text-center py-10">
           <p className="text-muted-foreground">No hay encuestas disponibles en este momento.</p>
-        </div>
+        </section>
       ) : (
-        surveys?.data.map((data: SurveyAnswerForUser) => (
-          
-          <Card key={data.surveys.id} className="flex flex-col">
-            <CardHeader>
-              <CardTitle>{data.surveys.title}</CardTitle>
-              <CardDescription>{data.surveys.description}</CardDescription>
-            </CardHeader>
-            <CardContent className="flex-grow">
-              <div className="space-y-2 text-sm">
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">Fecha de creación:</span>
-                  {/* <span>{data.surveys.created_at.toLocaleDateString()}</span> */}
-                  <span>{new Date(data.surveys.created_at).toLocaleDateString()}</span>
-                </div>
-                {data.surveys.closingDate && (
-                  <div className="flex justify-between">
-                    <span className="text-muted-foreground">Fecha de cierre:</span>
-                    {/* <span>{data.surveys.closingDate.toLocaleDateString()}</span> */}
-                    <span>{new Date(data.surveys.closingDate).toLocaleDateString()}</span>
-                  </div>
-                )}
+        <>
+          {surveys.map((data: SurveyAnswerForUser, index) => {
+            const isLastElement = index === surveys.length - 1;
+            return (
+              <div ref={isLastElement ? lastProductRef : null} key={data.surveys.id}>
+                <SurveyCard data={data} onClick={handleRespond}/>
               </div>
-            </CardContent>
-            <CardFooter className="flex justify-center">
-              {data.answers_surveys === null ? (
-                <Button 
-                  className="w-full" 
-                  onClick={() => handleRespond(Number(data.surveys.id))}
-                >
-                  Responder
-                </Button>
-              ) : (
-                <Badge className="px-4 py-2 w-full  bg-green-600 text-black">
-                  <BadgeCheck size={28} />
-                  Realizada
-                </Badge>
-              )}
-            </CardFooter>
-          </Card>
-        ))
+            )
+          })}
+          {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/surveys/hooks/use-query-surveys.ts

@@ -1,5 +1,5 @@
 'use client'
-import { useSafeQuery } from "@/hooks/use-safe-query";
+import { useSafeInfiniteQuery, useSafeQuery } from "@/hooks/use-safe-query";
 import { getSurveyByIdAction, getSurveysAction, getSurveysForUserAction } from "../actions/surveys-actions";
 
 
@@ -8,13 +8,25 @@ export function useSurveysQuery(params = {}) {
     return useSafeQuery(['surveys',params], () =>  getSurveysAction(params))
 }
 
+export function useAllSurveysInfiniteQuery(search: string = '') {
+    return useSafeInfiniteQuery(
+        ['surveys', search],
+        // pageParam + 1 para evitar duplicación de datos
+        ({ pageParam = 0 }) => getSurveysForUserAction({ page: pageParam + 1, limit: 10, search }),
+        (lastPage, allPages) => {
+            // Esta lógica determina el 'pageParam' para la siguiente página
+            const nextPage = allPages.length;
+            // Puedes añadir una condición para saber si hay más páginas
+            if (lastPage.data.length < 10) return undefined;
+            return nextPage;
+        }
+    )
+}
+
 export function useSurveysForUserQuery(params = {}) {
     return useSafeQuery(['surveys',params], () =>  getSurveysForUserAction(params))
 }
 
-
-
-  
 export function useSurveysByIdQuery(id: number) {   
     return useSafeQuery(['surveys',id], () =>  getSurveyByIdAction(id))
 }