feat: product select

src/components/ProductSelect/ProductSelect.tsx

@@ -1,10 +1,11 @@
 import {ProductSchema} from "../../client";
-import {FC} from "react";
+import {FC, useEffect, useState} from "react";
 import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx";
 import {omit} from "lodash";
 import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
 import {ComboboxItem, Image, Loader, OptionsFilter, rem, SelectProps, Text, Tooltip} from "@mantine/core";
 import {getProductFields} from "../../types/utils.ts";
+import {useDebouncedValue} from "@mantine/hooks";
 
 type RestProps = {
     clientId: number;
@@ -12,9 +13,14 @@ type RestProps = {
 const MAX_PRODUCTS = 200;
 type Props = Omit<ObjectSelectProps<ProductSchema>, 'data'> & RestProps;
 const ProductSelect: FC<Props> = (props: Props) => {
-    const {products, isLoading} = useProductsList({
+    const [searchValue, setSearchValue] = useState("");
+    const [debouncedSearch] = useDebouncedValue(searchValue, 1000);
+    const [itemsPerPage, setItemsPerPage] = useState(1);
+    const {products, isLoading, paginationInfo} = useProductsList({
         clientId: props.clientId,
-        searchInput: ""
+        searchInput: debouncedSearch,
+        page: 0,
+        itemsPerPage: itemsPerPage
     });
     const restProps = omit(props, ['clientId']);
     const renderOption: SelectProps['renderOption'] = (item) => {
@@ -38,10 +44,7 @@ const ProductSelect: FC<Props> = (props: Props) => {
                             alt={product.name}
                             maw={rem(250)}
                         />}
-
                     </>
-
-
                 }>
                 <div>
                     {product.name}<br/>
@@ -49,10 +52,7 @@ const ProductSelect: FC<Props> = (props: Props) => {
                 </div>
             </Tooltip>)
     }
-
     const optionsFilter: OptionsFilter = ({options, search}) => {
-
-
         const filtered = (options as ComboboxItem[]).filter((option) => {
                 const product = products.find(product => product.id == parseInt(option.value));
                 if (!product) return true;
@@ -61,18 +61,33 @@ const ProductSelect: FC<Props> = (props: Props) => {
                     product.article?.toLowerCase() === search.toLowerCase();
             }
         );
-
         filtered.sort((a, b) => a.label.localeCompare(b.label));
-
         return filtered.length > MAX_PRODUCTS ? filtered.slice(0, MAX_PRODUCTS) : filtered;
     };
+    const setSearchValueImpl = (value: string) => {
+        if (!paginationInfo) return;
+        if (paginationInfo.totalItems === itemsPerPage) {
+            setSearchValue("");
+            return;
+        }
+        setSearchValue(value);
+    }
+
+    useEffect(() => {
+        if (!paginationInfo) return;
+        if (paginationInfo.totalItems < MAX_PRODUCTS)
+            setItemsPerPage(paginationInfo.totalItems);
+        else
+            setItemsPerPage(MAX_PRODUCTS);
+    }, [paginationInfo]);
     return (
         <ObjectSelect
             disabled={isLoading}
             rightSection={
-                isLoading ?
+                (isLoading || searchValue !== debouncedSearch) ?
                     <Loader size={"sm"}/> : null
             }
+            onSearchChange={setSearchValueImpl}
             limit={products.length > MAX_PRODUCTS ? MAX_PRODUCTS : Infinity}
             renderOption={renderOption}
             searchable