implemented tanstack query

frontend/src/main.tsx

@@ -3,9 +3,14 @@ import { createRoot } from "react-dom/client";
 import "./utils/i18n/index.ts";
 import "./index.css";
 import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 );

frontend/src/pages/MainForm.tsx

@@ -20,12 +20,13 @@ import {
   ModalClose,
 } from "@mui/joy";
 import { submitFormData } from "../utils/sender";
-import { API_BASE } from "../config/api.config";
 import type { FormData, Message } from "../config/interfaces.config";
 import PersonIcon from "@mui/icons-material/Person";
 import QrCodeIcon from "@mui/icons-material/QrCode";
 import TranslateIcon from "@mui/icons-material/Translate";
 import qrCode from "../assets/PayPal-QR-Code.png";
+import { useQuery } from "@tanstack/react-query";
+import { confirmUser, fetchUsers } from "../utils/api/users";
 
 const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
 const PAYMENT_LABELS: Record<string, string> = {
@@ -85,10 +86,8 @@ export const MainForm = () => {
 
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
   const [nextID, setNextID] = useState<number | null>(null);
-  const [users, setUsers] = useState<string[]>([]);
-  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+  const [selectedUser, setSelectedUser] = useState("");
   const [formData, setFormData] = useState<FormData>(DEFAULT_FORM);
   const [showSelectUser, setShowSelectUser] = useState(false);
   const [QRmodal, setQRmodal] = useState(false);
@@ -97,23 +96,37 @@ export const MainForm = () => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  const confirmUser = async (username: string) => {
-    try {
-      const res = await fetch(
-        `${API_BASE}/default/confirm-user?username=${username}`,
-      );
-      const data = await res.json();
-      setNextID(data.nextID);
-    } catch (error) {
-      console.error("Error confirming user:", error);
+  useEffect(() => {
+    const savedUser = Cookies.get("selectedUser");
+    if (savedUser) {
+      setSelectedUser(savedUser);
     }
-  };
+  }, []);
+
+  const { data: usernameData, isLoading: usernameDataIsLoading } = useQuery({
+    queryKey: ["users"],
+    queryFn: fetchUsers,
+  });
+
+  const { data: userData, isSuccess: userDataIsSuccess } = useQuery({
+    queryKey: ["user", selectedUser],
+    enabled: !!selectedUser,
+    queryFn: () => confirmUser(selectedUser),
+  });
+
+  // Setting the nextID after a user is selected
+  useEffect(() => {
+    if (!userData) return;
+    setNextID(userData.nextID);
+  }, [userDataIsSuccess]);
 
   const handleUserSelection = (username: string | null) => {
-    if (!username) return;
+    if (username == null || username == "") {
+      console.log("Username must be set!");
+      return;
+    }
+
     setSelectedUser(username);
-    confirmUser(username);
-    Cookies.set("selectedUser", username);
   };
 
   const changeTranslation = () => {
@@ -140,30 +153,7 @@ export const MainForm = () => {
     }
   }, [formData.paymentMethod]);
 
-  useEffect(() => {
-    (async () => {
-      try {
-        const res = await fetch(`${API_BASE}/default/users`);
-        const data = await res.json();
-        setUsers(data.users);
-      } catch {
-        setMsg({
-          type: "danger",
-          headline: t("error"),
-          text: t("failed-to-load-users"),
-        });
-      }
-    })();
-
-    const cookieUser = Cookies.get("selectedUser");
-    if (cookieUser) {
-      setSelectedUser(cookieUser);
-      confirmUser(cookieUser);
-    }
-  }, []);
-
   const handleSubmit = async () => {
-    setIsLoading(true);
     try {
       const result = await submitFormData(formData, selectedUser || "");
       if (result.success) {
@@ -175,8 +165,8 @@ export const MainForm = () => {
           text: result.error || t("form-submission-failed"),
         });
       }
-    } finally {
-      setIsLoading(false);
+    } catch (err) {
+      console.log("remove");
     }
   };
 
@@ -191,15 +181,14 @@ export const MainForm = () => {
           <Typography>{t("user")}</Typography>
           {/* User selection */}
           <Autocomplete
-            options={users}
+            options={usernameData?.users ?? []}
+            loading={usernameDataIsLoading}
+            loadingText={t("loading")}
             value={selectedUser}
             onChange={(_, value) => handleUserSelection(value)}
             placeholder={t("user")}
             variant="soft"
             sx={{ borderRadius: "10px" }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") e.preventDefault();
-            }}
           />
         </ModalDialog>
       </Modal>
@@ -250,6 +239,17 @@ export const MainForm = () => {
             <IconButton onClick={changeTranslation}>
               <TranslateIcon />
             </IconButton>
+            <Typography
+              level="title-sm"
+              textColor="var(--joy-palette-success-plainColor)"
+              sx={{
+                fontFamily: "monospace",
+                opacity: "100%",
+                alignSelf: "center",
+              }}
+            >
+              {`${t("greeting")} ${userData?.fullname ?? t("loading")}`}
+            </Typography>
           </ButtonGroup>
 
           <form
@@ -411,7 +411,6 @@ export const MainForm = () => {
             {/* Submit button */}
             <Button
               type="submit"
-              loading={isLoading}
               disabled={!formData.paymentMethod}
               size="lg"
               sx={{

frontend/src/utils/api/users.ts

@@ -0,0 +1,21 @@
+import { API_BASE } from "../../config/api.config";
+import Cookies from "js-cookie";
+
+export const fetchUsers = async () => {
+  console.warn("fetchUsers is fetching!");
+
+  const response = await fetch(`${API_BASE}/default/users`);
+  const data = await response.json();
+
+  return data;
+};
+
+export const confirmUser = async (username: string) => {
+  console.warn("confirmUser is fetching!");
+  const response = await fetch(
+    `${API_BASE}/default/confirm-user?username=${username}`,
+  );
+  const data = await response.json();
+  Cookies.set("selectedUser", username);
+  return data;
+};

frontend/src/utils/i18n/locales/de/de.json

@@ -26,5 +26,7 @@
     "thank-you": "Vielen Dank für Ihre Unterstützung der Claudius Akademie! Wir wünschen Ihnen viel Glück mit dem Los.",
     "select-payment-method": "Zahlungsmethode auswählen",
     "return-to-homepage": "Zurück",
-    "qr-text": "PayPal QR-Code der Claudius Akademie"
+    "qr-text": "PayPal QR-Code der Claudius Akademie",
+    "loading": "Lädt...",
+    "greeting": "Hallo,"
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -27,5 +27,7 @@
     "thank-you": "Thank you for supporting the Claudius Akademie! We wish you the best of luck with your ticket.",
     "select-payment-method": "Select Payment Method",
     "return-to-homepage": "Return",
-    "qr-text": "PayPal QR-Code from the Claudius Akademie"
+    "qr-text": "PayPal QR-Code from the Claudius Akademie",
+    "loading": "Loading...",
+    "greeting": "Hello,"
 }