New: Artist History Modal in Artist Details Page

frontend/src/Artist/History/ArtistHistoryModal.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ArtistHistoryModalContentConnector from './ArtistHistoryModalContentConnector';
+
+function ArtistHistoryModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <ArtistHistoryModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+ArtistHistoryModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ArtistHistoryModal;

frontend/src/Artist/History/ArtistHistoryModalContent.js

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import ArtistHistoryRowConnector from './ArtistHistoryRowConnector';
+
+const columns = [
+  {
+    name: 'eventType',
+    isVisible: true
+  },
+  {
+    name: 'album',
+    label: 'Album',
+    isVisible: true
+  },
+  {
+    name: 'sourceTitle',
+    label: 'Source Title',
+    isVisible: true
+  },
+  {
+    name: 'quality',
+    label: 'Quality',
+    isVisible: true
+  },
+  {
+    name: 'date',
+    label: 'Date',
+    isVisible: true
+  },
+  {
+    name: 'details',
+    label: 'Details',
+    isVisible: true
+  },
+  {
+    name: 'actions',
+    label: 'Actions',
+    isVisible: true
+  }
+];
+
+class ArtistHistoryModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      albumId,
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      onMarkAsFailedPress,
+      onModalClose
+    } = this.props;
+
+    const fullArtist = albumId == null;
+    const hasItems = !!items.length;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          History
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Unable to load history.</div>
+          }
+
+          {
+            isPopulated && !hasItems && !error &&
+              <div>No history.</div>
+          }
+
+          {
+            isPopulated && hasItems && !error &&
+              <Table columns={columns}>
+                <TableBody>
+                  {
+                    items.map((item) => {
+                      return (
+                        <ArtistHistoryRowConnector
+                          key={item.id}
+                          fullArtist={fullArtist}
+                          {...item}
+                          onMarkAsFailedPress={onMarkAsFailedPress}
+                        />
+                      );
+                    })
+                  }
+                </TableBody>
+              </Table>
+          }
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+ArtistHistoryModalContent.propTypes = {
+  albumId: PropTypes.number,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ArtistHistoryModalContent;

frontend/src/Artist/History/ArtistHistoryModalContentConnector.js

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchArtistHistory, clearArtistHistory, artistHistoryMarkAsFailed } from 'Store/Actions/artistHistoryActions';
+import ArtistHistoryModalContent from './ArtistHistoryModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.artistHistory,
+    (artistHistory) => {
+      return artistHistory;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchArtistHistory,
+  clearArtistHistory,
+  artistHistoryMarkAsFailed
+};
+
+class ArtistHistoryModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      artistId,
+      albumId
+    } = this.props;
+
+    this.props.fetchArtistHistory({
+      artistId,
+      albumId
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.clearArtistHistory();
+  }
+
+  //
+  // Listeners
+
+  onMarkAsFailedPress = (historyId) => {
+    const {
+      artistId,
+      albumId
+    } = this.props;
+
+    this.props.artistHistoryMarkAsFailed({
+      historyId,
+      artistId,
+      albumId
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ArtistHistoryModalContent
+        {...this.props}
+        onMarkAsFailedPress={this.onMarkAsFailedPress}
+      />
+    );
+  }
+}
+
+ArtistHistoryModalContentConnector.propTypes = {
+  artistId: PropTypes.number.isRequired,
+  albumId: PropTypes.number,
+  fetchArtistHistory: PropTypes.func.isRequired,
+  clearArtistHistory: PropTypes.func.isRequired,
+  artistHistoryMarkAsFailed: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ArtistHistoryModalContentConnector);

frontend/src/Artist/History/ArtistHistoryRow.css

@@ -0,0 +1,6 @@
+.details,
+.actions {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 65px;
+}

frontend/src/Artist/History/ArtistHistoryRow.js

@@ -0,0 +1,160 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Popover from 'Components/Tooltip/Popover';
+import EpisodeQuality from 'Album/EpisodeQuality';
+import HistoryDetailsConnector from 'Activity/History/Details/HistoryDetailsConnector';
+import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
+import styles from './ArtistHistoryRow.css';
+
+function getTitle(eventType) {
+  switch (eventType) {
+    case 'grabbed': return 'Grabbed';
+    case 'artistFolderImported': return 'Artist Folder Imported';
+    case 'downloadFolderImported': return 'Download Folder Imported';
+    case 'downloadFailed': return 'Download Failed';
+    case 'trackFileDeleted': return 'Track File Deleted';
+    case 'trackFileRenamed': return 'Track File Renamed';
+    default: return 'Unknown';
+  }
+}
+
+class ArtistHistoryRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isMarkAsFailedModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onMarkAsFailedPress = () => {
+    this.setState({ isMarkAsFailedModalOpen: true });
+  }
+
+  onConfirmMarkAsFailed = () => {
+    this.props.onMarkAsFailedPress(this.props.id);
+    this.setState({ isMarkAsFailedModalOpen: false });
+  }
+
+  onMarkAsFailedModalClose = () => {
+    this.setState({ isMarkAsFailedModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      eventType,
+      sourceTitle,
+      quality,
+      qualityCutoffNotMet,
+      date,
+      data,
+      fullArtist,
+      artist,
+      album
+    } = this.props;
+
+    const {
+      isMarkAsFailedModalOpen
+    } = this.state;
+
+    return (
+      <TableRow>
+        <HistoryEventTypeCell
+          eventType={eventType}
+          data={data}
+        />
+
+        <TableRowCell key={name}>
+          {album.title}
+        </TableRowCell>
+
+        <TableRowCell>
+          {sourceTitle}
+        </TableRowCell>
+
+        <TableRowCell>
+          <EpisodeQuality
+            quality={quality}
+            isCutoffNotMet={qualityCutoffNotMet}
+          />
+        </TableRowCell>
+
+        <RelativeDateCellConnector
+          date={date}
+        />
+
+        <TableRowCell className={styles.details}>
+          <Popover
+            anchor={
+              <Icon
+                name={icons.INFO}
+              />
+            }
+            title={getTitle(eventType)}
+            body={
+              <HistoryDetailsConnector
+                eventType={eventType}
+                sourceTitle={sourceTitle}
+                data={data}
+              />
+            }
+            position={tooltipPositions.LEFT}
+          />
+        </TableRowCell>
+
+        <TableRowCell className={styles.actions}>
+          {
+            eventType === 'grabbed' &&
+              <IconButton
+                name={icons.REMOVE}
+                onPress={this.onMarkAsFailedPress}
+              />
+          }
+        </TableRowCell>
+
+        <ConfirmModal
+          isOpen={isMarkAsFailedModalOpen}
+          kind={kinds.DANGER}
+          title="Mark as Failed"
+          message={`Are you sure you want to mark '${sourceTitle}' as failed?`}
+          confirmLabel="Mark as Failed"
+          onConfirm={this.onConfirmMarkAsFailed}
+          onCancel={this.onMarkAsFailedModalClose}
+        />
+      </TableRow>
+    );
+  }
+}
+
+ArtistHistoryRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  quality: PropTypes.object.isRequired,
+  qualityCutoffNotMet: PropTypes.bool.isRequired,
+  date: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  fullArtist: PropTypes.bool.isRequired,
+  artist: PropTypes.object.isRequired,
+  album: PropTypes.object.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired
+};
+
+export default ArtistHistoryRow;

frontend/src/Artist/History/ArtistHistoryRowConnector.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
+import ArtistHistoryRow from './ArtistHistoryRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createArtistSelector(),
+    createEpisodeSelector(),
+    (artist, album) => {
+      return {
+        artist,
+        album
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchHistory,
+  markAsFailed
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ArtistHistoryRow);