❇️ [refactor][frontend] AccountSelect data via props, drop client from transaction fab

Author: tomy0000000

frontend/src/components/account-select.tsx

@@ -1,4 +1,3 @@
-import { useQuery } from '@tanstack/react-query'
 import { ChevronsUpDown } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
@@ -15,11 +14,10 @@ import {
   ItemMedia,
   ItemTitle
 } from '@/components/ui/item'
-import { type AccountRead, readAccounts } from '@/lib/client'
-import type { Client } from '@/lib/client/client'
+import { type AccountRead } from '@/lib/client'
 
 interface AccountSelectProps {
-  client: Client
+  accounts: AccountRead[]
   value: AccountRead | null
   onValueChange: (account: AccountRead) => void
   id?: string
@@ -31,21 +29,11 @@ interface AccountItemProps {
 }
 
 export function AccountSelect({
-  client,
+  accounts,
   value,
   onValueChange,
   id
 }: AccountSelectProps) {
-  const { data: accounts } = useQuery({
-    queryKey: ['accounts'],
-    queryFn: async () => {
-      const response = await readAccounts({ client })
-      if (response.error) throw new Error('Failed to fetch accounts')
-      if (!response.data) throw new Error('No data returned')
-      return response.data
-    }
-  })
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -67,7 +55,7 @@ export function AccountSelect({
         align="start"
         className="w-(--radix-dropdown-menu-trigger-width)"
       >
-        {accounts?.map((account) => (
+        {accounts.map((account) => (
           <DropdownMenuItem
             key={account.id}
             className="p-0"

frontend/src/components/link-transactions-table.tsx

@@ -35,6 +35,7 @@ import {
   type AccountRead,
   type TransactionRead,
   type TransactionStatus,
+  readAccounts,
   readTransactions
 } from '@/lib/client'
 import type { Client } from '@/lib/client/client'
@@ -196,6 +197,16 @@ export function LinkTransactionsTable({
     )
   }
 
+  const { data: accounts } = useQuery({
+    queryKey: ['accounts'],
+    queryFn: async () => {
+      const response = await readAccounts({ client })
+      if (response.error) throw new Error('Failed to fetch accounts')
+      if (!response.data) throw new Error('No data returned')
+      return response.data
+    }
+  })
+
   const { data } = useQuery({
     queryKey: ['transactions', selectedAccount?.id, 'unlinked'],
     enabled: selectedAccount !== null,
@@ -231,7 +242,7 @@ export function LinkTransactionsTable({
   return (
     <div className="space-y-3">
       <AccountSelect
-        client={client}
+        accounts={accounts ?? []}
         value={selectedAccount}
         onValueChange={setSelectedAccount}
       />

frontend/src/components/transaction-fab.tsx

@@ -19,12 +19,11 @@ import {
   type TransactionCreate,
   type TransactionRead
 } from '@/lib/client'
-import type { Client } from '@/lib/client/client'
 import { CLIENT_TIMEZONE } from '@/lib/constants'
 import { formatZonedDateTime, toZonedISOString } from '@/lib/utils'
 
 interface TransactionFabProps {
-  client: Client
+  accounts: AccountRead[]
   account?: AccountRead
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -34,15 +33,15 @@ interface TransactionFabProps {
 }
 
 interface TransactionFabBodyProps {
-  client: Client
+  accounts: AccountRead[]
   account?: AccountRead
   editingTransaction: TransactionRead | null
   onSubmit: (body: TransactionCreate) => void
   isPending: boolean
 }
 
 export function TransactionFab({
-  client,
+  accounts,
   account,
   open,
   onOpenChange,
@@ -65,7 +64,7 @@ export function TransactionFab({
       {/* Keyed so the form re-initializes from the picked transaction. */}
       <TransactionFabBody
         key={editingTransaction?.id ?? 'new'}
-        client={client}
+        accounts={accounts}
         account={account}
         editingTransaction={editingTransaction}
         onSubmit={onSubmit}
@@ -76,7 +75,7 @@ export function TransactionFab({
 }
 
 function TransactionFabBody({
-  client,
+  accounts,
   account,
   editingTransaction,
   onSubmit,
@@ -125,7 +124,7 @@ function TransactionFabBody({
         <FieldLabel htmlFor="txn-account">Account</FieldLabel>
         <AccountSelect
           id="txn-account"
-          client={client}
+          accounts={accounts}
           value={selectedAccount}
           onValueChange={setPickedAccount}
         />

frontend/src/routes/_auth/account/$id/transaction.tsx

@@ -15,6 +15,7 @@ import {
   createTransaction,
   readAccount,
   readAccountTransactionsWithRunningBalance,
+  readAccounts,
   updateTransactions
 } from '@/lib/client'
 import { cn, endExclusive, formatCurrency } from '@/lib/utils'
@@ -92,6 +93,16 @@ function AccountTransactionPage() {
     }
   })
 
+  const { data: accounts } = useQuery({
+    queryKey: ['accounts'],
+    queryFn: async () => {
+      const response = await readAccounts({ client })
+      if (response.error) throw new Error('Failed to fetch accounts')
+      if (!response.data) throw new Error('No data returned')
+      return response.data
+    }
+  })
+
   const {
     isError: isTransactionsError,
     data: transactions,
@@ -243,7 +254,7 @@ function AccountTransactionPage() {
       </div>
 
       <TransactionFab
-        client={client}
+        accounts={accounts ?? []}
         account={account}
         open={fabOpen}
         onOpenChange={handleFabOpenChange}