New: Project Aphrodite

frontend/src/Movie/History/MovieHistoryModal.js

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

frontend/src/Movie/History/MovieHistoryModalContent.js

@@ -0,0 +1,136 @@
+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 MovieHistoryRowConnector from './MovieHistoryRowConnector';
+const columns = [
+  {
+    name: 'eventType',
+    isVisible: true
+  },
+  {
+    name: 'episode',
+    label: 'Episode',
+    isVisible: true
+  },
+  {
+    name: 'sourceTitle',
+    label: 'Source Title',
+    isVisible: true
+  },
+  {
+    name: 'language',
+    label: 'Language',
+    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 MovieHistoryModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      seasonNumber,
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      onMarkAsFailedPress,
+      onModalClose
+    } = this.props;
+
+    const fullSeries = seasonNumber == 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 (
+                        <MovieHistoryRowConnector
+                          key={item.id}
+                          fullSeries={fullSeries}
+                          {...item}
+                          onMarkAsFailedPress={onMarkAsFailedPress}
+                        />
+                      );
+                    })
+                  }
+                </TableBody>
+              </Table>
+          }
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+MovieHistoryModalContent.propTypes = {
+  seasonNumber: 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 MovieHistoryModalContent;

frontend/src/Movie/History/MovieHistoryModalContentConnector.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 { fetchMovieHistory, clearMovieHistory, seriesHistoryMarkAsFailed } from 'Store/Actions/movieHistoryActions';
+import MovieHistoryModalContent from './MovieHistoryModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.moviesHistory,
+    (seriesHistory) => {
+      return seriesHistory;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchMovieHistory,
+  clearMovieHistory,
+  seriesHistoryMarkAsFailed
+};
+
+class MovieHistoryModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      seriesId,
+      seasonNumber
+    } = this.props;
+
+    this.props.fetchMovieHistory({
+      seriesId,
+      seasonNumber
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.clearMovieHistory();
+  }
+
+  //
+  // Listeners
+
+  onMarkAsFailedPress = (historyId) => {
+    const {
+      seriesId,
+      seasonNumber
+    } = this.props;
+
+    this.props.seriesHistoryMarkAsFailed({
+      historyId,
+      seriesId,
+      seasonNumber
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <MovieHistoryModalContent
+        {...this.props}
+        onMarkAsFailedPress={this.onMarkAsFailedPress}
+      />
+    );
+  }
+}
+
+MovieHistoryModalContentConnector.propTypes = {
+  seriesId: PropTypes.number.isRequired,
+  seasonNumber: PropTypes.number,
+  fetchMovieHistory: PropTypes.func.isRequired,
+  clearMovieHistory: PropTypes.func.isRequired,
+  seriesHistoryMarkAsFailed: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(MovieHistoryModalContentConnector);

frontend/src/Movie/History/MovieHistoryRow.css

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

frontend/src/Movie/History/MovieHistoryRow.js

@@ -0,0 +1,156 @@
+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 MovieQuality from 'Movie/MovieQuality';
+import HistoryDetailsConnector from 'Activity/History/Details/HistoryDetailsConnector';
+import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
+import styles from './MovieHistoryRow.css';
+
+function getTitle(eventType) {
+  switch (eventType) {
+    case 'grabbed': return 'Grabbed';
+    case 'seriesFolderImported': return 'Series Folder Imported';
+    case 'downloadFolderImported': return 'Download Folder Imported';
+    case 'downloadFailed': return 'Download Failed';
+    case 'episodeFileDeleted': return 'Episode File Deleted';
+    case 'episodeFileRenamed': return 'Episode File Renamed';
+    default: return 'Unknown';
+  }
+}
+
+class MovieHistoryRow 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
+      // movie,
+    } = this.props;
+
+    const {
+      isMarkAsFailedModalOpen
+    } = this.state;
+
+    return (
+      <TableRow>
+        <HistoryEventTypeCell
+          eventType={eventType}
+          data={data}
+        />
+
+        <TableRowCell>
+          {sourceTitle}
+        </TableRowCell>
+
+        <TableRowCell>
+          <MovieQuality
+            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
+                title="Mark as failed"
+                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>
+    );
+  }
+}
+
+MovieHistoryRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  language: PropTypes.object.isRequired,
+  languageCutoffNotMet: PropTypes.bool.isRequired,
+  quality: PropTypes.object.isRequired,
+  qualityCutoffNotMet: PropTypes.bool.isRequired,
+  date: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  fullSeries: PropTypes.bool.isRequired,
+  movie: PropTypes.object.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired
+};
+
+export default MovieHistoryRow;

frontend/src/Movie/History/MovieHistoryRowConnector.js

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import MovieHistoryRow from './MovieHistoryRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    (movie) => {
+      return {
+        movie
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchHistory,
+  markAsFailed
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(MovieHistoryRow);