glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-09-10 20:08:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

MangaMerge Confirmation Dialog

Browse Source
This commit is contained in:
glax
2025-07-22 22:24:44 +02:00
parent 7e610c485b
commit 87589a2a11
1 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
tranga-website/src/Components/Mangas/MangaMerge.tsx
View File

@@ -4,7 +4,7 @@ import Drawer from "@mui/joy/Drawer";
import ModalClose from "@mui/joy/ModalClose";
import {ApiContext} from "../../apiClient/ApiContext.tsx";
import {MangaCard} from "./MangaCard.tsx";
import {Button, Modal, ModalDialog, Stack, Tooltip, Typography} from "@mui/joy";
import {Alert, Button, Modal, ModalDialog, Stack, Tooltip, Typography} from "@mui/joy";
import {KeyboardDoubleArrowRight, Warning} from "@mui/icons-material";
import {LoadingState, StateIndicator} from "../Loading.tsx";
@@ -26,6 +26,11 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
});
}, [open]);
const exit = (manga : Manga) => {
setOpen(false);
setSimilar(similar.filter(m => m.key != manga.key));
}
return (
<>
<Button onClick={_ => setOpen(true)}>
@@ -35,7 +40,7 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
<ModalClose />
<Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap>
{similar.map(similarManga => <MangaCard manga={similarManga}>
<ConfirmationModal manga={manga as Manga} similarManga={similarManga} />
<ConfirmationModal manga={manga as Manga} similarManga={similarManga} exit={() => exit(similarManga)} />
</MangaCard>)}
</Stack>
</Drawer>
@@ -43,7 +48,7 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
);
}
function ConfirmationModal({manga, similarManga} : {manga : Manga, similarManga : Manga}) : ReactNode {
function ConfirmationModal({manga, similarManga, exit} : {manga : Manga, similarManga : Manga, exit: ()=>void}) : ReactNode {
const [open, setOpen] = useState<boolean>(false);
const Api = useContext(ApiContext);
@@ -54,38 +59,47 @@ function ConfirmationModal({manga, similarManga} : {manga : Manga, similarManga
Api.mangaMergeIntoPartialUpdate(manga.key as string, similarManga.key as string).then(response => {
if (response.ok){
setLoadingState(LoadingState.success);
setTimeout(() => setOpen(false), 2000);
setOpen(false);
exit();
}else
setLoadingState(LoadingState.failure);
}).catch(_ => setLoadingState(LoadingState.failure));
}
return (
<>
<Button onClick={_ => setOpen(true)}>
Merge into
</Button>
<Modal open={open} onClose={_ => setOpen(false)}>
<ModalDialog>
<ModalClose />
<Typography level={"h2"}>Confirm Merge</Typography>
<Stack direction={"row"} spacing={3} alignItems={"center"}>
<MangaCard manga={manga} />
<Typography color={"danger"} level={"h1"}><KeyboardDoubleArrowRight /></Typography>
<MangaCard manga={similarManga} />
</Stack>
<Tooltip title={"THIS CAN NOT BE UNDONE!"}>
<Button
onClick={merge}
disabled={loadingState === LoadingState.loading}
endDecorator={StateIndicator(loadingState)}
color={"danger"}
startDecorator={<Warning />}>
Merge
</Button>
</Tooltip>
</ModalDialog>
</Modal>
</>
);
return <>
{
loadingState == LoadingState.success ?
<Alert
color="success"
startDecorator={StateIndicator(LoadingState.success)}
>
Merged Successfully!
</Alert>
:
<Button onClick={_ => setOpen(true)}>
Merge into
</Button>
}
<Modal open={open} onClose={_ => setOpen(false)}>
<ModalDialog>
<ModalClose />
<Typography level={"h2"}>Confirm Merge</Typography>
<Stack direction={"row"} spacing={3} alignItems={"center"}>
<MangaCard manga={manga} />
<Typography color={"danger"} level={"h1"}><KeyboardDoubleArrowRight /></Typography>
<MangaCard manga={similarManga} />
</Stack>
<Tooltip title={"THIS CAN NOT BE UNDONE!"}>
<Button
onClick={merge}
disabled={loadingState === LoadingState.loading}
endDecorator={StateIndicator(loadingState)}
color={"danger"}
startDecorator={<Warning />}>
Merge
</Button>
</Tooltip>
</ModalDialog>
</Modal>
</>;
}