buscar productos por nombre en la tienda

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

@@ -4,25 +4,22 @@ import { DataTableSkeleton } from '@repo/shadcn/table/data-table-skeleton';
 import { columns } from './product-tables/columns';
 import { useProductQuery } from '../../hooks/use-query-products';
 
-interface SurveysAdminListProps {
+interface dataListProps {
   initialPage: number;
   initialSearch?: string | null;
   initialLimit: number;
-  initialType?: string | null;
 }
 
 export default function UsersAdminList({
   initialPage,
   initialSearch,
   initialLimit,
-  initialType,
+}: dataListProps) {
-}: SurveysAdminListProps) {
   const filters = {
     page: initialPage,
     limit: initialLimit,
     ...(initialSearch && { search: initialSearch }),
-    ...(initialType && { type: initialType }),
+  }
-  };
 
   const {data, isLoading} =  useProductQuery(filters)
 

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

@@ -3,11 +3,14 @@ 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';
+import { useRef, useEffect, useState } from 'react';
+import { Input } from '@repo/shadcn/components/ui/input';
+import { Button } from '@repo/shadcn/components/ui/button';
 
 export function ProductList() {
   const router = useRouter();
   const lastProductRef = useRef(null);
+  const [search, setSearch] = useState("")
 
   const {
     data,
@@ -15,12 +18,21 @@ export function ProductList() {
     hasNextPage,
     isFetchingNextPage,
     isLoading
-  } = useAllProductInfiniteQuery();
+  } = useAllProductInfiniteQuery(search);
 
-  const handle = (id: number) => {
+  // 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(() => {
@@ -60,11 +72,15 @@ export function ProductList() {
         </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;
             return (
               <div ref={isLastElement ? lastProductRef : null} key={item.id}>
-                <ProductCard product={item} onClick={() => handle(Number(item.id))} />
+                <ProductCard product={item} onClick={() => goTo(Number(item.id))} />
               </div>
             );
           })}

apps/web/feactures/inventory/hooks/use-query-products.ts

@@ -20,11 +20,11 @@ export function useAllProductQuery(params: Params = {}) {
     return useSafeQuery(['product',params], () => getAllProducts(params))
 }
 
-export function useAllProductInfiniteQuery() {
+export function useAllProductInfiniteQuery(search: string = '') {
     return useSafeInfiniteQuery(
-        ['product'],
+        ['product', search],
         // pageParam + 1 para evitar duplicación de datos
-        ({ pageParam = 0 }) => getAllProducts({ page: pageParam + 1, limit: 10 }),
+        ({ pageParam = 0 }) => getAllProducts({ page: pageParam + 1, limit: 10, search }),
         (lastPage, allPages) => {
             // Esta lógica determina el 'pageParam' para la siguiente página
             const nextPage = allPages.length;