outsourced modals

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("");
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
   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 {
-    mutate: mutateForm,
-    isSuccess: mutateFormIsSuccess,
-    isPending: mutateFormIsPending,
-    isError: mutateFormIsError,
-  } = useMutation({
+  const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
     mutationFn: () => submitFormData(formData, selectedUser),
-  });
-
-  // Redirecting to success page if mutation was successful
-  useEffect(() => {
-    if (mutateFormIsSuccess) {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
       document.location.href = `/success?id=${nextID}&tickets=${formData.tickets}`;
-    }
-
-    if (mutateFormIsError) {
+    },
+    onError: () => {
       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(() => {
-    if (!userData) return;
-    setNextID(userData.nextID);
-  }, [userDataIsSuccess]);
+  const nextID = userData?.nextID ?? "N/A";
 
   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}>
-        <ModalDialog color="primary" layout="center" size="lg">
-          <ModalClose onClick={() => setShowSelectUser(false)} />
-          <Typography>{t("user")}</Typography>
-          {/* User selection */}
-          <Autocomplete
-            options={usernameData?.users ?? []}
-            loading={usernameDataIsLoading}
-            loadingText={t("loading")}
-            value={selectedUser}
-            onChange={(_, value) => handleUserSelection(value)}
-            placeholder={t("user")}
-            variant="soft"
-            sx={{ borderRadius: "10px" }}
-          />
-        </ModalDialog>
-      </Modal>
-      <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>
+      <SelectUserModal
+        showSelectUser={showSelectUser}
+        setShowSelectUser={setShowSelectUser}
+        usernameData={usernameData}
+        usernameDataIsLoading={usernameDataIsLoading}
+        selectedUser={selectedUser}
+        handleUserSelection={handleUserSelection}
+      />
+
+      <QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />
 
       <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",