feat: implement remove files option to modal

oae · Oct 17, 2022 · 355c1ae · 355c1ae
1 parent 879250c
commit 355c1ae
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 34 deletions.
diff --git a/src/components/mangaCard.tsx b/src/components/mangaCard.tsx
@@ -1,9 +1,22 @@
-import { ActionIcon, Badge, Code, createStyles, Paper, Skeleton, Text, Title } from '@mantine/core';
-import { openConfirmModal } from '@mantine/modals';
+import {
+  ActionIcon,
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Code,
+  createStyles,
+  Paper,
+  Skeleton,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useModals } from '@mantine/modals';
 import { IconX } from '@tabler/icons';
-import stc from 'string-to-color';
 import { contrastColor } from 'contrast-color';
-import { useMemo } from 'react';
+import { useState } from 'react';
+import stc from 'string-to-color';
 
 const useStyles = createStyles((theme, _params, getRef) => ({
   skeletonCard: {
@@ -57,31 +70,78 @@ interface ArticleCardImageProps {
   cover: string;
   title: string;
   badge: string;
-  onRemove: () => void;
+  onRemove: (shouldRemoveFiles: boolean) => void;
   onClick: () => void;
 }
 
-const useRemoveModal = (title: string, onRemove: () => void) => {
-  const openRemoveModal = useMemo(
-    () => () =>
-      openConfirmModal({
-        title: `Remove ${title}?`,
-        centered: true,
-        children: (
-          <Text size="sm">
-            Are you sure you want to remove
-            <Code className="text-base font-bold" color="red">
-              {title}
-            </Code>
-            ? This action is destructive and all downloaded files will be removed
-          </Text>
-        ),
-        labels: { confirm: 'Remove', cancel: 'Cancel' },
-        confirmProps: { color: 'red' },
-        onConfirm: onRemove,
-      }),
-    [onRemove, title],
+function RemoveModalContent({
+  title,
+  onRemove,
+  onClose,
+}: {
+  title: string;
+  onRemove: (shouldRemoveFiles: boolean) => void;
+  onClose: () => void;
+}) {
+  const [shouldRemoveFiles, setShouldRemoveFiles] = useState(false);
+  return (
+    <>
+      <Text mb={4} size="sm">
+        Are you sure you want to remove
+        <Code className="text-base font-bold" color="red">
+          {title}
+        </Code>
+        ?
+      </Text>
+      <Alert
+        icon={
+          <Checkbox
+            checked={shouldRemoveFiles}
+            color="red"
+            onChange={(event) => setShouldRemoveFiles(event.currentTarget.checked)}
+          />
+        }
+        title="Remove files?"
+        color="red"
+      >
+        This action is destructive and all downloaded files will be removed
+      </Alert>
+      <Box
+        sx={(theme) => ({
+          display: 'flex',
+          gap: theme.spacing.xs,
+          justifyContent: 'end',
+          marginTop: theme.spacing.md,
+        })}
+      >
+        <Button variant="default" color="dark" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          variant="filled"
+          color="red"
+          onClick={() => {
+            onRemove(shouldRemoveFiles);
+            onClose();
+          }}
+        >
+          Remove
+        </Button>
+      </Box>
+    </>
   );
+}
+
+const useRemoveModal = (title: string, onRemove: (shouldRemoveFiles: boolean) => void) => {
+  const modals = useModals();
+
+  const openRemoveModal = () => {
+    const id = modals.openModal({
+      title: `Remove ${title}?`,
+      centered: true,
+      children: <RemoveModalContent title={title} onRemove={onRemove} onClose={() => modals.closeModal(id)} />,
+    });
+  };
 
   return openRemoveModal;
 };

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -46,10 +46,11 @@ export default function IndexPage() {
     );
   }
 
-  const handleRemove = async (id: number, title: string) => {
+  const handleRemove = async (id: number, title: string, shouldRemoveFiles: boolean) => {
     try {
       await mangaRemove.mutateAsync({
         id,
+        shouldRemoveFiles,
       });
       showNotification({
         icon: <IconCheck size={18} />,
@@ -96,11 +97,8 @@ export default function IndexPage() {
                   badge={manga.source}
                   title={manga.title}
                   cover={manga.metadata.cover}
-                  onRemove={() => handleRemove(manga.id, manga.title)}
-                  onClick={() => {
-                    mangaQuery.refetch();
-                    router.push(`/manga/${manga.id}`);
-                  }}
+                  onRemove={(shouldRemoveFiles: boolean) => handleRemove(manga.id, manga.title, shouldRemoveFiles)}
+                  onClick={() => router.push(`/manga/${manga.id}`)}
                 />
               </Grid.Col>
             );

diff --git a/src/server/trpc/router/manga.ts b/src/server/trpc/router/manga.ts
@@ -66,10 +66,11 @@ export const mangaRouter = t.router({
     .input(
       z.object({
         id: z.number(),
+        shouldRemoveFiles: z.boolean(),
       }),
     )
     .mutation(async ({ input, ctx }) => {
-      const { id } = input;
+      const { id, shouldRemoveFiles } = input;
       const removed = await ctx.prisma.manga.delete({
         include: {
           library: true,
@@ -83,8 +84,10 @@ export const mangaRouter = t.router({
           id: removed.metadataId,
         },
       });
-      const mangaPath = path.resolve(removed.library.path, sanitizer(removed.title));
-      await removeManga(mangaPath);
+      if (shouldRemoveFiles === true) {
+        const mangaPath = path.resolve(removed.library.path, sanitizer(removed.title));
+        await removeManga(mangaPath);
+      }
       await removeJob(removed.title);
     }),
   add: t.procedure