Refactored the current ⭐️/Star feature to ❤️/Love/Favourite feature. (#908)

* Added setRating feature to AlbumListView * Refactored the iconography from ⭐ to ❤️ * Refactored the current component from StarButton to LoveButton * Refactored all translations from Starred to Loved, and all props from showStar to showLove * Refactored useToggleStar hook to useToggleLove * rebased repository from master and removed stray commmits * Refactored handler name from TOGGLE_STAR to TOGGLE_LOVE in PlayerToolbar.js * Change "starred" translation to "Favorite" Co-authored-by: Deluan <deluan@navidrome.org>
2021-03-27 09:26:19 +05:30
parent db208600e4
commit ac37bf3631
16 changed files with 70 additions and 71 deletions
@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react'
+import PropTypes from 'prop-types'
+import FavoriteIcon from '@material-ui/icons/Favorite'
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
+import IconButton from '@material-ui/core/IconButton'
+import { makeStyles } from '@material-ui/core/styles'
+import { useToggleLove } from './useToggleLove'
+
+const useStyles = makeStyles({
+  love: {
+    color: (props) => props.color,
+    visibility: (props) =>
+      props.visible === false ? 'hidden' : props.loved ? 'visible' : 'inherit',
+  },
+})
+
+export const LoveButton = ({
+  resource,
+  record,
+  color,
+  visible,
+  size,
+  component: Button,
+  addLabel,
+  disabled,
+  ...rest
+}) => {
+  const classes = useStyles({ color, visible, loved: record.starred })
+  const [toggleLove, loading] = useToggleLove(resource, record)
+
+  const handleToggleLove = useCallback(
+    (e) => {
+      e.preventDefault()
+      toggleLove()
+      e.stopPropagation()
+    },
+    [toggleLove]
+  )
+
+  return (
+    <Button
+      onClick={handleToggleLove}
+      size={'small'}
+      disabled={disabled || loading}
+      className={classes.love}
+      {...rest}
+    >
+      {record.starred ? (
+        <FavoriteIcon fontSize={size} />
+      ) : (
+        <FavoriteBorderIcon fontSize={size} />
+      )}
+    </Button>
+  )
+}
+
+LoveButton.propTypes = {
+  resource: PropTypes.string.isRequired,
+  record: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  component: PropTypes.object,
+  disabled: PropTypes.bool,
+}
+
+LoveButton.defaultProps = {
+  addLabel: true,
+  record: {},
+  visible: true,
+  size: 'small',
+  color: 'inherit',
+  component: IconButton,
+  disabled: false,
+}