From 87589a2a11a585e317cc16a3b889e6537a77048a Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 22 Jul 2025 22:24:44 +0200
Subject: [PATCH] MangaMerge Confirmation Dialog

---
 .../src/Components/Mangas/MangaMerge.tsx      | 78 +++++++++++--------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/tranga-website/src/Components/Mangas/MangaMerge.tsx b/tranga-website/src/Components/Mangas/MangaMerge.tsx
index 2d4c8e0..660d980 100644
--- a/tranga-website/src/Components/Mangas/MangaMerge.tsx
+++ b/tranga-website/src/Components/Mangas/MangaMerge.tsx
@@ -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>
+        </>;
 }
\ No newline at end of file