CarlGao4/um-react
1
0
Fork 0
mirror of https://git.unlock-music.dev/um/um-react.git synced 2024-11-23 22:42:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: use object instead of array for file listing

Browse Source
This commit is contained in:
鲁树人 2023-05-08 15:54:00 +01:00
parent 38aa81b5bc
commit 3b264f380f
2 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/file-listing/FileListing.tsx
View File

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

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

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