feat: update recurred payment

paolojulian · Jul 28, 2024 · 2e80e3a · 2e80e3a
1 parent fdc7b90
commit 2e80e3a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/...curredPayments/RecurredPaymentModal/ReccuredPaymentModalForm/ReccuredPaymentModalForm.tsx b/...curredPayments/RecurredPaymentModal/ReccuredPaymentModalForm/ReccuredPaymentModalForm.tsx
@@ -1,8 +1,10 @@
 import Button from '@/components/common/Button';
 import Stack from '@/components/common/Stack';
 import { Expense } from '@/hooks/services/expense/expense.types';
+import { useUpdateExpense } from '@/hooks/services/expense/useUpdateExpense';
 import { Formik } from 'formik';
 import { FC } from 'react';
+import { Alert } from 'react-native';
 import {
   RECCURED_PAYMENT_MODAL_SCHEMA,
   RecurredPaymentModalValues,
@@ -13,20 +15,36 @@ import {
 } from './ReccuredPaymentModalForm.style';
 
 type ReccuredPaymentModalFormProps = {
+  onDismiss: () => void;
   expense: Expense;
 };
 
-const ReccuredPaymentModalForm: FC<ReccuredPaymentModalFormProps> = ({ expense }) => {
+const ReccuredPaymentModalForm: FC<ReccuredPaymentModalFormProps> = ({ onDismiss, expense }) => {
+  const { mutateAsync: updateExpenseMutate } = useUpdateExpense(expense.id);
+
+  const handleSubmit = async (values: RecurredPaymentModalValues) => {
+    try {
+      await updateExpenseMutate({
+        amount: values.amount,
+        description: values.description,
+      });
+      onDismiss();
+      Alert.alert('Success', 'Expense updated successfully');
+    } catch {
+      Alert.alert('Error', 'Failed to update expense');
+    }
+  };
+
   return (
     <Formik<RecurredPaymentModalValues>
-      onSubmit={() => {}}
+      onSubmit={handleSubmit}
       initialValues={{
         amount: expense?.amount,
         description: expense?.description,
       }}
       validationSchema={RECCURED_PAYMENT_MODAL_SCHEMA}
     >
-      {({ handleBlur, handleChange, values }) => (
+      {({ handleBlur, handleChange, handleSubmit, values }) => (
         <Stack style={{ flexGrow: 1, gap: 24, paddingVertical: 24 }}>
           <Stack style={{ gap: 8, flexGrow: 1 }}>
             <RecurredPaymentAmountField
@@ -40,7 +58,7 @@ const ReccuredPaymentModalForm: FC<ReccuredPaymentModalFormProps> = ({ expense }
               value={values.description}
             />
           </Stack>
-          <Button text="Update" onPress={() => {}} />
+          <Button text="Update" onPress={() => handleSubmit()} />
         </Stack>
       )}
     </Formik>

diff --git a/...enseScreen/EditExpenseForm/RecurredPayments/RecurredPaymentModal/RecurredPaymentModal.tsx b/...enseScreen/EditExpenseForm/RecurredPayments/RecurredPaymentModal/RecurredPaymentModal.tsx
@@ -17,7 +17,7 @@ const RecurredPaymenModal: FC<RecurredPaymentModalProps> = ({ onClose, isOpen, e
       {expense ? (
         <RecurredPaymentModalContainer>
           <RecurredPaymentModalHeader onDeleteDone={onClose} expense={expense} />
-          <ReccuredPaymentModalForm expense={expense} />
+          <ReccuredPaymentModalForm onDismiss={onClose} expense={expense} />
         </RecurredPaymentModalContainer>
       ) : (
         <></>

diff --git a/hooks/services/expense/useExpenseRecurredPayments.ts b/hooks/services/expense/useExpenseRecurredPayments.ts
@@ -14,7 +14,12 @@ export function useExpenseRecurredPayments(id: number, filterDate: Date) {
   };
 
   return useQuery({
-    queryKey: [ExpenseQueryKeys.recurrenceItems, id, dayjs(filterDate).format('YYYY-MM-DD')],
+    queryKey: [
+      ExpenseQueryKeys.expense,
+      ExpenseQueryKeys.recurrenceItems,
+      id,
+      dayjs(filterDate).format('YYYY-MM-DD'),
+    ],
     queryFn,
   });
 }

diff --git a/hooks/services/expense/useUpdateExpense.ts b/hooks/services/expense/useUpdateExpense.ts
@@ -40,6 +40,8 @@ export function useUpdateExpense(id: Expense['id']) {
           }
 
           const queriesToCancel: string[] = [
+            ExpenseQueryKeys.expense,
+            ExpenseQueryKeys.item,
             ExpenseQueryKeys.list,
             ExpenseQueryKeys.recurringExpenses,
             BudgetQueryKeys.budget,