refactor: update @tanstack/react-query to version 5.90.5 and restructure Footer component

feat: edited imports

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",

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",

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 =
+const queryClient = new QueryClient();
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
 
 function App() {
   const [user, setUser] = useState<User | undefined>(undefined);
@@ -65,6 +64,7 @@ function App() {
   }, []);
 
   return (
+    <QueryClientProvider client={queryClient}>
       <Flex direction="column" minH="100vh">
         <Box as="main" flex="1">
           <UserContext.Provider value={user}>
@@ -83,6 +83,7 @@ function App() {
         </Box>
         <Footer />
       </Flex>
+    </QueryClientProvider>
   );
 }
 

FrontendV2/src/components/Footer.tsx

@@ -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>
-  );
-};

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";
-
+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";
 
 export const Header = () => {
   const navigate = useNavigate();

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

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

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;

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";
+import { Footer } from "@/components/footer/Footer";
-
+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";
 
 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]);
 

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";
-
+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";
 
 export const MyLoansPage = () => {
   const { t } = useTranslation();

FrontendV2/src/utils/Fetcher.ts

@@ -1,8 +1,5 @@
 import Cookies from "js-cookie";
-const API_BASE =
+import { API_BASE } from "@/config/api.config";
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
 
 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",