chore: use object instead of array for file listing
This commit is contained in:
parent
38aa81b5bc
commit
3b264f380f
@ -10,8 +10,8 @@ export function FileListing() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// FIXME: Remove test data
|
// FIXME: Remove test data
|
||||||
if (files.length === 0) {
|
if (Object.keys(files).length === 0) {
|
||||||
dispatch(addNewFile({ id: String(Date.now()), fileName: '测试文件名.mgg', blobURI: '' }));
|
dispatch(addNewFile({ id: 'dummy', fileName: '测试文件名.mgg', blobURI: '' }));
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@ -26,8 +26,8 @@ export function FileListing() {
|
|||||||
</Tr>
|
</Tr>
|
||||||
</Thead>
|
</Thead>
|
||||||
<Tbody>
|
<Tbody>
|
||||||
{files.map((file) => (
|
{Object.entries(files).map(([id, file]) => (
|
||||||
<Tr key={file.id}>
|
<Tr key={id}>
|
||||||
<Td>
|
<Td>
|
||||||
{file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
|
{file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
|
||||||
{!file.metadata.cover && <Text>暂无封面</Text>}
|
{!file.metadata.cover && <Text>暂无封面</Text>}
|
||||||
|
@ -22,7 +22,6 @@ export interface AudioMetadata {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface DecryptedAudioFile {
|
export interface DecryptedAudioFile {
|
||||||
id: string;
|
|
||||||
fileName: string;
|
fileName: string;
|
||||||
raw: string; // blob uri
|
raw: string; // blob uri
|
||||||
decrypted: string; // blob uri
|
decrypted: string; // blob uri
|
||||||
@ -32,11 +31,11 @@ export interface DecryptedAudioFile {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface FileListingState {
|
export interface FileListingState {
|
||||||
files: DecryptedAudioFile[];
|
files: Record<string, DecryptedAudioFile>;
|
||||||
displayMode: ListingMode;
|
displayMode: ListingMode;
|
||||||
}
|
}
|
||||||
const initialState: FileListingState = {
|
const initialState: FileListingState = {
|
||||||
files: [],
|
files: Object.create(null),
|
||||||
displayMode: ListingMode.LIST,
|
displayMode: ListingMode.LIST,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -45,8 +44,7 @@ export const fileListingSlice = createSlice({
|
|||||||
initialState,
|
initialState,
|
||||||
reducers: {
|
reducers: {
|
||||||
addNewFile: (state, { payload }: PayloadAction<{ id: string; fileName: string; blobURI: string }>) => {
|
addNewFile: (state, { payload }: PayloadAction<{ id: string; fileName: string; blobURI: string }>) => {
|
||||||
state.files.push({
|
state.files[payload.id] = {
|
||||||
id: payload.id,
|
|
||||||
fileName: payload.fileName,
|
fileName: payload.fileName,
|
||||||
raw: payload.blobURI,
|
raw: payload.blobURI,
|
||||||
decrypted: '',
|
decrypted: '',
|
||||||
@ -59,10 +57,10 @@ export const fileListingSlice = createSlice({
|
|||||||
albumArtist: '',
|
albumArtist: '',
|
||||||
cover: '',
|
cover: '',
|
||||||
},
|
},
|
||||||
});
|
};
|
||||||
},
|
},
|
||||||
setDecryptedContent: (state, { payload }: PayloadAction<{ id: string; decryptedBlobURI: string }>) => {
|
setDecryptedContent: (state, { payload }: PayloadAction<{ id: string; decryptedBlobURI: string }>) => {
|
||||||
const file = state.files.find((file) => file.id === payload.id);
|
const file = state.files[payload.id];
|
||||||
if (file) {
|
if (file) {
|
||||||
file.decrypted = payload.decryptedBlobURI;
|
file.decrypted = payload.decryptedBlobURI;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user