From d53119bcab3b4f8c6dd79732568e04510a3ce8d0 Mon Sep 17 00:00:00 2001
From: Dustin Do <dustin.do95@gmail.com>
Date: Wed, 31 Jul 2024 18:01:31 +0700
Subject: [PATCH] feat(mobile): improve updating wallet balance

---
 apps/mobile/app/(app)/(tabs)/index.tsx        | 10 +++-
 .../app/(app)/transaction/[transactionId].tsx | 47 +++++++++++++------
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/apps/mobile/app/(app)/(tabs)/index.tsx b/apps/mobile/app/(app)/(tabs)/index.tsx
index 9ed8527c..e2fa4b4d 100644
--- a/apps/mobile/app/(app)/(tabs)/index.tsx
+++ b/apps/mobile/app/(app)/(tabs)/index.tsx
@@ -8,11 +8,13 @@ import { Text } from '@/components/ui/text'
 import { useColorScheme } from '@/hooks/useColorScheme'
 import { formatDateShort } from '@/lib/date'
 import { theme } from '@/lib/theme'
+import { walletQueries } from '@/queries/wallet'
 import { useTransactionList } from '@/stores/transaction/hooks'
 import { dayjsExtended } from '@6pm/utilities'
 import type { TransactionPopulated } from '@6pm/validation'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
+import { useQueryClient } from '@tanstack/react-query'
 import { format } from 'date-fns/format'
 import { LinearGradient } from 'expo-linear-gradient'
 import { useMemo, useState } from 'react'
@@ -24,6 +26,7 @@ export default function HomeScreen() {
   const { top, bottom } = useSafeAreaInsets()
   const { colorScheme } = useColorScheme()
   const [walletAccountId, setWalletAccountId] = useState<string | undefined>()
+  const queryClient = useQueryClient()
 
   const { transactions, isLoading, isRefetching, refetch } = useTransactionList(
     {
@@ -34,6 +37,11 @@ export default function HomeScreen() {
     },
   )
 
+  const handleRefresh = () => {
+    refetch()
+    queryClient.invalidateQueries({ queryKey: walletQueries.list._def })
+  }
+
   const transactionsGroupByDate = useMemo(() => {
     const groupedTransactions = transactions.reduce(
       (acc, transaction) => {
@@ -70,7 +78,7 @@ export default function HomeScreen() {
         className="flex-1 bg-card"
         contentContainerStyle={{ paddingBottom: bottom + 32 }}
         refreshing={isRefetching}
-        onRefresh={refetch}
+        onRefresh={handleRefresh}
         sections={transactionsGroupByDate}
         keyExtractor={(item) => item.id}
         renderItem={({ item: transaction }) => (
diff --git a/apps/mobile/app/(app)/transaction/[transactionId].tsx b/apps/mobile/app/(app)/transaction/[transactionId].tsx
index a3de6a3a..56a7dd45 100644
--- a/apps/mobile/app/(app)/transaction/[transactionId].tsx
+++ b/apps/mobile/app/(app)/transaction/[transactionId].tsx
@@ -1,5 +1,6 @@
 import { TransactionForm } from '@/components/transaction/transaction-form'
 import { sleep } from '@/lib/utils'
+import { walletQueries } from '@/queries/wallet'
 import {
   useDeleteTransaction,
   useTransaction,
@@ -13,6 +14,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { PortalHost, useModalPortalRoot } from '@rn-primitives/portal'
+import { useQueryClient } from '@tanstack/react-query'
 import * as Haptics from 'expo-haptics'
 import { useLocalSearchParams, useRouter } from 'expo-router'
 import { LoaderIcon } from 'lucide-react-native'
@@ -26,6 +28,7 @@ export default function EditRecordScreen() {
   const router = useRouter()
   const { mutateAsync: mutateUpdate } = useUpdateTransaction()
   const { mutateAsync: mutateDelete } = useDeleteTransaction()
+  const queryClient = useQueryClient()
   const { sideOffset, ...rootProps } = useModalPortalRoot()
 
   const transactionForm = useForm<TransactionFormValues>({
@@ -42,13 +45,20 @@ export default function EditRecordScreen() {
   })
 
   const handleUpdate = async (values: TransactionFormValues) => {
-    mutateUpdate({ id: transactionId!, data: values }).catch((error) => {
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
-      Alert.alert(
-        (error instanceof Error && error.message) ||
-          t(i18n)`An error occurred while updating the transaction`,
-      )
-    })
+    mutateUpdate({ id: transactionId!, data: values })
+      .then(() => {
+        // TODO: remove this after the wallet store is implemented
+        queryClient.invalidateQueries({
+          queryKey: walletQueries.list._def,
+        })
+      })
+      .catch((error) => {
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+        Alert.alert(
+          (error instanceof Error && error.message) ||
+            t(i18n)`An error occurred while updating the transaction`,
+        )
+      })
 
     await sleep(200)
 
@@ -72,13 +82,22 @@ export default function EditRecordScreen() {
           text: t(i18n)`Delete`,
           style: 'destructive',
           onPress: async () => {
-            mutateDelete(transactionId!).catch((error) => {
-              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
-              Alert.alert(
-                error.message ||
-                  t(i18n)`An error occurred while deleting the transaction`,
-              )
-            })
+            mutateDelete(transactionId!)
+              .then(() => {
+                // TODO: remove this after the wallet store is implemented
+                queryClient.invalidateQueries({
+                  queryKey: walletQueries.list._def,
+                })
+              })
+              .catch((error) => {
+                Haptics.notificationAsync(
+                  Haptics.NotificationFeedbackType.Error,
+                )
+                Alert.alert(
+                  error.message ||
+                    t(i18n)`An error occurred while deleting the transaction`,
+                )
+              })
 
             router.back()
             Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)