From 2e80e3aa85e44c107711f641508ef6173e1488c2 Mon Sep 17 00:00:00 2001
From: Paolo Vincent Julian <paolo.julian@accelo.com>
Date: Sun, 28 Jul 2024 12:52:27 +0800
Subject: [PATCH] feat: update recurred payment

---
 .../ReccuredPaymentModalForm.tsx              | 26 ++++++++++++++++---
 .../RecurredPaymentModal.tsx                  |  2 +-
 .../expense/useExpenseRecurredPayments.ts     |  7 ++++-
 hooks/services/expense/useUpdateExpense.ts    |  2 ++
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/components/expenses/EditExpenseScreen/EditExpenseForm/RecurredPayments/RecurredPaymentModal/ReccuredPaymentModalForm/ReccuredPaymentModalForm.tsx b/components/expenses/EditExpenseScreen/EditExpenseForm/RecurredPayments/RecurredPaymentModal/ReccuredPaymentModalForm/ReccuredPaymentModalForm.tsx
index 7819892..28b069a 100644
--- a/components/expenses/EditExpenseScreen/EditExpenseForm/RecurredPayments/RecurredPaymentModal/ReccuredPaymentModalForm/ReccuredPaymentModalForm.tsx
+++ b/components/expenses/EditExpenseScreen/EditExpenseForm/RecurredPayments/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/components/expenses/EditExpenseScreen/EditExpenseForm/RecurredPayments/RecurredPaymentModal/RecurredPaymentModal.tsx b/components/expenses/EditExpenseScreen/EditExpenseForm/RecurredPayments/RecurredPaymentModal/RecurredPaymentModal.tsx
index 7806413..e221fb5 100644
--- a/components/expenses/EditExpenseScreen/EditExpenseForm/RecurredPayments/RecurredPaymentModal/RecurredPaymentModal.tsx
+++ b/components/expenses/EditExpenseScreen/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
index 99ebb44..c35f773 100644
--- 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
index 706a7d8..8616ed6 100644
--- 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,