refactor(FE): Load locations by area and disable location select

src/components/pages/purchase/form/request/PurchaseRequestForm.tsx

@@ -63,6 +63,10 @@ const PurchaseRequestForm = ({
     useState('');
   const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
+  const [selectedArea, setSelectedArea] = useState('');
+  const [selectedLocation, setSelectedLocation] = useState('');
+  const [disabledLocation, setDisabledLocation] = useState(true);
+
   // ===== TYPE DEFINITIONS =====
   interface ProductOptionType {
     value: number;
@@ -160,6 +164,18 @@ const PurchaseRequestForm = ({
     isLoadingOptions: isLoadingAreas,
   } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
+  const {
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    loadMore: loadMoreLocations,
+    hasMore: hasMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+  });
+
   const {
     inputValue: warehouseSelectInputValue,
     setInputValue: setWarehouseSelectInputValue,
@@ -267,31 +283,6 @@ const PurchaseRequestForm = ({
     return data;
   }, [supplierData]);
 
-  const locationsUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: locationSelectInputValue,
-      ...(formik.values.area_id && formik.values.area_id > 0
-        ? { area_id: formik.values.area_id.toString() }
-        : {}),
-    });
-    return `${LocationApi.basePath}?${params.toString()}`;
-  }, [locationSelectInputValue, formik.values.area_id]);
-
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const locationOptions = useMemo(() => {
-    if (!isResponseSuccess(locations)) return [];
-    return (
-      locations?.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      })) || []
-    );
-  }, [locations]);
-
   const warehousesUrl = useMemo(() => {
     const params = new URLSearchParams({ search: warehouseSelectInputValue });
 
@@ -407,6 +398,18 @@ const PurchaseRequestForm = ({
     }
   }, [formik.values.supplier_id]);
 
+  useEffect(() => {
+    if (type !== 'add' && initialValues) {
+      if (initialValues.area?.id) {
+        setSelectedArea(initialValues.area.id.toString());
+        setDisabledLocation(false);
+      }
+      if (initialValues.location?.id) {
+        setSelectedLocation(initialValues.location.id.toString());
+      }
+    }
+  }, [type, initialValues]);
+
   // ===== FORM HANDLERS =====
   const handleSupplierChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
@@ -445,6 +448,16 @@ const PurchaseRequestForm = ({
       formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
       formik.setFieldTouched('area', true);
       formik.setFieldValue('area', area);
+
+      setSelectedArea((area as OptionType)?.value as string);
+      setSelectedLocation('');
+      const disabled = (area as OptionType)?.value == null;
+      setDisabledLocation(disabled);
+
+      formik.setFieldTouched('location_id', false);
+      formik.setFieldValue('location_id', 0);
+      formik.setFieldTouched('location', false);
+      formik.setFieldValue('location', null);
     },
     []
   );
@@ -456,6 +469,8 @@ const PurchaseRequestForm = ({
       formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
       formik.setFieldTouched('location', true);
       formik.setFieldValue('location', location);
+
+      setSelectedLocation((location as OptionType)?.value as string);
     },
     []
   );
@@ -596,10 +611,15 @@ const PurchaseRequestForm = ({
                 placeholder='Pilih Lokasi...'
                 value={formik.values.location}
                 onChange={handleLocationChange}
-                options={locationOptions}
+                options={
+                  selectedArea != '' || initialValues?.area?.id
+                    ? locationOptions
+                    : []
+                }
                 onInputChange={setLocationSelectInputValue}
                 isLoading={isLoadingLocations}
-                isDisabled={type === 'detail'}
+                onMenuScrollToBottom={loadMoreLocations}
+                isDisabled={type === 'detail' || disabledLocation}
                 isClearable={type !== 'detail'}
               />