outsourced modals

frontend/src/components/modals/QR-CodeModal.tsx

@@ -0,0 +1,31 @@
+import { Modal, ModalDialog, Typography, ModalClose } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import qrCode from "../../assets/PayPal-QR-Code.png";
+
+interface QRcodeModalProps {
+  QRmodal: boolean;
+  setQRmodal: (value: boolean) => void;
+}
+
+export const QRcodeModal = (props: QRcodeModalProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal open={props.QRmodal}>
+      <ModalDialog color="primary" layout="center" size="lg">
+        <ModalClose onClick={() => props.setQRmodal(false)} />
+        <Typography>{t("qr-text")}</Typography>
+        <img
+          src={qrCode}
+          alt="PayPal QR Code"
+          style={{
+            width: "100%",
+            height: "auto",
+            maxHeight: "70vh",
+            objectFit: "contain",
+          }}
+        />
+      </ModalDialog>
+    </Modal>
+  );
+};

frontend/src/components/modals/SelectUserModal.tsx

@@ -0,0 +1,40 @@
+import {
+  Modal,
+  ModalDialog,
+  Typography,
+  ModalClose,
+  Autocomplete,
+} from "@mui/joy";
+import { useTranslation } from "react-i18next";
+
+interface SelectUserModalProps {
+  showSelectUser: boolean;
+  setShowSelectUser: (value: boolean) => void;
+  usernameData: { users: string[] };
+  usernameDataIsLoading: boolean;
+  selectedUser: string | null;
+  handleUserSelection: (value: string | null) => void;
+}
+
+export const SelectUserModal = (props: SelectUserModalProps) => {
+  const { t } = useTranslation();
+  return (
+    <Modal open={props.showSelectUser}>
+      <ModalDialog color="primary" layout="center" size="lg">
+        <ModalClose onClick={() => props.setShowSelectUser(false)} />
+        <Typography>{t("user")}</Typography>
+        {/* User selection */}
+        <Autocomplete
+          options={props.usernameData?.users ?? []}
+          loading={props.usernameDataIsLoading}
+          loadingText={t("loading")}
+          value={props.selectedUser}
+          onChange={(_, value) => props.handleUserSelection(value)}
+          placeholder={t("user")}
+          variant="soft"
+          sx={{ borderRadius: "10px" }}
+        />
+      </ModalDialog>
+    </Modal>
+  );
+};

frontend/src/pages/MainForm.tsx

@@ -13,11 +13,7 @@ import {
   Typography,
   FormControl,
   FormLabel,
-  Autocomplete,
   ButtonGroup,
-  Modal,
-  ModalDialog,
-  ModalClose,
   CircularProgress,
 } from "@mui/joy";
 import { submitFormData } from "../utils/api/form";
@@ -25,9 +21,10 @@ 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, useMutation, useQueryClient } from "@tanstack/react-query";
 import { confirmUser, fetchUsers } from "../utils/api/users";
+import { QRcodeModal } from "../components/modals/QR-CodeModal";
+import { SelectUserModal } from "../components/modals/SelectUserModal";
 
 const PAYMENT_METHODS = ["bar", "paypal", "andere"] as const;
 const PAYMENT_LABELS: Record<string, string> = {
@@ -88,8 +85,7 @@ export const MainForm = () => {
 
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
-  const [nextID, setNextID] = useState<number | null>(null);
+  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);
@@ -106,8 +102,8 @@ export const MainForm = () => {
       setMsg({
         type: "warning",
         headline: t("set-username-headline"),
-        text: t("set-username-text")
+        text: t("set-username-text"),
-      })
+      });
     }
   }, []);
 
@@ -116,43 +112,30 @@ export const MainForm = () => {
     queryFn: fetchUsers,
   });
 
