feat: allow user to remove entry from the page
This commit is contained in:
parent
52922a8928
commit
d7f68aa255
@ -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>
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user