Add stars to Artist

ui/src/common/ContextMenus.js

@@ -6,8 +6,15 @@ import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import StarIcon from '@material-ui/icons/Star'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
 import { makeStyles } from '@material-ui/core/styles'
-import { useDataProvider, useNotify, useTranslate } from 'react-admin'
+import {
+  useDataProvider,
+  useNotify,
+  useRefresh,
+  useTranslate,
+  useUpdate,
+} from 'react-admin'
 import { addTracks, playTracks, shuffleTracks } from '../audioplayer'
 import { openAddToPlaylist } from '../dialogs/dialogState'
 import subsonic from '../subsonic'
@@ -21,16 +28,25 @@ const useStyles = makeStyles({
     visibility: (props) => (props.visible ? 'visible' : 'hidden'),
   },
   star: {
-    visibility: 'hidden', // TODO: Invisible for now
+    visibility: (props) =>
+      props.visible || props.starred ? 'visible' : 'hidden',
   },
 })
 
-const ContextMenu = ({ record, color, visible, songQueryParams }) => {
-  const classes = useStyles({ color, visible })
+const ContextMenu = ({
+  resource,
+  showStar,
+  record,
+  color,
+  visible,
+  songQueryParams,
+}) => {
+  const classes = useStyles({ color, visible, starred: record.starred })
   const dataProvider = useDataProvider()
   const dispatch = useDispatch()
   const translate = useTranslate()
   const notify = useNotify()
+  const refresh = useRefresh()
   const [anchorEl, setAnchorEl] = useState(null)
 
   const options = {
@@ -102,13 +118,46 @@ const ContextMenu = ({ record, color, visible, songQueryParams }) => {
     e.stopPropagation()
   }
 
+  const [toggleStarred, { loading: updating }] = useUpdate(
+    resource,
+    record.id,
+    {
+      ...record,
+      starred: !record.starred,
+    },
+    {
+      undoable: false,
+      onFailure: (error) => {
+        console.log(error)
+        notify('ra.page.error', 'warning')
+        refresh()
+      },
+    }
+  )
+
+  const handleToggleStar = (e) => {
+    toggleStarred()
+    e.stopPropagation()
+  }
+
   const open = Boolean(anchorEl)
 
   return (
     <span className={classes.noWrap}>
-      <IconButton size={'small'} className={classes.star}>
-        <StarIcon fontSize={'small'} />
-      </IconButton>
+      {showStar && (
+        <IconButton
+          onClick={handleToggleStar}
+          size={'small'}
+          disabled={updating}
+          className={classes.star}
+        >
+          {record.starred ? (
+            <StarIcon fontSize={'small'} />
+          ) : (
+            <StarBorderIcon fontSize={'small'} />
+          )}
+        </IconButton>
+      )}
       <IconButton
         aria-label="more"
         aria-controls="context-menu"
@@ -174,9 +223,11 @@ ArtistContextMenu.propTypes = {
   record: PropTypes.object,
   visible: PropTypes.bool,
   color: PropTypes.string,
+  showStar: PropTypes.bool,
 }
 
 ArtistContextMenu.defaultProps = {
   visible: true,
+  showStar: true,
   addLabel: true,
 }