outsourced modals

2026-05-19 21:54:02 +02:00
parent d5b6c9665c
commit 11c2372cae
5 changed files with 109 additions and 74 deletions
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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" }}
+      <SelectUserModal
+        showSelectUser={showSelectUser}
+        setShowSelectUser={setShowSelectUser}
+        usernameData={usernameData}
+        usernameDataIsLoading={usernameDataIsLoading}
+        selectedUser={selectedUser}
+        handleUserSelection={handleUserSelection}
      />
-        </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>
+
+      <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",
@@ -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
@@ -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}`,