diff options
Diffstat (limited to 'FrontEnd/src/pages/timeline')
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({ /> ); } - |