From dc3b4f1850174873ea1518bef00b770bb9a0bd07 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 15 Jan 2026 12:05:34 +0700
Subject: [PATCH] refactor(FE): Use useSelect for ProjectFlock with pagination

---
 .../uniformity/form/UniformityForm.tsx        | 77 ++++++++-----------
 1 file changed, 30 insertions(+), 47 deletions(-)

diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index 54b4ee2b..f46a15b3 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -36,7 +36,10 @@ import {
   VerifyUniformityPayload,
 } from '@/types/api/production/uniformity';
 import { type BaseApiResponse } from '@/types/api/api-general';
-import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
+import {
+  ProjectFlockKandangLookup,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
 import { Kandang } from '@/types/api/master-data/kandang';
 import UniformityPreviewForm from '@/components/pages/production/uniformity/form/UniformityPreviewForm';
 import UniformityResultForm from '@/components/pages/production/uniformity/form/UniformityResultForm';
@@ -88,7 +91,9 @@ const UniformityForm = ({
     null
   );
 
-  const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+  const [selectedProjectFlockLocationId, setSelectedProjectFlockLocationId] =
+    useState<string>('');
+
   const [selectedProjectFlock, setSelectedProjectFlock] =
     useState<OptionType | null>(null);
 
@@ -100,50 +105,21 @@ const UniformityForm = ({
     setInputValue: setLocationSelectInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocations,
-  } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
-    page: '1',
-    limit: '100',
+    loadMore: loadMoreLocations,
+    hasMore: hasMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setProjectFlockSearchValue,
+    options: projectFlockOptions,
+    rawData: projectFlocksRawData,
+    isLoadingOptions: isLoadingProjectFlocks,
+    loadMore: loadMoreProjectFlocks,
+    hasMore: hasMoreProjectFlocks,
+  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
+    location_id: selectedProjectFlockLocationId,
   });
 
-  // ===== FETCH PROJECT FLOCKS DATA =====
-  const projectFlocksUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: projectFlockSearchValue || '',
-      page: '1',
-      limit: '100',
-    });
-    if (selectedLocation) {
-      params.append('location_id', selectedLocation.value.toString());
-    }
-    return `${ProjectFlockApi.basePath}?${params.toString()}`;
-  }, [projectFlockSearchValue, selectedLocation]);
-
-  const { data: projectFlocksData, isLoading: isLoadingProjectFlocks } = useSWR(
-    projectFlocksUrl,
-    ProjectFlockApi.getAllFetcher
-  );
-
-  const projectFlocksDataList =
-    projectFlocksData?.status === 'success'
-      ? projectFlocksData.data
-      : undefined;
-
-  // ===== PROJECT FLOCK OPTIONS =====
-  const projectFlockOptions = useMemo(() => {
-    let options: OptionType[] = [];
-
-    if (isResponseSuccess(projectFlocksData)) {
-      const flockOptions =
-        projectFlocksData?.data.map((projectFlock) => ({
-          value: projectFlock.id,
-          label: projectFlock.flock_name || '',
-        })) || [];
-      options = options.concat(flockOptions);
-    }
-
-    return options;
-  }, [projectFlocksData]);
-
   // ===== APPROVED PROJECT FLOCK KANDANGS =====
   const approvedProjectFlockKandangsUrl = useMemo(() => {
     const params = new URLSearchParams({
@@ -168,8 +144,9 @@ const UniformityForm = ({
   const kandangOptions = useMemo(() => {
     let options: OptionType[] = [];
 
-    if (selectedProjectFlock && projectFlocksDataList) {
-      const selectedProjectFlockData = projectFlocksDataList.find(
+    if (selectedProjectFlock && isResponseSuccess(projectFlocksRawData)) {
+      const data = projectFlocksRawData.data as unknown as ProjectFlock[];
+      const selectedProjectFlockData = data.find(
         (pf) => pf.id === selectedProjectFlock.value
       );
 
@@ -196,7 +173,7 @@ const UniformityForm = ({
     return options;
   }, [
     selectedProjectFlock,
-    projectFlocksDataList,
+    projectFlocksRawData,
     approvedProjectFlockKandangs,
     formType,
   ]);
@@ -313,6 +290,10 @@ const UniformityForm = ({
       formik.setFieldValue('location_id', locationId);
 
       setSelectedLocation(location);
+      setSelectedProjectFlock(null);
+      setSelectedProjectFlockLocationId(
+        location ? location.value.toString() : ''
+      );
     },
     []
   );
@@ -513,6 +494,7 @@ const UniformityForm = ({
               options={locationOptions}
               onInputChange={setLocationSelectInputValue}
               isLoading={isLoadingLocations}
+              onMenuScrollToBottom={loadMoreLocations}
               isError={
                 formik.touched.location_id && Boolean(formik.errors.location_id)
               }
@@ -530,6 +512,7 @@ const UniformityForm = ({
               options={projectFlockOptions}
               onInputChange={setProjectFlockSearchValue}
               isLoading={isLoadingProjectFlocks}
+              onMenuScrollToBottom={loadMoreProjectFlocks}
               isDisabled={!formik.values.location_id}
               isError={
                 formik.touched.project_flock_id &&