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

feat: edited imports

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";
-
-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();

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