Revert dialog.

8 files changed, 131 insertions, 119 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>
   );
 }
diff --git a/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
index d1af364b..f1b741c2 100644
--- a/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
@@ -6,14 +6,22 @@ import { getHttpTimelineClient, HttpTimelineInfo } from "~src/http/timeline";
 import { OperationDialog } from "~src/components/dialog";
 
 interface TimelineDeleteDialog {
+  open: boolean;
+  onClose: () => void;
   timeline: HttpTimelineInfo;
 }
 
-export default function TimelineDeleteDialog({ timeline }: TimelineDeleteDialog) {
+export default function TimelineDeleteDialog({
+  open,
+  onClose,
+  timeline,
+}: TimelineDeleteDialog) {
   const navigate = useNavigate();
 
   return (
     <OperationDialog
+      open={open}
+      onClose={onClose}
       title="timeline.deleteDialog.title"
       color="danger"
       inputPromptNode={
@@ -49,6 +57,6 @@ export default function TimelineDeleteDialog({ timeline }: TimelineDeleteDialog)
       }}
     />
   );
-};
+}
 
 TimelineDeleteDialog;
diff --git a/FrontEnd/src/pages/timeline/TimelineInfoCard.tsx b/FrontEnd/src/pages/timeline/TimelineInfoCard.tsx
index 2bc40877..ae58f4aa 100644
--- a/FrontEnd/src/pages/timeline/TimelineInfoCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineInfoCard.tsx
@@ -9,12 +9,7 @@ import { getHttpBookmarkClient } from "~src/http/bookmark";
 import { pushAlert } from "~src/components/alert";
 import { useMobile } from "~src/components/hooks";
 import { IconButton } from "~src/components/button";
-import {
-  Dialog,
-  FullPageDialog,
-  DialogProvider,
-  useDialog,
-} from "~src/components/dialog";
+import { Dialog, FullPageDialog, useDialog } from "~src/components/dialog";
 import UserAvatar from "~src/components/user/UserAvatar";
 import PopupMenu from "~src/components/menu/PopupMenu";
 import Card from "~src/components/Card";
@@ -57,17 +52,11 @@ function TimelineInfoContent({
 }: Omit<TimelineInfoCardProps, "connectionStatus">) {
   const user = useUser();
 
-  const { controller, createDialogSwitch } = useDialog({
-    member: (
-      <Dialog>
-        <TimelineMember timeline={timeline} onChange={onReload} />
-      </Dialog>
-    ),
-    property: (
-      <TimelinePropertyChangeDialog timeline={timeline} onChange={onReload} />
-    ),
-    delete: <TimelineDeleteDialog timeline={timeline} />,
-  });
+  const { createDialogSwitch, dialogPropsMap } = useDialog([
+    "member",
+    "property",
+    "delete",
+  ]);
 
   return (
     <div>
@@ -144,7 +133,17 @@ function TimelineInfoContent({
           </PopupMenu>
         )}
       </div>
-      <DialogProvider controller={controller} />
+
+      <Dialog {...dialogPropsMap["member"]}>
+        <TimelineMember timeline={timeline} onChange={onReload} />
+      </Dialog>
+
+      <TimelinePropertyChangeDialog
+        timeline={timeline}
+        onChange={onReload}
+        {...dialogPropsMap["property"]}
+      />
+      <TimelineDeleteDialog timeline={timeline} {...dialogPropsMap["delete"]} />
     </div>
   );
 }
@@ -162,22 +161,13 @@ export default function TimelineInfoCard(props: TimelineInfoCardProps) {
     }
   });
 
