fixed bug: Now you dont have to reload the page twice, after creating a loan

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<Loan[]> {
+  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<Loan[]>(() =>
-    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 (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm">
+        <p>Lade Ausleihen…</p>
+      </div>
+    );
+  }
 
   if (userLoans.length === 0) {
     return (

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(
   <StrictMode>
-    <App />
-    <ToastContainer
-      position="top-right"
-      autoClose={3000}
-      hideProgressBar={false}
-      newestOnTop
-      closeOnClick
-      rtl={false}
-      pauseOnFocusLoss={false}
-      draggable
-      pauseOnHover
-      theme="colored"
-      style={{ zIndex: 9999 }}
-    />
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss={false}
+        draggable
+        pauseOnHover
+        theme="colored"
+        style={{ zIndex: 9999 }}
+      />
+    </QueryClientProvider>
   </StrictMode>
 );

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,
+    },
+  },
+});

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<boolean> => {
   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;
 };