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

refactor: enhance cache invalidation logic across banking API routes and components for improved data consistency and performance

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 14:04:12 +01:00
parent 53bae084c4
commit 8d947ad70f
14 changed files with 412 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/accounts/page.tsx
View File

@@ -28,6 +28,7 @@ import {
updateFolder,
deleteFolder,
} from "@/lib/store-db";
import { invalidateAllAccountQueries } from "@/lib/cache-utils";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
@@ -67,7 +68,7 @@ function FolderDropZone({
<div
ref={setNodeRef}
className={cn(
isOver && "ring-2 ring-primary ring-offset-2 rounded-lg p-2",
isOver && "ring-2 ring-primary ring-offset-2 rounded-lg p-2"
)}
>
{children}
@@ -85,13 +86,12 @@ export default function AccountsPage() {
// refresh function is not used directly, invalidations are done inline
const refreshSilent = async () => {
await queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
await queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
invalidateAllAccountQueries(queryClient);
};
const [editingAccount, setEditingAccount] = useState<Account | null>(null);
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [selectedAccounts, setSelectedAccounts] = useState<Set<string>>(
new Set(),
new Set()
);
const [formData, setFormData] = useState({
name: "",
@@ -117,7 +117,7 @@ export default function AccountsPage() {
activationConstraint: {
distance: 8,
},
}),
})
);
if (
@@ -131,7 +131,7 @@ export default function AccountsPage() {
// Convert accountsWithStats to regular accounts for compatibility
const accounts = accountsWithStats.map(
({ transactionCount: _transactionCount, ...account }) => account,
({ transactionCount: _transactionCount, ...account }) => account
);
const formatCurrency = (amount: number) => {
@@ -166,8 +166,7 @@ export default function AccountsPage() {
initialBalance: formData.initialBalance,
};
await updateAccount(updatedAccount);
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
invalidateAllAccountQueries(queryClient);
setIsDialogOpen(false);
setEditingAccount(null);
} catch (error) {
@@ -181,8 +180,7 @@ export default function AccountsPage() {
try {
await deleteAccount(accountId);
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
invalidateAllAccountQueries(queryClient);
} catch (error) {
console.error("Error deleting account:", error);
alert("Erreur lors de la suppression du compte");
@@ -193,7 +191,7 @@ export default function AccountsPage() {
const count = selectedAccounts.size;
if (
!confirm(
`Supprimer ${count} compte${count > 1 ? "s" : ""} et toutes leurs transactions ?`,
`Supprimer ${count} compte${count > 1 ? "s" : ""} et toutes leurs transactions ?`
)
)
return;
@@ -204,14 +202,13 @@ export default function AccountsPage() {
`/api/banking/accounts?ids=${ids.join(",")}`,
{
method: "DELETE",
},
}
);
if (!response.ok) {
throw new Error("Failed to delete accounts");
}
setSelectedAccounts(new Set());
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
invalidateAllAccountQueries(queryClient);
} catch (error) {
console.error("Error deleting accounts:", error);
alert("Erreur lors de la suppression des comptes");
@@ -267,8 +264,7 @@ export default function AccountsPage() {
icon: "folder",
});
}
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
invalidateAllAccountQueries(queryClient);
setIsFolderDialogOpen(false);
} catch (error) {
console.error("Error saving folder:", error);
@@ -279,15 +275,14 @@ export default function AccountsPage() {
const handleDeleteFolder = async (folderId: string) => {
if (
!confirm(
"Supprimer ce dossier ? Les comptes seront déplacés à la racine.",
"Supprimer ce dossier ? Les comptes seront déplacés à la racine."
)
)
return;
try {
await deleteFolder(folderId);
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
invalidateAllAccountQueries(queryClient);
} catch (error) {
console.error("Error deleting folder:", error);
alert("Erreur lors de la suppression du dossier");
@@ -320,7 +315,7 @@ export default function AccountsPage() {
// Déplacer vers le dossier du compte cible
const targetAccountId = overId.replace("account-", "");
const targetAccount = accountsWithStats.find(
(a) => a.id === targetAccountId,
(a) => a.id === targetAccountId
);
if (targetAccount) {
targetFolderId = targetAccount.folderId;
@@ -342,7 +337,7 @@ export default function AccountsPage() {
(old: Array<Account & { transactionCount: number }> | undefined) => {
if (!old) return old;
return old.map((a) => (a.id === accountId ? updatedAccount : a));
},
}
);
// Faire la requête en arrière-plan
@@ -353,8 +348,7 @@ export default function AccountsPage() {
} catch (error) {
console.error("Error moving account:", error);
// Rollback en cas d'erreur - refresh data
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
invalidateAllAccountQueries(queryClient);
alert("Erreur lors du déplacement du compte");
}
}
@@ -368,7 +362,7 @@ export default function AccountsPage() {
const totalBalance = accounts.reduce(
(sum, a) => sum + getAccountBalance(a),
0,
0
);
// Grouper les comptes par folder
@@ -381,7 +375,7 @@ export default function AccountsPage() {
acc[folderId].push(account);
return acc;
},
{} as Record<string, Account[]>,
{} as Record<string, Account[]>
);
// Obtenir les folders racine (sans parent) et les trier par nom
@@ -435,7 +429,7 @@ export default function AccountsPage() {
className={cn(
isMobile ? "text-xl" : "text-2xl",
"font-bold",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
totalBalance >= 0 ? "text-emerald-600" : "text-red-600"
)}
>
{isMobile && (
@@ -492,17 +486,17 @@ export default function AccountsPage() {
"text-xs sm:text-sm font-semibold tabular-nums shrink-0",
accountsByFolder["no-folder"].reduce(
(sum, a) => sum + getAccountBalance(a),
0,
0
) >= 0
? "text-emerald-600"
: "text-red-600",
: "text-red-600"
)}
>
{formatCurrency(
accountsByFolder["no-folder"].reduce(
(sum, a) => sum + getAccountBalance(a),
0,
),
0
)
)}
</span>
</div>
@@ -511,7 +505,7 @@ export default function AccountsPage() {
<div className="grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3">
{accountsByFolder["no-folder"].map((account) => {
const folder = metadata.folders.find(
(f: FolderType) => f.id === account.folderId,
(f: FolderType) => f.id === account.folderId
);
return (
@@ -539,7 +533,7 @@ export default function AccountsPage() {
const folderAccounts = accountsByFolder[folder.id] || [];
const folderBalance = folderAccounts.reduce(
(sum, a) => sum + getAccountBalance(a),
0,
0
);
return (
@@ -568,7 +562,7 @@ export default function AccountsPage() {
"text-xs sm:text-sm font-semibold tabular-nums shrink-0",
folderBalance >= 0
? "text-emerald-600"
: "text-red-600",
: "text-red-600"
)}
>
{formatCurrency(folderBalance)}
@@ -628,7 +622,7 @@ export default function AccountsPage() {
<div className="grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3">
{folderAccounts.map((account) => {
const accountFolder = metadata.folders.find(
(f: FolderType) => f.id === account.folderId,
(f: FolderType) => f.id === account.folderId
);
return (
@@ -672,7 +666,7 @@ export default function AccountsPage() {
<Card>
<CardContent className="p-4">
{accounts.find(
(a) => a.id === activeId.replace("account-", ""),
(a) => a.id === activeId.replace("account-", "")
)?.name || ""}
</CardContent>
</Card>