❇️ [refactor][frontend] Lift transaction mutation into route

Author: tomy0000000

frontend/src/components/transaction-fab.tsx

@@ -1,7 +1,5 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Minus, Plus } from 'lucide-react'
 import { useMemo, useState } from 'react'
-import { toast } from 'sonner'
 
 import { AccountSelect } from '@/components/account-select'
 import { FabForm } from '@/components/fab-form'
@@ -19,9 +17,7 @@ import { SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import {
   type AccountRead,
   type TransactionCreate,
-  type TransactionRead,
-  createTransaction,
-  updateTransactions
+  type TransactionRead
 } from '@/lib/client'
 import type { Client } from '@/lib/client/client'
 import { CLIENT_TIMEZONE } from '@/lib/constants'
@@ -33,21 +29,26 @@ interface TransactionFabProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   editingTransaction: TransactionRead | null
+  onSubmit: (body: TransactionCreate) => void
+  isPending: boolean
 }
 
 interface TransactionFabBodyProps {
   client: Client
   account?: AccountRead
   editingTransaction: TransactionRead | null
-  onClose: () => void
+  onSubmit: (body: TransactionCreate) => void
+  isPending: boolean
 }
 
 export function TransactionFab({
   client,
   account,
   open,
   onOpenChange,
-  editingTransaction
+  editingTransaction,
+  onSubmit,
+  isPending
 }: TransactionFabProps) {
   return (
     <FabSheet
@@ -67,7 +68,8 @@ export function TransactionFab({
         client={client}
         account={account}
         editingTransaction={editingTransaction}
-        onClose={() => onOpenChange(false)}
+        onSubmit={onSubmit}
+        isPending={isPending}
       />
     </FabSheet>
   )
@@ -77,9 +79,9 @@ function TransactionFabBody({
   client,
   account,
   editingTransaction,
-  onClose
+  onSubmit,
+  isPending
 }: TransactionFabBodyProps) {
-  const queryClient = useQueryClient()
   const isEditing = editingTransaction != null
   const [amount, setAmount] = useState(() =>
     isEditing ? Math.abs(parseFloat(editingTransaction.amount)).toString() : ''
@@ -103,39 +105,9 @@ function TransactionFabBody({
     [createdAt, selectedAccount]
   )
 
-  const { mutate, isPending } = useMutation({
-    mutationFn: async (body: TransactionCreate) => {
-      const response = isEditing
-        ? await updateTransactions({
-            client,
-            body: [{ ...body, id: editingTransaction.id }]
-          })
-        : await createTransaction({ client, body })
-      if (response.error)
-        throw new Error(
-          `Failed to ${isEditing ? 'update' : 'create'} transaction`
-        )
-      if (!response.data) throw new Error('No data returned')
-      return response.data
-    },
-    onSuccess: () => {
-      toast.success(`Transaction ${isEditing ? 'updated' : 'created'}`)
-      queryClient.invalidateQueries({ queryKey: ['events'] })
-      queryClient.invalidateQueries({ queryKey: ['transactions'] })
-      onClose()
-    },
-    onError: (error) => {
-      console.error(error)
-      toast.error(`Failed to ${isEditing ? 'update' : 'create'} transaction`, {
-        description:
-          error instanceof Error ? error.message : 'An unknown error occurred'
-      })
-    }
-  })
-
   const handleSubmit = () => {
     if (selectedAccount == null || zonedCreatedAt == null) return
-    mutate({
+    onSubmit({
       account_id: selectedAccount.id,
       amount: negative ? `-${amount}` : amount,
       created_at: zonedCreatedAt

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

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
 import { Fragment, useEffect, useState } from 'react'
 import { type DateRange } from 'react-day-picker'
@@ -10,9 +10,12 @@ import { TransactionFab } from '@/components/transaction-fab'
 import { TransactionStatusBadge } from '@/components/transaction-status-badge'
 import { Separator } from '@/components/ui/separator'
 import {
+  type TransactionCreate,
   type TransactionReadWithBalance,
+  createTransaction,
   readAccount,
-  readAccountTransactionsWithRunningBalance
+  readAccountTransactionsWithRunningBalance,
+  updateTransactions
 } from '@/lib/client'
 import { cn, endExclusive, formatCurrency } from '@/lib/utils'
 
@@ -24,6 +27,7 @@ function AccountTransactionPage() {
   const { client } = Route.useRouteContext()
   const { id } = Route.useParams()
   const accountId = Number(id)
+  const queryClient = useQueryClient()
 
   const [fabOpen, setFabOpen] = useState(false)
   const [editingTransaction, setEditingTransaction] =
@@ -34,6 +38,39 @@ function AccountTransactionPage() {
     if (open) setEditingTransaction(null)
   }
 
+  const { mutate, isPending } = useMutation({
+    mutationFn: async (body: TransactionCreate) => {
+      const response = editingTransaction
+        ? await updateTransactions({
+            client,
+            body: [{ ...body, id: editingTransaction.id }]
+          })
+        : await createTransaction({ client, body })
+      if (response.error)
+        throw new Error(
+          `Failed to ${editingTransaction ? 'update' : 'create'} transaction`
+        )
+      if (!response.data) throw new Error('No data returned')
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success(`Transaction ${editingTransaction ? 'updated' : 'created'}`)
+      queryClient.invalidateQueries({ queryKey: ['events'] })
+      queryClient.invalidateQueries({ queryKey: ['transactions'] })
+      setFabOpen(false)
+    },
+    onError: (error) => {
+      console.error(error)
+      toast.error(
+        `Failed to ${editingTransaction ? 'update' : 'create'} transaction`,
+        {
+          description:
+            error instanceof Error ? error.message : 'An unknown error occurred'
+        }
+      )
+    }
+  })
+
   const [dateRange, setDateRange] = useState<DateRange | undefined>()
   const start = dateRange?.from?.toISOString() ?? null
   const end = endExclusive(dateRange?.to)
@@ -211,6 +248,8 @@ function AccountTransactionPage() {
         open={fabOpen}
         onOpenChange={handleFabOpenChange}
         editingTransaction={editingTransaction}
+        onSubmit={mutate}
+        isPending={isPending}
       />
     </>
   )