refactor(FE-87-106): refactor api integration untuk project flock dan project flock kandang

src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts

@@ -6,9 +6,7 @@ export const ProjectFlockFormSchema = Yup.object({
     value: Yup.number().required('ID Flock wajib diisi!'),
     label: Yup.string().required('Nama Flock wajib diisi!'),
   }).nullable(),
-  flock_id: Yup.number()
-    .min(1, 'Flock wajib diisi!')
-    .required('Flock wajib diisi!'),
+  flock_name: Yup.string().required('Nama Flock wajib diisi!'),
 
   // Area
   area: Yup.object({

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import Button from '@/components/Button';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import {
   AreaApi,
@@ -13,7 +16,7 @@ import {
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { use, useEffect, useMemo, useState } from 'react';
 import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockFormSchema,
@@ -58,7 +61,6 @@ const ProjectFlockForm = ({
 
   const [selectedLocation, setSelectedLocation] = useState('');
   const [disabledLocation, setDisabledLocation] = useState(true);
-  const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
 
   const [openSelectKandangs, setOpenSelectKandangs] = useState(
     initialValues?.kandangs && initialValues?.kandangs?.length > 0
@@ -105,38 +107,29 @@ const ProjectFlockForm = ({
   }, [initialValues]);
 
   // Fetch Data
-  const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
-    flockUrl,
-    FlockApi.getAllFetcher
-  );
+  const {
+    rawData: flocks,
+    isLoadingOptions: isLoadingFlocks,
+    options: optionsFlock,
+  } = useSelect(FlockApi.basePath, 'id', 'name');
 
-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areaUrl,
-    AreaApi.getAllFetcher
-  );
+  const {
+    options: optionsArea,
+    isLoadingOptions: isLoadingAreas,
+    rawData: areas,
+  } = useSelect(AreaApi.basePath, 'id', 'name');
 
-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: '',
-    area_id: selectedArea,
-  }).toString()}`;
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationUrl,
-    LocationApi.getAllFetcher
-  );
+  const {
+    options: optionsLocation,
+    isLoadingOptions: isLoadingLocations,
+    rawData: locations,
+  } = useSelect(LocationApi.basePath, 'id', 'name');
 
-  const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
-    fcrUrl,
-    FcrApi.getAllFetcher
-  );
+  const {
+    options: optionsFcr,
+    isLoadingOptions: isLoadingFcrs,
+    rawData: fcrs,
+  } = useSelect(FcrApi.basePath, 'id', 'name');
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
@@ -159,36 +152,6 @@ const ProjectFlockForm = ({
       )
   );
 
-  // Map Data to Options
-  const optionsArea = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
-  const optionsFcr = isResponseSuccess(fcrs)
-    ? fcrs?.data.map((fcr) => ({
-        value: fcr.id,
-        label: fcr.name,
-      }))
-    : [];
-  const optionsFlock = isResponseSuccess(flocks)
-    ? flocks?.data.map((flock) => ({
-        value: flock.id,
-        label: flock.name,
-      }))
-    : [];
-
-  useEffect(() => {
-    if (isResponseSuccess(locations)) {
-      const options = locations.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }));
-      setOptionsLocation(options);
-    }
-  }, [locations, setSelectedLocation]);
-
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
       if (selectedLocation) {
@@ -246,8 +209,13 @@ const ProjectFlockForm = ({
       `${inputName}_id`,
       val ? (val as OptionType)?.value : 0
     );
+    formik.setFieldValue(
+      `${inputName}_name`,
+      val ? (val as OptionType)?.label : 0
+    );
 
     formik.setFieldTouched(`${inputName}_id`, true);
+    formik.setFieldTouched(`${inputName}_name`, true);
   };
 
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -293,15 +261,15 @@ const ProjectFlockForm = ({
   const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
     return {
       name: initialValues?.name ?? '',
-      flock: initialValues?.flock
+      flock: initialValues?.flock_name
         ? {
-            value: initialValues.flock.id,
-            label: initialValues.flock.name,
+            value: initialValues?.flock?.id ?? 0,
+            label: initialValues?.flock_name,
           }
         : null,
       area: initialValues?.area
         ? {
-            value: initialValues.area.id,
+            value: initialValues.area?.id,
             label: initialValues.area.name,
           }
         : null,
@@ -313,30 +281,31 @@ const ProjectFlockForm = ({
         : null,
       fcr: initialValues?.fcr
         ? {
-            value: initialValues.fcr.id,
+            value: initialValues.fcr?.id,
             label: initialValues.fcr.name,
           }
         : null,
       location: initialValues?.location
         ? {
-            value: initialValues.location.id,
+            value: initialValues.location?.id,
             label: initialValues.location.name,
           }
         : null,
       flock_id: initialValues?.flock?.id ?? 0,
+      flock_name: initialValues?.flock_name ?? '',
       area_id: initialValues?.area?.id ?? 0,
       category: initialValues?.category as NonNullable<
         'GROWING' | 'LAYING' | undefined
       >,
       fcr_id: initialValues?.fcr?.id ?? 0,
       location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? 0,
+      period: initialValues?.period ?? 1,
       kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
         | number
         | undefined
       )[],
     };
-  }, [initialValues]);
+  }, [initialValues, flocks]);
 
   // Formik
   const formik = useFormik<ProjectFlockFormValues>({
@@ -350,7 +319,7 @@ const ProjectFlockForm = ({
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
-        flock_id: values.flock_id as number,
+        flock_name: values.flock_name as string,
         area_id: values.area_id as number,
         category: values.category as string,
         fcr_id: values.fcr_id as number,
@@ -377,8 +346,8 @@ const ProjectFlockForm = ({
   useEffect(() => {
     if (formType == 'detail') {
       formik.setFieldValue('area', {
-        value: initialValues?.area.id,
-        label: initialValues?.area.name,
+        value: initialValues?.area?.id,
+        label: initialValues?.area?.name,
       });
       formik.setFieldValue('area_id', initialValues?.area_id);
       if (initialValues?.area_id) {
@@ -402,9 +371,11 @@ const ProjectFlockForm = ({
 
   // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
   useEffect(() => {
-    if (formType != 'add' && initialValues?.location?.id) {
-      setSelectedLocation(initialValues.location?.id.toString());
-      setDisabledLocation(false); // biar dropdown lokasi aktif juga
+    if (formType != 'add') {
+      if (initialValues?.location?.id) {
+        setSelectedLocation(initialValues.location?.id.toString());
+        setDisabledLocation(false); // biar dropdown lokasi aktif juga
+      }
     }
   }, [formType, initialValues]);
 
@@ -459,7 +430,7 @@ const ProjectFlockForm = ({
       method: 'POST',
       payload: {
         action: action,
-        approvable_ids: [initialValues.id],
+        approvable_ids: [initialValues?.id],
       },
     });
 
@@ -467,14 +438,6 @@ const ProjectFlockForm = ({
       if (refreshProjectFlocks) {
         await refreshProjectFlocks();
       }
-      // if (action == 'APPROVED') {
-      //   setIsApprovedDisabled(true);
-      //   setIsRejectedDisabled(false);
-      // }
-      // if (action == 'REJECTED') {
-      //   setIsRejectedDisabled(true);
-      //   setIsApprovedDisabled(false);
-      // }
       toast.success(approveProjectFlockRes.message as string);
     }
     if (isResponseError(approveProjectFlockRes)) {
@@ -591,9 +554,10 @@ const ProjectFlockForm = ({
                   options={optionsFlock}
                   isLoading={isLoadingFlocks}
                   isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                    formik.touched.flock_name &&
+                    Boolean(formik.errors.flock_name)
                   }
-                  errorMessage={formik.errors.flock_id as string}
+                  errorMessage={formik.errors.flock_name as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -724,6 +688,7 @@ const ProjectFlockForm = ({
               </div>
             )}
           </div>
+          {JSON.stringify(formik.errors)}
         </form>
         {formType != 'add' && (
           <div className='flex flex-row gap-2 mb-6'>