Initial Commit Rework

frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContent.css

@@ -0,0 +1,24 @@
+.recentFoldersContainer {
+  margin-top: 15px;
+}
+
+.buttonsContainer {
+  margin-top: 30px;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+
+  margin-top: 10px;
+}
+
+.button {
+  composes: button from 'Components/Link/Button.css';
+
+  width: 300px;
+}
+
+.buttonIcon {
+  margin-right: 5px;
+}

frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContent.js

@@ -0,0 +1,161 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Icon from 'Components/Icon';
+import PathInputConnector from 'Components/Form/PathInputConnector';
+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 RecentFolderRow from './RecentFolderRow';
+import styles from './InteractiveImportSelectFolderModalContent.css';
+
+const recentFoldersColumns = [
+  {
+    name: 'folder',
+    label: 'Folder'
+  },
+  {
+    name: 'lastUsed',
+    label: 'Last Used'
+  }
+];
+
+class InteractiveImportSelectFolderModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      folder: ''
+    };
+  }
+
+  //
+  // Listeners
+
+  onPathChange = ({ value }) => {
+    this.setState({ folder: value });
+  }
+
+  onRecentPathPress = (folder) => {
+    this.setState({ folder });
+  }
+
+  onQuickImportPress = () => {
+    this.props.onQuickImportPress(this.state.folder);
+  }
+
+  onInteractiveImportPress = () => {
+    this.props.onInteractiveImportPress(this.state.folder);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      recentFolders,
+      onModalClose
+    } = this.props;
+
+    const folder = this.state.folder;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manual Import - Select Folder
+        </ModalHeader>
+
+        <ModalBody>
+          <PathInputConnector
+            name="folder"
+            value={folder}
+            onChange={this.onPathChange}
+          />
+
+          {
+            !!recentFolders.length &&
+              <div className={styles.recentFoldersContainer}>
+                <Table
+                  columns={recentFoldersColumns}
+                >
+                  <TableBody>
+                    {
+                      recentFolders.map((recentFolder) => {
+                        return (
+                          <RecentFolderRow
+                            key={recentFolder.folder}
+                            folder={recentFolder.folder}
+                            lastUsed={recentFolder.lastUsed}
+                            onPress={this.onRecentPathPress}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+              </div>
+          }
+
+          <div className={styles.buttonsContainer}>
+            <div className={styles.buttonContainer}>
+              <Button
+                className={styles.button}
+                kind={kinds.PRIMARY}
+                size={sizes.LARGE}
+                isDisabled={!folder}
+                onPress={this.onQuickImportPress}
+              >
+                <Icon
+                  className={styles.buttonIcon}
+                  name={icons.QUICK}
+                />
+
+                Quick Import
+              </Button>
+            </div>
+
+            <div className={styles.buttonContainer}>
+              <Button
+                className={styles.button}
+                kind={kinds.PRIMARY}
+                size={sizes.LARGE}
+                isDisabled={!folder}
+                onPress={this.onInteractiveImportPress}
+              >
+                <Icon
+                  className={styles.buttonIcon}
+                  name={icons.INTERACTIVE}
+                />
+
+                Interactive Import
+              </Button>
+            </div>
+          </div>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+InteractiveImportSelectFolderModalContent.propTypes = {
+  recentFolders: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onQuickImportPress: PropTypes.func.isRequired,
+  onInteractiveImportPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default InteractiveImportSelectFolderModalContent;

frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContentConnector.js

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { addRecentFolder } from 'Store/Actions/interactiveImportActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as commandNames from 'Commands/commandNames';
+import InteractiveImportSelectFolderModalContent from './InteractiveImportSelectFolderModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.interactiveImport.recentFolders,
+    (recentFolders) => {
+      return {
+        recentFolders
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  addRecentFolder,
+  executeCommand
+};
+
+class InteractiveImportSelectFolderModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onQuickImportPress = (folder) => {
+    this.props.addRecentFolder({ folder });
+
+    this.props.executeCommand({
+      name: commandNames.DOWNLOADED_EPSIODES_SCAN,
+      path: folder
+    });
+
+    this.props.onModalClose();
+  }
+
+  onInteractiveImportPress = (folder) => {
+    this.props.addRecentFolder({ folder });
+    this.props.onFolderSelect(folder);
+  }
+
+  //
+  // Render
+
+  render() {
+    if (this.path) {
+      return null;
+    }
+
+    return (
+      <InteractiveImportSelectFolderModalContent
+        {...this.props}
+        onQuickImportPress={this.onQuickImportPress}
+        onInteractiveImportPress={this.onInteractiveImportPress}
+      />
+    );
+  }
+}
+
+InteractiveImportSelectFolderModalContentConnector.propTypes = {
+  path: PropTypes.string,
+  onFolderSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  addRecentFolder: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(InteractiveImportSelectFolderModalContentConnector);

frontend/src/InteractiveImport/Folder/RecentFolderRow.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TableRowButton from 'Components/Table/TableRowButton';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+
+class RecentFolderRow extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.props.onPress(this.props.folder);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      folder,
+      lastUsed
+    } = this.props;
+
+    return (
+      <TableRowButton onPress={this.onPress}>
+        <TableRowCell>{folder}</TableRowCell>
+
+        <RelativeDateCellConnector date={lastUsed} />
+      </TableRowButton>
+    );
+  }
+}
+
+RecentFolderRow.propTypes = {
+  folder: PropTypes.string.isRequired,
+  lastUsed: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
+export default RecentFolderRow;