4 files changed, 65 insertions, 56 deletions

diff --git a/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx b/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
index 0df10411..4cdecbbb 100644
--- a/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx
@@ -9,21 +9,21 @@ import { getHttpUserClient } from "~src/http/user";
 import { ImageCropper, useImageCrop } from "~src/components/ImageCropper";
 import BlobImage from "~src/components/BlobImage";
 import { ButtonRowV2 } from "~src/components/button";
-import {
-  Dialog,
-  DialogContainer,
-  useDialogController,
-} from "~src/components/dialog";
+import { Dialog, DialogContainer } from "~src/components/dialog";
 
 import "./ChangeAvatarDialog.css";
 
-export default function ChangeAvatarDialog() {
+export default function ChangeAvatarDialog({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
   const c = useC();
 
   const user = useUser();
 
-  const controller = useDialogController();
-
   type State =
     | "select"
     | "crop"
@@ -47,7 +47,9 @@ export default function ChangeAvatarDialog() {
     "settings.dialogChangeAvatar.prompt.select",
   );
 
-  const close = controller.closeDialog;
+  const close = () => {
+    if (state !== "uploading") onClose();
+  };
 
   const onSelectFile = (e: ChangeEvent<HTMLInputElement>): void => {
     const files = e.target.files;
@@ -90,7 +92,6 @@ export default function ChangeAvatarDialog() {
     }
 
     setState("uploading");
-    controller.setCanSwitchDialog(false);
     getHttpUserClient()
       .putAvatar(user.username, resultBlob)
       .then(
@@ -101,10 +102,7 @@ export default function ChangeAvatarDialog() {
           setState("error");
           setMessage("operationDialog.error");
         },
-      )
-      .finally(() => {
-        controller.setCanSwitchDialog(true);
-      });
+      );
   };
 
   const cancelButton = {
@@ -177,7 +175,7 @@ export default function ChangeAvatarDialog() {
   };
 
   return (
-    <Dialog>
+    <Dialog open={open} onClose={close}>
       <DialogContainer
         title="settings.dialogChangeAvatar.title"
         titleColor="primary"
diff --git a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
index 912f554f..964e4c1a 100644
--- a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
@@ -3,11 +3,19 @@ import { useUserLoggedIn } from "~src/services/user";
 
 import { OperationDialog } from "~src/components/dialog";
 
-export default function ChangeNicknameDialog() {
+export default function ChangeNicknameDialog({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
   const user = useUserLoggedIn();
 
   return (
     <OperationDialog
+      open={open}
+      onClose={onClose}
       title="settings.dialogChangeNickname.title"
       inputs={[
         {
diff --git a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
index c3111ac8..6fb8589f 100644
--- a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
@@ -5,13 +5,21 @@ import { userService } from "~src/services/user";
 
 import { OperationDialog } from "~src/components/dialog";
 
-export function ChangePasswordDialog() {
+export function ChangePasswordDialog({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
   const navigate = useNavigate();
 
   const [redirect, setRedirect] = useState<boolean>(false);
 
   return (
     <OperationDialog
+      open={open}
+      onClose={onClose}
       title="settings.dialogChangePassword.title"
       color="danger"
       inputPrompt="settings.dialogChangePassword.prompt"
diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 88ab5cb2..3fb18e24 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -14,11 +14,7 @@ import { getHttpUserClient } from "~src/http/user";
 import { useC, Text } from "~src/common";
 
 import { pushAlert } from "~src/components/alert";
-import {
-  useDialog,
-  DialogProvider,
-  ConfirmDialog,
-} from "~src/components/dialog";
+import { useDialog, ConfirmDialog } from "~src/components/dialog";
 import Card from "~src/components/Card";
 import Spinner from "~src/components/Spinner";
 import Page from "~src/components/Page";
@@ -144,22 +140,7 @@ function RegisterCodeSettingItem() {
   // undefined: loading
   const [registerCode, setRegisterCode] = useState<undefined | null | string>();
 
-  const { controller, createDialogSwitch } = useDialog({
-    confirm: (
-      <ConfirmDialog
-        title="settings.renewRegisterCode"
-        body="settings.renewRegisterCodeDesc"
-        onConfirm={() => {
-          if (user == null) throw new Error();
-          void getHttpUserClient()
-            .renewRegisterCode(user.username)
-            .then(() => {
-              setRegisterCode(undefined);
-            });
-        }}
-      />
-    ),
-  });
+  const { createDialogSwitch, dialogPropsMap } = useDialog(["confirm"]);
 
   useEffect(() => {
     setRegisterCode(undefined);
@@ -204,7 +185,19 @@ function RegisterCodeSettingItem() {
           </code>
         )}
       </SettingItemContainer>
-      <DialogProvider controller={controller} />
+      <ConfirmDialog
+        title="settings.renewRegisterCode"
+        body="settings.renewRegisterCodeDesc"
+        onConfirm={() => {
+          if (user == null) throw new Error();
+          void getHttpUserClient()
+            .renewRegisterCode(user.username)
+            .then(() => {
+              setRegisterCode(undefined);
+            });
+        }}
+        {...dialogPropsMap["confirm"]}
+      />
     </>
   );
 }
@@ -246,22 +239,12 @@ export default function SettingPage() {
   const user = useUser();
   const navigate = useNavigate();
 
-  const { controller, createDialogSwitch } = useDialog({
-    "change-nickname": <ChangeNicknameDialog />,
-    "change-avatar": <ChangeAvatarDialog />,
-    "change-password": <ChangePasswordDialog />,
-    logout: (
-      <ConfirmDialog
-        title="settings.dialogConfirmLogout.title"
-        body="settings.dialogConfirmLogout.prompt"
-        onConfirm={() => {
-          void userService.logout().then(() => {
-            navigate("/");
-          });
-        }}
-      />
-    ),
-  });
+  const { createDialogSwitch, dialogPropsMap } = useDialog([
+    "change-nickname",
+    "change-avatar",
+    "change-password",
+    "logout",
+  ]);
 
   return (
     <Page noTopPadding>
@@ -286,12 +269,24 @@ export default function SettingPage() {
             onClick={createDialogSwitch("logout")}
             danger
           />
+          <ChangeNicknameDialog {...dialogPropsMap["change-nickname"]} />
+          <ChangeAvatarDialog {...dialogPropsMap["change-avatar"]} />
+          <ChangePasswordDialog {...dialogPropsMap["change-password"]} />
+          <ConfirmDialog
+            title="settings.dialogConfirmLogout.title"
+            body="settings.dialogConfirmLogout.prompt"
+            onConfirm={() => {
+              void userService.logout().then(() => {
+                navigate("/");
+              });
+            }}
+            {...dialogPropsMap["logout"]}
+          />
         </SettingSection>
       ) : null}
       <SettingSection title="settings.subheader.customization">
         <LanguageChangeSettingItem />
       </SettingSection>
-      <DialogProvider controller={controller} />
     </Page>
   );
 }