Use a modal manager

frontend/src/modals/ProxyHostModal.tsx

@@ -1,5 +1,6 @@
 import { IconSettings } from "@tabler/icons-react";
 import cn from "classnames";
+import EasyModal, { type InnerModalProps } from "ez-modal-react";
 import { Field, Form, Formik } from "formik";
 import { type ReactNode, useState } from "react";
 import { Alert } from "react-bootstrap";
@@ -18,11 +19,14 @@ import { intl, T } from "src/locale";
 import { validateNumber, validateString } from "src/modules/Validations";
 import { showSuccess } from "src/notifications";
 
-interface Props {
+const showProxyHostModal = (id: number | "new") => {
+	EasyModal.show(ProxyHostModal, { id });
+};
+
+interface Props extends InnerModalProps {
 	id: number | "new";
-	onClose: () => void;
 }
-export function ProxyHostModal({ id, onClose }: Props) {
+const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 	const { data, isLoading, error } = useProxyHost(id);
 	const { mutate: setProxyHost } = useSetProxyHost();
 	const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
@@ -42,7 +46,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
 			onError: (err: any) => setErrorMsg(<T id={err.message} />),
 			onSuccess: () => {
 				showSuccess(intl.formatMessage({ id: "notification.proxy-host-saved" }));
-				onClose();
+				remove();
 			},
 			onSettled: () => {
 				setIsSubmitting(false);
@@ -52,7 +56,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
 	};
 
 	return (
-		<Modal show onHide={onClose} animation={false}>
+		<Modal show={visible} onHide={remove}>
 			{!isLoading && error && (
 				<Alert variant="danger" className="m-3">
 					{error?.message || "Unknown error"}
@@ -341,7 +345,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
 								</div>
 							</Modal.Body>
 							<Modal.Footer>
-								<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
+								<Button data-bs-dismiss="modal" onClick={remove} disabled={isSubmitting}>
 									<T id="cancel" />
 								</Button>
 								<Button
@@ -361,4 +365,6 @@ export function ProxyHostModal({ id, onClose }: Props) {
 			)}
 		</Modal>
 	);
-}
+});
+
+export { showProxyHostModal };