Improve LanguageSelectInput

frontend/src/Components/Form/FormInputGroup.tsx

@@ -19,6 +19,7 @@ import DownloadClientSelectInput from './Select/DownloadClientSelectInput';
 import EnhancedSelectInput from './Select/EnhancedSelectInput';
 import IndexerFlagsSelectInput from './Select/IndexerFlagsSelectInput';
 import IndexerSelectInput from './Select/IndexerSelectInput';
+import LanguageSelectInput from './Select/LanguageSelectInput';
 import MonitorEpisodesSelectInput from './Select/MonitorEpisodesSelectInput';
 import MonitorNewItemsSelectInput from './Select/MonitorNewItemsSelectInput';
 import ProviderDataSelectInput from './Select/ProviderOptionSelectInput';
@@ -51,6 +52,9 @@ function getComponent(type: InputType) {
     case inputTypes.KEY_VALUE_LIST:
       return KeyValueListInput;
 
+    case inputTypes.LANGUAGE_SELECT:
+      return LanguageSelectInput;
+
     case inputTypes.MONITOR_EPISODES_SELECT:
       return MonitorEpisodesSelectInput;
 

frontend/src/Components/Form/Select/LanguageSelectInput.tsx

@@ -1,43 +1,95 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
-import { EnhancedSelectInputChanged } from 'typings/inputs';
+import { useSelector } from 'react-redux';
+import Language from 'Language/Language';
+import createFilteredLanguagesSelector from 'Store/Selectors/createFilteredLanguagesSelector';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInput, {
   EnhancedSelectInputValue,
 } from './EnhancedSelectInput';
 
+interface LanguageSelectInputOnChangeProps {
+  name: string;
+  value: number | string | Language;
+}
+
 interface LanguageSelectInputProps {
   name: string;
-  value: number;
+  value: number | string | Language;
-  values: EnhancedSelectInputValue<number>[];
+  includeNoChange: boolean;
-  onChange: (change: EnhancedSelectInputChanged<number>) => void;
+  includeNoChangeDisabled?: boolean;
+  includeMixed: boolean;
+  onChange: (payload: LanguageSelectInputOnChangeProps) => void;
 }
 
-function LanguageSelectInput({
+export default function LanguageSelectInput({
-  values,
+  value,
+  includeNoChange,
+  includeNoChangeDisabled,
+  includeMixed,
   onChange,
   ...otherProps
 }: LanguageSelectInputProps) {
-  const mappedValues = useMemo(() => {
+  const { items } = useSelector(createFilteredLanguagesSelector(true));
-    const minId = values.reduce(
-      (min: number, v) => (v.key < 1 ? v.key : min),
-      values[0].key
-    );
 
-    return values.map(({ key, value }) => {
+  const values = useMemo(() => {
+    const result: EnhancedSelectInputValue<number | string>[] = items.map(
+      (item) => {
         return {
-        key,
+          key: item.id,
-        value,
+          value: item.name,
-        dividerAfter: minId < 1 ? key === minId : false,
         };
+      }
+    );
+
+    if (includeNoChange) {
+      result.unshift({
+        key: 'noChange',
+        value: translate('NoChange'),
+        isDisabled: includeNoChangeDisabled,
       });
-  }, [values]);
+    }
+
+    if (includeMixed) {
+      result.unshift({
+        key: 'mixed',
+        value: `(${translate('Mixed')})`,
+        isDisabled: true,
+      });
+    }
+
+    return result;
+  }, [includeNoChange, includeNoChangeDisabled, includeMixed, items]);
+
+  const selectValue =
+    typeof value === 'number' || typeof value === 'string' ? value : value.id;
+
+  const handleChange = useCallback(
+    (payload: LanguageSelectInputOnChangeProps) => {
+      if (typeof value === 'number') {
+        onChange(payload);
+      } else {
+        const language = items.find((i) => i.id === payload.value);
+
+        onChange({
+          ...payload,
+          value: language
+            ? {
+                id: language.id,
+                name: language.name,
+              }
+            : ({ id: payload.value } as Language),
+        });
+      }
+    },
+    [value, items, onChange]
+  );
 
   return (
     <EnhancedSelectInput
       {...otherProps}
-      values={mappedValues}
+      value={selectValue}
-      onChange={onChange}
+      values={values}
+      onChange={handleChange}
     />
   );
 }
-
-export default LanguageSelectInput;

frontend/src/Settings/UI/UISettings.js

@@ -66,10 +66,10 @@ class UISettings extends Component {
       isFetching,
       error,
       settings,
+      languages,
       hasSettings,
       onInputChange,
       onSavePress,
-      languages,
       ...otherProps
     } = this.props;
 
@@ -213,9 +213,8 @@ class UISettings extends Component {
                   <FormGroup>
                     <FormLabel>{translate('UiLanguage')}</FormLabel>
                     <FormInputGroup
-                      type={inputTypes.SELECT}
+                      type={inputTypes.LANGUAGE_SELECT}
                       name="uiLanguage"
-                      values={languages}
                       helpText={translate('UiLanguageHelpText')}
                       helpTextWarning={translate('BrowserReloadRequired')}
                       onChange={onInputChange}
@@ -244,8 +243,8 @@ UISettings.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   settings: PropTypes.object.isRequired,
-  hasSettings: PropTypes.bool.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasSettings: PropTypes.bool.isRequired,
   onSavePress: PropTypes.func.isRequired,
   onInputChange: PropTypes.func.isRequired
 };

frontend/src/Store/Selectors/createFilteredLanguagesSelector.ts

@@ -0,0 +1,28 @@
+import { createSelector } from 'reselect';
+import { LanguageSettingsAppState } from 'App/State/SettingsAppState';
+import Language from 'Language/Language';
+import createLanguagesSelector from './createLanguagesSelector';
+
+export default function createFilteredLanguagesSelector(filterUnknown = false) {
+  const filterItems = ['Any', 'Original'];
+
+  if (filterUnknown) {
+    filterItems.push('Unknown');
+  }
+
+  return createSelector(createLanguagesSelector(), (languages) => {
+    const { isFetching, isPopulated, error, items } =
+      languages as LanguageSettingsAppState;
+
+    const filteredLanguages = items.filter(
+      (lang: Language) => !filterItems.includes(lang.name)
+    );
+
+    return {
+      isFetching,
+      isPopulated,
+      error,
+      items: filteredLanguages,
+    };
+  });
+}