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

src/components/pages/master-data/warehouse/form/WarehouseForm.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';
@@ -35,6 +38,8 @@ import { cn } from '@/lib/helper';
 import { WAREHOUSE_TYPE_OPTIONS } from '@/config/constant';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { Area } from '@/types/api/master-data/area';
+import { Kandang } from '@/types/api/master-data/kandang';
 
 interface WarehouseFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -221,61 +226,28 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
   const { setValues: formikSetValues } = formik;
 
   // Area
-  const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
-
-  const areasUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: areaSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areasUrl,
-    AreaApi.getAllFetcher
-  );
-
-  const areaOptions = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
+  const {
+    setInputValue: setAreaSelectInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreaOptions,
+    loadMore: loadMoreAreas,
+  } = useSelect<Area>(AreaApi.basePath, 'id', 'name');
 
   // Location
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-
-  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: locationSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const locationOptions = isResponseSuccess(locations)
-    ? locations?.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }))
-    : [];
+  const {
+    setInputValue: setLocationSelectInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
   // Kandang
-  const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
-
-  const kandangsUrl = `${KandangApi.basePath}?${new URLSearchParams({
-    search: kandangSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: kandangs, isLoading: isLoadingKandangs } = useSWR(
-    kandangsUrl,
-    KandangApi.getAllFetcher
-  );
-
-  const kandangOptions = isResponseSuccess(kandangs)
-    ? kandangs?.data.map((kandang) => ({
-        value: kandang.id,
-        label: kandang.name,
-      }))
-    : [];
+  const {
+    setInputValue: setKandangSelectInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangOptions,
+    loadMore: loadMoreKandangs,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
 
   const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('type', true);
@@ -393,7 +365,8 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
               onChange={areaChangeHandler}
               options={areaOptions}
               onInputChange={setAreaSelectInputValue}
-              isLoading={isLoadingAreas}
+              onMenuScrollToBottom={loadMoreAreas}
+              isLoading={isLoadingAreaOptions}
               isError={formik.touched.areaId && Boolean(formik.errors.areaId)}
               errorMessage={formik.errors.areaId as string}
               isDisabled={type === 'detail'}
@@ -409,7 +382,8 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
                 onChange={locationChangeHandler}
                 options={locationOptions}
                 onInputChange={setLocationSelectInputValue}
-                isLoading={isLoadingLocations}
+                onMenuScrollToBottom={loadMoreLocations}
+                isLoading={isLoadingLocationOptions}
                 isError={
                   formik.touched.locationId && Boolean(formik.errors.locationId)
                 }
@@ -427,7 +401,8 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
                 onChange={kandangChangeHandler}
                 options={kandangOptions}
                 onInputChange={setKandangSelectInputValue}
-                isLoading={isLoadingKandangs}
+                onMenuScrollToBottom={loadMoreKandangs}
+                isLoading={isLoadingKandangOptions}
                 isError={
                   formik.touched.kandangId && Boolean(formik.errors.kandangId)
                 }