julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement transaction updating state management and loading indicators in transaction table for improved user feedback during updates

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 08:29:58 +01:00
parent 5014051e10
commit 4224c8aa83
4 changed files with 150 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
app/transactions/page.tsx
View File

@@ -10,7 +10,11 @@ import {
} from "@/components/transactions"; } from "@/components/transactions";
import { RuleCreateDialog } from "@/components/rules"; import { RuleCreateDialog } from "@/components/rules";
import { OFXImportDialog } from "@/components/import/ofx-import-dialog"; import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
import { useBankingMetadata, useTransactions } from "@/lib/hooks"; import {
useBankingMetadata,
useTransactions,
getTransactionsQueryKey,
} from "@/lib/hooks";
import { updateCategory } from "@/lib/store-db"; import { updateCategory } from "@/lib/store-db";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -60,21 +64,24 @@ export default function TransactionsPage() {
const [showReconciled, setShowReconciled] = useState<string>("all"); const [showReconciled, setShowReconciled] = useState<string>("all");
const [period, setPeriod] = useState<Period>("all"); const [period, setPeriod] = useState<Period>("all");
const [customStartDate, setCustomStartDate] = useState<Date | undefined>( const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
undefined, undefined
); );
const [customEndDate, setCustomEndDate] = useState<Date | undefined>( const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
undefined, undefined
); );
const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false); const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
const [sortField, setSortField] = useState<SortField>("date"); const [sortField, setSortField] = useState<SortField>("date");
const [sortOrder, setSortOrder] = useState<SortOrder>("desc"); const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
const [selectedTransactions, setSelectedTransactions] = useState<Set<string>>( const [selectedTransactions, setSelectedTransactions] = useState<Set<string>>(
new Set(), new Set()
); );
const [ruleDialogOpen, setRuleDialogOpen] = useState(false); const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
const [ruleTransaction, setRuleTransaction] = useState<Transaction | null>( const [ruleTransaction, setRuleTransaction] = useState<Transaction | null>(
null, null
); );
const [updatingTransactionIds, setUpdatingTransactionIds] = useState<
Set<string>
>(new Set());
// Get start date based on period // Get start date based on period
const startDate = useMemo(() => { const startDate = useMemo(() => {
@@ -156,20 +163,6 @@ export default function TransactionsPage() {
invalidate: invalidateTransactions, invalidate: invalidateTransactions,
} = useTransactions(transactionParams, !!metadata); } = useTransactions(transactionParams, !!metadata);
// Reset page when filters change
useEffect(() => {
setPage(0);
}, [
startDate,
endDate,
selectedAccounts,
selectedCategories,
debouncedSearchQuery,
showReconciled,
sortField,
sortOrder,
]);
// For filter comboboxes, we'll use empty arrays for now // For filter comboboxes, we'll use empty arrays for now
// They can be enhanced later with separate queries if needed // They can be enhanced later with separate queries if needed
const transactionsForAccountFilter: Transaction[] = []; const transactionsForAccountFilter: Transaction[] = [];
@@ -188,7 +181,7 @@ export default function TransactionsPage() {
// Use transactions from current page to find similar ones // Use transactions from current page to find similar ones
const normalizedDesc = normalizeDescription(ruleTransaction.description); const normalizedDesc = normalizeDescription(ruleTransaction.description);
const similarTransactions = transactionsData.transactions.filter( const similarTransactions = transactionsData.transactions.filter(
(t) => normalizeDescription(t.description) === normalizedDesc, (t) => normalizeDescription(t.description) === normalizedDesc
); );
if (similarTransactions.length === 0) return null; if (similarTransactions.length === 0) return null;
@@ -199,7 +192,7 @@ export default function TransactionsPage() {
transactions: similarTransactions, transactions: similarTransactions,
totalAmount: similarTransactions.reduce((sum, t) => sum + t.amount, 0), totalAmount: similarTransactions.reduce((sum, t) => sum + t.amount, 0),
suggestedKeyword: suggestKeyword( suggestedKeyword: suggestKeyword(
similarTransactions.map((t) => t.description), similarTransactions.map((t) => t.description)
), ),
}; };
}, [ruleTransaction, transactionsData]); }, [ruleTransaction, transactionsData]);
@@ -215,7 +208,7 @@ export default function TransactionsPage() {
// 1. Add keyword to category // 1. Add keyword to category
const category = metadata.categories.find( const category = metadata.categories.find(
(c: { id: string }) => c.id === ruleData.categoryId, (c: { id: string }) => c.id === ruleData.categoryId
); );
if (!category) { if (!category) {
throw new Error("Category not found"); throw new Error("Category not found");
@@ -223,7 +216,7 @@ export default function TransactionsPage() {
// Check if keyword already exists // Check if keyword already exists
const keywordExists = category.keywords.some( const keywordExists = category.keywords.some(
(k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase(), (k: string) => k.toLowerCase() === ruleData.keyword.toLowerCase()
); );
if (!keywordExists) { if (!keywordExists) {
@@ -241,8 +234,8 @@ export default function TransactionsPage() {
method: "PUT", method: "PUT",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id, categoryId: ruleData.categoryId }), body: JSON.stringify({ id, categoryId: ruleData.categoryId }),
}), })
), )
); );
} }
@@ -251,7 +244,7 @@ export default function TransactionsPage() {
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] }); queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
setRuleDialogOpen(false); setRuleDialogOpen(false);
}, },
[metadata, queryClient], [metadata, queryClient]
); );
const invalidateAll = useCallback(() => { const invalidateAll = useCallback(() => {
@@ -282,7 +275,7 @@ export default function TransactionsPage() {
if (!transactionsData) return; if (!transactionsData) return;
const transaction = transactionsData.transactions.find( const transaction = transactionsData.transactions.find(
(t) => t.id === transactionId, (t) => t.id === transactionId
); );
if (!transaction) return; if (!transaction) return;
@@ -307,7 +300,7 @@ export default function TransactionsPage() {
if (!transactionsData) return; if (!transactionsData) return;
const transaction = transactionsData.transactions.find( const transaction = transactionsData.transactions.find(
(t) => t.id === transactionId, (t) => t.id === transactionId
); );
if (!transaction || transaction.isReconciled) return; if (!transaction || transaction.isReconciled) return;
@@ -330,42 +323,49 @@ export default function TransactionsPage() {
const setCategory = async ( const setCategory = async (
transactionId: string, transactionId: string,
categoryId: string | null, categoryId: string | null
) => { ) => {
if (!transactionsData) return; if (!transactionsData) return;
const transaction = transactionsData.transactions.find( const transaction = transactionsData.transactions.find(
(t) => t.id === transactionId, (t) => t.id === transactionId
); );
if (!transaction) return; if (!transaction) return;
const updatedTransaction = { ...transaction, categoryId }; setUpdatingTransactionIds((prev) => new Set(prev).add(transactionId));
// Optimistic update: update the cache immediately try {
queryClient.setQueryData<typeof transactionsData>( const response = await fetch("/api/banking/transactions", {
["transactions", transactionParams], method: "PUT",
(oldData) => { headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...transaction, categoryId }),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// Mise à jour directe du cache après succès
const queryKey = getTransactionsQueryKey(transactionParams);
queryClient.setQueryData<typeof transactionsData>(queryKey, (oldData) => {
if (!oldData) return oldData; if (!oldData) return oldData;
return { return {
...oldData, ...oldData,
transactions: oldData.transactions.map((t) => transactions: oldData.transactions.map((t) =>
t.id === transactionId ? updatedTransaction : t, t.id === transactionId ? { ...t, categoryId } : t
), ),
}; };
},
);
try {
await fetch("/api/banking/transactions", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(updatedTransaction),
}); });
invalidateTransactions();
} catch (error) { } catch (error) {
console.error("Failed to update transaction:", error); console.error("Failed to update transaction:", error);
// Revert optimistic update on error
invalidateTransactions(); invalidateTransactions();
} finally {
setUpdatingTransactionIds((prev) => {
const next = new Set(prev);
next.delete(transactionId);
return next;
});
} }
}; };
@@ -373,7 +373,7 @@ export default function TransactionsPage() {
if (!transactionsData) return; if (!transactionsData) return;
const transactionsToUpdate = transactionsData.transactions.filter((t) => const transactionsToUpdate = transactionsData.transactions.filter((t) =>
selectedTransactions.has(t.id), selectedTransactions.has(t.id)
); );
setSelectedTransactions(new Set()); setSelectedTransactions(new Set());
@@ -385,8 +385,8 @@ export default function TransactionsPage() {
method: "PUT", method: "PUT",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...t, isReconciled: reconciled }), body: JSON.stringify({ ...t, isReconciled: reconciled }),
}), })
), )
); );
invalidateTransactions(); invalidateTransactions();
} catch (error) { } catch (error) {
@@ -398,25 +398,16 @@ export default function TransactionsPage() {
if (!transactionsData) return; if (!transactionsData) return;
const transactionsToUpdate = transactionsData.transactions.filter((t) => const transactionsToUpdate = transactionsData.transactions.filter((t) =>
selectedTransactions.has(t.id), selectedTransactions.has(t.id)
); );
const transactionIds = transactionsToUpdate.map((t) => t.id); const transactionIds = transactionsToUpdate.map((t) => t.id);
setSelectedTransactions(new Set()); setSelectedTransactions(new Set());
setUpdatingTransactionIds((prev) => {
// Optimistic update: update the cache immediately const next = new Set(prev);
queryClient.setQueryData<typeof transactionsData>( transactionIds.forEach((id) => next.add(id));
["transactions", transactionParams], return next;
(oldData) => { });
if (!oldData) return oldData;
return {
...oldData,
transactions: oldData.transactions.map((t) =>
transactionIds.includes(t.id) ? { ...t, categoryId } : t,
),
};
},
);
try { try {
await Promise.all( await Promise.all(
@@ -425,14 +416,30 @@ export default function TransactionsPage() {
method: "PUT", method: "PUT",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...t, categoryId }), body: JSON.stringify({ ...t, categoryId }),
}), })
), )
); );
invalidateTransactions();
// Mise à jour directe du cache après succès
const queryKey = getTransactionsQueryKey(transactionParams);
queryClient.setQueryData<typeof transactionsData>(queryKey, (oldData) => {
if (!oldData) return oldData;
return {
...oldData,
transactions: oldData.transactions.map((t) =>
transactionIds.includes(t.id) ? { ...t, categoryId } : t
),
};
});
} catch (error) { } catch (error) {
console.error("Failed to update transactions:", error); console.error("Failed to update transactions:", error);
// Revert optimistic update on error
invalidateTransactions(); invalidateTransactions();
} finally {
setUpdatingTransactionIds((prev) => {
const next = new Set(prev);
transactionIds.forEach((id) => next.delete(id));
return next;
});
} }
}; };
@@ -442,7 +449,7 @@ export default function TransactionsPage() {
setSelectedTransactions(new Set()); setSelectedTransactions(new Set());
} else { } else {
setSelectedTransactions( setSelectedTransactions(
new Set(transactionsData.transactions.map((t) => t.id)), new Set(transactionsData.transactions.map((t) => t.id))
); );
} }
}; };
@@ -478,7 +485,7 @@ export default function TransactionsPage() {
`/api/banking/transactions?id=${transactionId}`, `/api/banking/transactions?id=${transactionId}`,
{ {
method: "DELETE", method: "DELETE",
}, }
); );
if (!response.ok) throw new Error("Failed to delete transaction"); if (!response.ok) throw new Error("Failed to delete transaction");
invalidateTransactions(); invalidateTransactions();
@@ -516,8 +523,8 @@ export default function TransactionsPage() {
}} }}
selectedCategories={selectedCategories} selectedCategories={selectedCategories}
onCategoriesChange={(categories) => { onCategoriesChange={(categories) => {
setSelectedCategories(categories);
setPage(0); setPage(0);
setSelectedCategories(categories);
}} }}
showReconciled={showReconciled} showReconciled={showReconciled}
onReconciledChange={(value) => { onReconciledChange={(value) => {
@@ -581,6 +588,7 @@ export default function TransactionsPage() {
onDelete={deleteTransaction} onDelete={deleteTransaction}
formatCurrency={formatCurrency} formatCurrency={formatCurrency}
formatDate={formatDate} formatDate={formatDate}
updatingTransactionIds={updatingTransactionIds}
/> />
{/* Pagination controls */} {/* Pagination controls */}

44
components/transactions/transaction-table.tsx
View File

@@ -24,6 +24,7 @@ import {
ArrowUpDown, ArrowUpDown,
Wand2, Wand2,
Trash2, Trash2,
Loader2,
} from "lucide-react"; } from "lucide-react";
import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu"; import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -50,6 +51,7 @@ interface TransactionTableProps {
onDelete: (id: string) => void; onDelete: (id: string) => void;
formatCurrency: (amount: number) => string; formatCurrency: (amount: number) => string;
formatDate: (dateStr: string) => string; formatDate: (dateStr: string) => string;
updatingTransactionIds?: Set<string>;
} }
const ROW_HEIGHT = 72; // Hauteur approximative d'une ligne const ROW_HEIGHT = 72; // Hauteur approximative d'une ligne
@@ -142,6 +144,7 @@ export function TransactionTable({
onDelete, onDelete,
formatCurrency, formatCurrency,
formatDate, formatDate,
updatingTransactionIds = new Set(),
}: TransactionTableProps) { }: TransactionTableProps) {
const [focusedIndex, setFocusedIndex] = useState<number | null>(null); const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
const parentRef = useRef<HTMLDivElement>(null); const parentRef = useRef<HTMLDivElement>(null);
@@ -161,7 +164,7 @@ export function TransactionTable({
setFocusedIndex(index); setFocusedIndex(index);
onMarkReconciled(transactionId); onMarkReconciled(transactionId);
}, },
[onMarkReconciled], [onMarkReconciled]
); );
const handleKeyDown = useCallback( const handleKeyDown = useCallback(
@@ -190,7 +193,7 @@ export function TransactionTable({
} }
} }
}, },
[focusedIndex, transactions, onMarkReconciled, virtualizer], [focusedIndex, transactions, onMarkReconciled, virtualizer]
); );
useEffect(() => { useEffect(() => {
@@ -207,7 +210,7 @@ export function TransactionTable({
(accountId: string) => { (accountId: string) => {
return accounts.find((a) => a.id === accountId); return accounts.find((a) => a.id === accountId);
}, },
[accounts], [accounts]
); );
const getCategory = useCallback( const getCategory = useCallback(
@@ -215,7 +218,7 @@ export function TransactionTable({
if (!categoryId) return null; if (!categoryId) return null;
return categories.find((c) => c.id === categoryId); return categories.find((c) => c.id === categoryId);
}, },
[categories], [categories]
); );
return ( return (
@@ -266,7 +269,7 @@ export function TransactionTable({
className={cn( className={cn(
"p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border", "p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border",
transaction.isReconciled && "bg-emerald-500/5", transaction.isReconciled && "bg-emerald-500/5",
isFocused && "bg-primary/10 ring-1 ring-primary/30", isFocused && "bg-primary/10 ring-1 ring-primary/30"
)} )}
> >
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
@@ -294,7 +297,7 @@ export function TransactionTable({
"font-semibold tabular-nums text-sm md:text-base shrink-0", "font-semibold tabular-nums text-sm md:text-base shrink-0",
transaction.amount >= 0 transaction.amount >= 0
? "text-emerald-600" ? "text-emerald-600"
: "text-red-600", : "text-red-600"
)} )}
> >
{transaction.amount >= 0 ? "+" : ""} {transaction.amount >= 0 ? "+" : ""}
@@ -313,8 +316,13 @@ export function TransactionTable({
)} )}
<div <div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="flex-1" className="flex-1 relative"
> >
{updatingTransactionIds.has(transaction.id) && (
<div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 rounded">
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
</div>
)}
<CategoryCombobox <CategoryCombobox
categories={categories} categories={categories}
value={transaction.categoryId} value={transaction.categoryId}
@@ -323,6 +331,9 @@ export function TransactionTable({
} }
showBadge showBadge
align="start" align="start"
disabled={updatingTransactionIds.has(
transaction.id
)}
/> />
</div> </div>
<DropdownMenu> <DropdownMenu>
@@ -354,7 +365,7 @@ export function TransactionTable({
e.stopPropagation(); e.stopPropagation();
if ( if (
confirm( confirm(
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`, `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
) )
) { ) {
onDelete(transaction.id); onDelete(transaction.id);
@@ -463,7 +474,7 @@ export function TransactionTable({
className={cn( className={cn(
"grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0 border-b border-border hover:bg-muted/50 cursor-pointer", "grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0 border-b border-border hover:bg-muted/50 cursor-pointer",
transaction.isReconciled && "bg-emerald-500/5", transaction.isReconciled && "bg-emerald-500/5",
isFocused && "bg-primary/10 ring-1 ring-primary/30", isFocused && "bg-primary/10 ring-1 ring-primary/30"
)} )}
> >
<div className="p-3"> <div className="p-3">
@@ -493,7 +504,15 @@ export function TransactionTable({
<div className="p-3 text-sm text-muted-foreground"> <div className="p-3 text-sm text-muted-foreground">
{account?.name || "-"} {account?.name || "-"}
</div> </div>
<div className="p-3" onClick={(e) => e.stopPropagation()}> <div
className="p-3 relative"
onClick={(e) => e.stopPropagation()}
>
{updatingTransactionIds.has(transaction.id) && (
<div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 rounded">
<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
</div>
)}
<CategoryCombobox <CategoryCombobox
categories={categories} categories={categories}
value={transaction.categoryId} value={transaction.categoryId}
@@ -502,6 +521,7 @@ export function TransactionTable({
} }
showBadge showBadge
align="start" align="start"
disabled={updatingTransactionIds.has(transaction.id)}
/> />
</div> </div>
<div <div
@@ -509,7 +529,7 @@ export function TransactionTable({
"p-3 text-right font-semibold tabular-nums", "p-3 text-right font-semibold tabular-nums",
transaction.amount >= 0 transaction.amount >= 0
? "text-emerald-600" ? "text-emerald-600"
: "text-red-600", : "text-red-600"
)} )}
> >
{transaction.amount >= 0 ? "+" : ""} {transaction.amount >= 0 ? "+" : ""}
@@ -576,7 +596,7 @@ export function TransactionTable({
e.stopPropagation(); e.stopPropagation();
if ( if (
confirm( confirm(
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`, `Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
) )
) { ) {
onDelete(transaction.id); onDelete(transaction.id);

12
components/ui/category-combobox.tsx
View File

@@ -30,6 +30,7 @@ interface CategoryComboboxProps {
align?: "start" | "center" | "end"; align?: "start" | "center" | "end";
width?: string; width?: string;
buttonWidth?: string; buttonWidth?: string;
disabled?: boolean;
} }
export function CategoryCombobox({ export function CategoryCombobox({
@@ -41,6 +42,7 @@ export function CategoryCombobox({
align = "start", align = "start",
width = "w-[300px]", width = "w-[300px]",
buttonWidth, buttonWidth,
disabled = false,
}: CategoryComboboxProps) { }: CategoryComboboxProps) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@@ -71,9 +73,12 @@ export function CategoryCombobox({
// Badge style trigger // Badge style trigger
if (showBadge) { if (showBadge) {
return ( return (
<Popover open={open} onOpenChange={setOpen} modal={true}> <Popover open={open && !disabled} onOpenChange={setOpen} modal={true}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button className="flex items-center gap-1 hover:opacity-80"> <button
className="flex items-center gap-1 hover:opacity-80"
disabled={disabled}
>
{selectedCategory ? ( {selectedCategory ? (
<Badge <Badge
variant="secondary" variant="secondary"
@@ -168,13 +173,14 @@ export function CategoryCombobox({
// Button style trigger (default) // Button style trigger (default)
return ( return (
<Popover open={open} onOpenChange={setOpen} modal={true}> <Popover open={open && !disabled} onOpenChange={setOpen} modal={true}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
variant="outline" variant="outline"
role="combobox" role="combobox"
aria-expanded={open} aria-expanded={open}
className={cn("justify-between", buttonWidth || "w-full")} className={cn("justify-between", buttonWidth || "w-full")}
disabled={disabled}
> >
{selectedCategory ? ( {selectedCategory ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">

34
lib/hooks.ts
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback, useMemo } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import type { BankingData, Account } from "./types"; import type { BankingData, Account } from "./types";
import { loadData } from "./store-db"; import { loadData } from "./store-db";
@@ -81,14 +81,40 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
return [storedValue, setValue] as const; return [storedValue, setValue] as const;
} }
// Helper function to serialize transaction params into a query key
export function getTransactionsQueryKey(
params: TransactionsPaginatedParams = {}
): (string | number)[] {
const key: (string | number)[] = ["transactions"];
if (params.limit) key.push(`limit:${params.limit}`);
if (params.offset !== undefined) key.push(`offset:${params.offset}`);
if (params.startDate) key.push(`startDate:${params.startDate}`);
if (params.endDate) key.push(`endDate:${params.endDate}`);
if (params.accountIds?.length)
key.push(`accountIds:${params.accountIds.sort().join(",")}`);
if (params.categoryIds?.length)
key.push(`categoryIds:${params.categoryIds.sort().join(",")}`);
if (params.includeUncategorized) key.push("includeUncategorized:true");
if (params.search) key.push(`search:${params.search}`);
if (params.isReconciled !== undefined && params.isReconciled !== "all") {
key.push(`isReconciled:${params.isReconciled}`);
}
if (params.sortField) key.push(`sortField:${params.sortField}`);
if (params.sortOrder) key.push(`sortOrder:${params.sortOrder}`);
return key;
}
export function useTransactions( export function useTransactions(
params: TransactionsPaginatedParams = {}, params: TransactionsPaginatedParams = {},
enabled = true, enabled = true
) { ) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
// Create a stable query key by serializing the params
const queryKey = useMemo(() => getTransactionsQueryKey(params), [params]);
const query = useQuery({ const query = useQuery({
queryKey: ["transactions", params], queryKey,
queryFn: async (): Promise<TransactionsPaginatedResult> => { queryFn: async (): Promise<TransactionsPaginatedResult> => {
const searchParams = new URLSearchParams(); const searchParams = new URLSearchParams();
if (params.limit) searchParams.set("limit", params.limit.toString()); if (params.limit) searchParams.set("limit", params.limit.toString());
@@ -108,7 +134,7 @@ export function useTransactions(
if (params.isReconciled !== undefined && params.isReconciled !== "all") { if (params.isReconciled !== undefined && params.isReconciled !== "all") {
searchParams.set( searchParams.set(
"isReconciled", "isReconciled",
params.isReconciled === true ? "true" : "false", params.isReconciled === true ? "true" : "false"
); );
} }
if (params.sortField) searchParams.set("sortField", params.sortField); if (params.sortField) searchParams.set("sortField", params.sortField);