From f335bc23eb4e8b94d68d271c9f9615da2328c90b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sun, 2 Nov 2025 21:42:03 +0700
Subject: [PATCH] refactor(FE-Storyless): simplify MovementForm by integrating
 useSelect for warehouse and supplier inputs, enhance data fetching logic

---
 .../inventory/movement/form/MovementForm.tsx  | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 56038f6a..28148706 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -8,7 +8,10 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import {
   CreateMovementPayload,
   Movement,
@@ -46,9 +49,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
-  const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
-    useState('');
-  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
 
   // ===== FORM HANDLERS =====
   const createMovementHandler = useCallback(
@@ -92,18 +92,25 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     ProductWarehouseApi.getAllFetcher
   );
 
+  // ===== USE SELECT HOOKS =====
+  const {
+    inputValue: warehouseSelectInputValue,
+    setInputValue: setWarehouseSelectInputValue,
+    isLoadingOptions: isLoadingWarehouses,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setSupplierSelectInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+  } = useSelect(SupplierApi.basePath, 'id', 'name', 'search');
+
   const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
-  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
+  const { data: warehouses } = useSWR(
     warehousesUrl,
     WarehouseApi.getAllFetcher
   );
 
-  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    suppliersUrl,
-    SupplierApi.getAllFetcher
-  );
-
   // ===== DATA PROCESSING =====
   const warehouseStockMap = useMemo(() => {
     if (!isResponseSuccess(allProductWarehouses)) return new Map();
@@ -129,8 +136,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     return stockMap;
   }, [allProductWarehouses]);
 
-  const warehouseOptions = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((w) => {
+  const warehouseOptions = useMemo(() => {
+    if (!isResponseSuccess(warehouses)) return [];
+
+    return (
+      warehouses?.data.map((w) => {
         warehouseStockMap.get(w.id);
         return {
           value: w.id,
@@ -141,12 +151,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
               ? w.location?.name
               : undefined,
         };
-      })
-    : [];
-
-  const supplierOptions = isResponseSuccess(suppliers)
-    ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
-    : [];
+      }) || []
+    );
+  }, [warehouses, warehouseStockMap]);
 
   // ===== FORM INITIALIZATION =====
   const formikInitialValues = useMemo<MovementFormValues>(