feat: implement lazy loading in SelectInput component in master data form

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -9,7 +9,10 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -31,6 +34,8 @@ import { flags } from '@/types/api/api-general';
 import { SUPPLIER_FLAG_OPTIONS } from '@/config/constant';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Uom } from '@/types/api/master-data/uom';
 
 interface NonstockFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -129,23 +134,12 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
   const { setValues: formikSetValues } = formik;
 
   // UOM
-  const [uomSelectInputValue, setUomSelectInputValue] = useState('');
-
-  const uomsUrl = `${UomApi.basePath}?${new URLSearchParams({
-    search: uomSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: uoms, isLoading: isLoadingUoms } = useSWR(
-    uomsUrl,
-    UomApi.getAllFetcher
-  );
-
-  const uomOptions = isResponseSuccess(uoms)
-    ? uoms?.data.map((uom) => ({
-        value: uom.id,
-        label: uom.name,
-      }))
-    : [];
+  const {
+    setInputValue: setUomSelectInputValue,
+    options: uomOptions,
+    isLoadingOptions: isLoadingUomOptions,
+    loadMore: loadMoreUoms,
+  } = useSelect<Uom>(UomApi.basePath, 'id', 'name');
 
   const uomChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('uom', true);
@@ -156,25 +150,12 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
   };
 
   // supplier
-  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
-
-  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({
-    search: supplierSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    suppliersUrl,
-    SupplierApi.getAllFetcher
-  );
-
-  const supplierOptions = isResponseSuccess(suppliers)
-    ? suppliers?.data
-        .filter((sup) => sup.category === 'BOP')
-        .map((supplier) => ({
-          value: supplier.id,
-          label: supplier.name,
-        }))
-    : [];
+  const {
+    setInputValue: setSupplierSelectInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('suppliers', true);
@@ -264,7 +245,8 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
               onChange={uomChangeHandler}
               options={uomOptions}
               onInputChange={setUomSelectInputValue}
-              isLoading={isLoadingUoms}
+              isLoading={isLoadingUomOptions}
+              onMenuScrollToBottom={loadMoreUoms}
               isError={formik.touched.uomId && Boolean(formik.errors.uomId)}
               errorMessage={formik.errors.uomId as string}
               isDisabled={type === 'detail'}
@@ -278,7 +260,8 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
               onChange={supplierChangeHandler}
               options={supplierOptions ?? []}
               onInputChange={setSupplierSelectInputValue}
-              isLoading={isLoadingSuppliers}
+              onMenuScrollToBottom={loadMoreSuppliers}
+              isLoading={isLoadingSupplierOptions}
               isError={
                 formik.touched.suppliers && Boolean(formik.errors.suppliers)
               }