refactor(FE-62,65): simplify error handling in MovementForm by consolidating error checks

This commit is contained in:
rstubryan
2025-10-15 10:51:06 +07:00
parent 4b4b74d07c
commit 56a9fc2349
@@ -38,24 +38,6 @@ interface MovementFormProps {
initialValues?: Movement;
}
function getEkspedisiFieldError(
formik: FormikProps<MovementFormValues>,
idx: number,
field: keyof EkspedisiSchema
) {
const errorObj = formik.errors.ekspedisi?.[idx];
const touched = formik.touched.ekspedisi?.[idx]?.[field];
const isError =
touched &&
typeof errorObj === 'object' &&
!!(errorObj as Record<string, unknown>)?.[field];
const errorMessage =
typeof errorObj === 'object'
? (errorObj as Record<string, string>)?.[field]
: undefined;
return { isError, errorMessage };
}
const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const [, setMovementFormErrorMessage] = useState('');
const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
@@ -212,16 +194,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
!formik.touched[arrayName] ||
!Array.isArray(formik.touched[arrayName])
) {
return false;
return {
isError: false,
errorMessage: undefined,
};
}
const touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
const errorField = formik.errors[arrayName]?.[idx] as Record<
string,
unknown
string
>;
return touchedField && Boolean(errorField?.[column as string]);
return {
isError: touchedField && Boolean(errorField?.[column as string]),
errorMessage: touchedField ? errorField?.[column as string] : undefined,
};
};
interface WarehouseOptionType extends OptionType {
@@ -571,11 +559,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
isLoading={isLoadingProducts}
isDisabled={type === 'detail'}
isClearable
isError={isRepeaterInputError(
'product',
'product',
idx
)}
{...isRepeaterInputError('product', 'product', idx)}
/>
</td>
<td>
@@ -586,7 +570,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={product.qty_product ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={isRepeaterInputError(
{...isRepeaterInputError(
'product',
'qty_product',
idx
@@ -734,13 +718,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
formik.setFieldValue(`ekspedisi.${idx}.qty`, '');
}}
options={getFilteredProductOptions()}
isDisabled={type === 'detail'}
isClearable
isError={isRepeaterInputError(
{...isRepeaterInputError(
'ekspedisi',
'product',
idx
)}
isDisabled={type === 'detail'}
isClearable
/>
</td>
<td>
@@ -751,7 +735,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.qty ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...getEkspedisiFieldError(formik, idx, 'qty')}
{...isRepeaterInputError('ekspedisi', 'qty', idx)}
readOnly={type === 'detail'}
className={{
wrapper: 'w-full min-w-24',
@@ -777,7 +761,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
isLoading={isLoadingSuppliers}
isDisabled={type === 'detail'}
isClearable
isError={isRepeaterInputError(
{...isRepeaterInputError(
'ekspedisi',
'supplier',
idx
@@ -791,10 +775,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.plat_nomor ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...getEkspedisiFieldError(
formik,
idx,
'plat_nomor'
{...isRepeaterInputError(
'ekspedisi',
'plat_nomor',
idx
)}
readOnly={type === 'detail'}
className={{
@@ -809,10 +793,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.no_surat_jalan ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...getEkspedisiFieldError(
formik,
idx,
'no_surat_jalan'
{...isRepeaterInputError(
'ekspedisi',
'no_surat_jalan',
idx
)}
readOnly={type === 'detail'}
className={{
@@ -848,7 +832,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
);
}
}}
isError={isRepeaterInputError(
{...isRepeaterInputError(
'ekspedisi',
'dokumen',
idx
@@ -867,10 +851,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.biaya_ekspedisi ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...getEkspedisiFieldError(
formik,
idx,
'biaya_ekspedisi'
{...isRepeaterInputError(
'ekspedisi',
'biaya_ekspedisi',
idx
)}
readOnly={type === 'detail'}
className={{
@@ -883,10 +867,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
disabled
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...getEkspedisiFieldError(
formik,
idx,
'biaya_ekspedisi_per_item'
{...isRepeaterInputError(
'ekspedisi',
'biaya_ekspedisi_per_item',
idx
)}
name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
value={
@@ -910,10 +894,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.nama_sopir ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
{...getEkspedisiFieldError(
formik,
idx,
'nama_sopir'
{...isRepeaterInputError(
'ekspedisi',
'nama_sopir',
idx
)}
readOnly={type === 'detail'}
className={{