diff --git a/ui/src/common/SongContextMenu.js b/ui/src/common/SongContextMenu.js index 35cf198ce3d..62faaf7596f 100644 --- a/ui/src/common/SongContextMenu.js +++ b/ui/src/common/SongContextMenu.js @@ -24,7 +24,13 @@ const useStyles = makeStyles({ }, }) -const SongContextMenu = ({ record, showStar, onAddToPlaylist, visible }) => { +const SongContextMenu = ({ + resource, + record, + showStar, + onAddToPlaylist, + visible, +}) => { const classes = useStyles({ visible, starred: record.starred }) const dispatch = useDispatch() const translate = useTranslate() @@ -68,10 +74,13 @@ const SongContextMenu = ({ record, showStar, onAddToPlaylist, visible }) => { e.stopPropagation() } - const [updateRecord, { loading: updating }] = useUpdate( - 'albumSong', + const [toggleStarred, { loading: updating }] = useUpdate( + resource, record.id, - record, + { + ...record, + starred: !record.starred, + }, { undoable: false, onFailure: (error) => { @@ -82,13 +91,8 @@ const SongContextMenu = ({ record, showStar, onAddToPlaylist, visible }) => { } ) - const toggleStar = (record) => { - record.starred = !record.starred - updateRecord() - } - - const handleToggleStar = (e, record) => { - toggleStar(record) + const handleToggleStar = (e) => { + toggleStarred() e.stopPropagation() } @@ -98,7 +102,7 @@ const SongContextMenu = ({ record, showStar, onAddToPlaylist, visible }) => { {config.enableStarred && showStar && ( handleToggleStar(e, record)} + onClick={handleToggleStar} size={'small'} disabled={updating} className={classes.star} @@ -135,6 +139,7 @@ const SongContextMenu = ({ record, showStar, onAddToPlaylist, visible }) => { } SongContextMenu.propTypes = { + resource: PropTypes.string, record: PropTypes.object, onAddToPlaylist: PropTypes.func, visible: PropTypes.bool,