0.1.0

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
-    "prettier"
+    'prettier',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
@@ -15,4 +15,4 @@ module.exports = {
   rules: {
     'react-refresh/only-export-components': 'warn',
   },
-}
+};

.prettierignore

@@ -0,0 +1,2 @@
+dist/
+

package.json

@@ -1,12 +1,13 @@
 {
   "name": "um-react",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier -w .",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -42,6 +43,7 @@
   },
   "prettier": {
     "singleQuote": true,
-    "printWidth": 120
+    "printWidth": 120,
+    "tabWidth": 2
   }
-}
+}

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;

tsconfig.json

@@ -18,7 +18,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    
+
     "baseUrl": ".",
     "paths": {
       "~/*": ["src/*"]