Reformat code with Prettier's new rules.

ui/src/album/AlbumDetails.js

@@ -113,7 +113,7 @@ const useStyles = makeStyles(
   }),
   {
     name: 'NDAlbumDetails',
-  }
+  },
 )
 
 const AlbumComment = ({ record }) => {
@@ -141,7 +141,7 @@ const AlbumComment = ({ record }) => {
       timeout={'auto'}
       className={clsx(
         classes.commentBlock,
-        lines.length > 1 && classes.pointerCursor
+        lines.length > 1 && classes.pointerCursor,
       )}
     >
       <Typography variant={'body1'} onClick={handleExpandClick}>
@@ -216,9 +216,9 @@ const Details = (props) => {
     addDetail(
       <>
         {[translate('resources.album.fields.originalDate'), originalDate].join(
-          '  '
+          '  ',
         )}
-      </>
+      </>,
     )
 
   yearRange && addDetail(<>{['♫', !isXsmall ? date : yearRange].join('  ')}</>)
@@ -230,7 +230,7 @@ const Details = (props) => {
           ? [translate('resources.album.fields.releaseDate'), releaseDate]
           : ['○', record.releaseDate.substring(0, 4)]
         ).join('  ')}
-      </>
+      </>,
     )
 
   const showReleases = record.releases > 1
@@ -245,7 +245,7 @@ const Details = (props) => {
               }),
             ].join(' ')
           : ['(', record.releases, ')))'].join(' ')}
-      </>
+      </>,
     )
 
   addDetail(
@@ -255,7 +255,7 @@ const Details = (props) => {
         translate('resources.song.name', {
           smart_count: record.songCount,
         })}
-    </>
+    </>,
   )
   !isXsmall && addDetail(<DurationField source={'duration'} />)
   !isXsmall && addDetail(<SizeField source="size" />)
@@ -299,7 +299,7 @@ const AlbumDetails = (props) => {
   const handleOpenLightbox = React.useCallback(() => setLightboxOpen(true), [])
   const handleCloseLightbox = React.useCallback(
     () => setLightboxOpen(false),
-    []
+    [],
   )
   return (
     <Card className={classes.root}>

ui/src/album/AlbumExternalLinks.js

@@ -35,7 +35,7 @@ const AlbumExternalLinks = (props) => {
         encodeURIComponent(record.name)
       }`,
       'message.openIn.lastfm',
-      <ImLastfm2 className="lastfm-icon" />
+      <ImLastfm2 className="lastfm-icon" />,
     )
   }
 
@@ -43,7 +43,7 @@ const AlbumExternalLinks = (props) => {
     addLink(
       `https://musicbrainz.org/release/${record.mbzAlbumId}`,
       'message.openIn.musicbrainz',
-      <MusicBrainz className="musicbrainz-icon" />
+      <MusicBrainz className="musicbrainz-icon" />,
     )
 
   return <div className={className}>{intersperse(links, ' ')}</div>

ui/src/album/AlbumGridView.js

@@ -78,7 +78,7 @@ const useStyles = makeStyles(
     albumContainer: {},
     albumPlayButton: { color: 'white' },
   }),
-  { name: 'NDAlbumGridView' }
+  { name: 'NDAlbumGridView' },
 )
 
 const useCoverStyles = makeStyles({
@@ -98,32 +98,34 @@ const getColsForWidth = (width) => {
   return 9
 }
 
-const Cover = withContentRect('bounds')(
-  ({ record, measureRef, contentRect }) => {
-    // Force height to be the same as the width determined by the GridList
-    // noinspection JSSuspiciousNameCombination
-    const classes = useCoverStyles({ height: contentRect.bounds.width })
-    const [, dragAlbumRef] = useDrag(
-      () => ({
-        type: DraggableTypes.ALBUM,
-        item: { albumIds: [record.id] },
-        options: { dropEffect: 'copy' },
-      }),
-      [record]
-    )
-    return (
-      <div ref={measureRef}>
-        <div ref={dragAlbumRef}>
-          <img
-            src={subsonic.getCoverArtUrl(record, 300)}
-            alt={record.name}
-            className={classes.cover}
-          />
-        </div>
+const Cover = withContentRect('bounds')(({
+  record,
+  measureRef,
+  contentRect,
+}) => {
+  // Force height to be the same as the width determined by the GridList
+  // noinspection JSSuspiciousNameCombination
+  const classes = useCoverStyles({ height: contentRect.bounds.width })
+  const [, dragAlbumRef] = useDrag(
+    () => ({
+      type: DraggableTypes.ALBUM,
+      item: { albumIds: [record.id] },
+      options: { dropEffect: 'copy' },
+    }),
+    [record],
+  )
+  return (
+    <div ref={measureRef}>
+      <div ref={dragAlbumRef}>
+        <img
+          src={subsonic.getCoverArtUrl(record, 300)}
+          alt={record.name}
+          className={classes.cover}
+        />
       </div>
-    )
-  }
-)
+    </div>
+  )
+})
 
 const AlbumGridTile = ({ showArtist, record, basePath, ...props }) => {
   const classes = useStyles()

ui/src/album/AlbumList.js

@@ -104,7 +104,7 @@ const AlbumList = (props) => {
       'size',
       'createdAt',
     ],
-    ['createdAt', 'size']
+    ['createdAt', 'size'],
   )
 
   // If it does not have filter/sort params (usually coming from Menu),

ui/src/album/AlbumListActions.js

@@ -64,7 +64,7 @@ const AlbumViewToggler = React.forwardRef(
         </ButtonGroup>
       </div>
     )
-  }
+  },
 )
 
 const AlbumListActions = ({

ui/src/album/AlbumShow.js

@@ -18,7 +18,7 @@ const useStyles = makeStyles(
   }),
   {
     name: 'NDAlbumShow',
-  }
+  },
 )
 
 const AlbumShowLayout = (props) => {

ui/src/album/AlbumSongs.js

@@ -83,7 +83,7 @@ const useStyles = makeStyles(
       visibility: 'hidden',
     },
   }),
-  { name: 'RaList' }
+  { name: 'RaList' },
 )
 
 const AlbumSongs = (props) => {

ui/src/album/AlbumTableView.js

@@ -59,7 +59,7 @@ const AlbumDatagridRow = (props) => {
       item: { albumIds: [record?.id] },
       options: { dropEffect: 'copy' },
     }),
-    [record]
+    [record],
   )
   return <DatagridRow ref={dragAlbumRef} {...props} />
 }