refactor(FE-114): rearrange code for better readability

2026-05-20 13:32:00 +00:00 · 2025-10-20 10:06:26 +07:00
parent 16d72ebf6f
commit 4233c19dc9
1 changed files with 178 additions and 170 deletions
@@ -1,9 +1,8 @@
 'use client';

 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { FormikProps, useFormik } from 'formik';
+import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
-import { toast } from 'react-hot-toast';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
@@ -42,8 +41,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
  const [selectedWeight, setSelectedWeight] = useState<number[]>([]);
  const [selectedVaccine, setSelectedVaccine] = useState<number[]>([]);
  const [selectedMortality, setSelectedMortality] = useState<number[]>([]);
-
  const [, setRecordingFormErrorMessage] = useState('');
+
  const {
    deleteModal,
    recordingFormErrorMessage,
@@ -107,15 +106,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
    },
  });

+  // Locations
  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({ search: locationSelectInputValue }).toString()}`;
  const { data: locations, isLoading: isLoadingLocations } = useSWR(
    locationsUrl,
    LocationApi.getAllFetcher
  );
-  const locationOptions = isResponseSuccess(locations)
-    ? locations.data.map((loc) => ({ value: loc.id, label: loc.name }))
-    : [];

+  // Project Flocks
  const projectFlocksUrl = useMemo(() => {
    if (!formik.values.location_id) return null;
    const params = new URLSearchParams({
@@ -130,13 +128,39 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
    ProjectFlockApi.getAllFetcher
  );

-  const flockOptions = isResponseSuccess(projectFlocks)
-    ? projectFlocks.data.map((flock) => ({
-        value: flock.id,
-        label: flock.flock.name,
-      }))
-    : [];
+  // Pakan Products
+  const pakanUrl = useMemo(() => {
+    if (!formik.values.location_id) return null;
+    const params = new URLSearchParams({
+      flag: 'PAKAN',
+      search: '',
+      location_id: formik.values.location_id.toString(),
+    });
+    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
+  }, [formik.values.location_id]);

+  const { data: pakanProducts, isLoading: isLoadingPakan } = useSWR(
+    pakanUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  // OVK Products
+  const ovkUrl = useMemo(() => {
+    if (!formik.values.location_id) return null;
+    const params = new URLSearchParams({
+      flag: 'OVK',
+      search: '',
+      location_id: formik.values.location_id.toString(),
+    });
+    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
+  }, [formik.values.location_id]);
+
+  const { data: ovkProducts, isLoading: isLoadingOvk } = useSWR(
+    ovkUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  // COMPUTED VALUES
  const buildWarehouseLabel = useCallback((warehouse: Warehouse) => {
    const parts: string[] = [warehouse.name];

@@ -155,20 +179,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
    return parts.join(' - ');
  }, []);

-  const pakanUrl = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    const params = new URLSearchParams({
-      flag: 'PAKAN',
-      search: '',
-      location_id: formik.values.location_id.toString(),
-    });
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [formik.values.location_id]);
+  const locationOptions = isResponseSuccess(locations)
+    ? locations.data.map((loc) => ({ value: loc.id, label: loc.name }))
+    : [];

-  const { data: pakanProducts, isLoading: isLoadingPakan } = useSWR(
-    pakanUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
+  const flockOptions = isResponseSuccess(projectFlocks)
+    ? projectFlocks.data.map((flock) => ({
+        value: flock.id,
+        label: flock.flock.name,
+      }))
+    : [];
+
+  const coopOptions = useMemo(() => {
+    if (!selectedProjectFlock || !selectedProjectFlock.kandangs) return [];
+    return selectedProjectFlock.kandangs.map((kandang) => ({
+      value: kandang.id,
+      label: kandang.name,
+    }));
+  }, [selectedProjectFlock]);

  const filteredPakanProducts = useMemo(() => {
    if (!isResponseSuccess(pakanProducts) || !formik.values.location_id)
@@ -181,8 +209,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
        return warehouse.location.id === formik.values.location_id;
      }

-      // If warehouse only has area, include it if area matches the location's area
-      // Note: This might need adjustment based on your business logic
      return false;
    });
  }, [pakanProducts, formik.values.location_id]);
@@ -204,21 +230,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
    return map;
  }, [filteredPakanProducts]);

-  const ovkUrl = useMemo(() => {
-    if (!formik.values.location_id) return null;
-    const params = new URLSearchParams({
-      flag: 'OVK',
-      search: '',
-      location_id: formik.values.location_id.toString(),
-    });
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [formik.values.location_id]);
-
-  const { data: ovkProducts, isLoading: isLoadingOvk } = useSWR(
-    ovkUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
-
  const filteredOvkProducts = useMemo(() => {
    if (!isResponseSuccess(ovkProducts) || !formik.values.location_id)
      return [];
@@ -230,8 +241,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
        return warehouse.location.id === formik.values.location_id;
      }

-      // If warehouse only has area, include it if area matches the location's area
-      // Note: This might need adjustment based on your business logic
      return false;
    });
  }, [ovkProducts, formik.values.location_id]);
@@ -253,14 +262,19 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
    return map;
  }, [filteredOvkProducts]);

-  const coopOptions = useMemo(() => {
-    if (!selectedProjectFlock || !selectedProjectFlock.kandangs) return [];
-    return selectedProjectFlock.kandangs.map((kandang) => ({
-      value: kandang.id,
-      label: kandang.name,
-    }));
-  }, [selectedProjectFlock]);
+  // EFFECTS
+  useEffect(() => {
+    if (initialValues?.flock && isResponseSuccess(projectFlocks)) {
+      const flock = projectFlocks.data.find(
+        (f) => f.id === initialValues.flock.id
+      );
+      if (flock) {
+        setSelectedProjectFlock(flock);
+      }
+    }
+  }, [initialValues, projectFlocks]);

+  // EVENT HANDLERS - Select Inputs
  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
    const locationValue = (val as OptionType)?.value;

@@ -298,17 +312,120 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
    formik.setFieldValue('coop_id', coopValue || 0, false);
  };

-  useEffect(() => {
-    if (initialValues?.flock && isResponseSuccess(projectFlocks)) {
-      const flock = projectFlocks.data.find(
-        (f) => f.id === initialValues.flock.id
-      );
-      if (flock) {
-        setSelectedProjectFlock(flock);
-      }
-    }
-  }, [initialValues, projectFlocks]);
+  // EVENT HANDLERS - Feed Data
+  const addFeedData = () => {
+    const newFeedData = [
+      ...(formik.values.feed_data || []),
+      {
+        feed: null,
+        feed_id: '',
+        feed_qty: '',
+        feed_stock: 0,
+      },
+    ];
+    formik.setFieldValue('feed_data', newFeedData);
+  };

+  const removeFeedData = (idx: number) => {
+    const updatedFeedData = formik.values.feed_data?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('feed_data', updatedFeedData);
+  };
+
+  const removeSelectedFeedData = () => {
+    const updatedFeedData = formik.values.feed_data?.filter(
+      (_, idx) => !selectedFeed.includes(idx)
+    );
+    formik.setFieldValue('feed_data', updatedFeedData);
+    setSelectedFeed([]);
+  };
+
+  // EVENT HANDLERS - Body Weight
+  const addBodyWeight = () => {
+    const newBodyWeight = [
+      ...(formik.values.body_weight || []),
+      {
+        chicken_weight: 0,
+        chicken_count: 0,
+        average_chicken_weight: 0,
+      },
+    ];
+    formik.setFieldValue('body_weight', newBodyWeight);
+  };
+
+  const removeBodyWeight = (idx: number) => {
+    const updatedBodyWeight = formik.values.body_weight?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('body_weight', updatedBodyWeight);
+  };
+
+  const removeSelectedBodyWeight = () => {
+    const updatedBodyWeight = formik.values.body_weight?.filter(
+      (_, idx) => !selectedWeight.includes(idx)
+    );
+    formik.setFieldValue('body_weight', updatedBodyWeight);
+    setSelectedWeight([]);
+  };
+
+  // EVENT HANDLERS - Vaccination
+  const addVaccination = () => {
+    const newVaccination = [
+      ...(formik.values.vaccination || []),
+      {
+        vaccine: null,
+        vaccine_id: '',
+        total_stock: '',
+        used_stock: 0,
+      },
+    ];
+    formik.setFieldValue('vaccination', newVaccination);
+  };
+
+  const removeVaccination = (idx: number) => {
+    const updatedVaccination = formik.values.vaccination?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('vaccination', updatedVaccination);
+  };
+
+  const removeSelectedVaccination = () => {
+    const updatedVaccination = formik.values.vaccination?.filter(
+      (_, idx) => !selectedVaccine.includes(idx)
+    );
+    formik.setFieldValue('vaccination', updatedVaccination);
+    setSelectedVaccine([]);
+  };
+
+  // EVENT HANDLERS - Mortality
+  const addMortality = () => {
+    const newMortality = [
+      ...(formik.values.mortality || []),
+      {
+        condition: RECORDING_FLAG_OPTIONS[0].value,
+        count: 0,
+      },
+    ];
+    formik.setFieldValue('mortality', newMortality);
+  };
+
+  const removeMortality = (idx: number) => {
+    const updatedMortality = formik.values.mortality?.filter(
+      (_, i) => i !== idx
+    );
+    formik.setFieldValue('mortality', updatedMortality);
+  };
+
+  const removeSelectedMortality = () => {
+    const updatedMortality = formik.values.mortality?.filter(
+      (_, idx) => !selectedMortality.includes(idx)
+    );
+    formik.setFieldValue('mortality', updatedMortality);
+    setSelectedMortality([]);
+  };
+
+  // HELPER FUNCTIONS
  const isRepeaterInputError = <T extends keyof CreateRecordingPayload>(
    arrayName: T,
    field: T extends 'feed_data'
@@ -350,115 +467,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
    };
  };

-  const addFeedData = () => {
-    const newFeedData = [
-      ...(formik.values.feed_data || []),
-      {
-        feed: null,
-        feed_id: '',
-        feed_qty: '',
-        feed_stock: 0,
-      },
-    ];
-    formik.setFieldValue('feed_data', newFeedData);
-  };
-
-  const removeFeedData = (idx: number) => {
-    const updatedFeedData = formik.values.feed_data?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('feed_data', updatedFeedData);
-  };
-
-  const removeSelectedFeedData = () => {
-    const updatedFeedData = formik.values.feed_data?.filter(
-      (_, idx) => !selectedFeed.includes(idx)
-    );
-    formik.setFieldValue('feed_data', updatedFeedData);
-    setSelectedFeed([]);
-  };
-
-  const addBodyWeight = () => {
-    const newBodyWeight = [
-      ...(formik.values.body_weight || []),
-      {
-        chicken_weight: 0,
-        chicken_count: 0,
-        average_chicken_weight: 0,
-      },
-    ];
-    formik.setFieldValue('body_weight', newBodyWeight);
-  };
-
-  const removeBodyWeight = (idx: number) => {
-    const updatedBodyWeight = formik.values.body_weight?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('body_weight', updatedBodyWeight);
-  };
-
-  const removeSelectedBodyWeight = () => {
-    const updatedBodyWeight = formik.values.body_weight?.filter(
-      (_, idx) => !selectedWeight.includes(idx)
-    );
-    formik.setFieldValue('body_weight', updatedBodyWeight);
-    setSelectedWeight([]);
-  };
-
-  const addVaccination = () => {
-    const newVaccination = [
-      ...(formik.values.vaccination || []),
-      {
-        vaccine: null,
-        vaccine_id: '',
-        total_stock: '',
-        used_stock: 0,
-      },
-    ];
-    formik.setFieldValue('vaccination', newVaccination);
-  };
-
-  const removeVaccination = (idx: number) => {
-    const updatedVaccination = formik.values.vaccination?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('vaccination', updatedVaccination);
-  };
-
-  const removeSelectedVaccination = () => {
-    const updatedVaccination = formik.values.vaccination?.filter(
-      (_, idx) => !selectedVaccine.includes(idx)
-    );
-    formik.setFieldValue('vaccination', updatedVaccination);
-    setSelectedVaccine([]);
-  };
-
-  const addMortality = () => {
-    const newMortality = [
-      ...(formik.values.mortality || []),
-      {
-        condition: RECORDING_FLAG_OPTIONS[0].value,
-        count: 0,
-      },
-    ];
-    formik.setFieldValue('mortality', newMortality);
-  };
-
-  const removeMortality = (idx: number) => {
-    const updatedMortality = formik.values.mortality?.filter(
-      (_, i) => i !== idx
-    );
-    formik.setFieldValue('mortality', updatedMortality);
-  };
-
-  const removeSelectedMortality = () => {
-    const updatedMortality = formik.values.mortality?.filter(
-      (_, idx) => !selectedMortality.includes(idx)
-    );
-    formik.setFieldValue('mortality', updatedMortality);
-    setSelectedMortality([]);
-  };
-
  return (
    <>
      <section className='w-full max-w-5xl'>