chore: use object instead of array for file listing

src/features/file-listing/FileListing.tsx

@@ -10,8 +10,8 @@ export function FileListing() {
 
   useEffect(() => {
     // 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>
         </Thead>
         <Tbody>
-          {files.map((file) => (
+          {Object.entries(files).map(([id, file]) => (
-            <Tr key={file.id}>
+            <Tr key={id}>
               <Td>
                 {file.metadata.cover && <Avatar size="sm" name="专辑封面" src={file.metadata.cover} />}
                 {!file.metadata.cover && <Text>暂无封面</Text>}

src/features/file-listing/fileListingSlice.ts

@@ -22,7 +22,6 @@ export interface AudioMetadata {
 }
 
 export interface DecryptedAudioFile {
-  id: string;
   fileName: string;
   raw: string; // blob uri
   decrypted: string; // blob uri
@@ -32,11 +31,11 @@ export interface DecryptedAudioFile {
 }
 
 export interface FileListingState {
-  files: DecryptedAudioFile[];
+  files: Record<string, DecryptedAudioFile>;
   displayMode: ListingMode;
 }
 const initialState: FileListingState = {
-  files: [],
+  files: Object.create(null),
   displayMode: ListingMode.LIST,
 };
 
@@ -45,8 +44,7 @@ export const fileListingSlice = createSlice({
   initialState,
   reducers: {
     addNewFile: (state, { payload }: PayloadAction<{ id: string; fileName: string; blobURI: string }>) => {
-      state.files.push({
+      state.files[payload.id] = {
-        id: payload.id,
         fileName: payload.fileName,
         raw: payload.blobURI,
         decrypted: '',
@@ -59,10 +57,10 @@ export const fileListingSlice = createSlice({
           albumArtist: '',
           cover: '',
         },
-      });
+      };
     },
     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) {
         file.decrypted = payload.decryptedBlobURI;
       }