Matthias-Claudius-Schule/borrow-system
4
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
feat: edited imports
This commit is contained in:
Theis Gaedigk
2025-10-30 17:27:35 +01:00
parent 0d3de4f705
commit b52fe07618
11 changed files with 80 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
FrontendV2/package-lock.json generated
View File

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

2
FrontendV2/package.json
View File

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

45
FrontendV2/src/App.tsx
View File

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

43
FrontendV2/src/components/Footer.tsx
View File

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

6
FrontendV2/src/components/Header.tsx
View File

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

23
FrontendV2/src/components/footer/Footer.tsx Normal file
View File

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

25
FrontendV2/src/components/footer/versionInfo.query.ts Normal file
View File

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

6
FrontendV2/src/pages/Landingpage.tsx
View File

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

10
FrontendV2/src/pages/LoginPage.tsx
View File

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

6
FrontendV2/src/pages/MyLoansPage.tsx
View File

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

6
FrontendV2/src/utils/Fetcher.ts
View File

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