diff --git a/apps/web/feactures/inventory/components/inventory/product-inventory-list.tsx b/apps/web/feactures/inventory/components/inventory/product-inventory-list.tsx index 3ae073b..13fa199 100644 --- a/apps/web/feactures/inventory/components/inventory/product-inventory-list.tsx +++ b/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, -}: SurveysAdminListProps) { +}: dataListProps) { const filters = { page: initialPage, limit: initialLimit, ...(initialSearch && { search: initialSearch }), - ...(initialType && { type: initialType }), - }; + } const {data, isLoading} = useProductQuery(filters) diff --git a/apps/web/feactures/inventory/components/products/product-list-scroll.tsx b/apps/web/feactures/inventory/components/products/product-list-scroll.tsx index da6a2ec..45af75b 100644 --- a/apps/web/feactures/inventory/components/products/product-list-scroll.tsx +++ b/apps/web/feactures/inventory/components/products/product-list-scroll.tsx @@ -3,24 +3,36 @@ 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, fetchNextPage, 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) => { + 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() { ) : ( <> +
+ + +
{products.map((item, index) => { const isLastElement = index === products.length - 1; return (
- handle(Number(item.id))} /> + goTo(Number(item.id))} />
); })} diff --git a/apps/web/feactures/inventory/hooks/use-query-products.ts b/apps/web/feactures/inventory/hooks/use-query-products.ts index 62741ba..ba8cb37 100644 --- a/apps/web/feactures/inventory/hooks/use-query-products.ts +++ b/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;