From b52fe07618071c47dfe3cf90a1b4d17bf9a07c42 Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Thu, 30 Oct 2025 17:27:35 +0100
Subject: [PATCH] refactor: update @tanstack/react-query to version 5.90.5 and
 restructure Footer component

feat: edited imports
---
 FrontendV2/package-lock.json                  |  2 +-
 FrontendV2/package.json                       |  2 +-
 FrontendV2/src/App.tsx                        | 45 ++++++++++---------
 FrontendV2/src/components/Footer.tsx          | 43 ------------------
 FrontendV2/src/components/Header.tsx          |  6 +--
 FrontendV2/src/components/footer/Footer.tsx   | 23 ++++++++++
 .../components/footer/versionInfo.query.ts    | 25 +++++++++++
 FrontendV2/src/pages/Landingpage.tsx          |  6 +--
 FrontendV2/src/pages/LoginPage.tsx            | 10 ++---
 FrontendV2/src/pages/MyLoansPage.tsx          |  6 +--
 FrontendV2/src/utils/Fetcher.ts               |  6 +--
 11 files changed, 80 insertions(+), 94 deletions(-)
 delete mode 100644 FrontendV2/src/components/Footer.tsx
 create mode 100644 FrontendV2/src/components/footer/Footer.tsx
 create mode 100644 FrontendV2/src/components/footer/versionInfo.query.ts

diff --git a/FrontendV2/package-lock.json b/FrontendV2/package-lock.json
index 9386253..90f17b0 100644
--- a/FrontendV2/package-lock.json
+++ b/FrontendV2/package-lock.json
@@ -11,7 +11,7 @@
         "@chakra-ui/react": "^3.28.0",
         "@emotion/react": "^11.14.0",
         "@tailwindcss/vite": "^4.1.11",
-        "@tanstack/react-query": "^5.85.5",
+        "@tanstack/react-query": "^5.90.5",
         "i18next": "^25.6.0",
         "jotai": "^2.15.0",
         "js-cookie": "^3.0.5",
diff --git a/FrontendV2/package.json b/FrontendV2/package.json
index 4b9241b..316dcce 100644
--- a/FrontendV2/package.json
+++ b/FrontendV2/package.json
@@ -13,7 +13,7 @@
     "@chakra-ui/react": "^3.28.0",
     "@emotion/react": "^11.14.0",
     "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/react-query": "^5.85.5",
+    "@tanstack/react-query": "^5.90.5",
     "i18next": "^25.6.0",
     "jotai": "^2.15.0",
     "js-cookie": "^3.0.5",
diff --git a/FrontendV2/src/App.tsx b/FrontendV2/src/App.tsx
index 3b896ae..1f721c9 100644
--- a/FrontendV2/src/App.tsx
+++ b/FrontendV2/src/App.tsx
@@ -13,12 +13,11 @@ import { MyLoansPage } from "./pages/MyLoansPage";
 import Landingpage from "./pages/Landingpage";
 import { changeLanguage } from "i18next";
 import { Box, Flex } from "@chakra-ui/react";
-import { Footer } from "./components/Footer";
+import { Footer } from "./components/footer/Footer";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { API_BASE } from "@/config/api.config";
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+const queryClient = new QueryClient();
 
 function App() {
   const [user, setUser] = useState<User | undefined>(undefined);
@@ -65,24 +64,26 @@ function App() {
   }, []);
 
   return (
-    <Flex direction="column" minH="100vh">
-      <Box as="main" flex="1">
-        <UserContext.Provider value={user}>
-          <BrowserRouter>
-            <Routes>
-              <Route element={<ProtectedRoutes />}>
-                <Route path="/" element={<HomePage />} />
-                <Route path="/my-loans" element={<MyLoansPage />} />
-                <Route path="/landing" element={<Landingpage />} />
-              </Route>
+    <QueryClientProvider client={queryClient}>
+      <Flex direction="column" minH="100vh">
+        <Box as="main" flex="1">
+          <UserContext.Provider value={user}>
+            <BrowserRouter>
+              <Routes>
+                <Route element={<ProtectedRoutes />}>
+                  <Route path="/" element={<HomePage />} />
+                  <Route path="/my-loans" element={<MyLoansPage />} />
+                  <Route path="/landing" element={<Landingpage />} />
+                </Route>
 
-              <Route path="/login" element={<LoginPage />} />
-            </Routes>
-          </BrowserRouter>
-        </UserContext.Provider>
-      </Box>
-      <Footer />
-    </Flex>
+                <Route path="/login" element={<LoginPage />} />
+              </Routes>
+            </BrowserRouter>
+          </UserContext.Provider>
+        </Box>
+        <Footer />
+      </Flex>
+    </QueryClientProvider>
   );
 }
 
