From d7f68aa255d505ab3add8267dfd77b7c4f3ab360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Mon, 15 May 2023 21:05:03 +0100
Subject: [PATCH] feat: allow user to remove entry from the page

---
 src/features/file-listing/FileRow.tsx         | 10 ++++++++--
 src/features/file-listing/fileListingSlice.ts | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index b08f8c1..07c04c3 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -13,8 +13,9 @@ import {
   Wrap,
   WrapItem,
 } from '@chakra-ui/react';
-import { DecryptedAudioFile, ProcessState } from './fileListingSlice';
+import { DecryptedAudioFile, ProcessState, deleteFile } from './fileListingSlice';
 import { useRef } from 'react';
+import { useAppDispatch } from '~/hooks';
 
 interface FileRowProps {
   id: string;
@@ -22,6 +23,7 @@ interface FileRowProps {
 }
 
 export function FileRow({ id, file }: FileRowProps) {
+  const dispatch = useAppDispatch();
   const isDecrypted = file.state === ProcessState.COMPLETE;
 
   const nameWithoutExt = file.fileName.replace(/\.[a-z\d]{3,6}$/, '');
@@ -41,6 +43,10 @@ export function FileRow({ id, file }: FileRowProps) {
     }
   };
 
+  const handleDeleteRow = () => {
+    dispatch(deleteFile({ id }));
+  };
+
   return (
     <Card w="full">
       <CardBody>
@@ -107,7 +113,7 @@ export function FileRow({ id, file }: FileRowProps) {
                   )}
                 </WrapItem>
                 <WrapItem>
-                  <Button type="button" onClick={() => alert('todo')}>
+                  <Button type="button" onClick={handleDeleteRow}>
                     删除
                   </Button>
                 </WrapItem>
diff --git a/src/features/file-listing/fileListingSlice.ts b/src/features/file-listing/fileListingSlice.ts
index 038c23d..9d3a1c4 100644
--- a/src/features/file-listing/fileListingSlice.ts
+++ b/src/features/file-listing/fileListingSlice.ts
@@ -84,6 +84,18 @@ export const fileListingSlice = createSlice({
         file.decrypted = payload.decryptedBlobURI;
       }
     },
+    deleteFile: (state, { payload }: PayloadAction<{ id: string }>) => {
+      if (state.files[payload.id]) {
+        const file = state.files[payload.id];
+        if (file.decrypted) {
+          URL.revokeObjectURL(file.decrypted);
+        }
+        if (file.raw) {
+          URL.revokeObjectURL(file.raw);
+        }
+        delete state.files[payload.id];
+      }
+    },
   },
   extraReducers(builder) {
     builder.addCase(processFile.fulfilled, (state, action) => {
@@ -111,7 +123,7 @@ export const fileListingSlice = createSlice({
   },
 });
 
-export const { addNewFile, setDecryptedContent } = fileListingSlice.actions;
+export const { addNewFile, setDecryptedContent, deleteFile } = fileListingSlice.actions;
 
 export const selectFileCount = (state: RootState) => state.fileListing.files.length;
 export const selectFiles = (state: RootState) => state.fileListing.files;