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