Fix Language Selection on Manual Import

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -487,7 +487,7 @@ class InteractiveImportModalContent extends Component {
         <SelectLanguageModal
           isOpen={selectModalOpen === LANGUAGE}
           ids={selectedIds}
-          languageId={0}
+          languageIds={[0]}
           modalTitle={modalTitle}
           onModalClose={this.onSelectModalClose}
         />

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -441,7 +441,7 @@ class InteractiveImportRow extends Component {
         <SelectLanguageModal
           isOpen={isSelectLanguageModalOpen}
           ids={[id]}
-          languageId={languages ? languages.id : 0}
+          languageIds={languages ? languages.map((l) => l.id) : []}
           modalTitle={modalTitle}
           onModalClose={this.onSelectLanguageModalClose}
         />

frontend/src/InteractiveImport/Language/SelectLanguageModal.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
 import SelectLanguageModalContentConnector from './SelectLanguageModalContentConnector';
 
 class SelectLanguageModal extends Component {
@@ -19,6 +20,7 @@ class SelectLanguageModal extends Component {
       <Modal
         isOpen={isOpen}
         onModalClose={onModalClose}
+        size={sizes.MEDIUM}
       >
         <SelectLanguageModalContentConnector
           {...otherProps}

frontend/src/InteractiveImport/Language/SelectLanguageModalContent.css

@@ -0,0 +1,4 @@
+.languageInput {
+  display: flex;
+  margin-bottom: 0;
+}

frontend/src/InteractiveImport/Language/SelectLanguageModalContent.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Component } from 'react';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -10,73 +10,134 @@ 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 { inputTypes } from 'Helpers/Props';
-
-function SelectLanguageModalContent(props) {
-  const {
-    languageId,
-    isFetching,
-    isPopulated,
-    error,
-    items,
-    modalTitle,
-    onModalClose,
-    onLanguageSelect
-  } = props;
-
-  const languageOptions = items.map(({ language }) => {
-    return {
-      key: language.id,
-      value: language.name
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import styles from './SelectLanguageModalContent.css';
+
+class SelectLanguageModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const {
+      languageIds
+    } = props;
+
+    this.state = {
+      languageIds
     };
-  });
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        {modalTitle} - Select Language
-      </ModalHeader>
-
-      <ModalBody>
-        {
-          isFetching &&
-            <LoadingIndicator />
-        }
-
-        {
-          !isFetching && !!error &&
-            <div>Unable to load languages</div>
-        }
-
-        {
-          isPopulated && !error &&
-            <Form>
-              <FormGroup>
-                <FormLabel>Language</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.SELECT}
-                  name="language"
-                  value={languageId}
-                  values={languageOptions}
-                  onChange={onLanguageSelect}
-                />
-              </FormGroup>
-            </Form>
-        }
-      </ModalBody>
-
-      <ModalFooter>
-        <Button onPress={onModalClose}>
-          Cancel
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
+  }
+
+  //
+  // Listeners
+
+  onLanguageChange = ({ value, name }) => {
+    const {
+      languageIds
+    } = this.state;
+
+    const changedId = parseInt(name);
+
+    let newLanguages = languageIds;
+
+    if (value) {
+      newLanguages.push(changedId);
+    }
+
+    if (!value) {
+      newLanguages = languageIds.filter((i) => i !== changedId);
+    }
+
+    this.setState({ languageIds: newLanguages });
+  };
+
+  onLanguageSelect = () => {
+    this.props.onLanguageSelect(this.state);
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      modalTitle,
+      onModalClose
+    } = this.props;
+
+    const {
+      languageIds
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {modalTitle}
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>
+                Unable To Load Languages
+              </div>
+          }
+
+          {
+            isPopulated && !error &&
+              <Form>
+                {
+                  items.map(( language ) => {
+                    return (
+                      <FormGroup
+                        key={language.id}
+                        size={sizes.EXTRA_SMALL}
+                        className={styles.languageInput}
+                      >
+                        <FormLabel>{language.name}</FormLabel>
+                        <FormInputGroup
+                          type={inputTypes.CHECK}
+                          name={language.id.toString()}
+                          value={languageIds.includes(language.id)}
+                          onChange={this.onLanguageChange}
+                        />
+                      </FormGroup>
+                    );
+                  })
+                }
+              </Form>
+          }
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+
+          <Button
+            kind={kinds.SUCCESS}
+            onPress={this.onLanguageSelect}
+          >
+            Select Languages
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
 }
 
 SelectLanguageModalContent.propTypes = {
-  languageId: PropTypes.number.isRequired,
+  languageIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
@@ -86,4 +147,8 @@ SelectLanguageModalContent.propTypes = {
   onModalClose: PropTypes.func.isRequired
 };
 
+SelectLanguageModalContent.defaultProps = {
+  languages: []
+};
+
 export default SelectLanguageModalContent;

frontend/src/InteractiveImport/Language/SelectLanguageModalContentConnector.js

@@ -26,7 +26,7 @@ class SelectLanguageModalContentConnector extends Component {
   //
   // Listeners
 
-  onLanguageSelect = ({ value }) => {
+  onLanguageSelect = ({ languageIds }) => {
     const {
       ids,
       dispatchUpdateInteractiveImportItems,
@@ -35,7 +35,7 @@ class SelectLanguageModalContentConnector extends Component {
 
     const languages = [];
 
-    value.forEach((languageId) => {
+    languageIds.forEach((languageId) => {
       const language = _.find(this.props.items,
         (item) => item.id === parseInt(languageId));
 

frontend/src/Store/Actions/releaseActions.js

@@ -1,6 +1,7 @@
 import { createAction } from 'redux-actions';
-import { filterBuilderTypes, filterBuilderValueTypes, filterTypes, sortDirections } from 'Helpers/Props';
+import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
+import sortByName from 'Utilities/Array/sortByName';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import createFetchHandler from './Creators/createFetchHandler';
 import createHandleActions from './Creators/createHandleActions';
@@ -37,6 +38,13 @@ export const defaultState = {
       return seeders * 1000000 + leechers;
     },
 
+    languages: function(item, direction) {
+      if (item.languages.length > 1) {
+        return 10000;
+      }
+
+      return item.languages[0].id;
+    },
     rejections: function(item, direction) {
       const rejections = item.rejections;
       const releaseWeight = item.releaseWeight;
@@ -95,6 +103,13 @@ export const defaultState = {
       return false;
     },
 
+    languages: function(item, filterValue, type) {
+      const predicate = filterTypePredicates[type];
+
+      const languages = item.languages.map((language) => language.name);
+
+      return predicate(languages, filterValue);
+    },
     rejectionCount: function(item, value, type) {
       const rejectionCount = item.rejections.length;
 
@@ -197,6 +212,25 @@ export const defaultState = {
       type: filterBuilderTypes.EXACT,
       valueType: filterBuilderValueTypes.QUALITY
     },
+    {
+      name: 'languages',
+      label: 'Languages',
+      type: filterBuilderTypes.ARRAY,
+      optionsSelector: function(items) {
+        const genreList = items.reduce((acc, release) => {
+          release.languages.forEach((language) => {
+            acc.push({
+              id: language.name,
+              name: language.name
+            });
+          });
+
+          return acc;
+        }, []);
+
+        return genreList.sort(sortByName);
+      }
+    },
     {
       name: 'rejectionCount',
       label: 'Rejection Count',