feat: snapshots batch deletion

nomyfan · Nov 30, 2024 · 12cac76 · 12cac76
1 parent 4aa6dd6
commit 12cac76
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 9 deletions.
diff --git a/app/gameboy/src/components/core/button/Button.tsx b/app/gameboy/src/components/core/button/Button.tsx
@@ -9,6 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary: "text-white bg-primary",
+        danger: "text-white bg-alert",
         default: "text-text bg-white",
       },
     },

diff --git a/app/gameboy/src/components/export/Export.tsx b/app/gameboy/src/components/export/Export.tsx
@@ -5,7 +5,7 @@ import {
   PopoverPortal,
   PopoverTrigger,
 } from "@radix-ui/react-popover";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { clsx } from "clsx";
 import dayjs from "dayjs";
 import { ScaleLoader } from "gameboy/components/core/Spin";
@@ -92,11 +92,16 @@ export function Export(props: { gameId: string; onCancel: () => void }) {
   const { gameId } = props;
   const id = useId();
   const { addToast } = useToast();
+  const queryClient = useQueryClient();
 
-  const { data: snapshots, isLoading: isSnapshotsLoading } = useQuery({
+  const {
+    data: snapshots,
+    isLoading: isSnapshotsLoading,
+    isPending: isSnapshotsPending,
+  } = useQuery({
     queryKey: [gameId],
     queryFn: async () => {
-      return await after(500, async () => {
+      return await after(300, async () => {
         if (!gameId) {
           return [];
         }
@@ -111,7 +116,7 @@ export function Export(props: { gameId: string; onCancel: () => void }) {
     },
   });
 
-  const { mutateAsync: exportGame, isPending } = useMutation({
+  const { mutateAsync: exportGame, isPending: isExportingGame } = useMutation({
     mutationFn: async ({
       gameId,
       sav,
@@ -144,6 +149,16 @@ export function Export(props: { gameId: string; onCancel: () => void }) {
     },
   });
 
+  const { mutate: deleteSnapshots, isPending: isDeletingSnapshots } =
+    useMutation({
+      mutationFn: async (ids: number[]) => {
+        await storage.snapshotStore.delete(ids);
+      },
+      onSuccess: async () => {
+        await queryClient.invalidateQueries({ queryKey: [gameId] });
+      },
+    });
+
   const [selectedSnapshotIds, setSelectedSnapshotsIds] = useState<
     ISnapshot["id"][]
   >([]);
@@ -232,9 +247,24 @@ export function Export(props: { gameId: string; onCancel: () => void }) {
         )}
 
         <div className="row-start-4 row-end-5 col-span-2 flex flex-row-reverse gap-2">
+          {selectedSnapshotIds.length ? (
+            <Button
+              key="button-delete-snapshots"
+              loading={isDeletingSnapshots}
+              disabled={isExportingGame || isDeletingSnapshots}
+              variant="danger"
+              onClick={() => {
+                deleteSnapshots(selectedSnapshotIds);
+              }}
+            >
+              删除快照
+            </Button>
+          ) : null}
           <Button
+            key="button-export"
             variant="primary"
-            loading={isPending}
+            loading={isExportingGame}
+            disabled={isExportingGame || isDeletingSnapshots}
             onClick={async () => {
               await exportGame({
                 gameId,
@@ -247,7 +277,11 @@ export function Export(props: { gameId: string; onCancel: () => void }) {
           >
             导出
           </Button>
-          <Button disabled={isPending} onClick={props.onCancel}>
+          <Button
+            key="button-cancel"
+            disabled={isExportingGame}
+            onClick={props.onCancel}
+          >
             取消
           </Button>
         </div>

diff --git a/app/gameboy/src/components/home/Home.tsx b/app/gameboy/src/components/home/Home.tsx
@@ -64,7 +64,7 @@ export function Home() {
         },
         {
           id: "export-backup",
-          icon: <i className="i-ic:outline-file-download" />,
+          icon: <i className="i-ic:baseline-file-present" />,
           onClick: async () => {
             await exportModalRef.current?.open();
           },

diff --git a/app/gameboy/src/storage/indexdb.ts b/app/gameboy/src/storage/indexdb.ts
@@ -144,8 +144,12 @@ class SnapshotStore {
     return this.db.snapshots.bulkAdd(snapshots as ISnapshot[]);
   }
 
-  async delete(id: number) {
-    return this.db.snapshots.delete(id);
+  async delete(id: number | number[]) {
+    if (Array.isArray(id)) {
+      await this.db.snapshots.bulkDelete(id);
+    } else {
+      await this.db.snapshots.delete(id);
+    }
   }
 }