From d1b3e215861dacf089a0602154176228ae313634 Mon Sep 17 00:00:00 2001
From: Dustin Do <dustin.do95@gmail.com>
Date: Wed, 31 Jul 2024 21:54:47 +0700
Subject: [PATCH] feat(mobile): use category from store for TransactionItem
 (#189)

---
 .../transaction/transaction-item.tsx           | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/mobile/components/transaction/transaction-item.tsx b/apps/mobile/components/transaction/transaction-item.tsx
index 0b34365a..e03e97a4 100644
--- a/apps/mobile/components/transaction/transaction-item.tsx
+++ b/apps/mobile/components/transaction/transaction-item.tsx
@@ -1,4 +1,5 @@
 import { TRANSACTION_ICONS } from '@/lib/icons/category-icons'
+import { useCategoryList } from '@/stores/category/hooks'
 import type { TransactionPopulated } from '@6pm/validation'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
@@ -15,22 +16,19 @@ type TransactionItemProps = {
 
 export const TransactionItem: FC<TransactionItemProps> = ({ transaction }) => {
   const { i18n } = useLingui()
+  const { categoryId } = transaction
+  const { categoriesDict } = useCategoryList()
+  const category = (categoryId && categoriesDict[categoryId]) || null
 
   const iconName = useMemo(() => {
-    return (
-      TRANSACTION_ICONS[transaction.note!] ||
-      transaction?.category?.icon ||
-      'Shapes'
-    )
-  }, [transaction])
+    return TRANSACTION_ICONS[transaction.note!] || category?.icon || 'Shapes'
+  }, [category?.icon, transaction.note])
 
   const transactionName = useMemo(() => {
     return (
-      t(i18n)`${transaction.note}` ||
-      transaction?.category?.name ||
-      t(i18n)`Uncategorized`
+      t(i18n)`${transaction.note}` || category?.name || t(i18n)`Uncategorized`
     )
-  }, [transaction, i18n])
+  }, [transaction.note, category?.name, i18n])
 
   return (
     <Link