CarlGao4/um-react
1
0
Fork 0
mirror of https://git.unlock-music.dev/um/um-react.git synced 2024-11-24 00:42:16 +00:00
Code Issues Actions Packages Projects Releases 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, Wrap,
WrapItem, WrapItem,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { DecryptedAudioFile, ProcessState } from './fileListingSlice'; import { DecryptedAudioFile, ProcessState, deleteFile } from './fileListingSlice';
import { useRef } from 'react'; import { useRef } from 'react';
import { useAppDispatch } from '~/hooks';
interface FileRowProps { interface FileRowProps {
id: string; id: string;
@ -22,6 +23,7 @@ interface FileRowProps {
} }
export function FileRow({ id, file }: FileRowProps) { export function FileRow({ id, file }: FileRowProps) {
const dispatch = useAppDispatch();
const isDecrypted = file.state === ProcessState.COMPLETE; const isDecrypted = file.state === ProcessState.COMPLETE;
const nameWithoutExt = file.fileName.replace(/\.[a-z\d]{3,6}$/, ''); 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 ( return (
<Card w="full"> <Card w="full">
<CardBody> <CardBody>
@ -107,7 +113,7 @@ export function FileRow({ id, file }: FileRowProps) {
)} )}
</WrapItem> </WrapItem>
<WrapItem> <WrapItem>
<Button type="button" onClick={() => alert('todo')}> <Button type="button" onClick={handleDeleteRow}>
删除 删除
</Button> </Button>
</WrapItem> </WrapItem>

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

@ -84,6 +84,18 @@ export const fileListingSlice = createSlice({
file.decrypted = payload.decryptedBlobURI; 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) { extraReducers(builder) {
builder.addCase(processFile.fulfilled, (state, action) => { 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 selectFileCount = (state: RootState) => state.fileListing.files.length;
export const selectFiles = (state: RootState) => state.fileListing.files; export const selectFiles = (state: RootState) => state.fileListing.files;