Cleanup unused frontend components

frontend/src/Indexer/Add/AddIndexerModal.css

@@ -0,0 +1,5 @@
+.modal {
+  composes: modalBody from '~Components/Modal/Modal.css';
+
+  height: 90%;
+}

frontend/src/Indexer/Add/AddIndexerModal.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddIndexerModalContentConnector from './AddIndexerModalContentConnector';
+import styles from './AddIndexerModal.css';
+
+function AddIndexerModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+      className={styles.modal}
+    >
+      <AddIndexerModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AddIndexerModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddIndexerModal;

frontend/src/Indexer/Add/AddIndexerModalContent.css

@@ -0,0 +1,30 @@
+.indexers {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.modalBody {
+  composes: modalBody from '~Components/Modal/ModalBody.css';
+
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.filterInput {
+  composes: input from '~Components/Form/TextInput.css';
+
+  flex: 0 0 auto;
+  margin-bottom: 20px;
+}
+
+.alert {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 20px;
+}
+
+.scroller {
+  flex: 1 1 auto;
+}

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -0,0 +1,174 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import TextInput from 'Components/Form/TextInput';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Scroller from 'Components/Scroller/Scroller';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { kinds, scrollDirections } from 'Helpers/Props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import SelectIndexerRow from './SelectIndexerRow';
+import styles from './AddIndexerModalContent.css';
+
+const columns = [
+  {
+    name: 'protocol',
+    label: 'Protocol',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'name',
+    label: 'Name',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'privacy',
+    label: 'Privacy',
+    isSortable: true,
+    isVisible: true
+  }
+];
+
+class AddIndexerModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      filter: ''
+    };
+  }
+
+  //
+  // Listeners
+
+  onFilterChange = ({ value }) => {
+    this.setState({ filter: value });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      indexers,
+      onIndexerSelect,
+      sortKey,
+      sortDirection,
+      isFetching,
+      isPopulated,
+      error,
+      onSortPress,
+      onModalClose
+    } = this.props;
+
+    const filter = this.state.filter;
+    const filterLower = filter.toLowerCase();
+
+    const errorMessage = getErrorMessage(error, 'Unable to load indexers');
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Add Indexer
+        </ModalHeader>
+
+        <ModalBody
+          className={styles.modalBody}
+          scrollDirection={scrollDirections.NONE}
+        >
+          <TextInput
+            className={styles.filterInput}
+            placeholder={translate('FilterPlaceHolder')}
+            name="filter"
+            value={filter}
+            autoFocus={true}
+            onChange={this.onFilterChange}
+          />
+
+          <Alert
+            kind={kinds.INFO}
+            className={styles.alert}
+          >
+            <div>
+              {translate('ProwlarrSupportsAnyIndexer')}
+            </div>
+          </Alert>
+
+          <Scroller
+            className={styles.scroller}
+            autoFocus={false}
+          >
+            {
+              isFetching ? <LoadingIndicator /> : null
+            }
+            {
+              error ? <div>{errorMessage}</div> : null
+            }
+            {
+              isPopulated && !!indexers.length ?
+                <Table
+                  columns={columns}
+                  sortKey={sortKey}
+                  sortDirection={sortDirection}
+                  onSortPress={onSortPress}
+                >
+                  <TableBody>
+                    {
+                      indexers.map((indexer) => {
+                        return indexer.name.toLowerCase().includes(filterLower) ?
+                          (
+                            <SelectIndexerRow
+                              key={indexer.name}
+                              implementation={indexer.implementation}
+                              {...indexer}
+                              onIndexerSelect={onIndexerSelect}
+                            />
+                          ) :
+                          null;
+                      })
+                    }
+                  </TableBody>
+                </Table> :
+                null
+            }
+          </Scroller>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            {translate('Close')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddIndexerModalContent.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.string,
+  onSortPress: PropTypes.func.isRequired,
+  indexers: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onIndexerSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddIndexerModalContent;

frontend/src/Indexer/Add/AddIndexerModalContentConnector.js

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchIndexerSchema, selectIndexerSchema, setIndexerSchemaSort } from 'Store/Actions/indexerActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import AddIndexerModalContent from './AddIndexerModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    createClientSideCollectionSelector('indexers.schema'),
+    (indexers) => {
+      const {
+        isFetching,
+        isPopulated,
+        error,
+        items,
+        sortDirection,
+        sortKey
+      } = indexers;
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        indexers: items,
+        sortKey,
+        sortDirection
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchIndexerSchema,
+  selectIndexerSchema,
+  setIndexerSchemaSort
+};
+
+class AddIndexerModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchIndexerSchema();
+  }
+
+  //
+  // Listeners
+
+  onIndexerSelect = ({ implementation, name }) => {
+    this.props.selectIndexerSchema({ implementation, name });
+    this.props.onModalClose({ indexerSelected: true });
+  }
+
+  onSortPress = (sortKey, sortDirection) => {
+    this.props.setIndexerSchemaSort({ sortKey, sortDirection });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddIndexerModalContent
+        {...this.props}
+        onSortPress={this.onSortPress}
+        onIndexerSelect={this.onIndexerSelect}
+      />
+    );
+  }
+}
+
+AddIndexerModalContentConnector.propTypes = {
+  fetchIndexerSchema: PropTypes.func.isRequired,
+  selectIndexerSchema: PropTypes.func.isRequired,
+  setIndexerSchemaSort: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddIndexerModalContentConnector);

frontend/src/Indexer/Add/AddIndexerPresetMenuItem.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import MenuItem from 'Components/Menu/MenuItem';
+
+class AddIndexerPresetMenuItem extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    const {
+      name,
+      implementation
+    } = this.props;
+
+    this.props.onPress({
+      name,
+      implementation
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      name,
+      implementation,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <MenuItem
+        {...otherProps}
+        onPress={this.onPress}
+      >
+        {name}
+      </MenuItem>
+    );
+  }
+}
+
+AddIndexerPresetMenuItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  implementation: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
+export default AddIndexerPresetMenuItem;

frontend/src/Indexer/Add/SelectIndexerRow.css

@@ -0,0 +1,5 @@
+.protocol {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 32px;
+}

frontend/src/Indexer/Add/SelectIndexerRow.js

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
+import styles from './SelectIndexerRow.css';
+
+class SelectIndexerRow extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    const {
+      implementation,
+      name
+    } = this.props;
+
+    this.props.onIndexerSelect({ implementation, name });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      protocol,
+      privacy,
+      name
+    } = this.props;
+
+    return (
+      <TableRowButton onPress={this.onPress}>
+        <TableRowCell className={styles.protocol}>
+          <ProtocolLabel
+            protocol={protocol}
+          />
+        </TableRowCell>
+
+        <TableRowCell>
+          {name}
+        </TableRowCell>
+
+        <TableRowCell>
+          {privacy}
+        </TableRowCell>
+      </TableRowButton>
+    );
+  }
+}
+
+SelectIndexerRow.propTypes = {
+  name: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  privacy: PropTypes.string.isRequired,
+  implementation: PropTypes.string.isRequired,
+  onIndexerSelect: PropTypes.func.isRequired
+};
+
+export default SelectIndexerRow;