From ff219d850b9dd93bd9226553c3b0ef08ce23c506 Mon Sep 17 00:00:00 2001 From: "theis.gaedigk" Date: Wed, 20 Aug 2025 12:30:37 +0200 Subject: [PATCH] fixed bug: Now you dont have to reload the page twice, after creating a loan --- frontend/package-lock.json | 16 ++++---- frontend/package.json | 4 +- frontend/src/components/Form4.tsx | 64 ++++++++++++++++--------------- frontend/src/main.tsx | 32 +++++++++------- frontend/src/utils/queryClient.ts | 11 ++++++ frontend/src/utils/userHandler.ts | 6 +++ 6 files changed, 78 insertions(+), 55 deletions(-) create mode 100644 frontend/src/utils/queryClient.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 1a0f911..46c90c1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "dependencies": { "@tailwindcss/vite": "^4.1.11", - "@tanstack/react-query": "^5.85.0", + "@tanstack/react-query": "^5.85.5", "js-cookie": "^3.0.5", "lucide-react": "^0.539.0", "primeicons": "^7.0.0", @@ -1836,9 +1836,9 @@ } }, "node_modules/@tanstack/query-core": { - "version": "5.85.3", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.3.tgz", - "integrity": "sha512-9Ne4USX83nHmRuEYs78LW+3lFEEO2hBDHu7mrdIgAFx5Zcrs7ker3n/i8p4kf6OgKExmaDN5oR0efRD7i2J0DQ==", + "version": "5.85.5", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.5.tgz", + "integrity": "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==", "license": "MIT", "funding": { "type": "github", @@ -1846,12 +1846,12 @@ } }, "node_modules/@tanstack/react-query": { - "version": "5.85.3", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.3.tgz", - "integrity": "sha512-AqU8TvNh5GVIE8I+TUU0noryBRy7gOY0XhSayVXmOPll4UkZeLWKDwi0rtWOZbwLRCbyxorfJ5DIjDqE7GXpcQ==", + "version": "5.85.5", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.5.tgz", + "integrity": "sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A==", "license": "MIT", "dependencies": { - "@tanstack/query-core": "5.85.3" + "@tanstack/query-core": "5.85.5" }, "funding": { "type": "github", diff --git a/frontend/package.json b/frontend/package.json index 03ca040..b2b6313 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@tailwindcss/vite": "^4.1.11", - "@tanstack/react-query": "^5.85.0", + "@tanstack/react-query": "^5.85.5", "js-cookie": "^3.0.5", "lucide-react": "^0.539.0", "primeicons": "^7.0.0", @@ -41,4 +41,4 @@ "typescript-eslint": "^8.39.0", "vite": "^7.1.0" } -} \ No newline at end of file +} diff --git a/frontend/src/components/Form4.tsx b/frontend/src/components/Form4.tsx index 17f961c..c4ed1f7 100644 --- a/frontend/src/components/Form4.tsx +++ b/frontend/src/components/Form4.tsx @@ -1,6 +1,9 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { Trash, ArrowLeftRight } from "lucide-react"; import { handleDeleteLoan } from "../utils/userHandler"; +import { useMutation, useQuery } from "@tanstack/react-query"; +import Cookies from "js-cookie"; +import { queryClient } from "../utils/queryClient"; type Loan = { id: number; @@ -22,40 +25,39 @@ const formatDate = (iso: string | null) => { return d.toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }); }; -const readUserLoansFromStorage = (): Loan[] => { - const raw = localStorage.getItem("userLoans"); - if (!raw || raw === '"No loans found for this user"') return []; - try { - const parsed = JSON.parse(raw); - return Array.isArray(parsed) ? (parsed as Loan[]) : []; - } catch { - return []; - } -}; +async function fetchUserLoans(): Promise { + const res = await fetch("http://localhost:8002/api/userLoans", { + method: "GET", + headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` }, + }); + if (!res.ok) throw new Error("Failed to fetch user loans"); + const data = await res.json(); + if (data === "No loans found for this user") return []; + return Array.isArray(data) ? (data as Loan[]) : []; +} const Form4: React.FC = () => { - const [userLoans, setUserLoans] = useState(() => - readUserLoansFromStorage() - ); + const { data: userLoans = [], isFetching } = useQuery({ + queryKey: ["userLoans"], + queryFn: fetchUserLoans, + }); - useEffect(() => { - const onStorage = (e: StorageEvent) => { - if (e.key === "userLoans") { - setUserLoans(readUserLoansFromStorage()); - } - }; - window.addEventListener("storage", onStorage); - return () => window.removeEventListener("storage", onStorage); - }, []); + const deleteMutation = useMutation({ + mutationFn: (loanID: number) => handleDeleteLoan(loanID), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["userLoans"] }); + }, + }); - const onDelete = async (loanID: number) => { - const ok = await handleDeleteLoan(loanID); - if (ok) { - setUserLoans((prev) => - prev.filter((l) => Number(l.id) !== Number(loanID)) - ); - } - }; + const onDelete = (loanID: number) => deleteMutation.mutate(loanID); + + if (isFetching) { + return ( +
+

Lade Ausleihen…

+
+ ); + } if (userLoans.length === 0) { return ( diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index a8f08a3..663e90c 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -4,22 +4,26 @@ import "./index.css"; import App from "./App.tsx"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; +import { QueryClientProvider } from "@tanstack/react-query"; +import { queryClient } from "./utils/queryClient"; createRoot(document.getElementById("root")!).render( - - + + + + ); diff --git a/frontend/src/utils/queryClient.ts b/frontend/src/utils/queryClient.ts new file mode 100644 index 0000000..0c65d39 --- /dev/null +++ b/frontend/src/utils/queryClient.ts @@ -0,0 +1,11 @@ +import { QueryClient } from "@tanstack/react-query"; + +// Central QueryClient instance so utilities (e.g. file upload) can invalidate queries. +export const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + retry: 1, + }, + }, +}); \ No newline at end of file diff --git a/frontend/src/utils/userHandler.ts b/frontend/src/utils/userHandler.ts index cf2a515..d589d17 100644 --- a/frontend/src/utils/userHandler.ts +++ b/frontend/src/utils/userHandler.ts @@ -1,5 +1,6 @@ import { myToast } from "./toastify"; import Cookies from "js-cookie"; +import { queryClient } from "./queryClient"; export const handleDeleteLoan = async (loanID: number): Promise => { try { @@ -92,5 +93,10 @@ export const createLoan = async (startDate: string, endDate: string) => { removeArr = []; Cookies.set("removeArr", "[]"); myToast("Ausleihe erfolgreich erstellt!", "success"); + + queryClient.invalidateQueries({ queryKey: ["userLoans"] }); + queryClient.invalidateQueries({ queryKey: ["allLoans"] }); + queryClient.invalidateQueries({ queryKey: ["borrowableItems"] }); + return true; };