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

feat: integrate React Query for improved data fetching and state management across banking and transactions components

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-06 09:36:06 +01:00
parent e26eb0f039
commit b1a8f9cd60
16 changed files with 3488 additions and 4713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/accounts/page.tsx
View File

@@ -19,7 +19,8 @@ import {
AccountBulkActions,
} from "@/components/accounts";
import { FolderEditDialog } from "@/components/folders";
import { useBankingData } from "@/lib/hooks";
import { useBankingMetadata, useAccountsWithStats } from "@/lib/hooks";
import { useQueryClient } from "@tanstack/react-query";
import {
updateAccount,
deleteAccount,
@@ -59,7 +60,19 @@ function FolderDropZone({
}
export default function AccountsPage() {
const { data, isLoading, refresh, refreshSilent, update } = useBankingData();
const queryClient = useQueryClient();
const { data: metadata, isLoading: isLoadingMetadata } = useBankingMetadata();
const {
data: accountsWithStats,
isLoading: isLoadingAccounts,
} = useAccountsWithStats();
// 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"] });
};
const [editingAccount, setEditingAccount] = useState<Account | null>(null);
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [selectedAccounts, setSelectedAccounts] = useState<Set<string>>(
@@ -92,10 +105,13 @@ export default function AccountsPage() {
}),
);
if (isLoading || !data) {
if (isLoadingMetadata || !metadata || isLoadingAccounts || !accountsWithStats) {
return <LoadingState />;
}
// Convert accountsWithStats to regular accounts for compatibility
const accounts = accountsWithStats.map(({ transactionCount: _transactionCount, ...account }) => account);
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat("fr-FR", {
style: "currency",
@@ -128,7 +144,8 @@ export default function AccountsPage() {
initialBalance: formData.initialBalance,
};
await updateAccount(updatedAccount);
refresh();
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
setIsDialogOpen(false);
setEditingAccount(null);
} catch (error) {
@@ -142,7 +159,8 @@ export default function AccountsPage() {
try {
await deleteAccount(accountId);
refresh();
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
} catch (error) {
console.error("Error deleting account:", error);
alert("Erreur lors de la suppression du compte");
@@ -170,7 +188,8 @@ export default function AccountsPage() {
throw new Error("Failed to delete accounts");
}
setSelectedAccounts(new Set());
refresh();
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
} catch (error) {
console.error("Error deleting accounts:", error);
alert("Erreur lors de la suppression des comptes");
@@ -226,7 +245,8 @@ export default function AccountsPage() {
icon: "folder",
});
}
refresh();
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
setIsFolderDialogOpen(false);
} catch (error) {
console.error("Error saving folder:", error);
@@ -244,7 +264,8 @@ export default function AccountsPage() {
try {
await deleteFolder(folderId);
refresh();
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
} catch (error) {
console.error("Error deleting folder:", error);
alert("Erreur lors de la suppression du dossier");
@@ -260,7 +281,7 @@ export default function AccountsPage() {
const { active, over } = event;
setActiveId(null);
if (!over || active.id === over.id || !data) return;
if (!over || active.id === over.id || !accountsWithStats) return;
const activeId = active.id as string;
const overId = over.id as string;
@@ -276,7 +297,7 @@ export default function AccountsPage() {
} else if (overId.startsWith("account-")) {
// Déplacer vers le dossier du compte cible
const targetAccountId = overId.replace("account-", "");
const targetAccount = data.accounts.find(
const targetAccount = accountsWithStats.find(
(a) => a.id === targetAccountId,
);
if (targetAccount) {
@@ -285,34 +306,33 @@ export default function AccountsPage() {
}
if (targetFolderId !== undefined) {
const account = data.accounts.find((a) => a.id === accountId);
const account = accountsWithStats.find((a) => a.id === accountId);
if (!account) return;
// Sauvegarder l'état précédent pour rollback en cas d'erreur
const previousData = data;
// Optimistic update : mettre à jour immédiatement l'interface
const updatedAccount = {
...account,
folderId: targetFolderId,
};
const updatedAccounts = data.accounts.map((a) =>
a.id === accountId ? updatedAccount : a,
// Update cache directly
queryClient.setQueryData(
["accounts-with-stats"],
(old: Array<Account & { transactionCount: number }> | undefined) => {
if (!old) return old;
return old.map((a) => (a.id === accountId ? updatedAccount : a));
},
);
update({
...data,
accounts: updatedAccounts,
});
// Faire la requête en arrière-plan
try {
await updateAccount(updatedAccount);
// Refresh silencieux pour synchroniser avec le serveur sans loader
refreshSilent();
await refreshSilent();
} catch (error) {
console.error("Error moving account:", error);
// Rollback en cas d'erreur
update(previousData);
// Rollback en cas d'erreur - refresh data
queryClient.invalidateQueries({ queryKey: ["accounts-with-stats"] });
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
alert("Erreur lors du déplacement du compte");
}
}
@@ -320,16 +340,17 @@ export default function AccountsPage() {
};
const getTransactionCount = (accountId: string) => {
return data.transactions.filter((t) => t.accountId === accountId).length;
const account = accountsWithStats.find((a) => a.id === accountId);
return account?.transactionCount || 0;
};
const totalBalance = data.accounts.reduce(
const totalBalance = accounts.reduce(
(sum, a) => sum + getAccountBalance(a),
0,
);
// Grouper les comptes par folder
const accountsByFolder = data.accounts.reduce(
const accountsByFolder = accounts.reduce(
(acc, account) => {
const folderId = account.folderId || "no-folder";
if (!acc[folderId]) {
@@ -342,9 +363,9 @@ export default function AccountsPage() {
);
// Obtenir les folders racine (sans parent) et les trier par nom
const rootFolders = data.folders
.filter((f) => !f.parentId)
.sort((a, b) => a.name.localeCompare(b.name));
const rootFolders = metadata.folders
.filter((f: FolderType) => !f.parentId)
.sort((a: FolderType, b: FolderType) => a.name.localeCompare(b.name));
return (
<PageLayout>
@@ -386,7 +407,7 @@ export default function AccountsPage() {
}
/>
{data.accounts.length === 0 ? (
{accounts.length === 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<Building2 className="w-16 h-16 text-muted-foreground mb-4" />
@@ -441,8 +462,8 @@ export default function AccountsPage() {
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{accountsByFolder["no-folder"].map((account) => {
const folder = data.folders.find(
(f) => f.id === account.folderId,
const folder = metadata.folders.find(
(f: FolderType) => f.id === account.folderId,
);
return (
@@ -466,7 +487,7 @@ export default function AccountsPage() {
)}
{/* Afficher les comptes groupés par folder */}
{rootFolders.map((folder) => {
{rootFolders.map((folder: FolderType) => {
const folderAccounts = accountsByFolder[folder.id] || [];
const folderBalance = folderAccounts.reduce(
(sum, a) => sum + getAccountBalance(a),
@@ -521,8 +542,8 @@ export default function AccountsPage() {
{folderAccounts.length > 0 ? (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{folderAccounts.map((account) => {
const accountFolder = data.folders.find(
(f) => f.id === account.folderId,
const accountFolder = metadata.folders.find(
(f: FolderType) => f.id === account.folderId,
);
return (
@@ -565,7 +586,7 @@ export default function AccountsPage() {
{activeId.startsWith("account-") ? (
<Card>
<CardContent className="p-4">
{data.accounts.find(
{accounts.find(
(a) => a.id === activeId.replace("account-", ""),
)?.name || ""}
</CardContent>
@@ -583,7 +604,7 @@ export default function AccountsPage() {
onOpenChange={setIsDialogOpen}
formData={formData}
onFormDataChange={setFormData}
folders={data.folders}
folders={metadata.folders}
onSave={handleSave}
/>
@@ -593,7 +614,7 @@ export default function AccountsPage() {
editingFolder={editingFolder}
formData={folderFormData}
onFormDataChange={setFolderFormData}
folders={data.folders}
folders={metadata.folders}
onSave={handleSaveFolder}
/>
</PageLayout>