import PropTypes from 'prop-types'; import React, { Component } from 'react'; import ArtistPoster from 'Artist/ArtistPoster'; import DeleteArtistModal from 'Artist/Delete/DeleteArtistModal'; import EditArtistModalConnector from 'Artist/Edit/EditArtistModalConnector'; import ArtistIndexProgressBar from 'Artist/Index/ProgressBar/ArtistIndexProgressBar'; import Label from 'Components/Label'; import IconButton from 'Components/Link/IconButton'; import Link from 'Components/Link/Link'; import SpinnerIconButton from 'Components/Link/SpinnerIconButton'; import { icons } from 'Helpers/Props'; import getRelativeDate from 'Utilities/Date/getRelativeDate'; import translate from 'Utilities/String/translate'; import ArtistIndexPosterInfo from './ArtistIndexPosterInfo'; import styles from './ArtistIndexPoster.css'; class ArtistIndexPoster extends Component { // // Lifecycle constructor(props, context) { super(props, context); this.state = { hasPosterError: false, isEditArtistModalOpen: false, isDeleteArtistModalOpen: false }; } // // Listeners onEditArtistPress = () => { this.setState({ isEditArtistModalOpen: true }); }; onEditArtistModalClose = () => { this.setState({ isEditArtistModalOpen: false }); }; onDeleteArtistPress = () => { this.setState({ isEditArtistModalOpen: false, isDeleteArtistModalOpen: true }); }; onDeleteArtistModalClose = () => { this.setState({ isDeleteArtistModalOpen: false }); }; onPosterLoad = () => { if (this.state.hasPosterError) { this.setState({ hasPosterError: false }); } }; onPosterLoadError = () => { if (!this.state.hasPosterError) { this.setState({ hasPosterError: true }); } }; // // Render render() { const { id, artistName, monitored, foreignArtistId, status, nextAlbum, lastAlbum, statistics, images, posterWidth, posterHeight, detailedProgressBar, showTitle, showMonitored, showQualityProfile, qualityProfile, showNextAlbum, showSearchAction, showRelativeDates, shortDateFormat, longDateFormat, timeFormat, isRefreshingArtist, isSearchingArtist, onRefreshArtistPress, onSearchPress, ...otherProps } = this.props; const { albumCount, sizeOnDisk, trackCount, trackFileCount, totalTrackCount } = statistics; const { hasPosterError, isEditArtistModalOpen, isDeleteArtistModalOpen } = this.state; const link = `/artist/${foreignArtistId}`; const elementStyle = { width: `${posterWidth}px`, height: `${posterHeight}px` }; return (