-  const { data: userData, isSuccess: userDataIsSuccess } = useQuery({
+  const { data: userData } = useQuery({
     queryKey: ["user", selectedUser],
     enabled: !!selectedUser,
     queryFn: () => confirmUser(selectedUser),
   });
 
-  const {
+  const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
-    mutate: mutateForm,
-    isSuccess: mutateFormIsSuccess,
-    isPending: mutateFormIsPending,
-    isError: mutateFormIsError,
-  } = useMutation({
     mutationFn: () => submitFormData(formData, selectedUser),
-  });
+    onSuccess: () => {
-
-  // Redirecting to success page if mutation was successful
-  useEffect(() => {
-    if (mutateFormIsSuccess) {
       queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
       document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
-    }
+    },
-
+    onError: () => {
-    if (mutateFormIsError) {
       queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
       setMsg({
         type: "danger",
         headline: t("error"),
         text: t("form-submission-failed"),
       });
-    }
+    },
-  }, [mutateFormIsSuccess, mutateFormIsError]);
+  });
 
   // Setting the nextID after a user is selected
-  useEffect(() => {
+  const nextID = userData?.nextID ?? "N/A";
-    if (!userData) return;
-    setNextID(userData.nextID);
-  }, [userDataIsSuccess]);
 
   const handleUserSelection = (username: string | null) => {
     if (username == null || username == "") {
@@ -180,50 +163,21 @@ export const MainForm = () => {
     }
   };
 
-  useEffect(() => {
-    if (formData.paymentMethod === "paypal") {
-      setQRmodal(true);
-    }
-  }, [formData.paymentMethod]);
-
   // Shorthand so we don't repeat formData + onChange on every Field usage
   const fieldProps = { formData, onChange: handleChange };
 
   return (
     <>
-      <Modal open={showSelectUser}>
+      <SelectUserModal
-        <ModalDialog color="primary" layout="center" size="lg">
+        showSelectUser={showSelectUser}
-          <ModalClose onClick={() => setShowSelectUser(false)} />
+        setShowSelectUser={setShowSelectUser}
-          <Typography>{t("user")}</Typography>
+        usernameData={usernameData}
-          {/* User selection */}
+        usernameDataIsLoading={usernameDataIsLoading}
-          <Autocomplete
+        selectedUser={selectedUser}
-            options={usernameData?.users ?? []}
+        handleUserSelection={handleUserSelection}
-            loading={usernameDataIsLoading}
-            loadingText={t("loading")}
-            value={selectedUser}
-            onChange={(_, value) => handleUserSelection(value)}
-            placeholder={t("user")}
-            variant="soft"
-            sx={{ borderRadius: "10px" }}
       />
-        </ModalDialog>
+
-      </Modal>
+      <QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />
-      <Modal open={QRmodal}>
-        <ModalDialog color="primary" layout="center" size="lg">
-          <ModalClose onClick={() => setQRmodal(false)} />
-          <Typography>{t("qr-text")}</Typography>
-          <img
-            src={qrCode}
-            alt="PayPal QR Code"
-            style={{
-              width: "100%",
-              height: "auto",
-              maxHeight: "70vh",
-              objectFit: "contain",
-            }}
-          />
-        </ModalDialog>
-      </Modal>
 
       <div className="min-h-screen w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
         <Sheet
@@ -388,12 +342,15 @@ export const MainForm = () => {
                       formData.paymentMethod === method ? "solid" : "soft"
                     }
                     color="primary"
-                    onClick={() =>
+                    onClick={() => {
                       setFormData((prev) => ({
                         ...prev,
                         paymentMethod: method,
-                      }))
+                      }));
+                      if (method === "paypal") {
+                        setQRmodal(true);
                       }
+                    }}
                     sx={{
                       flex: 1,
                       minWidth: "90px",

frontend/src/utils/api/form.ts

@@ -1,7 +1,10 @@
 import { API_BASE } from "../../config/api.config";
 import type { FormData } from "../../config/interfaces.config";
 
-export const submitFormData = async (data: FormData, username: string) => {
+export const submitFormData = async (
+  data: FormData,
+  username: string | null,
+) => {
   console.warn("submitFormData is fetching!");
 
   // await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds

frontend/src/utils/api/users.ts

@@ -10,7 +10,11 @@ export const fetchUsers = async () => {
   return data;
 };
 
-export const confirmUser = async (username: string) => {
+export const confirmUser = async (username: string | null) => {
+  if (!username) {
+    return;
+  }
+
   console.warn("confirmUser is fetching!");
   const response = await fetch(
     `${API_BASE}/default/confirm-user?username=${username}`,