Use a modal manager

frontend/src/modals/UserModal.tsx

@@ -1,3 +1,4 @@
+import EasyModal, { type InnerModalProps } from "ez-modal-react";
 import { Field, Form, Formik } from "formik";
 import { useState } from "react";
 import { Alert } from "react-bootstrap";
@@ -8,12 +9,15 @@ import { intl, T } from "src/locale";
 import { validateEmail, validateString } from "src/modules/Validations";
 import { showSuccess } from "src/notifications";
 
-interface Props {
-	userId: number | "me" | "new";
-	onClose: () => void;
+const showUserModal = (id: number | "me" | "new") => {
+	EasyModal.show(UserModal, { id });
+};
+
+interface Props extends InnerModalProps {
+	id: number | "me" | "new";
 }
-export function UserModal({ userId, onClose }: Props) {
-	const { data, isLoading, error } = useUser(userId);
+const UserModal = EasyModal.create(({ id, visible, remove }: Props) => {
+	const { data, isLoading, error } = useUser(id);
 	const { data: currentUser, isLoading: currentIsLoading } = useUser("me");
 	const { mutate: setUser } = useSetUser();
 	const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -25,7 +29,7 @@ export function UserModal({ userId, onClose }: Props) {
 		setErrorMsg(null);
 
 		const { ...payload } = {
-			id: userId === "new" ? undefined : userId,
+			id: id === "new" ? undefined : id,
 			roles: [],
 			...values,
 		};
@@ -45,7 +49,7 @@ export function UserModal({ userId, onClose }: Props) {
 			onError: (err: any) => setErrorMsg(err.message),
 			onSuccess: () => {
 				showSuccess(intl.formatMessage({ id: "notification.user-saved" }));
-				onClose();
+				remove();
 			},
 			onSettled: () => {
 				setIsSubmitting(false);
@@ -55,7 +59,7 @@ export function UserModal({ userId, 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"}
@@ -218,7 +222,7 @@ export function UserModal({ userId, onClose }: Props) {
 								) : null}
 							</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
@@ -238,4 +242,6 @@ export function UserModal({ userId, onClose }: Props) {
 			)}
 		</Modal>
 	);
-}
+});
+
+export { showUserModal };