Add rename disc feature (in top right menu)

src/components/rename-dialog.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useShallowEqualSelector } from '../utils';
 import { actions as renameDialogActions } from '../redux/rename-dialog-feature';
-import { renameTrack } from '../redux/actions';
+import { renameTrack, renameDisc } from '../redux/actions';
 
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -23,12 +23,18 @@ export const RenameDialog = (props: {}) => {
     let renameDialogTitle = useShallowEqualSelector(state => state.renameDialog.title);
     let renameDialogIndex = useShallowEqualSelector(state => state.renameDialog.index);
 
+    const what = renameDialogIndex < 0 ? `Disc` : `Track`;
+
     const handleCancelRename = () => {
         dispatch(renameDialogActions.setVisible(false));
     };
 
     const handleDoRename = () => {
-        dispatch(renameTrack({ index: renameDialogIndex, newName: renameDialogTitle }));
+        if (renameDialogIndex < 0) {
+            dispatch(renameDisc({ newName: renameDialogTitle }));
+        } else {
+            dispatch(renameTrack({ index: renameDialogIndex, newName: renameDialogTitle }));
+        }
     };
 
     return (
@@ -40,12 +46,12 @@ export const RenameDialog = (props: {}) => {
             TransitionComponent={Transition as any}
             aria-labelledby="rename-dialog-title"
         >
-            <DialogTitle id="rename-dialog-title">Rename Track</DialogTitle>
+            <DialogTitle id="rename-dialog-title">Rename {what}</DialogTitle>
             <DialogContent>
                 <TextField
                     autoFocus
                     id="name"
-                    label="Track Name"
+                    label={`${what} Name`}
                     type="text"
                     fullWidth
                     value={renameDialogTitle}

src/components/topmenu.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { batchActions } from 'redux-batched-actions';
 
 import IconButton from '@material-ui/core/IconButton';
 import Menu from '@material-ui/core/Menu';
@@ -8,6 +9,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 import { wipeDisc, listContent } from '../redux/actions';
 import { actions as appActions } from '../redux/app-feature';
+import { actions as renameDialogActions } from '../redux/rename-dialog-feature';
 import { useShallowEqualSelector } from '../utils';
 import Link from '@material-ui/core/Link';
 
@@ -15,6 +17,7 @@ export const TopMenu = function() {
     const dispatch = useDispatch();
 
     let { mainView } = useShallowEqualSelector(state => state.appState);
+    let disc = useShallowEqualSelector(state => state.main.disc);
 
     const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
     const menuOpen = Boolean(menuAnchorEl);
@@ -36,6 +39,17 @@ export const TopMenu = function() {
         handleMenuClose();
     };
 
+    const handleRenameDisc = () => {
+        dispatch(
+            batchActions([
+                renameDialogActions.setVisible(true),
+                renameDialogActions.setCurrentName(disc?.title ?? ``),
+                renameDialogActions.setIndex(-1),
+            ])
+        );
+        handleMenuClose();
+    };
+
     const handleExit = () => {
         dispatch(appActions.setState('WELCOME'));
         handleMenuClose();
@@ -52,6 +66,11 @@ export const TopMenu = function() {
                 Refresh
             </MenuItem>
         );
+        menuItems.push(
+            <MenuItem key="title" onClick={handleRenameDisc}>
+                Rename Disc
+            </MenuItem>
+        );
         menuItems.push(
             <MenuItem key="wipe" onClick={handleWipeDisc}>
                 Wipe Disc

src/redux/actions.ts

@@ -60,6 +60,15 @@ export function renameTrack({ index, newName }: { index: number; newName: string
     };
 }
 
+export function renameDisc({ newName }: { newName: string }) {
+    return async function(dispatch: AppDispatch) {
+        const { netmdService } = serviceRegistry;
+        await netmdService!.renameDisc(newName);
+        dispatch(renameDialogActions.setVisible(false));
+        listContent()(dispatch);
+    };
+}
+
 export function deleteTracks(indexes: number[]) {
     return async function(dispatch: AppDispatch) {
         const { netmdService } = serviceRegistry;

src/services/netmd.ts

@@ -10,6 +10,7 @@ export interface NetMDService {
     getDeviceName(): Promise<string>;
     finalize(): Promise<void>;
     renameTrack(index: number, newTitle: string): Promise<void>;
+    renameDisc(newName: string): Promise<void>;
     deleteTrack(index: number): Promise<void>;
     wipeDisc(): Promise<void>;
     upload(
@@ -57,6 +58,15 @@ export class NetMDUSBService implements NetMDService {
         await this.netmdInterface!.setTrackTitle(index, newTitle);
     }
 
+    async renameDisc(newName: string) {
+        const oldName = await this.netmdInterface!.getDiscTitle();
+        let newNameWithGroups = await this.netmdInterface!._getDiscTitle();
+        newNameWithGroups = newNameWithGroups.replace(oldName, newName);
+        await this.netmdInterface!.cacheTOC();
+        await this.netmdInterface!.setDiscTitle(newNameWithGroups);
+        await this.netmdInterface!.syncTOC();
+    }
+
     async deleteTrack(index: number) {
         await this.netmdInterface!.eraseTrack(index);
     }