-  const { controller, switchDialog } = useDialog(
-    {
-      "full-page": (
-        <FullPageDialog>
-          <TimelineInfoContent timeline={timeline} onReload={onReload} />
-        </FullPageDialog>
-      ),
-    },
-    {
-      onClose: {
-        "full-page": () => {
-          setCollapse(true);
-        },
+  const { switchDialog, dialogPropsMap } = useDialog(["full-page"], {
+    onClose: {
+      "full-page": () => {
+        setCollapse(true);
       },
     },
-  );
+  });
 
   return (
     <Card
@@ -202,7 +192,9 @@ export default function TimelineInfoCard(props: TimelineInfoCardProps) {
       {!collapse && !isMobile && (
         <TimelineInfoContent timeline={timeline} onReload={onReload} />
       )}
-      <DialogProvider controller={controller} />
+      <FullPageDialog {...dialogPropsMap["full-page"]}>
+        <TimelineInfoContent timeline={timeline} onReload={onReload} />
+      </FullPageDialog>
     </Card>
   );
 }
diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.tsx b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
index 4f0460ff..2cfe51c4 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
@@ -8,7 +8,7 @@ import {
 import { pushAlert } from "~src/components/alert";
 import { useClickOutside } from "~src/components/hooks";
 import UserAvatar from "~src/components/user/UserAvatar";
-import { DialogProvider, useDialog } from "~src/components/dialog";
+import { useDialog } from "~src/components/dialog";
 import FlatButton from "~src/components/button/FlatButton";
 import ConfirmDialog from "~src/components/dialog/ConfirmDialog";
 import TimelinePostContentView from "./view/TimelinePostContentView";
@@ -32,33 +32,13 @@ export default function TimelinePostView(props: TimelinePostViewProps) {
   const [operationMaskVisible, setOperationMaskVisible] =
     useState<boolean>(false);
 
-  const { controller, switchDialog } = useDialog(
-    {
-      delete: (
-        <ConfirmDialog
-          title="timeline.post.deleteDialog.title"
-          body="timeline.post.deleteDialog.prompt"
-          onConfirm={() => {
-            void getHttpTimelineClient()
-              .deletePost(post.timelineOwnerV2, post.timelineNameV2, post.id)
-              .then(onDeleted, () => {
-                pushAlert({
-                  color: "danger",
-                  message: "timeline.deletePostFailed",
-                });
-              });
-          }}
-        />
-      ),
-    },
-    {
-      onClose: {
-        delete: () => {
-          setOperationMaskVisible(false);
-        },
+  const { switchDialog, dialogPropsMap } = useDialog(["delete"], {
+    onClose: {
+      delete: () => {
+        setOperationMaskVisible(false);
       },
     },
-  );
+  });
 
   const [maskElement, setMaskElement] = useState<HTMLElement | null>(null);
   useClickOutside(maskElement, () => setOperationMaskVisible(false));
@@ -114,10 +94,28 @@ export default function TimelinePostView(props: TimelinePostViewProps) {
                 e.stopPropagation();
               }}
             />
+            <ConfirmDialog
+              title="timeline.post.deleteDialog.title"
+              body="timeline.post.deleteDialog.prompt"
+              onConfirm={() => {
+                void getHttpTimelineClient()
+                  .deletePost(
+                    post.timelineOwnerV2,
+                    post.timelineNameV2,
+                    post.id,
+                  )
+                  .then(onDeleted, () => {
+                    pushAlert({
+                      color: "danger",
+                      message: "timeline.deletePostFailed",
+                    });
+                  });
+              }}
+              {...dialogPropsMap["delete"]}
+            />
           </div>
         ) : null}
       </TimelinePostCard>
-      <DialogProvider controller={controller} />
     </TimelinePostContainer>
   );
 }
diff --git a/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx
index 79838d58..9cf319ca 100644
--- a/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx
@@ -9,6 +9,8 @@ import {
 import OperationDialog from "~src/components/dialog/OperationDialog";
 
 interface TimelinePropertyChangeDialogProps {
+  open: boolean;
+  onClose: () => void;
   timeline: HttpTimelineInfo;
   onChange: () => void;
 }
@@ -20,11 +22,15 @@ const labelMap: { [key in TimelineVisibility]: string } = {
 };
 
 export default function TimelinePropertyChangeDialog({
+  open,
+  onClose,
   timeline,
   onChange,
 }: TimelinePropertyChangeDialogProps) {
   return (
     <OperationDialog
+      open={open}
+      onClose={onClose}
       title={"timeline.dialogChangeProperty.title"}
       inputs={{
         scheme: {
@@ -76,4 +82,3 @@ export default function TimelinePropertyChangeDialog({
     />
   );
 }
-