Convert UI Settings to TypeScript

frontend/src/App/AppRoutes.tsx

@@ -23,7 +23,7 @@ import Profiles from 'Settings/Profiles/Profiles';
 import QualityConnector from 'Settings/Quality/QualityConnector';
 import Settings from 'Settings/Settings';
 import TagSettings from 'Settings/Tags/TagSettings';
-import UISettingsConnector from 'Settings/UI/UISettingsConnector';
+import UISettings from 'Settings/UI/UISettings';
 import Backups from 'System/Backup/Backups';
 import LogsTable from 'System/Events/LogsTable';
 import Logs from 'System/Logs/Logs';
@@ -137,7 +137,7 @@ function AppRoutes() {
 
       <Route path="/settings/general" component={GeneralSettingsConnector} />
 
-      <Route path="/settings/ui" component={UISettingsConnector} />
+      <Route path="/settings/ui" component={UISettings} />
 
       {/*
         System

frontend/src/Components/Form/Form.tsx

@@ -5,18 +5,20 @@ import { ValidationError, ValidationWarning } from 'typings/pending';
 import styles from './Form.css';
 
 export interface FormProps {
+  id?: string;
   children: ReactNode;
   validationErrors?: ValidationError[];
   validationWarnings?: ValidationWarning[];
 }
 
 function Form({
+  id,
   children,
   validationErrors = [],
   validationWarnings = [],
 }: FormProps) {
   return (
-    <div>
+    <div id={id}>
       {validationErrors.length || validationWarnings.length ? (
         <div className={styles.validationFailures}>
           {validationErrors.map((error, index) => {

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import Language from 'Language/Language';
-import createFilteredLanguagesSelector from 'Store/Selectors/createFilteredLanguagesSelector';
+import createLanguagesSelector from 'Store/Selectors/createLanguagesSelector';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput, {
   EnhancedSelectInputValue,
@@ -29,7 +29,13 @@ export default function LanguageSelectInput({
   onChange,
   ...otherProps
 }: LanguageSelectInputProps) {
-  const { items } = useSelector(createFilteredLanguagesSelector(true));
+  const { items } = useSelector(
+    createLanguagesSelector({
+      Any: true,
+      Original: true,
+      Unknown: true,
+    })
+  );
 
   const values = useMemo(() => {
     const result: EnhancedSelectInputValue<number | string>[] = items.map(

frontend/src/InteractiveImport/Language/SelectLanguageModalContent.tsx

@@ -1,7 +1,5 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import { LanguageSettingsAppState } from 'App/State/SettingsAppState';
 import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -26,30 +24,14 @@ interface SelectLanguageModalContentProps {
   onModalClose(): void;
 }
 
-function createFilteredLanguagesSelector() {
-  return createSelector(createLanguagesSelector(), (languages) => {
-    const { isFetching, isPopulated, error, items } =
-      languages as LanguageSettingsAppState;
-
-    const filterItems = ['Any', 'Original'];
-    const filteredLanguages = items.filter(
-      (lang: Language) => !filterItems.includes(lang.name)
-    );
-
-    return {
-      isFetching,
-      isPopulated,
-      error,
-      items: filteredLanguages,
-    };
-  });
-}
-
 function SelectLanguageModalContent(props: SelectLanguageModalContentProps) {
   const { modalTitle, onLanguagesSelect, onModalClose } = props;
 
   const { isFetching, isPopulated, error, items } = useSelector(
-    createFilteredLanguagesSelector()
+    createLanguagesSelector({
+      Any: true,
+      Original: true,
+    })
   );
 
   const [languageIds, setLanguageIds] = useState(props.languageIds);

frontend/src/Settings/ImportLists/ImportListExclusions/EditImportListExclusionModalContent.tsx

@@ -44,7 +44,6 @@ function createImportListExclusionSelector(id?: number) {
       const settings = selectSettings(mapping, pendingChanges, saveError);
 
       return {
-        id,
         isFetching,
         error,
         isSaving,
@@ -119,15 +118,15 @@ function EditImportListExclusionModalContent({
       </ModalHeader>
 
       <ModalBody className={styles.body}>
-        {isFetching && <LoadingIndicator />}
+        {isFetching ? <LoadingIndicator /> : null}
 
-        {!isFetching && !!error && (
+        {!isFetching && error ? (
           <Alert kind={kinds.DANGER}>
             {translate('AddImportListExclusionError')}
           </Alert>
-        )}
+        ) : null}
 
-        {!isFetching && !error && (
+        {!isFetching && !error ? (
           <Form {...otherProps}>
             <FormGroup>
               <FormLabel>{translate('Title')}</FormLabel>
@@ -153,11 +152,11 @@ function EditImportListExclusionModalContent({
               />
             </FormGroup>
           </Form>
-        )}
+        ) : null}
       </ModalBody>
 
       <ModalFooter>
-        {id && (
+        {id ? (
           <Button
             className={styles.deleteButton}
             kind={kinds.DANGER}
@@ -165,7 +164,7 @@ function EditImportListExclusionModalContent({
           >
             {translate('Delete')}
           </Button>
-        )}
+        ) : null}
 
         <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 

frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.tsx

@@ -50,7 +50,6 @@ function createReleaseProfileSelector(id?: number) {
       );
 
       return {
-        id,
         isFetching,
         error,
         isSaving,

frontend/src/Settings/UI/UISettings.js

@@ -1,252 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Alert from 'Components/Alert';
-import FieldSet from 'Components/FieldSet';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import { inputTypes, kinds } from 'Helpers/Props';
-import SettingsToolbar from 'Settings/SettingsToolbar';
-import themes from 'Styles/Themes';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-
-export const firstDayOfWeekOptions = [
-  {
-    key: 0,
-    get value() {
-      return translate('Sunday');
-    }
-  },
-  {
-    key: 1,
-    get value() {
-      return translate('Monday');
-    }
-  }
-];
-
-export const weekColumnOptions = [
-  { key: 'ddd M/D', value: 'Tue 3/25', hint: 'ddd M/D' },
-  { key: 'ddd MM/DD', value: 'Tue 03/25', hint: 'ddd MM/DD' },
-  { key: 'ddd D/M', value: 'Tue 25/3', hint: 'ddd D/M' },
-  { key: 'ddd DD/MM', value: 'Tue 25/03', hint: 'ddd DD/MM' }
-];
-
-const shortDateFormatOptions = [
-  { key: 'MMM D YYYY', value: 'Mar 25 2014', hint: 'MMM D YYYY' },
-  { key: 'DD MMM YYYY', value: '25 Mar 2014', hint: 'DD MMM YYYY' },
-  { key: 'MM/D/YYYY', value: '03/25/2014', hint: 'MM/D/YYYY' },
-  { key: 'MM/DD/YYYY', value: '03/25/2014', hint: 'MM/DD/YYYY' },
-  { key: 'DD/MM/YYYY', value: '25/03/2014', hint: 'DD/MM/YYYY' },
-  { key: 'YYYY-MM-DD', value: '2014-03-25', hint: 'YYYY-MM-DD' }
-];
-
-const longDateFormatOptions = [
-  { key: 'dddd, MMMM D YYYY', value: 'Tuesday, March 25, 2014' },
-  { key: 'dddd, D MMMM YYYY', value: 'Tuesday, 25 March, 2014' }
-];
-
-export const timeFormatOptions = [
-  { key: 'h(:mm)a', value: '5pm/5:30pm' },
-  { key: 'HH:mm', value: '17:00/17:30' }
-];
-
-class UISettings extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      isFetching,
-      error,
-      settings,
-      languages,
-      hasSettings,
-      onInputChange,
-      onSavePress,
-      ...otherProps
-    } = this.props;
-
-    const themeOptions = Object.keys(themes)
-      .map((theme) => ({ key: theme, value: titleCase(theme) }));
-
-    return (
-      <PageContent title={translate('UiSettings')}>
-        <SettingsToolbar
-          {...otherProps}
-          onSavePress={onSavePress}
-        />
-
-        <PageContentBody>
-          {
-            isFetching ?
-              <LoadingIndicator /> :
-              null
-          }
-
-          {
-            !isFetching && error ?
-              <Alert kind={kinds.DANGER}>
-                {translate('UiSettingsLoadError')}
-              </Alert> :
-              null
-          }
-
-          {
-            hasSettings && !isFetching && !error ?
-              <Form
-                id="uiSettings"
-                {...otherProps}
-              >
-                <FieldSet legend={translate('Calendar')}>
-                  <FormGroup>
-                    <FormLabel>{translate('FirstDayOfWeek')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="firstDayOfWeek"
-                      values={firstDayOfWeekOptions}
-                      onChange={onInputChange}
-                      {...settings.firstDayOfWeek}
-                    />
-                  </FormGroup>
-
-                  <FormGroup>
-                    <FormLabel>{translate('WeekColumnHeader')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="calendarWeekColumnHeader"
-                      values={weekColumnOptions}
-                      onChange={onInputChange}
-                      helpText={translate('WeekColumnHeaderHelpText')}
-                      {...settings.calendarWeekColumnHeader}
-                    />
-                  </FormGroup>
-                </FieldSet>
-
-                <FieldSet
-                  legend={translate('Dates')}
-                >
-                  <FormGroup>
-                    <FormLabel>{translate('ShortDateFormat')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="shortDateFormat"
-                      values={shortDateFormatOptions}
-                      onChange={onInputChange}
-                      {...settings.shortDateFormat}
-                    />
-                  </FormGroup>
-
-                  <FormGroup>
-                    <FormLabel>{translate('LongDateFormat')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="longDateFormat"
-                      values={longDateFormatOptions}
-                      onChange={onInputChange}
-                      {...settings.longDateFormat}
-                    />
-                  </FormGroup>
-
-                  <FormGroup>
-                    <FormLabel>{translate('TimeFormat')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="timeFormat"
-                      values={timeFormatOptions}
-                      onChange={onInputChange}
-                      {...settings.timeFormat}
-                    />
-                  </FormGroup>
-
-                  <FormGroup>
-                    <FormLabel>{translate('ShowRelativeDates')}</FormLabel>
-                    <FormInputGroup
-                      type={inputTypes.CHECK}
-                      name="showRelativeDates"
-                      helpText={translate('ShowRelativeDatesHelpText')}
-                      onChange={onInputChange}
-                      {...settings.showRelativeDates}
-                    />
-                  </FormGroup>
-                </FieldSet>
-
-                <FieldSet
-                  legend={translate('Style')}
-                >
-                  <FormGroup>
-                    <FormLabel>{translate('Theme')}</FormLabel>
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="theme"
-                      helpText={translate('ThemeHelpText')}
-                      values={themeOptions}
-                      onChange={onInputChange}
-                      {...settings.theme}
-                    />
-                  </FormGroup>
-
-                  <FormGroup>
-                    <FormLabel>{translate('EnableColorImpairedMode')}</FormLabel>
-                    <FormInputGroup
-                      type={inputTypes.CHECK}
-                      name="enableColorImpairedMode"
-                      helpText={translate('EnableColorImpairedModeHelpText')}
-                      onChange={onInputChange}
-                      {...settings.enableColorImpairedMode}
-                    />
-                  </FormGroup>
-                </FieldSet>
-
-                <FieldSet legend={translate('Language')}>
-                  <FormGroup>
-                    <FormLabel>{translate('UiLanguage')}</FormLabel>
-                    <FormInputGroup
-                      type={inputTypes.LANGUAGE_SELECT}
-                      name="uiLanguage"
-                      helpText={translate('UiLanguageHelpText')}
-                      helpTextWarning={translate('BrowserReloadRequired')}
-                      onChange={onInputChange}
-                      {...settings.uiLanguage}
-                      errors={
-                        languages.some((language) => language.key === settings.uiLanguage.value) ?
-                          settings.uiLanguage.errors :
-                          [
-                            ...settings.uiLanguage.errors,
-                            { message: translate('InvalidUILanguage') }
-                          ]}
-                    />
-                  </FormGroup>
-                </FieldSet>
-              </Form> :
-              null
-          }
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-
-}
-
-UISettings.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  settings: PropTypes.object.isRequired,
-  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
-  hasSettings: PropTypes.bool.isRequired,
-  onSavePress: PropTypes.func.isRequired,
-  onInputChange: PropTypes.func.isRequired
-};
-
-export default UISettings;

frontend/src/Settings/UI/UISettings.tsx

@@ -0,0 +1,287 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { inputTypes, kinds } from 'Helpers/Props';
+import SettingsToolbar from 'Settings/SettingsToolbar';
+import {
+  fetchUISettings,
+  saveUISettings,
+  setUISettingsValue,
+} from 'Store/Actions/settingsActions';
+import createLanguagesSelector from 'Store/Selectors/createLanguagesSelector';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import themes from 'Styles/Themes';
+import { InputChanged } from 'typings/inputs';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+
+const SECTION = 'ui';
+
+export const firstDayOfWeekOptions = [
+  {
+    key: 0,
+    get value() {
+      return translate('Sunday');
+    },
+  },
+  {
+    key: 1,
+    get value() {
+      return translate('Monday');
+    },
+  },
+];
+
+export const weekColumnOptions = [
+  { key: 'ddd M/D', value: 'Tue 3/25', hint: 'ddd M/D' },
+  { key: 'ddd MM/DD', value: 'Tue 03/25', hint: 'ddd MM/DD' },
+  { key: 'ddd D/M', value: 'Tue 25/3', hint: 'ddd D/M' },
+  { key: 'ddd DD/MM', value: 'Tue 25/03', hint: 'ddd DD/MM' },
+];
+
+const shortDateFormatOptions = [
+  { key: 'MMM D YYYY', value: 'Mar 25 2014', hint: 'MMM D YYYY' },
+  { key: 'DD MMM YYYY', value: '25 Mar 2014', hint: 'DD MMM YYYY' },
+  { key: 'MM/D/YYYY', value: '03/25/2014', hint: 'MM/D/YYYY' },
+  { key: 'MM/DD/YYYY', value: '03/25/2014', hint: 'MM/DD/YYYY' },
+  { key: 'DD/MM/YYYY', value: '25/03/2014', hint: 'DD/MM/YYYY' },
+  { key: 'YYYY-MM-DD', value: '2014-03-25', hint: 'YYYY-MM-DD' },
+];
+
+const longDateFormatOptions = [
+  { key: 'dddd, MMMM D YYYY', value: 'Tuesday, March 25, 2014' },
+  { key: 'dddd, D MMMM YYYY', value: 'Tuesday, 25 March, 2014' },
+];
+
+export const timeFormatOptions = [
+  { key: 'h(:mm)a', value: '5pm/5:30pm' },
+  { key: 'HH:mm', value: '17:00/17:30' },
+];
+
+function UISettings() {
+  const dispatch = useDispatch();
+
+  const {
+    items,
+    isFetching: isLanguagesFetching,
+    isPopulated: isLanguagesPopulated,
+    error: languagesError,
+  } = useSelector(
+    createLanguagesSelector({
+      Any: true,
+      Original: true,
+      Unknown: true,
+    })
+  );
+
+  const {
+    isFetching: isSettingsFetching,
+    isPopulated: isSettingsPopulated,
+    error: settingsError,
+    hasSettings,
+    settings,
+    hasPendingChanges,
+    isSaving,
+    validationErrors,
+    validationWarnings,
+  } = useSelector(createSettingsSectionSelector(SECTION));
+
+  const isFetching = isLanguagesFetching || isSettingsFetching;
+  const isPopulated = isLanguagesPopulated && isSettingsPopulated;
+  const error = languagesError || settingsError;
+
+  const languages = useMemo(() => {
+    return items.map((item) => {
+      return {
+        key: item.id,
+        value: item.name,
+      };
+    });
+  }, [items]);
+
+  const themeOptions = Object.keys(themes).map((theme) => ({
+    key: theme,
+    value: titleCase(theme),
+  }));
+
+  const handleInputChange = useCallback(
+    (change: InputChanged) => {
+      // @ts-expect-error - actions aren't typed
+      dispatch(setUISettingsValue(change));
+    },
+    [dispatch]
+  );
+  const handleSavePress = useCallback(() => {
+    dispatch(saveUISettings());
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(fetchUISettings());
+
+    return () => {
+      // @ts-expect-error - actions aren't typed
+      dispatch(setUISettingsValue({ section: `settings.${SECTION}` }));
+    };
+  }, [dispatch]);
+
+  return (
+    <PageContent title={translate('UiSettings')}>
+      <SettingsToolbar
+        hasPendingChanges={hasPendingChanges}
+        isSaving={isSaving}
+        onSavePress={handleSavePress}
+      />
+
+      <PageContentBody>
+        {isFetching && isPopulated ? <LoadingIndicator /> : null}
+
+        {!isFetching && error ? (
+          <Alert kind={kinds.DANGER}>{translate('UiSettingsLoadError')}</Alert>
+        ) : null}
+
+        {hasSettings && isPopulated && !error ? (
+          <Form
+            id="uiSettings"
+            validationErrors={validationErrors}
+            validationWarnings={validationWarnings}
+          >
+            <FieldSet legend={translate('Calendar')}>
+              <FormGroup>
+                <FormLabel>{translate('FirstDayOfWeek')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="firstDayOfWeek"
+                  values={firstDayOfWeekOptions}
+                  onChange={handleInputChange}
+                  {...settings.firstDayOfWeek}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('WeekColumnHeader')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="calendarWeekColumnHeader"
+                  values={weekColumnOptions}
+                  helpText={translate('WeekColumnHeaderHelpText')}
+                  onChange={handleInputChange}
+                  {...settings.calendarWeekColumnHeader}
+                />
+              </FormGroup>
+            </FieldSet>
+
+            <FieldSet legend={translate('Dates')}>
+              <FormGroup>
+                <FormLabel>{translate('ShortDateFormat')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="shortDateFormat"
+                  values={shortDateFormatOptions}
+                  onChange={handleInputChange}
+                  {...settings.shortDateFormat}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('LongDateFormat')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="longDateFormat"
+                  values={longDateFormatOptions}
+                  onChange={handleInputChange}
+                  {...settings.longDateFormat}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('TimeFormat')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="timeFormat"
+                  values={timeFormatOptions}
+                  onChange={handleInputChange}
+                  {...settings.timeFormat}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('ShowRelativeDates')}</FormLabel>
+                <FormInputGroup
+                  type={inputTypes.CHECK}
+                  name="showRelativeDates"
+                  helpText={translate('ShowRelativeDatesHelpText')}
+                  onChange={handleInputChange}
+                  {...settings.showRelativeDates}
+                />
+              </FormGroup>
+            </FieldSet>
+
+            <FieldSet legend={translate('Style')}>
+              <FormGroup>
+                <FormLabel>{translate('Theme')}</FormLabel>
+                <FormInputGroup
+                  type={inputTypes.SELECT}
+                  name="theme"
+                  helpText={translate('ThemeHelpText')}
+                  values={themeOptions}
+                  onChange={handleInputChange}
+                  {...settings.theme}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('EnableColorImpairedMode')}</FormLabel>
+                <FormInputGroup
+                  type={inputTypes.CHECK}
+                  name="enableColorImpairedMode"
+                  helpText={translate('EnableColorImpairedModeHelpText')}
+                  onChange={handleInputChange}
+                  {...settings.enableColorImpairedMode}
+                />
+              </FormGroup>
+            </FieldSet>
+
+            <FieldSet legend={translate('Language')}>
+              <FormGroup>
+                <FormLabel>{translate('UiLanguage')}</FormLabel>
+                <FormInputGroup
+                  type={inputTypes.LANGUAGE_SELECT}
+                  name="uiLanguage"
+                  helpText={translate('UiLanguageHelpText')}
+                  helpTextWarning={translate('BrowserReloadRequired')}
+                  onChange={handleInputChange}
+                  {...settings.uiLanguage}
+                  errors={
+                    languages.some(
+                      (language) => language.key === settings.uiLanguage.value
+                    )
+                      ? settings.uiLanguage.errors
+                      : [
+                          ...settings.uiLanguage.errors,
+                          { message: translate('InvalidUILanguage') },
+                        ]
+                  }
+                />
+              </FormGroup>
+            </FieldSet>
+          </Form>
+        ) : null}
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default UISettings;

frontend/src/Settings/UI/UISettingsConnector.js

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import { fetchUISettings, saveUISettings, setUISettingsValue } from 'Store/Actions/settingsActions';
-import createLanguagesSelector from 'Store/Selectors/createLanguagesSelector';
-import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
-import UISettings from './UISettings';
-
-const SECTION = 'ui';
-const FILTER_LANGUAGES = ['Any', 'Unknown', 'Original'];
-
-function createFilteredLanguagesSelector() {
-  return createSelector(
-    createLanguagesSelector(),
-    (languages) => {
-      if (!languages || !languages.items) {
-        return [];
-      }
-
-      const newItems = languages.items
-        .filter((lang) => !FILTER_LANGUAGES.includes(lang.name))
-        .map((item) => {
-          return {
-            key: item.id,
-            value: item.name
-          };
-        });
-
-      return {
-        ...languages,
-        items: newItems
-      };
-    }
-  );
-}
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.advancedSettings,
-    createSettingsSectionSelector(SECTION),
-    createFilteredLanguagesSelector(),
-    (advancedSettings, sectionSettings, languages) => {
-      return {
-        advancedSettings,
-        languages: languages.items,
-        isLanguagesPopulated: languages.isPopulated,
-        ...sectionSettings,
-        isFetching: sectionSettings.isFetching || languages.isFetching,
-        error: sectionSettings.error || languages.error
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchSetUISettingsValue: setUISettingsValue,
-  dispatchSaveUISettings: saveUISettings,
-  dispatchFetchUISettings: fetchUISettings,
-  dispatchClearPendingChanges: clearPendingChanges
-};
-
-class UISettingsConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    const {
-      dispatchFetchUISettings
-    } = this.props;
-
-    dispatchFetchUISettings();
-  }
-
-  componentWillUnmount() {
-    this.props.dispatchClearPendingChanges({ section: `settings.${SECTION}` });
-  }
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.dispatchSetUISettingsValue({ name, value });
-  };
-
-  onSavePress = () => {
-    this.props.dispatchSaveUISettings();
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <UISettings
-        onInputChange={this.onInputChange}
-        onSavePress={this.onSavePress}
-        {...this.props}
-      />
-    );
-  }
-}
-
-UISettingsConnector.propTypes = {
-  isLanguagesPopulated: PropTypes.bool.isRequired,
-  dispatchSetUISettingsValue: PropTypes.func.isRequired,
-  dispatchSaveUISettings: PropTypes.func.isRequired,
-  dispatchFetchUISettings: PropTypes.func.isRequired,
-  dispatchClearPendingChanges: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(UISettingsConnector);

frontend/src/Store/Selectors/createFilteredLanguagesSelector.ts

@@ -1,28 +0,0 @@
-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,
-    };
-  });
-}

frontend/src/Store/Selectors/createLanguagesSelector.ts

@@ -1,15 +1,23 @@
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 
-function createLanguagesSelector() {
+interface LanguageFilter {
+  [key: string]: boolean | undefined;
+  Any: boolean;
+  Original?: boolean;
+  Unknown?: boolean;
+}
+
+function createLanguagesSelector(
+  excludeLanguages: LanguageFilter = { Any: true }
+) {
   return createSelector(
     (state: AppState) => state.settings.languages,
     (languages) => {
       const { isFetching, isPopulated, error, items } = languages;
 
-      const filterItems = ['Any'];
       const filteredLanguages = items.filter(
-        (lang) => !filterItems.includes(lang.name)
+        (lang) => !excludeLanguages[lang.name]
       );
 
       return {

frontend/src/Store/Selectors/createSettingsSectionSelector.ts

@@ -28,6 +28,9 @@ function createSettingsSectionSelector<
       const saveError =
         'saveError' in sectionSettings ? sectionSettings.saveError : undefined;
 
+      const isSaving =
+        'isSaving' in sectionSettings ? sectionSettings.isSaving : false;
+
       const {
         settings,
         pendingChanges: selectedPendingChanges,
@@ -36,6 +39,7 @@ function createSettingsSectionSelector<
 
       return {
         ...other,
+        isSaving,
         saveError,
         settings: settings as PendingSection<T>,
         pendingChanges: selectedPendingChanges as Partial<T>,

frontend/src/typings/Settings/UiSettings.ts

@@ -7,4 +7,5 @@ export default interface UiSettings {
   firstDayOfWeek: number;
   enableColorImpairedMode: boolean;
   calendarWeekColumnHeader: string;
+  uiLanguage: number;
 }