Update frontend after library deletion

gameyfin/src/main/frontend/components/administration/LibraryManagement.tsx

@@ -3,7 +3,7 @@ import ConfigFormField from "Frontend/components/administration/ConfigFormField"
 import withConfigPage from "Frontend/components/administration/withConfigPage";
 import Section from "Frontend/components/general/Section";
 import * as Yup from 'yup';
-import {Button, Divider, Tooltip, useDisclosure} from "@heroui/react";
+import {addToast, Button, Divider, Tooltip, useDisclosure} from "@heroui/react";
 import {Plus} from "@phosphor-icons/react";
 import {LibraryEndpoint} from "Frontend/generated/endpoints";
 import {LibraryOverviewCard} from "Frontend/components/general/cards/LibraryOverviewCard";
@@ -41,6 +41,24 @@ function LibraryManagementLayout({getConfig, formik}: any) {
             }
             return [...prevLibraries, updatedLibrary];
         });
+
+        addToast({
+            title: "Library updated",
+            description: `Library ${library.name} has been updated.`,
+            color: "success"
+        })
+    }
+
+    async function removeLibrary(library: LibraryDto) {
+        await LibraryEndpoint.removeLibrary(library.id);
+        setLibraries((prevLibraries) => {
+            return prevLibraries.filter((l) => l.id !== library.id);
+        });
+        addToast({
+            title: "Library removed",
+            description: `Library ${library.name} has been removed.`,
+            color: "success"
+        })
     }
 
     return (
@@ -72,7 +90,8 @@ function LibraryManagementLayout({getConfig, formik}: any) {
                 // Aspect ratio of cover = 12/17 -> 5 covers = 60/17 -> 353px * 100px
                 <div id="library-cards" className="grid gap-4 grid-cols-[repeat(auto-fill,minmax(353px,1fr))]">
                     {libraries.map((library) =>
-                        <LibraryOverviewCard library={library} updateLibrary={updateLibrary} key={library.name}/>
+                        <LibraryOverviewCard library={library} updateLibrary={updateLibrary}
+                                             removeLibrary={removeLibrary} key={library.name}/>
                     )}
                 </div> :
                 "No libraries configured. Add your first library!"

gameyfin/src/main/frontend/components/general/cards/LibraryOverviewCard.tsx

@@ -25,9 +25,10 @@ import LibraryUpdateDto from "Frontend/generated/de/grimsi/gameyfin/libraries/dt
 import ScanType from "Frontend/generated/de/grimsi/gameyfin/libraries/enums/ScanType";
 import {randomGamesFromLibrary} from "Frontend/util/utils";
 
-export function LibraryOverviewCard({library, updateLibrary}: {
+export function LibraryOverviewCard({library, updateLibrary, removeLibrary}: {
     library: LibraryDto,
-    updateLibrary: (library: LibraryUpdateDto) => void
+    updateLibrary: (library: LibraryUpdateDto) => Promise<void>,
+    removeLibrary: (library: LibraryDto) => Promise<void>
 }) {
     const MAX_COVER_COUNT = 5;
 
@@ -103,6 +104,7 @@ export function LibraryOverviewCard({library, updateLibrary}: {
                 isOpen={libraryDetailsModal.isOpen}
                 onOpenChange={libraryDetailsModal.onOpenChange}
                 updateLibrary={updateLibrary}
+                removeLibrary={removeLibrary}
             />
         </>
     );

gameyfin/src/main/frontend/components/general/modals/LibraryDetailsModal.tsx

@@ -2,56 +2,75 @@ import React from "react";
 import {Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader} from "@heroui/react";
 import {Form, Formik} from "formik";
 import Input from "Frontend/components/general/input/Input";
-import {LibraryEndpoint} from "Frontend/generated/endpoints";
 import LibraryUpdateDto from "Frontend/generated/de/grimsi/gameyfin/libraries/dto/LibraryUpdateDto";
 import LibraryDto from "Frontend/generated/de/grimsi/gameyfin/libraries/dto/LibraryDto";
+import Section from "Frontend/components/general/Section";
 
 interface LibraryDetailsModalProps {
     library: LibraryDto;
     isOpen: boolean;
     onOpenChange: () => void;
-    updateLibrary: (library: LibraryUpdateDto) => void;
+    updateLibrary: (library: LibraryUpdateDto) => Promise<void>;
+    removeLibrary: (library: LibraryDto) => Promise<void>;
 }
 
-export default function LibraryDetailsModal({library, isOpen, onOpenChange, updateLibrary}: LibraryDetailsModalProps) {
+export default function LibraryDetailsModal({
+                                                library,
+                                                isOpen,
+                                                onOpenChange,
+                                                updateLibrary,
+                                                removeLibrary
+                                            }: LibraryDetailsModalProps) {
     return (
         <Modal isOpen={isOpen} onOpenChange={onOpenChange} backdrop="opaque" size="lg">
             <ModalContent>
-                {(onClose) => (
+                {(onClose) => {
-                    <Formik initialValues={library}
+                    async function update(values: LibraryUpdateDto) {
-                            enableReinitialize={true}
+                        await updateLibrary(values);
-                            onSubmit={async (values: LibraryUpdateDto) => {
+                        onClose();
-                                updateLibrary(values);
+                    }
-                                onClose();
+
-                            }}
+                    async function remove(library: LibraryDto) {
-                    >
+                        await removeLibrary(library);
-                        {(formik: { isSubmitting: any; }) => (
+                        onClose();
-                            <Form>
+                    }
-                                <ModalHeader className="flex flex-col gap-1">
+
-                                    Edit library
+                    return (
-                                </ModalHeader>
+                        <Formik initialValues={library}
-                                <ModalBody>
+                                enableReinitialize={true}
-                                    <Input key="name" name="name" label="Name"/>
+                                onSubmit={(values) => update(values)}
-                                    <Button onPress={() => LibraryEndpoint.removeLibrary(library.id)}
+                        >
-                                            color="danger">Delete</Button>
+                            {(formik: { isSubmitting: any; }) => (
-                                </ModalBody>
+                                <Form>
-                                <ModalFooter>
+                                    <ModalHeader className="flex flex-col gap-1">
-                                    <Button variant="light" onPress={onClose}>
+                                        Edit library
-                                        Cancel
+                                    </ModalHeader>
-                                    </Button>
+                                    <ModalBody>
-                                    <Button
+                                        <Input key="name" name="name" label="Name"/>
-                                        color="primary"
+
-                                        isLoading={formik.isSubmitting}
+                                        <Section title="Danger zone"/>
-                                        disabled={formik.isSubmitting}
+                                        <Button onPress={() => remove(library)} color="danger">
-                                        type="submit"
+                                            Delete this library
-                                    >
+                                        </Button>
-                                        {formik.isSubmitting ? "" : "Save"}
+                                    </ModalBody>
-                                    </Button>
+                                    <ModalFooter>
-                                </ModalFooter>
+                                        <Button variant="light" onPress={onClose}>
-                            </Form>
+                                            Cancel
-                        )}
+                                        </Button>
-                    </Formik>
+                                        <Button
-                )}
+                                            color="primary"
+                                            isLoading={formik.isSubmitting}
+                                            disabled={formik.isSubmitting}
+                                            type="submit"
+                                        >
+                                            {formik.isSubmitting ? "" : "Save"}
+                                        </Button>
+                                    </ModalFooter>
+                                </Form>
+                            )}
+                        </Formik>
+                    )
+                }}
             </ModalContent>
         </Modal>
     );