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; 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 MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
const [, setMovementFormErrorMessage] = useState(''); const [, setMovementFormErrorMessage] = useState('');
const [selectedProducts, setSelectedProducts] = useState<number[]>([]); const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
@@ -212,16 +194,22 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
!formik.touched[arrayName] || !formik.touched[arrayName] ||
!Array.isArray(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 touchedField = formik.touched[arrayName]?.[idx]?.[column as string];
const errorField = formik.errors[arrayName]?.[idx] as Record< const errorField = formik.errors[arrayName]?.[idx] as Record<
string, 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 { interface WarehouseOptionType extends OptionType {
@@ -571,11 +559,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
isLoading={isLoadingProducts} isLoading={isLoadingProducts}
isDisabled={type === 'detail'} isDisabled={type === 'detail'}
isClearable isClearable
isError={isRepeaterInputError( {...isRepeaterInputError('product', 'product', idx)}
'product',
'product',
idx
)}
/> />
</td> </td>
<td> <td>
@@ -586,7 +570,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={product.qty_product ?? ''} value={product.qty_product ?? ''}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
isError={isRepeaterInputError( {...isRepeaterInputError(
'product', 'product',
'qty_product', 'qty_product',
idx idx
@@ -734,13 +718,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
formik.setFieldValue(`ekspedisi.${idx}.qty`, ''); formik.setFieldValue(`ekspedisi.${idx}.qty`, '');
}} }}
options={getFilteredProductOptions()} options={getFilteredProductOptions()}
isDisabled={type === 'detail'} {...isRepeaterInputError(
isClearable
isError={isRepeaterInputError(
'ekspedisi', 'ekspedisi',
'product', 'product',
idx idx
)} )}
isDisabled={type === 'detail'}
isClearable
/> />
</td> </td>
<td> <td>
@@ -751,7 +735,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.qty ?? ''} value={ekspedisi.qty ?? ''}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
{...getEkspedisiFieldError(formik, idx, 'qty')} {...isRepeaterInputError('ekspedisi', 'qty', idx)}
readOnly={type === 'detail'} readOnly={type === 'detail'}
className={{ className={{
wrapper: 'w-full min-w-24', wrapper: 'w-full min-w-24',
@@ -777,7 +761,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
isLoading={isLoadingSuppliers} isLoading={isLoadingSuppliers}
isDisabled={type === 'detail'} isDisabled={type === 'detail'}
isClearable isClearable
isError={isRepeaterInputError( {...isRepeaterInputError(
'ekspedisi', 'ekspedisi',
'supplier', 'supplier',
idx idx
@@ -791,10 +775,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.plat_nomor ?? ''} value={ekspedisi.plat_nomor ?? ''}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
{...getEkspedisiFieldError( {...isRepeaterInputError(
formik, 'ekspedisi',
idx, 'plat_nomor',
'plat_nomor' idx
)} )}
readOnly={type === 'detail'} readOnly={type === 'detail'}
className={{ className={{
@@ -809,10 +793,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.no_surat_jalan ?? ''} value={ekspedisi.no_surat_jalan ?? ''}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
{...getEkspedisiFieldError( {...isRepeaterInputError(
formik, 'ekspedisi',
idx, 'no_surat_jalan',
'no_surat_jalan' idx
)} )}
readOnly={type === 'detail'} readOnly={type === 'detail'}
className={{ className={{
@@ -848,7 +832,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
); );
} }
}} }}
isError={isRepeaterInputError( {...isRepeaterInputError(
'ekspedisi', 'ekspedisi',
'dokumen', 'dokumen',
idx idx
@@ -867,10 +851,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.biaya_ekspedisi ?? ''} value={ekspedisi.biaya_ekspedisi ?? ''}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
{...getEkspedisiFieldError( {...isRepeaterInputError(
formik, 'ekspedisi',
idx, 'biaya_ekspedisi',
'biaya_ekspedisi' idx
)} )}
readOnly={type === 'detail'} readOnly={type === 'detail'}
className={{ className={{
@@ -883,10 +867,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
disabled disabled
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
{...getEkspedisiFieldError( {...isRepeaterInputError(
formik, 'ekspedisi',
idx, 'biaya_ekspedisi_per_item',
'biaya_ekspedisi_per_item' idx
)} )}
name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`} name={`ekspedisi.${idx}.biaya_ekspedisi_per_item`}
value={ value={
@@ -910,10 +894,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
value={ekspedisi.nama_sopir ?? ''} value={ekspedisi.nama_sopir ?? ''}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
{...getEkspedisiFieldError( {...isRepeaterInputError(
formik, 'ekspedisi',
idx, 'nama_sopir',
'nama_sopir' idx
)} )}
readOnly={type === 'detail'} readOnly={type === 'detail'}
className={{ className={{