feat: product select

src/components/ProductSelect/ProductSelect.tsx

@@ -1,5 +1,5 @@
 import {ProductSchema} from "../../client";
-import {FC, useEffect, useState} from "react";
+import {FC, useState} from "react";
 import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx";
 import {omit} from "lodash";
 import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
@@ -14,13 +14,12 @@ const MAX_PRODUCTS = 200;
 type Props = Omit<ObjectSelectProps<ProductSchema>, 'data'> & RestProps;
 const ProductSelect: FC<Props> = (props: Props) => {
     const [searchValue, setSearchValue] = useState("");
-    const [debouncedSearch] = useDebouncedValue(searchValue, 1000);
-    const [itemsPerPage, setItemsPerPage] = useState(1);
-    const {products, isLoading, paginationInfo} = useProductsList({
+    const [debounced] = useDebouncedValue(searchValue, 500);
+    const {products, isLoading} = useProductsList({
         clientId: props.clientId,
-        searchInput: debouncedSearch,
+        searchInput: debounced,
         page: 0,
-        itemsPerPage: itemsPerPage
+        itemsPerPage: MAX_PRODUCTS
     });
     const restProps = omit(props, ['clientId']);
     const renderOption: SelectProps['renderOption'] = (item) => {
@@ -53,6 +52,7 @@ const ProductSelect: FC<Props> = (props: Props) => {
             </Tooltip>)
     }
     const optionsFilter: OptionsFilter = ({options, search}) => {
+        return options;
         const filtered = (options as ComboboxItem[]).filter((option) => {
                 const product = products.find(product => product.id == parseInt(option.value));
                 if (!product) return true;
@@ -65,30 +65,19 @@ const ProductSelect: FC<Props> = (props: Props) => {
         return filtered.length > MAX_PRODUCTS ? filtered.slice(0, MAX_PRODUCTS) : filtered;
     };
     const setSearchValueImpl = (value: string) => {
-        if (!paginationInfo) return;
-        if (paginationInfo.totalItems === itemsPerPage) {
-            setSearchValue("");
-            return;
-        }
+        const names = products.map(product => product.name);
+        if (names.includes(value)) return;
         setSearchValue(value);
     }
 
-    useEffect(() => {
-        if (!paginationInfo) return;
-        if (paginationInfo.totalItems < MAX_PRODUCTS)
-            setItemsPerPage(paginationInfo.totalItems);
-        else
-            setItemsPerPage(MAX_PRODUCTS);
-    }, [paginationInfo]);
     return (
         <ObjectSelect
-            disabled={isLoading}
+            // disabled={isLoading}
             rightSection={
-                (isLoading || searchValue !== debouncedSearch) ?
+                (isLoading || searchValue !== debounced) ?
                     <Loader size={"sm"}/> : null
             }
             onSearchChange={setSearchValueImpl}
-            limit={products.length > MAX_PRODUCTS ? MAX_PRODUCTS : Infinity}
             renderOption={renderOption}
             searchable
             {...restProps}