v3 UI

frontend/src/InteractiveImport/Season/SelectSeasonModal.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Modal from 'Components/Modal/Modal';
+import SelectSeasonModalContentConnector from './SelectSeasonModalContentConnector';
+
+class SelectSeasonModal extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+      >
+        <SelectSeasonModalContentConnector
+          {...otherProps}
+          onModalClose={onModalClose}
+        />
+      </Modal>
+    );
+  }
+}
+
+SelectSeasonModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectSeasonModal;

frontend/src/InteractiveImport/Season/SelectSeasonModalContent.js

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Button from 'Components/Link/Button';
+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 SelectSeasonRow from './SelectSeasonRow';
+
+class SelectSeasonModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      onSeasonSelect,
+      onModalClose
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manual Import - Select Season
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            items.map((item) => {
+              return (
+                <SelectSeasonRow
+                  key={item.seasonNumber}
+                  seasonNumber={item.seasonNumber}
+                  onSeasonSelect={onSeasonSelect}
+                />
+              );
+            })
+          }
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+SelectSeasonModalContent.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSeasonSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectSeasonModalContent;

frontend/src/InteractiveImport/Season/SelectSeasonModalContentConnector.js

@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
+import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import SelectSeasonModalContent from './SelectSeasonModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSeriesSelector(),
+    (series) => {
+      if (!series) {
+        return {
+          items: []
+        };
+      }
+
+      return {
+        items: series.seasons.slice(0).reverse()
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  updateInteractiveImportItem
+};
+
+class SelectSeasonModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onSeasonSelect = (seasonNumber) => {
+    this.props.ids.forEach((id) => {
+      this.props.updateInteractiveImportItem({
+        id,
+        seasonNumber,
+        episodes: []
+      });
+    });
+
+    this.props.onModalClose(true);
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SelectSeasonModalContent
+        {...this.props}
+        onSeasonSelect={this.onSeasonSelect}
+      />
+    );
+  }
+}
+
+SelectSeasonModalContentConnector.propTypes = {
+  ids: PropTypes.arrayOf(PropTypes.number).isRequired,
+  seriesId: PropTypes.number.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  updateInteractiveImportItem: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(SelectSeasonModalContentConnector);

frontend/src/InteractiveImport/Season/SelectSeasonRow.css

@@ -0,0 +1,4 @@
+.season {
+  padding: 8px;
+  border-bottom: 1px solid $borderColor;
+}

frontend/src/InteractiveImport/Season/SelectSeasonRow.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
+import styles from './SelectSeasonRow.css';
+
+class SelectSeasonRow extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.props.onSeasonSelect(this.props.seasonNumber);
+  }
+
+  //
+  // Render
+
+  render() {
+    const seasonNumber = this.props.seasonNumber;
+
+    return (
+      <Link
+        className={styles.season}
+        component="div"
+        onPress={this.onPress}
+      >
+        {
+          seasonNumber === 0 ? 'Specials' : `Season ${seasonNumber}`
+        }
+      </Link>
+    );
+  }
+}
+
+SelectSeasonRow.propTypes = {
+  seasonNumber: PropTypes.number.isRequired,
+  onSeasonSelect: PropTypes.func.isRequired
+};
+
+export default SelectSeasonRow;