Revert dialog.

4 files changed, 66 insertions, 63 deletions

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({
     />
   );
 }
-