fix: bugs, cosmetic changes, and optimizations

src/components/main-rows.tsx

@@ -18,7 +18,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 
 import { DraggableProvided } from 'react-beautiful-dnd';
 
-const useStyles = makeStyles((theme: any) => ({
+const useStyles = makeStyles(theme => ({
     currentTrackRow: {
         color: theme.palette.primary.main,
         '& > td': {
@@ -66,6 +66,10 @@ const useStyles = makeStyles((theme: any) => ({
     durationCell: {
         whiteSpace: 'nowrap',
     },
+    durationCellSecondary: {
+        whiteSpace: 'nowrap',
+        color: theme.palette.text.secondary,
+    },
     durationCellTime: {
         verticalAlign: 'middle',
     },
@@ -191,7 +195,7 @@ export function GroupRow({ group, onRename, onDelete }: GroupRowProps) {
                 {group.fullWidthTitle ? `${group.fullWidthTitle} / ` : ``}
                 {group.title || `No Name`}
             </TableCell>
-            <TableCell align="right" className={classes.durationCell}>
+            <TableCell align="right" className={classes.durationCellSecondary}>
                 <span className={classes.durationCellTime}>
                     {formatTimeFromFrames(
                         group.tracks.map(n => n.duration).reduce((a, b) => a + b),

src/components/main.tsx

@@ -137,8 +137,8 @@ function isCurrentTrack(track: Track, deviceStatus: DeviceStatus | null) {
 
 export const Main = (props: {}) => {
     let dispatch = useDispatch();
-    let disc = useShallowEqualSelector(state => state.main.disc);
+    const disc = useShallowEqualSelector(state => state.main.disc);
-    let deviceName = useShallowEqualSelector(state => state.main.deviceName);
+    const deviceName = useShallowEqualSelector(state => state.main.deviceName);
     const deviceStatus = useShallowEqualSelector(state => state.main.deviceStatus);
     const { vintageMode } = useShallowEqualSelector(state => state.appState);
 

src/components/rename-dialog.tsx

@@ -42,11 +42,12 @@ export const RenameDialog = (props: {}) => {
 
     const what = renameDialogGroupIndex !== null ? `Group` : renameDialogIndex < 0 ? `Disc` : `Track`;
 
-    const handleCancelRename = () => {
+    const handleCancelRename = useCallback(() => {
         dispatch(renameDialogActions.setVisible(false));
-    };
+    }, [dispatch]);
 
-    const handleDoRename = () => {
+    const handleDoRename = useCallback(() => {
+        console.log(renameDialogGroupIndex, renameDialogIndex);
         if (renameDialogGroupIndex !== null) {
             // Just rename the group with this range
             dispatch(
@@ -73,7 +74,7 @@ export const RenameDialog = (props: {}) => {
             );
         }
         handleCancelRename(); // Close the dialog
-    };
+    }, [dispatch, handleCancelRename, renameDialogFullWidthTitle, renameDialogGroupIndex, renameDialogIndex, renameDialogTitle]);
 
     const handleChange = useCallback(
         (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
@@ -89,6 +90,17 @@ export const RenameDialog = (props: {}) => {
         [dispatch]
     );
 
+    const handleEnterKeyEvent = useCallback(
+        (event: React.KeyboardEvent) => {
+            if (event.key === `Enter`) {
+                event.stopPropagation();
+                event.preventDefault();
+                handleDoRename();
+            }
+        },
+        [handleDoRename]
+    );
+
     const { vintageMode } = useShallowEqualSelector(state => state.appState);
     if (vintageMode) {
         const p = {
@@ -121,9 +133,7 @@ export const RenameDialog = (props: {}) => {
                     type="text"
                     fullWidth
                     value={renameDialogTitle}
-                    onKeyDown={event => {
+                    onKeyDown={handleEnterKeyEvent}
-                        event.key === `Enter` && handleDoRename();
-                    }}
                     onChange={handleChange}
                 />
                 {allowFullWidth && (
@@ -134,9 +144,7 @@ export const RenameDialog = (props: {}) => {
                         fullWidth
                         className={classes.marginUpDown}
                         value={renameDialogFullWidthTitle}
-                        onKeyDown={event => {
+                        onKeyDown={handleEnterKeyEvent}
-                            event.key === `Enter` && handleDoRename();
-                        }}
                         onChange={handleFullWidthChange}
                     />
                 )}

src/services/netmd-mock.ts

@@ -140,8 +140,8 @@ class NetMDMockService implements NetMDService {
         return JSON.parse(JSON.stringify(this._getDisc()));
     }
 
-    async renameGroup(groupBegin: number, newName: string, newFullWidth?: string) {
+    async renameGroup(gropuIndex: number, newName: string, newFullWidth?: string) {
-        let group = this._groupsDef.slice(1).find(n => n.index === groupBegin);
+        let group = this._groupsDef.slice(1).find(n => n.index === gropuIndex);
         if (!group) {
             return;
         }
@@ -328,7 +328,7 @@ class NetMDMockService implements NetMDService {
 
     @asyncMutex
     async pause() {
-        console.log('pause');
+        this._status.state = 'paused';
     }
 
     @asyncMutex

src/services/netmd.ts

@@ -96,7 +96,6 @@ export class NetMDUSBService implements NetMDService {
     }
 
     private async listContentUsingCache() {
-        // listContent takes a long time to execute (>3000ms), so I think caching it should speed up the app
         if (!this.cachedContentList) {
             console.log("There's no cached version of the TOC, caching");
             this.cachedContentList = await listContent(this.netmdInterface!);
@@ -173,13 +172,17 @@ export class NetMDUSBService implements NetMDService {
     }
 
     @asyncMutex
-    async renameGroup(groupBegin: number, newName: string, newFullWidthName?: string) {
+    async renameGroup(groupIndex: number, newName: string, newFullWidthName?: string) {
         const disc = await this.listContentUsingCache();
-        let thisGroup = disc.groups.find(n => n.tracks[0].index === groupBegin);
+        let thisGroup = disc.groups.find(g => g.index === groupIndex);
-        if (!thisGroup) return;
+        if (!thisGroup) {
+            return;
+        }
 
         thisGroup.title = newName;
-        if (newFullWidthName !== undefined) thisGroup.fullWidthTitle = newFullWidthName;
+        if (newFullWidthName !== undefined) {
+            thisGroup.fullWidthTitle = newFullWidthName;
+        }
         await this.writeRawTitles(compileDiscTitles(disc));
     }
 
@@ -187,7 +190,10 @@ export class NetMDUSBService implements NetMDService {
     async addGroup(groupBegin: number, groupLength: number, title: string) {
         const disc = await this.listContentUsingCache();
         let ungrouped = disc.groups.find(n => n.title === null);
-        if (!ungrouped) return; // You can only group tracks that aren't already in a different group, if there's no such tracks, there's no point to continue
+        if (!ungrouped) {
+            return; // You can only group tracks that aren't already in a different group, if there's no such tracks, there's no point to continue
+        }
+
         let ungroupedLengthBeforeGroup = ungrouped.tracks.length;
 
         let thisGroupTracks = ungrouped.tracks.filter(n => n.index >= groupBegin && n.index < groupBegin + groupLength);
@@ -200,12 +206,14 @@ export class NetMDUSBService implements NetMDService {
         if (!isSequential(thisGroupTracks.map(n => n.index))) {
             throw new Error('Invalid sequence of tracks!');
         }
+
         disc.groups.push({
             title,
             fullWidthTitle: '',
-            index: groupBegin,
+            index: disc.groups.length,
             tracks: thisGroupTracks,
         });
+        disc.groups = disc.groups.filter(g => g.tracks.length !== 0).sort((a, b) => a.tracks[0].index - b.tracks[0].index);
         await this.writeRawTitles(compileDiscTitles(disc));
     }