refactor(FE-62): optimize product and ekspedisi removal logic in MovementForm

This commit is contained in:
rstubryan
2025-10-10 11:14:59 +07:00
parent 095190d757
commit 57831646d9
@@ -1,6 +1,6 @@
'use client';
import { useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useFormik } from 'formik';
import useSWR from 'swr';
@@ -105,12 +105,20 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
formik.setFieldValue('product', newProducts);
};
const removeProduct = (index: number) => {
const newProducts = formik.values.product?.filter(
(_, idx) => idx !== index
);
formik.setFieldValue('product', newProducts);
};
const removeProduct = useCallback(
(i: number) => {
const updatedProducts =
formik.values.product?.reduce((acc: ProductSchema[], item, index) => {
if (index !== i) {
acc.push(item);
}
return acc;
}, []) ?? [];
formik.setFieldValue('product', updatedProducts);
},
[formik]
);
const addEkspedisi = () => {
const newEkspedisi = [
@@ -131,12 +139,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
formik.setFieldValue('ekspedisi', newEkspedisi);
};
const removeEkspedisi = (index: number) => {
const newEkspedisi = formik.values.ekspedisi?.filter(
(_, idx) => idx !== index
);
formik.setFieldValue('ekspedisi', newEkspedisi);
};
const removeEkspedisi = useCallback(
(i: number) => {
const updatedEkspedisi =
formik.values.ekspedisi?.reduce(
(acc: EkspedisiSchema[], item, index) => {
if (index !== i) {
acc.push(item);
}
return acc;
},
[]
) ?? [];
formik.setFieldValue('ekspedisi', updatedEkspedisi);
},
[formik]
);
const isRepeaterInputError = <T extends 'product' | 'ekspedisi'>(
arrayName: T,
@@ -201,7 +220,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
return (
<>
<section className='w-full max-w-xl'>
<section className='w-full max-w-5xl'>
<FormHeader
type={type}
title='Movement'
@@ -321,7 +340,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
</thead>
<tbody>
{formik.values.product?.map((product, idx) => (
<tr key={idx}>
<tr key={`product-row-${idx}-${product.product_id}`}>
<td>
<SelectInput
required
@@ -422,7 +441,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
</thead>
<tbody>
{formik.values.ekspedisi?.map((ekspedisi, idx) => (
<tr key={idx}>
<tr
key={`ekspedisi-row-${idx}-${ekspedisi.product_id}-${ekspedisi.supplier_id}`}
>
<td>
<SelectInput
required