glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-09-10 11:58:20 +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

30
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 ModalClose from "@mui/joy/ModalClose";
import {ApiContext} from "../../apiClient/ApiContext.tsx"; import {ApiContext} from "../../apiClient/ApiContext.tsx";
import {MangaCard} from "./MangaCard.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 {KeyboardDoubleArrowRight, Warning} from "@mui/icons-material";
import {LoadingState, StateIndicator} from "../Loading.tsx"; import {LoadingState, StateIndicator} from "../Loading.tsx";
@@ -26,6 +26,11 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
}); });
}, [open]); }, [open]);
const exit = (manga : Manga) => {
setOpen(false);
setSimilar(similar.filter(m => m.key != manga.key));
}
return ( return (
<> <>
<Button onClick={_ => setOpen(true)}> <Button onClick={_ => setOpen(true)}>
@@ -35,7 +40,7 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
<ModalClose /> <ModalClose />
<Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap> <Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap>
{similar.map(similarManga => <MangaCard manga={similarManga}> {similar.map(similarManga => <MangaCard manga={similarManga}>
<ConfirmationModal manga={manga as Manga} similarManga={similarManga} /> <ConfirmationModal manga={manga as Manga} similarManga={similarManga} exit={() => exit(similarManga)} />
</MangaCard>)} </MangaCard>)}
</Stack> </Stack>
</Drawer> </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 [open, setOpen] = useState<boolean>(false);
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
@@ -54,17 +59,27 @@ function ConfirmationModal({manga, similarManga} : {manga : Manga, similarManga
Api.mangaMergeIntoPartialUpdate(manga.key as string, similarManga.key as string).then(response => { Api.mangaMergeIntoPartialUpdate(manga.key as string, similarManga.key as string).then(response => {
if (response.ok){ if (response.ok){
setLoadingState(LoadingState.success); setLoadingState(LoadingState.success);
setTimeout(() => setOpen(false), 2000); setOpen(false);
exit();
}else }else
setLoadingState(LoadingState.failure); setLoadingState(LoadingState.failure);
}).catch(_ => setLoadingState(LoadingState.failure)); }).catch(_ => setLoadingState(LoadingState.failure));
} }
return ( return <>
<> {
loadingState == LoadingState.success ?
<Alert
color="success"
startDecorator={StateIndicator(LoadingState.success)}
>
Merged Successfully!
</Alert>
:
<Button onClick={_ => setOpen(true)}> <Button onClick={_ => setOpen(true)}>
Merge into Merge into
</Button> </Button>
}
<Modal open={open} onClose={_ => setOpen(false)}> <Modal open={open} onClose={_ => setOpen(false)}>
<ModalDialog> <ModalDialog>
<ModalClose /> <ModalClose />
@@ -86,6 +101,5 @@ function ConfirmationModal({manga, similarManga} : {manga : Manga, similarManga
</Tooltip> </Tooltip>
</ModalDialog> </ModalDialog>
</Modal> </Modal>
</> </>;
);
} }