refactor(FE-316): Use useSelect for location options

src/components/pages/uniformity/form/UniformityForm.tsx

@@ -2,7 +2,6 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
-import useSWR from 'swr';
 import { useRouter } from 'next/navigation';
 import { Icon } from '@iconify/react';
 import { toast } from 'react-hot-toast';
@@ -24,7 +23,7 @@ import {
 } from '@/components/pages/uniformity/form/UniformityForm.schema';
 import { LocationApi, KandangApi } from '@/services/api/master-data';
 import { UniformityApi } from '@/services/api/uniformity';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError } from '@/lib/api-helper';
 import {
   Uniformity,
   CreateUniformityPayload,
@@ -46,11 +45,16 @@ const UniformityForm = ({
   const expandedDrawerOpen = useUiStore((s) => s.expandedDrawerOpen);
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
 
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
   const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
     useState('');
 
   // ===== SELECT INPUT DATA =====
+  const {
+    setInputValue: setLocationSelectInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
   const {
     setInputValue: setKandangSelectInputValue,
     options: kandangOptions,
@@ -98,29 +102,6 @@ const UniformityForm = ({
     },
   });
 
-  // ===== API DATA FETCHING =====
-  const locationsUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: locationSelectInputValue,
-    });
-    return `${LocationApi.basePath}?${params.toString()}`;
-  }, [locationSelectInputValue]);
-
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const locationOptions = useMemo(() => {
-    if (!locations || !isResponseSuccess(locations)) return [];
-    return (
-      locations.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      })) || []
-    );
-  }, [locations]);
-
   // ===== FORM HANDLERS =====
   const handleLocationChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
@@ -185,7 +166,7 @@ const UniformityForm = ({
     formik.setFieldValue('files', undefined);
   }, [formik]);
 
-  // ===== EFFECTS =====
+  // ===== SIDE EFFECTS =====
   useEffect(() => {
     const unsub = subscribeValidate(() => {
       setIsValid(true);
@@ -194,6 +175,7 @@ const UniformityForm = ({
     return unsub;
   }, []);
 
+  // ===== EVENT HANDLERS =====
   const handleOpenExpandedDrawer = () => {
     setExpandedDrawerOpen(true);
   };