New: (UI) Add filter by categories in add indexer modal

Fixes #872
Closes #1731

frontend/src/Indexer/Add/AddIndexerModalContent.css

@@ -40,6 +40,7 @@
   flex: 1;
   flex-direction: column;
   margin-right: 12px;
+  max-width: 50%;
 }
 
 .filterContainer:last-child {

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Alert from 'Components/Alert';
 import EnhancedSelectInput from 'Components/Form/EnhancedSelectInput';
+import NewznabCategorySelectInputConnector from 'Components/Form/NewznabCategorySelectInputConnector';
 import TextInput from 'Components/Form/TextInput';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -89,7 +90,8 @@ class AddIndexerModalContent extends Component {
       filter: '',
       filterProtocols: [],
       filterLanguages: [],
-      filterPrivacyLevels: []
+      filterPrivacyLevels: [],
+      filterCategories: []
     };
   }
 
@@ -121,7 +123,13 @@ class AddIndexerModalContent extends Component {
       .map((language) => ({ key: language, value: language }));
 
     const filteredIndexers = indexers.filter((indexer) => {
-      const { filter, filterProtocols, filterLanguages, filterPrivacyLevels } = this.state;
+      const {
+        filter,
+        filterProtocols,
+        filterLanguages,
+        filterPrivacyLevels,
+        filterCategories
+      } = this.state;
 
       if (!indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) && !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())) {
         return false;
@@ -139,6 +147,18 @@ class AddIndexerModalContent extends Component {
         return false;
       }
 
+      if (filterCategories.length) {
+        const { categories = [] } = indexer.capabilities || {};
+        const flat = ({ id, subCategories = [] }) => [id, ...subCategories.flatMap(flat)];
+        const flatCategories = categories
+          .filter((item) => item.id < 100000)
+          .flatMap(flat);
+
+        if (!filterCategories.every((item) => flatCategories.includes(item))) {
+          return false;
+        }
+      }
+
       return true;
     });
 
@@ -165,7 +185,7 @@ class AddIndexerModalContent extends Component {
 
           <div className={styles.filterRow}>
             <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>Protocol</label>
+              <label className={styles.filterLabel}>{translate('Protocol')}</label>
               <EnhancedSelectInput
                 name="indexerProtocols"
                 value={this.state.filterProtocols}
@@ -175,7 +195,7 @@ class AddIndexerModalContent extends Component {
             </div>
 
             <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>Language</label>
+              <label className={styles.filterLabel}>{translate('Language')}</label>
               <EnhancedSelectInput
                 name="indexerLanguages"
                 value={this.state.filterLanguages}
@@ -185,7 +205,7 @@ class AddIndexerModalContent extends Component {
             </div>
 
             <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>Privacy</label>
+              <label className={styles.filterLabel}>{translate('Privacy')}</label>
               <EnhancedSelectInput
                 name="indexerPrivacyLevels"
                 value={this.state.filterPrivacyLevels}
@@ -193,6 +213,15 @@ class AddIndexerModalContent extends Component {
                 onChange={({ value }) => this.setState({ filterPrivacyLevels: value })}
               />
             </div>
+
+            <div className={styles.filterContainer}>
+              <label className={styles.filterLabel}>{translate('Categories')}</label>
+              <NewznabCategorySelectInputConnector
+                name="indexerCategories"
+                value={this.state.filterCategories}
+                onChange={({ value }) => this.setState({ filterCategories: value })}
+              />
+            </div>
           </div>
 
           <Alert
@@ -212,7 +241,7 @@ class AddIndexerModalContent extends Component {
               isFetching ? <LoadingIndicator /> : null
             }
             {
-              error ? <div>{errorMessage}</div> : null
+              error ? <Alert kind={kinds.DANGER}>{errorMessage}</Alert> : null
             }
             {
               isPopulated && !!indexers.length ?
@@ -237,6 +266,15 @@ class AddIndexerModalContent extends Component {
                 </Table> :
                 null
             }
+            {
+              isPopulated && !!indexers.length && !filteredIndexers.length ?
+                <Alert
+                  kind={kinds.WARNING}
+                >
+                  {translate('NoIndexersFound')}
+                </Alert> :
+                null
+            }
           </Scroller>
         </ModalBody>