um/um-react
18
30
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

feat: allow user to remove entry from the page

Browse Source
This commit is contained in:
鲁树人 2023-05-15 21:05:03 +01:00
parent 52922a8928
commit d7f68aa255
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/features/file-listing/FileRow.tsx
View File

@ -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>

14
src/features/file-listing/fileListingSlice.ts
View File

@ -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;