feat: allow user to remove entry from the page

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>

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;