diff --git a/FrontendV2/src/components/Footer.tsx b/FrontendV2/src/components/Footer.tsx
deleted file mode 100644
index b51c24f..0000000
--- a/FrontendV2/src/components/Footer.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import { useEffect } from "react";
-import { infoAtom } from "@/states/Atoms";
-import { useAtom } from "jotai";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
-export const Footer = () => {
-  const [info, setInfo] = useAtom(infoAtom);
-
-  useEffect(() => {
-    const metaData = async () => {
-      const response = await fetch(`${API_BASE}/server-info`, {
-        method: "GET",
-      });
-      if (response.ok) {
-        const data = await response.json();
-        setInfo(data);
-      }
-    };
-    metaData();
-  }, []);
-
-  return (
-    <Box
-      as="footer"
-      py={4}
-      textAlign="center"
-      position="fixed"
-      bottom="0"
-      left="0"
-      right="0"
-    >
-      Made with ❤️ by Theis Gaedigk - Year 2019 at MCS-Bochum
-      <br />
-      Frontend-Version: {info ? info["frontend-info"].version : "N/A"} |
-      Backend-Version: {info ? info["backend-info"].version : "N/A"}
-    </Box>
-  );
-};
diff --git a/FrontendV2/src/components/Header.tsx b/FrontendV2/src/components/Header.tsx
index dd6cc9e..41f85e8 100644
--- a/FrontendV2/src/components/Header.tsx
+++ b/FrontendV2/src/components/Header.tsx
@@ -32,11 +32,7 @@ import { useUserContext } from "@/states/Context";
 import { useState } from "react";
 import MyAlert from "./myChakra/MyAlert";
 import { useTranslation } from "react-i18next";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 export const Header = () => {
   const navigate = useNavigate();
diff --git a/FrontendV2/src/components/footer/Footer.tsx b/FrontendV2/src/components/footer/Footer.tsx
new file mode 100644
index 0000000..410d55a
--- /dev/null
+++ b/FrontendV2/src/components/footer/Footer.tsx
@@ -0,0 +1,23 @@
+import { Box } from "@chakra-ui/react";
+import { useVersionInfoQuery } from "./versionInfo.query";
+
+export const Footer = () => {
+  const { data: info } = useVersionInfoQuery();
+
+  return (
+    <Box
+      as="footer"
+      py={4}
+      textAlign="center"
+      position="fixed"
+      bottom="0"
+      left="0"
+      right="0"
+    >
+      Made with ❤️ by Theis Gaedigk - Year 2019 at MCS-Bochum
+      <br />
+      Frontend-Version: {info ? info["frontend-info"].version : "N/A"} |
+      Backend-Version: {info ? info["backend-info"].version : "N/A"}
+    </Box>
+  );
+};
diff --git a/FrontendV2/src/components/footer/versionInfo.query.ts b/FrontendV2/src/components/footer/versionInfo.query.ts
new file mode 100644
index 0000000..9e6ec83
--- /dev/null
+++ b/FrontendV2/src/components/footer/versionInfo.query.ts
@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_BASE } from "@/config/api.config";
+
+export const useVersionInfoQuery = () =>
+  useQuery({
+    queryKey: ["versionInfo"],
+    queryFn: async () => {
+      const response = await fetch(`${API_BASE}/server-info`, {
+        method: "GET",
+      });
+      if (response.ok) {
+        const data = await response.json();
+        return data;
+      } else {
+        return {
+          "backend-info": {
+            version: "N/A",
+          },
+          "frontend-info": {
+            version: "N/A",
+          },
+        };
+      }
+    },
+  });
diff --git a/FrontendV2/src/pages/Landingpage.tsx b/FrontendV2/src/pages/Landingpage.tsx
index 5f9f51c..a5c2f2c 100644
--- a/FrontendV2/src/pages/Landingpage.tsx
+++ b/FrontendV2/src/pages/Landingpage.tsx
@@ -13,6 +13,7 @@ import {
 import { Lock, LockOpen } from "lucide-react";
 import MyAlert from "@/components/myChakra/MyAlert";
 import { useTranslation } from "react-i18next";
+import { API_BASE } from "@/config/api.config";
 
 export const formatDateTime = (value: string | null | undefined) => {
   if (!value) return "N/A";
@@ -22,11 +23,6 @@ export const formatDateTime = (value: string | null | undefined) => {
   return `${d}.${M}.${y} ${h}:${min} Uhr`;
 };
 
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 type Loan = {
   id: number;
   username: string;
diff --git a/FrontendV2/src/pages/LoginPage.tsx b/FrontendV2/src/pages/LoginPage.tsx
index 2349a55..0be559a 100644
--- a/FrontendV2/src/pages/LoginPage.tsx
+++ b/FrontendV2/src/pages/LoginPage.tsx
@@ -7,12 +7,8 @@ import Cookies from "js-cookie";
 import { Navigate, useNavigate } from "react-router-dom";
 import { PasswordInput } from "@/components/ui/password-input";
 import { useTranslation } from "react-i18next";
-import { Footer } from "@/components/Footer";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { Footer } from "@/components/footer/Footer";
+import { API_BASE } from "@/config/api.config";
 
 export const LoginPage = () => {
   const { t } = useTranslation();
@@ -24,7 +20,7 @@ export const LoginPage = () => {
   useEffect(() => {
     if (isLoggedIn) {
       navigate("/", { replace: true });
-      window.location.reload();                     // Mit Tobais besprechen, ob das so bleiben soll
+      window.location.reload(); // Wenn entfernt: Seite bleibt schwarz und muss manuell neu geladen werden
     }
   }, [isLoggedIn, navigate]);
 
diff --git a/FrontendV2/src/pages/MyLoansPage.tsx b/FrontendV2/src/pages/MyLoansPage.tsx
index 0d937b5..48d8f08 100644
--- a/FrontendV2/src/pages/MyLoansPage.tsx
+++ b/FrontendV2/src/pages/MyLoansPage.tsx
@@ -17,11 +17,7 @@ import {
 import { Header } from "@/components/Header";
 import { Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 export const MyLoansPage = () => {
   const { t } = useTranslation();
diff --git a/FrontendV2/src/utils/Fetcher.ts b/FrontendV2/src/utils/Fetcher.ts
index bb71687..98dc88d 100644
--- a/FrontendV2/src/utils/Fetcher.ts
+++ b/FrontendV2/src/utils/Fetcher.ts
@@ -1,8 +1,5 @@
 import Cookies from "js-cookie";
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
+import { API_BASE } from "@/config/api.config";
 
 export const getBorrowableItems = async (
   startDate: string,
@@ -30,7 +27,6 @@ export const getBorrowableItems = async (
     }
 
     const data = await response.json();
-    console.log(data);
     return {
       data: data,
       status: "success",