refactor(FE): Refactor InventoryAdjustmentForm to use useSelect for

Kandang

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx

@@ -14,7 +14,11 @@ import {
   InventoryAdjustmentFormSchema,
   InventoryAdjustmentFormValues,
 } from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema';
-import { LocationApi, ProductApi } from '@/services/api/master-data';
+import {
+  KandangApi,
+  LocationApi,
+  ProductApi,
+} from '@/services/api/master-data';
 import {
   ProjectFlockApi,
   ProjectFlockKandangApi,
@@ -104,7 +108,6 @@ const InventoryAdjustmentForm = ({
   const {
     setInputValue: setProjectFlockInputValue,
     options: projectFlockOptions,
-    rawData: projectFlocksRawData,
     isLoadingOptions: isLoadingProjectFlockOptions,
     loadMore: loadMoreProjectFlocks,
   } = useSelect<ProjectFlock>(
@@ -117,6 +120,43 @@ const InventoryAdjustmentForm = ({
     }
   );
 
+  const { rawData: approvedProjectFlockKandangsRawData } =
+    useSelect<ProjectFlockKandang>(
+      ProjectFlockKandangApi.basePath,
+      'id',
+      'id',
+      'search',
+      {
+        step_name: 'Disetujui',
+        limit: '100',
+      }
+    );
+
+  const approvedProjectFlockKandangs = useMemo(() => {
+    if (
+      approvedProjectFlockKandangsRawData &&
+      'data' in approvedProjectFlockKandangsRawData
+    ) {
+      return approvedProjectFlockKandangsRawData.data as ProjectFlockKandang[];
+    }
+    return [];
+  }, [approvedProjectFlockKandangsRawData]);
+
+  const {
+    setInputValue: setKandangInputValue,
+    options: kandangOptionsFromApi,
+    isLoadingOptions: isLoadingKandangOptions,
+    loadMore: loadMoreKandangs,
+  } = useSelect<Kandang>(
+    selectedProjectFlock ? KandangApi.basePath : '',
+    'id',
+    'name',
+    'search',
+    {
+      location_id: selectedProjectFlockLocationId,
+    }
+  );
+
   const projectFlockKandangLookupUrl = useMemo(() => {
     if (!selectedProjectFlock || !selectedKandang) return null;
     const params = new URLSearchParams({
@@ -162,83 +202,38 @@ const InventoryAdjustmentForm = ({
       ? projectFlockKandangDetailData.data
       : undefined;
 
-  const approvedProjectFlockKandangsUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      step_name: 'Disetujui',
-      limit: '100',
-    });
-    return `${ProjectFlockKandangApi.basePath}?${params.toString()}`;
-  }, []);
-
-  const { data: approvedProjectFlockKandangsData } = useSWR(
-    approvedProjectFlockKandangsUrl,
-    ProjectFlockKandangApi.getAllFetcher
-  );
-
-  const approvedProjectFlockKandangs = useMemo(() => {
-    if (!isResponseSuccess(approvedProjectFlockKandangsData)) return [];
-    return approvedProjectFlockKandangsData.data;
-  }, [approvedProjectFlockKandangsData]);
-
-  const productUrl = useMemo(() => {
-    if (!projectFlockKandangLookup?.project_flock_kandang_id) return null;
-    const params = new URLSearchParams({
+  const {
+    setInputValue: setProductInputValue,
+    options: productOptions,
+    isLoadingOptions: isLoadingProductOptions,
+    loadMore: loadMoreProducts,
+  } = useSelect<Product>(
+    projectFlockKandangLookup?.project_flock_kandang_id
+      ? ProductApi.basePath
+      : '',
+    'id',
+    'name',
+    'search',
+    {
       project_flock_kandang_id:
-        projectFlockKandangLookup.project_flock_kandang_id.toString(),
-      page: '1',
-      limit: '10',
-    });
-    return `${ProductApi.basePath}?${params.toString()}`;
-  }, [projectFlockKandangLookup?.project_flock_kandang_id]);
-
-  const { data: productData, isLoading: isLoadingProductOptions } = useSWR(
-    productUrl,
-    productUrl ? ProductApi.getAllFetcher : null
+        projectFlockKandangLookup?.project_flock_kandang_id?.toString() || '',
+    }
   );
 
-  const productOptions = useMemo(() => {
-    if (!isResponseSuccess(productData)) return [];
-    return productData.data.map((p: Product) => ({
-      value: p.id,
-      label: p.name,
-    }));
-  }, [productData]);
-
-  const setProductInputValue = useCallback((value: string) => {
-    // Implementasi search jika diperlukan
-  }, []);
-
-  const loadMoreProducts = useCallback(() => {
-    // Implementasi load more jika diperlukan
-  }, []);
-
   const kandangOptions = useMemo(() => {
     let options: OptionType[] = [];
 
-    if (selectedProjectFlock && isResponseSuccess(projectFlocksRawData)) {
-      const data = projectFlocksRawData.data as ProjectFlock[];
-      const selectedProjectFlockData = data.find(
-        (pf) => pf.id === selectedProjectFlock.value
-      );
+    if (selectedProjectFlock) {
+      const approvedKandangIds = approvedProjectFlockKandangs
+        .filter((pfk) => pfk.project_flock_id === selectedProjectFlock.value)
+        .map((pfk) => pfk.kandang_id);
 
-      if (selectedProjectFlockData?.kandangs) {
-        const approvedKandangIds = approvedProjectFlockKandangs
-          .filter((pfk) => pfk.project_flock_id === selectedProjectFlock.value)
-          .map((pfk) => pfk.kandang_id);
-
-        const kandangOptions = selectedProjectFlockData.kandangs
-          .filter((kandang: Kandang) => {
-            if (type === 'add') {
-              return approvedKandangIds.includes(kandang.id);
-            }
-            return true;
-          })
-          .map((kandang: Kandang) => ({
-            value: kandang.id,
-            label: kandang.name || '',
-          }));
-        options = options.concat(kandangOptions);
-      }
+      options = kandangOptionsFromApi.filter((kandang) => {
+        if (type === 'add') {
+          return approvedKandangIds.includes(kandang.value as number);
+        }
+        return true;
+      });
     }
 
     if (projectFlockKandangDetail && type === 'edit') {
@@ -257,7 +252,7 @@ const InventoryAdjustmentForm = ({
     return options;
   }, [
     selectedProjectFlock,
-    projectFlocksRawData,
+    kandangOptionsFromApi,
     projectFlockKandangDetail,
     type,
     approvedProjectFlockKandangs,
@@ -806,7 +801,10 @@ const InventoryAdjustmentForm = ({
               label='Kandang'
               value={selectedKandang}
               onChange={kandangChangeHandler}
+              onInputChange={setKandangInputValue}
               options={kandangOptions}
+              onMenuScrollToBottom={loadMoreKandangs}
+              isLoading={isLoadingKandangOptions}
               isError={
                 formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
               }