From ece9fa27175c1ad6b2814553d034a6d94d2a4fcc Mon Sep 17 00:00:00 2001
From: Dustin Do <dustin.do95@gmail.com>
Date: Mon, 23 Sep 2024 12:37:38 +0700
Subject: [PATCH] fix(mobile): fix transaction caching missing populated fields

---
 .../transaction/transaction-item.tsx          | 20 ++++++++++++++-----
 apps/mobile/stores/transaction/hooks.tsx      | 11 +++-------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/apps/mobile/components/transaction/transaction-item.tsx b/apps/mobile/components/transaction/transaction-item.tsx
index f2207774..74514d06 100644
--- a/apps/mobile/components/transaction/transaction-item.tsx
+++ b/apps/mobile/components/transaction/transaction-item.tsx
@@ -1,5 +1,7 @@
 import { TRANSACTION_ICONS } from '@/lib/icons/category-icons'
+import { useBudgetList } from '@/stores/budget/hooks'
 import { useCategoryList } from '@/stores/category/hooks'
+import { useWalletList } from '@/stores/wallet/hooks'
 import type { TransactionPopulated } from '@6pm/validation'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
@@ -19,6 +21,8 @@ export const TransactionItem: FC<TransactionItemProps> = ({ transaction }) => {
   const { i18n } = useLingui()
   const { categoryId } = transaction
   const { categoriesDict } = useCategoryList()
+  const { budgetsDict } = useBudgetList()
+  const { walletsDict } = useWalletList()
   const category = (categoryId && categoriesDict[categoryId]) || null
 
   const iconName = useMemo(() => {
@@ -31,6 +35,12 @@ export const TransactionItem: FC<TransactionItemProps> = ({ transaction }) => {
     )
   }, [transaction.note, category?.name, i18n])
 
+  const budget =
+    (transaction.budgetId && budgetsDict[transaction.budgetId]) || null
+  const walletAccount =
+    (transaction.walletAccountId && walletsDict[transaction.walletAccountId]) ||
+    null
+
   return (
     <Link
       asChild
@@ -78,29 +88,29 @@ export const TransactionItem: FC<TransactionItemProps> = ({ transaction }) => {
             />
           </View>
           <View className="flex-row items-center gap-3 self-start">
-            {transaction.walletAccount && (
+            {walletAccount && (
               <View className="flex-row items-center gap-2">
                 <GenericIcon
                   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-                  name={transaction.walletAccount.icon as any}
+                  name={walletAccount.icon as any}
                   className="size-4 text-muted-foreground"
                 />
                 <Text
                   numberOfLines={1}
                   className="text-muted-foreground text-sm"
                 >
-                  {transaction.walletAccount.name}
+                  {walletAccount.name}
                 </Text>
               </View>
             )}
-            {transaction.budget && (
+            {budget && (
               <View className="flex-row items-center gap-2">
                 <LandPlotIcon className="size-4 text-muted-foreground" />
                 <Text
                   numberOfLines={1}
                   className="text-muted-foreground text-sm"
                 >
-                  {transaction.budget.name}
+                  {budget.name}
                 </Text>
               </View>
             )}
diff --git a/apps/mobile/stores/transaction/hooks.tsx b/apps/mobile/stores/transaction/hooks.tsx
index 3e37596c..aa9d582f 100644
--- a/apps/mobile/stores/transaction/hooks.tsx
+++ b/apps/mobile/stores/transaction/hooks.tsx
@@ -9,7 +9,6 @@ import {
   type TransactionFormValues,
   type TransactionPopulated,
   TransactionPopulatedSchema,
-  TransactionSchema,
 } from '@6pm/validation'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { keyBy } from 'lodash-es'
@@ -203,7 +202,7 @@ export function useCreateTransaction() {
       }
 
       const response = await result.json()
-      const transaction = TransactionSchema.merge(
+      const transaction = TransactionPopulatedSchema.merge(
         z.object({
           id: z.string(),
           amount: z.number({ coerce: true }),
@@ -309,12 +308,8 @@ export function useUpdateTransaction() {
       }
 
       const res = await result.json()
-      const transaction: TransactionPopulated = TransactionSchema.merge(
-        z.object({
-          amount: z.number({ coerce: true }),
-          amountInVnd: z.number({ coerce: true }),
-        }),
-      ).parse(res)
+      const transaction: TransactionPopulated =
+        TransactionPopulatedSchema.parse(res)
 
       updateTransactionInStore(transaction)