refactor: simplify PlayButton usage

ui/src/album/AlbumDetails.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Loading, useGetOne } from 'react-admin'
 import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
 import { subsonicUrl } from '../subsonic'

ui/src/album/AlbumSongList.js

@@ -32,8 +32,8 @@ const AlbumSongList = (props) => {
       total={total}
       primaryText={(r) => (
         <>
-          <PlayButton record={r} />
+          <PlayButton action={setTrack(r)} />
-          <PlayButton record={r} action={addTrack} icon={<AddIcon />} />
+          <PlayButton action={addTrack(r)} icon={<AddIcon />} />
           {trackName(r)}
         </>
       )}

ui/src/common/PlayButton.js

@@ -3,23 +3,17 @@ import PropTypes from 'prop-types'
 import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import { IconButton } from '@material-ui/core'
 import { useDispatch } from 'react-redux'
-import { setTrack } from '../player'
 
 const defaultIcon = <PlayArrowIcon fontSize="small" />
 
-const PlayButton = ({
+const PlayButton = ({ icon = defaultIcon, action, ...rest }) => {
-  record,
-  icon = defaultIcon,
-  action = setTrack,
-  ...rest
-}) => {
   const dispatch = useDispatch()
 
   return (
     <IconButton
       onClick={(e) => {
         e.stopPropagation()
-        dispatch(action(record))
+        dispatch(action)
       }}
       {...rest}
       size={'small'}
@@ -30,8 +24,7 @@ const PlayButton = ({
 }
 
 PlayButton.propTypes = {
-  record: PropTypes.any,
   icon: PropTypes.element,
-  action: PropTypes.func
+  action: PropTypes.object
 }
 export default PlayButton

ui/src/song/SongList.js

@@ -66,21 +66,15 @@ const SongList = (props) => {
     >
       {isXsmall ? (
         <SimpleList
-          primaryText={(record) => (
+          primaryText={(r) => (
             <>
-              <PlayButton record={record} />
+              <PlayButton action={setTrack(r)} />
-              <PlayButton
+              <PlayButton action={addTrack(r)} icon={<AddIcon />} />
-                record={record}
+              {r.title}
-                action={addTrack}
-                icon={<AddIcon />}
-              />
-              {record.title}
             </>
           )}
-          secondaryText={(record) => record.artist}
+          secondaryText={(r) => r.artist}
-          tertiaryText={(record) => (
+          tertiaryText={(r) => <DurationField record={r} source={'duration'} />}
-            <DurationField record={record} source={'duration'} />
-          )}
           linkType={(id, basePath, record) => dispatch(setTrack(record))}
         />
       ) : (