mue/src/features/background/components/Favourite.jsx

import variables from 'config/variables';
import { PureComponent } from 'react';
import { MdStar, MdStarBorder } from 'react-icons/md';

class Favourite extends PureComponent {
  buttons = {
    favourited: <MdStar onClick={() => this.favourite()} className="topicons" />,
    unfavourited: <MdStarBorder onClick={() => this.favourite()} className="topicons" />,
  };

  constructor() {
    super();
    this.state = {
      favourited: localStorage.getItem('favourite')
        ? this.buttons.favourited
        : this.buttons.unfavourited,
    };
  }

  async favourite() {
    if (localStorage.getItem('favourite')) {
      localStorage.removeItem('favourite');
      this.setState({ favourited: this.buttons.unfavourited });
      this.props.tooltipText(variables.getMessage('widgets.quote.favourite'));
      variables.stats.postEvent('feature', 'Background favourite');
    } else {
      const type = localStorage.getItem('backgroundType');

      switch (type) {
        case 'colour':
          return;
        case 'random_colour':
        case 'random_gradient':
          localStorage.setItem(
            'favourite',
            JSON.stringify({
              type: localStorage.getItem('backgroundType'),
              url: document.getElementById('backgroundImage').style.background,
            }),
          );
          break;
        default: {
          let url = document
            .getElementById('backgroundImage')
            .style.backgroundImage.replace('url("', '')
            .replace('")', '');

          if (!url) {
            return;
          }

          if (url.startsWith('blob:')) {
            const reader = new FileReader();
            url = await new Promise((resolve) => {
              reader.onloadend = () => resolve(reader.result);
              fetch(url)
                .then((res) => res.blob())
                .then((blob) => reader.readAsDataURL(blob));
            });
          }

          if (type === 'custom') {
            localStorage.setItem('favourite', JSON.stringify({ type, url }));
          } else {
            // photo information now hides information if it isn't sent, unless if photoinformation hover is hidden
            const location = document.getElementById('infoLocation');
            const camera = document.getElementById('infoCamera');

            localStorage.setItem(
              'favourite',
              JSON.stringify({
                type,
                url,
                credit: this.props.credit || '',
                location: location?.innerText,
                camera: camera?.innerText,
                resolution: document.getElementById('infoResolution').textContent || '',
                offline: this.props.offline,
                pun: this.props.pun,
              }),
            );
          }
          break;
        }
      }

      this.setState({ favourited: this.buttons.favourited });
      this.props.tooltipText(variables.getMessage('widgets.quote.unfavourite'));
      variables.stats.postEvent('feature', 'Background unfavourite');
    }
  }

  componentDidMount() {
    this.updateTooltip();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.favourited !== this.state.favourited) {
      this.updateTooltip();
    }
  }

  updateTooltip() {
    if (this.props.tooltipText) {
      this.props.tooltipText(
        localStorage.getItem('favourite')
          ? variables.getMessage('widgets.quote.unfavourite')
          : variables.getMessage('widgets.quote.favourite'),
      );
    }
  }

  render() {
    if (localStorage.getItem('backgroundType') === 'colour') {
      return null;
    }

    return this.state.favourited;
  }
}

export default Favourite;