diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormBoot.tsx b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormBoot.tsx index 8d3e72094..e9515e9d1 100644 --- a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormBoot.tsx +++ b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormBoot.tsx @@ -7,6 +7,8 @@ interface RuleFormBootValues { bankRule?: null; bankRuleId?: null; isBankRuleLoading: boolean; + isEditMode: boolean; + isNewMode: boolean; } const RuleFormBootContext = createContext( @@ -27,11 +29,17 @@ function RuleFormBoot({ bankRuleId, ...props }: RuleFormBootProps) { ); const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {}); + const isNewMode = !bankRuleId; + const isEditMode = !isNewMode; + const provider = { + bankRuleId, bankRule, accounts, isBankRuleLoading, isAccountsLoading, + isEditMode, + isNewMode, } as RuleFormBootValues; const isLoading = isBankRuleLoading || isAccountsLoading; diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx index a97ce4c19..71412afc4 100644 --- a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx +++ b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx @@ -14,7 +14,7 @@ import { Group, Stack, } from '@/components'; -import { useCreateBankRule } from '@/hooks/query/bank-rules'; +import { useCreateBankRule, useEditBankRule } from '@/hooks/query/bank-rules'; import { AssignTransactionTypeOptions, FieldCondition, @@ -24,7 +24,11 @@ import { initialValues, } from './_utils'; import { useRuleFormDialogBoot } from './RuleFormBoot'; -import { transfromToSnakeCase } from '@/utils'; +import { + transformToCamelCase, + transformToForm, + transfromToSnakeCase, +} from '@/utils'; import withDialogActions from '@/containers/Dialog/withDialogActions'; import { DialogsName } from '@/constants/dialogs'; @@ -33,42 +37,53 @@ function RuleFormContentFormRoot({ openDialog, closeDialog, }) { - const { accounts } = useRuleFormDialogBoot(); + const { accounts, bankRule, isEditMode, bankRuleId } = + useRuleFormDialogBoot(); const { mutateAsync: createBankRule } = useCreateBankRule(); + const { mutateAsync: editBankRule } = useEditBankRule(); const validationSchema = CreateRuleFormSchema; + const _initialValues = { + ...initialValues, + ...transformToForm(transformToCamelCase(bankRule), initialValues), + }; + // Handles the form submitting. const handleSubmit = ( values: RuleFormValues, { setSubmitting }: FormikHelpers, ) => { - const _value = transfromToSnakeCase(values); - + const _values = transfromToSnakeCase(values); setSubmitting(true); - createBankRule(_value) - .then(() => { - setSubmitting(false); - closeDialog(DialogsName.BankRuleForm); - AppToaster.show({ - intent: Intent.SUCCESS, - message: 'The bank rule has been created successfully.', - }); - }) - .catch((error) => { - setSubmitting(false); - - AppToaster.show({ - intent: Intent.DANGER, - message: 'Something went wrong!', - }); + const handleSuccess = () => { + setSubmitting(false); + closeDialog(DialogsName.BankRuleForm); + AppToaster.show({ + intent: Intent.SUCCESS, + message: 'The bank rule has been created successfully.', }); + }; + const handleError = (error) => { + setSubmitting(false); + AppToaster.show({ + intent: Intent.DANGER, + message: 'Something went wrong!', + }); + }; + if (isEditMode) { + editBankRule([bankRuleId, _values]) + .then(handleSuccess) + .catch(handleError); + } else { + createBankRule(_values).then(handleSuccess).catch(handleError); + } }; return ( - initialValues={initialValues} + initialValues={_initialValues} validationSchema={validationSchema} onSubmit={handleSubmit} > diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx index 262f1576a..e61afa7dc 100644 --- a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx +++ b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx @@ -16,8 +16,8 @@ function RuleFormDialogRoot({ }) { return ( {}; + const handleEditBankRule = ({ id }) => { + openDialog(DialogsName.BankRuleForm, { bankRuleId: id }); + }; const isEmptyState = false; diff --git a/packages/webapp/src/hooks/query/bank-rules.ts b/packages/webapp/src/hooks/query/bank-rules.ts index d01d6c47d..02e19a8b1 100644 --- a/packages/webapp/src/hooks/query/bank-rules.ts +++ b/packages/webapp/src/hooks/query/bank-rules.ts @@ -21,12 +21,15 @@ export function useEditBankRule(props) { const queryClient = useQueryClient(); const apiRequest = useApiRequest(); - return useMutation((id: number) => apiRequest.post(`/bank-rules/${id}`), { - onSuccess: (res, id) => { - // Invalidate queries. + return useMutation( + ([id, values]) => apiRequest.post(`/banking/rules/${id}`, values), + { + onSuccess: (res, id) => { + // Invalidate queries. + }, + ...props, }, - ...props, - }); + ); } export function useDeleteBankRule(props) {