Convert Naming options to TypeScript

frontend/src/App/State/SettingsAppState.ts

@@ -16,6 +16,8 @@ import IndexerFlag from 'typings/IndexerFlag';
 import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
 import General from 'typings/Settings/General';
+import NamingConfig from 'typings/Settings/NamingConfig';
+import NamingExample from 'typings/Settings/NamingExample';
 import ReleaseProfile from 'typings/Settings/ReleaseProfile';
 import UiSettings from 'typings/Settings/UiSettings';
 
@@ -30,6 +32,13 @@ export interface GeneralAppState
   extends AppSectionItemState<General>,
     AppSectionSaveState {}
 
+export interface NamingAppState
+  extends AppSectionItemState<NamingConfig>,
+    AppSectionSaveState {}
+
+export interface NamingExamplesAppState
+  extends AppSectionItemState<NamingExample> {}
+
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
     AppSectionDeleteState,
@@ -88,6 +97,8 @@ interface SettingsAppState {
   indexerFlags: IndexerFlagSettingsAppState;
   indexers: IndexerAppState;
   languages: LanguageSettingsAppState;
+  naming: NamingAppState;
+  namingExamples: NamingExamplesAppState;
   notifications: NotificationAppState;
   qualityProfiles: QualityProfilesAppState;
   releaseProfiles: ReleaseProfilesAppState;

frontend/src/Settings/MediaManagement/MediaManagement.js

@@ -13,7 +13,7 @@ import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import RootFolders from 'RootFolder/RootFolders';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
-import NamingConnector from './Naming/NamingConnector';
+import Naming from './Naming/Naming';
 import AddRootFolder from './RootFolder/AddRootFolder';
 
 const rescanAfterRefreshOptions = [
@@ -106,7 +106,7 @@ class MediaManagement extends Component {
         />
 
         <PageContentBody>
-          <NamingConnector />
+          <Naming />
 
           {
             isFetching ?

frontend/src/Settings/MediaManagement/Naming/Naming.js

@@ -1,229 +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 FormInputButton from 'Components/Form/FormInputButton';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { inputTypes, kinds, sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import NamingModal from './NamingModal';
-import styles from './Naming.css';
-
-class Naming extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isNamingModalOpen: false,
-      namingModalOptions: null
-    };
-  }
-
-  //
-  // Listeners
-
-  onStandardNamingModalOpenClick = () => {
-    this.setState({
-      isNamingModalOpen: true,
-      namingModalOptions: {
-        name: 'standardMovieFormat',
-        additional: true
-      }
-    });
-  };
-
-  onMovieFolderNamingModalOpenClick = () => {
-    this.setState({
-      isNamingModalOpen: true,
-      namingModalOptions: {
-        name: 'movieFolderFormat'
-      }
-    });
-  };
-
-  onNamingModalClose = () => {
-    this.setState({ isNamingModalOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      advancedSettings,
-      isFetching,
-      error,
-      settings,
-      hasSettings,
-      examples,
-      examplesPopulated,
-      onInputChange
-    } = this.props;
-
-    const {
-      isNamingModalOpen,
-      namingModalOptions
-    } = this.state;
-
-    const renameMovies = hasSettings && settings.renameMovies.value;
-    const replaceIllegalCharacters = hasSettings && settings.replaceIllegalCharacters.value;
-
-    const colonReplacementOptions = [
-      { key: 'delete', value: translate('Delete') },
-      { key: 'dash', value: translate('ReplaceWithDash') },
-      { key: 'spaceDash', value: translate('ReplaceWithSpaceDash') },
-      { key: 'spaceDashSpace', value: translate('ReplaceWithSpaceDashSpace') },
-      { key: 'smart', value: translate('SmartReplace'), hint: translate('SmartReplaceHint') }
-    ];
-
-    const standardMovieFormatHelpTexts = [];
-    const standardMovieFormatErrors = [];
-    const movieFolderFormatHelpTexts = [];
-    const movieFolderFormatErrors = [];
-
-    if (examplesPopulated) {
-      if (examples.movieExample) {
-        standardMovieFormatHelpTexts.push(`${translate('Movie')}: ${examples.movieExample}`);
-      } else {
-        standardMovieFormatErrors.push({ message: translate('MovieInvalidFormat') });
-      }
-
-      if (examples.movieFolderExample) {
-        movieFolderFormatHelpTexts.push(`${translate('Example')}: ${examples.movieFolderExample}`);
-      } else {
-        movieFolderFormatErrors.push({ message: translate('InvalidFormat') });
-      }
-    }
-
-    return (
-      <FieldSet legend={translate('MovieNaming')}>
-        {
-          isFetching &&
-            <LoadingIndicator />
-        }
-
-        {
-          !isFetching && error &&
-            <Alert kind={kinds.DANGER}>
-              {translate('NamingSettingsLoadError')}
-            </Alert>
-        }
-
-        {
-          hasSettings && !isFetching && !error &&
-            <Form>
-              <FormGroup size={sizes.MEDIUM}>
-                <FormLabel>{translate('RenameMovies')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="renameMovies"
-                  helpText={translate('RenameMoviesHelpText')}
-                  onChange={onInputChange}
-                  {...settings.renameMovies}
-                />
-              </FormGroup>
-
-              <FormGroup size={sizes.MEDIUM}>
-                <FormLabel>{translate('ReplaceIllegalCharacters')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="replaceIllegalCharacters"
-                  helpText={translate('ReplaceIllegalCharactersHelpText')}
-                  onChange={onInputChange}
-                  {...settings.replaceIllegalCharacters}
-                />
-              </FormGroup>
-
-              {
-                replaceIllegalCharacters &&
-                  <FormGroup>
-                    <FormLabel>{translate('ColonReplacement')}</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.SELECT}
-                      name="colonReplacementFormat"
-                      values={colonReplacementOptions}
-                      helpText={translate('ColonReplacementFormatHelpText')}
-                      onChange={onInputChange}
-                      {...settings.colonReplacementFormat}
-                    />
-                  </FormGroup>
-              }
-
-              {
-                renameMovies &&
-                  <FormGroup size={sizes.LARGE}>
-                    <FormLabel>{translate('StandardMovieFormat')}</FormLabel>
-
-                    <FormInputGroup
-                      inputClassName={styles.namingInput}
-                      type={inputTypes.TEXT}
-                      name="standardMovieFormat"
-                      buttons={<FormInputButton onPress={this.onStandardNamingModalOpenClick}>?</FormInputButton>}
-                      onChange={onInputChange}
-                      {...settings.standardMovieFormat}
-                      helpTexts={standardMovieFormatHelpTexts}
-                      errors={[...standardMovieFormatErrors, ...settings.standardMovieFormat.errors]}
-                    />
-                  </FormGroup>
-              }
-
-              <FormGroup
-                advancedSettings={advancedSettings}
-                isAdvanced={true}
-              >
-                <FormLabel>{translate('MovieFolderFormat')}</FormLabel>
-
-                <FormInputGroup
-                  inputClassName={styles.namingInput}
-                  type={inputTypes.TEXT}
-                  name="movieFolderFormat"
-                  buttons={<FormInputButton onPress={this.onMovieFolderNamingModalOpenClick}>?</FormInputButton>}
-                  onChange={onInputChange}
-                  {...settings.movieFolderFormat}
-                  helpTexts={[translate('MovieFolderFormatHelpText'), ...movieFolderFormatHelpTexts]}
-                  errors={[...movieFolderFormatErrors, ...settings.movieFolderFormat.errors]}
-                />
-              </FormGroup>
-
-              {
-                namingModalOptions &&
-                  <NamingModal
-                    isOpen={isNamingModalOpen}
-                    advancedSettings={advancedSettings}
-                    {...namingModalOptions}
-                    value={settings[namingModalOptions.name].value}
-                    onInputChange={onInputChange}
-                    onModalClose={this.onNamingModalClose}
-                  />
-              }
-            </Form>
-        }
-      </FieldSet>
-    );
-  }
-
-}
-
-Naming.propTypes = {
-  advancedSettings: PropTypes.bool.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  settings: PropTypes.object.isRequired,
-  hasSettings: PropTypes.bool.isRequired,
-  examples: PropTypes.object.isRequired,
-  examplesPopulated: PropTypes.bool.isRequired,
-  onInputChange: PropTypes.func.isRequired
-};
-
-export default Naming;

frontend/src/Settings/MediaManagement/Naming/Naming.tsx

@@ -0,0 +1,274 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputButton from 'Components/Form/FormInputButton';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import {
+  fetchNamingExamples,
+  fetchNamingSettings,
+  setNamingSettingsValue,
+} from 'Store/Actions/settingsActions';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import NamingConfig from 'typings/Settings/NamingConfig';
+import translate from 'Utilities/String/translate';
+import NamingModal from './NamingModal';
+import styles from './Naming.css';
+
+const SECTION = 'naming';
+
+function createNamingSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.advancedSettings,
+    (state: AppState) => state.settings.namingExamples,
+    createSettingsSectionSelector(SECTION),
+    (advancedSettings, namingExamples, sectionSettings) => {
+      return {
+        advancedSettings,
+        examples: namingExamples.item,
+        examplesPopulated: namingExamples.isPopulated,
+        ...sectionSettings,
+      };
+    }
+  );
+}
+
+interface NamingModalOptions {
+  name: keyof Pick<NamingConfig, 'standardMovieFormat' | 'movieFolderFormat'>;
+  movie?: boolean;
+  additional?: boolean;
+}
+
+function Naming() {
+  const {
+    advancedSettings,
+    isFetching,
+    error,
+    settings,
+    hasSettings,
+    examples,
+    examplesPopulated,
+  } = useSelector(createNamingSelector());
+
+  const dispatch = useDispatch();
+
+  const [isNamingModalOpen, setNamingModalOpen, setNamingModalClosed] =
+    useModalOpenState(false);
+  const [namingModalOptions, setNamingModalOptions] =
+    useState<NamingModalOptions | null>(null);
+  const namingExampleTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    dispatch(fetchNamingSettings());
+    dispatch(fetchNamingExamples());
+
+    return () => {
+      dispatch(clearPendingChanges({ section: SECTION }));
+    };
+  }, [dispatch]);
+
+  const handleInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      // @ts-expect-error 'setNamingSettingsValue' isn't typed yet
+      dispatch(setNamingSettingsValue({ name, value }));
+
+      if (namingExampleTimeout.current) {
+        clearTimeout(namingExampleTimeout.current);
+      }
+
+      namingExampleTimeout.current = setTimeout(() => {
+        dispatch(fetchNamingExamples());
+      }, 1000);
+    },
+    [dispatch]
+  );
+
+  const onStandardNamingModalOpenClick = useCallback(() => {
+    setNamingModalOpen();
+
+    setNamingModalOptions({
+      name: 'standardMovieFormat',
+      movie: true,
+      additional: true,
+    });
+  }, [setNamingModalOpen, setNamingModalOptions]);
+
+  const onMovieFolderNamingModalOpenClick = useCallback(() => {
+    setNamingModalOpen();
+
+    setNamingModalOptions({
+      name: 'movieFolderFormat',
+    });
+  }, [setNamingModalOpen, setNamingModalOptions]);
+
+  const renameMovies = hasSettings && settings.renameMovies.value;
+  const replaceIllegalCharacters =
+    hasSettings && settings.replaceIllegalCharacters.value;
+
+  const colonReplacementOptions = [
+    { key: 'delete', value: translate('Delete') },
+    { key: 'dash', value: translate('ReplaceWithDash') },
+    { key: 'spaceDash', value: translate('ReplaceWithSpaceDash') },
+    { key: 'spaceDashSpace', value: translate('ReplaceWithSpaceDashSpace') },
+    {
+      key: 'smart',
+      value: translate('SmartReplace'),
+      hint: translate('SmartReplaceHint'),
+    },
+  ];
+
+  const standardMovieFormatHelpTexts = [];
+  const standardMovieFormatErrors = [];
+  const movieFolderFormatHelpTexts = [];
+  const movieFolderFormatErrors = [];
+
+  if (examplesPopulated) {
+    if (examples.movieExample) {
+      standardMovieFormatHelpTexts.push(
+        `${translate('Movie')}: ${examples.movieExample}`
+      );
+    } else {
+      standardMovieFormatErrors.push({
+        message: translate('MovieInvalidFormat'),
+      });
+    }
+
+    if (examples.movieFolderExample) {
+      movieFolderFormatHelpTexts.push(
+        `${translate('Example')}: ${examples.movieFolderExample}`
+      );
+    } else {
+      movieFolderFormatErrors.push({ message: translate('InvalidFormat') });
+    }
+  }
+
+  return (
+    <FieldSet legend={translate('MovieNaming')}>
+      {isFetching ? <LoadingIndicator /> : null}
+
+      {!isFetching && error ? (
+        <Alert kind={kinds.DANGER}>
+          {translate('NamingSettingsLoadError')}
+        </Alert>
+      ) : null}
+
+      {hasSettings && !isFetching && !error ? (
+        <Form>
+          <FormGroup size={sizes.MEDIUM}>
+            <FormLabel>{translate('RenameMovies')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="renameMovies"
+              helpText={translate('RenameMoviesHelpText')}
+              onChange={handleInputChange}
+              {...settings.renameMovies}
+            />
+          </FormGroup>
+
+          <FormGroup size={sizes.MEDIUM}>
+            <FormLabel>{translate('ReplaceIllegalCharacters')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="replaceIllegalCharacters"
+              helpText={translate('ReplaceIllegalCharactersHelpText')}
+              onChange={handleInputChange}
+              {...settings.replaceIllegalCharacters}
+            />
+          </FormGroup>
+
+          {replaceIllegalCharacters ? (
+            <FormGroup size={sizes.MEDIUM}>
+              <FormLabel>{translate('ColonReplacement')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="colonReplacementFormat"
+                values={colonReplacementOptions}
+                helpText={translate('ColonReplacementFormatHelpText')}
+                onChange={handleInputChange}
+                {...settings.colonReplacementFormat}
+              />
+            </FormGroup>
+          ) : null}
+
+          {renameMovies ? (
+            <FormGroup size={sizes.LARGE}>
+              <FormLabel>{translate('StandardMovieFormat')}</FormLabel>
+
+              <FormInputGroup
+                inputClassName={styles.namingInput}
+                type={inputTypes.TEXT}
+                name="standardMovieFormat"
+                buttons={
+                  <FormInputButton onPress={onStandardNamingModalOpenClick}>
+                    ?
+                  </FormInputButton>
+                }
+                onChange={handleInputChange}
+                {...settings.standardMovieFormat}
+                helpTexts={standardMovieFormatHelpTexts}
+                errors={[
+                  ...standardMovieFormatErrors,
+                  ...settings.standardMovieFormat.errors,
+                ]}
+              />
+            </FormGroup>
+          ) : null}
+
+          <FormGroup
+            advancedSettings={advancedSettings}
+            isAdvanced={true}
+            size={sizes.MEDIUM}
+          >
+            <FormLabel>{translate('MovieFolderFormat')}</FormLabel>
+
+            <FormInputGroup
+              inputClassName={styles.namingInput}
+              type={inputTypes.TEXT}
+              name="movieFolderFormat"
+              buttons={
+                <FormInputButton onPress={onMovieFolderNamingModalOpenClick}>
+                  ?
+                </FormInputButton>
+              }
+              onChange={handleInputChange}
+              {...settings.movieFolderFormat}
+              helpTexts={[
+                translate('MovieFolderFormatHelpText'),
+                ...movieFolderFormatHelpTexts,
+              ]}
+              errors={[
+                ...movieFolderFormatErrors,
+                ...settings.movieFolderFormat.errors,
+              ]}
+            />
+          </FormGroup>
+
+          {namingModalOptions ? (
+            <NamingModal
+              isOpen={isNamingModalOpen}
+              advancedSettings={advancedSettings}
+              {...namingModalOptions}
+              value={settings[namingModalOptions.name].value}
+              onInputChange={handleInputChange}
+              onModalClose={setNamingModalClosed}
+            />
+          ) : null}
+        </Form>
+      ) : null}
+    </FieldSet>
+  );
+}
+
+export default Naming;

frontend/src/Settings/MediaManagement/Naming/NamingConnector.js

@@ -1,96 +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 { fetchNamingExamples, fetchNamingSettings, setNamingSettingsValue } from 'Store/Actions/settingsActions';
-import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
-import Naming from './Naming';
-
-const SECTION = 'naming';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.advancedSettings,
-    (state) => state.settings.namingExamples,
-    createSettingsSectionSelector(SECTION),
-    (advancedSettings, namingExamples, sectionSettings) => {
-      return {
-        advancedSettings,
-        examples: namingExamples.item,
-        examplesPopulated: namingExamples.isPopulated,
-        ...sectionSettings
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchNamingSettings,
-  setNamingSettingsValue,
-  fetchNamingExamples,
-  clearPendingChanges
-};
-
-class NamingConnector extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._namingExampleTimeout = null;
-  }
-
-  componentDidMount() {
-    this.props.fetchNamingSettings();
-    this.props.fetchNamingExamples();
-  }
-
-  componentWillUnmount() {
-    this.props.clearPendingChanges({ section: `settings.${SECTION}` });
-  }
-
-  //
-  // Control
-
-  _fetchNamingExamples = () => {
-    this.props.fetchNamingExamples();
-  };
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.setNamingSettingsValue({ name, value });
-
-    if (this._namingExampleTimeout) {
-      clearTimeout(this._namingExampleTimeout);
-    }
-
-    this._namingExampleTimeout = setTimeout(this._fetchNamingExamples, 1000);
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <Naming
-        onInputChange={this.onInputChange}
-        onSavePress={this.onSavePress}
-        {...this.props}
-      />
-    );
-  }
-}
-
-NamingConnector.propTypes = {
-  fetchNamingSettings: PropTypes.func.isRequired,
-  setNamingSettingsValue: PropTypes.func.isRequired,
-  fetchNamingExamples: PropTypes.func.isRequired,
-  clearPendingChanges: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(NamingConnector);

frontend/src/Settings/MediaManagement/Naming/NamingModal.js

@@ -1,508 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import FieldSet from 'Components/FieldSet';
-import SelectInput from 'Components/Form/SelectInput';
-import TextInput from 'Components/Form/TextInput';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import Modal from 'Components/Modal/Modal';
-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 { icons, sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import NamingOption from './NamingOption';
-import styles from './NamingModal.css';
-
-const separatorOptions = [
-  {
-    key: ' ',
-    get value() {
-      return `${translate('Space')} ( )`;
-    }
-  },
-  {
-    key: '.',
-    get value() {
-      return `${translate('Period')} (.)`;
-    }
-  },
-  {
-    key: '_',
-    get value() {
-      return `${translate('Underscore')} (_)`;
-    }
-  },
-  {
-    key: '-',
-    get value() {
-      return `${translate('Dash')} (-)`;
-    }
-  }
-];
-
-const caseOptions = [
-  {
-    key: 'title',
-    get value() {
-      return translate('DefaultCase');
-    }
-  },
-  {
-    key: 'lower',
-    get value() {
-      return translate('Lowercase');
-    }
-  },
-  {
-    key: 'upper',
-    get value() {
-      return translate('Uppercase');
-    }
-  }
-];
-
-const fileNameTokens = [
-  {
-    token: '{Movie Title} - {Quality Full}',
-    example: 'Movie Title (2010) - HDTV-720p Proper'
-  }
-];
-
-const movieTokens = [
-  { token: '{Movie Title}', example: 'Movie\'s Title', footNote: 1 },
-  { token: '{Movie Title:DE}', example: 'Titel des Films', footNote: 1 },
-  { token: '{Movie CleanTitle}', example: 'Movies Title', footNote: 1 },
-  { token: '{Movie CleanTitle:DE}', example: 'Titel des Films', footNote: 1 },
-  { token: '{Movie TitleThe}', example: 'Movie\'s Title, The', footNote: 1 },
-  { token: '{Movie CleanTitleThe}', example: 'Movies Title, The', footNote: 1 },
-  { token: '{Movie OriginalTitle}', example: 'Τίτλος ταινίας', footNote: 1 },
-  { token: '{Movie CleanOriginalTitle}', example: 'Τίτλος ταινίας', footNote: 1 },
-  { token: '{Movie TitleFirstCharacter}', example: 'M' },
-  { token: '{Movie TitleFirstCharacter:DE}', example: 'T' },
-  { token: '{Movie Collection}', example: 'The Movie Collection', footNote: 1 },
-  { token: '{Movie Certification}', example: 'R' },
-  { token: '{Release Year}', example: '2009' }
-];
-
-const movieIdTokens = [
-  { token: '{ImdbId}', example: 'tt12345' },
-  { token: '{TmdbId}', example: '123456' }
-];
-
-const qualityTokens = [
-  { token: '{Quality Full}', example: 'HDTV-720p Proper' },
-  { token: '{Quality Title}', example: 'HDTV-720p' }
-];
-
-const mediaInfoTokens = [
-  { token: '{MediaInfo Simple}', example: 'x264 DTS' },
-  { token: '{MediaInfo Full}', example: 'x264 DTS [EN+DE]', footNote: 1 },
-
-  { token: '{MediaInfo AudioCodec}', example: 'DTS' },
-  { token: '{MediaInfo AudioChannels}', example: '5.1' },
-  { token: '{MediaInfo AudioLanguages}', example: '[EN+DE]', footNote: 1 },
-  { token: '{MediaInfo SubtitleLanguages}', example: '[DE]', footNote: 1 },
-
-  { token: '{MediaInfo VideoCodec}', example: 'x264' },
-  { token: '{MediaInfo VideoBitDepth}', example: '10' },
-  { token: '{MediaInfo VideoDynamicRange}', example: 'HDR' },
-  { token: '{MediaInfo VideoDynamicRangeType}', example: 'DV HDR10' },
-  { token: '{MediaInfo 3D}', example: '3D' }
-];
-
-const releaseGroupTokens = [
-  { token: '{Release Group}', example: 'Rls Grp', footNote: 1 }
-];
-
-const editionTokens = [
-  { token: '{Edition Tags}', example: 'IMAX', footNote: 1 }
-];
-
-const customFormatTokens = [
-  { token: '{Custom Formats}', example: 'Surround Sound x264' },
-  { token: '{Custom Format:FormatName}', example: 'AMZN' }
-];
-
-const originalTokens = [
-  { token: '{Original Title}', example: 'Movie.Title.HDTV.x264-EVOLVE' },
-  { token: '{Original Filename}', example: 'movie title hdtv.x264-Evolve' }
-];
-
-class NamingModal extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._selectionStart = null;
-    this._selectionEnd = null;
-
-    this.state = {
-      separator: ' ',
-      case: 'title'
-    };
-  }
-
-  //
-  // Listeners
-
-  onTokenSeparatorChange = (event) => {
-    this.setState({ separator: event.value });
-  };
-
-  onTokenCaseChange = (event) => {
-    this.setState({ case: event.value });
-  };
-
-  onInputSelectionChange = (selectionStart, selectionEnd) => {
-    this._selectionStart = selectionStart;
-    this._selectionEnd = selectionEnd;
-  };
-
-  onOptionPress = ({ isFullFilename, tokenValue }) => {
-    const {
-      name,
-      value,
-      onInputChange
-    } = this.props;
-
-    const selectionStart = this._selectionStart;
-    const selectionEnd = this._selectionEnd;
-
-    if (isFullFilename) {
-      onInputChange({ name, value: tokenValue });
-    } else if (selectionStart == null) {
-      onInputChange({
-        name,
-        value: `${value}${tokenValue}`
-      });
-    } else {
-      const start = value.substring(0, selectionStart);
-      const end = value.substring(selectionEnd);
-      const newValue = `${start}${tokenValue}${end}`;
-
-      onInputChange({ name, value: newValue });
-      this._selectionStart = newValue.length - 1;
-      this._selectionEnd = newValue.length - 1;
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      name,
-      value,
-      isOpen,
-      advancedSettings,
-      additional,
-      onInputChange,
-      onModalClose
-    } = this.props;
-
-    const {
-      separator: tokenSeparator,
-      case: tokenCase
-    } = this.state;
-
-    return (
-      <Modal
-        isOpen={isOpen}
-        onModalClose={onModalClose}
-      >
-        <ModalContent onModalClose={onModalClose}>
-          <ModalHeader>
-            {translate('FileNameTokens')}
-          </ModalHeader>
-
-          <ModalBody>
-            <div className={styles.namingSelectContainer}>
-              <SelectInput
-                className={styles.namingSelect}
-                name="separator"
-                value={tokenSeparator}
-                values={separatorOptions}
-                onChange={this.onTokenSeparatorChange}
-              />
-
-              <SelectInput
-                className={styles.namingSelect}
-                name="case"
-                value={tokenCase}
-                values={caseOptions}
-                onChange={this.onTokenCaseChange}
-              />
-            </div>
-
-            {
-              !advancedSettings &&
-                <FieldSet legend={translate('FileNames')}>
-                  <div className={styles.groups}>
-                    {
-                      fileNameTokens.map(({ token, example }) => {
-                        return (
-                          <NamingOption
-                            key={token}
-                            name={name}
-                            value={value}
-                            token={token}
-                            example={example}
-                            isFullFilename={true}
-                            tokenSeparator={tokenSeparator}
-                            tokenCase={tokenCase}
-                            size={sizes.LARGE}
-                            onPress={this.onOptionPress}
-                          />
-                        );
-                      }
-                      )
-                    }
-                  </div>
-                </FieldSet>
-            }
-
-            <FieldSet legend={translate('Movie')}>
-              <div className={styles.groups}>
-                {
-                  movieTokens.map(({ token, example, footNote }) => {
-                    return (
-                      <NamingOption
-                        key={token}
-                        name={name}
-                        value={value}
-                        token={token}
-                        example={example}
-                        footNote={footNote}
-                        tokenSeparator={tokenSeparator}
-                        tokenCase={tokenCase}
-                        onPress={this.onOptionPress}
-                      />
-                    );
-                  }
-                  )
-                }
-              </div>
-
-              <div className={styles.footNote}>
-                <Icon className={styles.icon} name={icons.FOOTNOTE} />
-                <InlineMarkdown data={translate('MovieFootNote')} />
-              </div>
-            </FieldSet>
-
-            <FieldSet legend={translate('MovieID')}>
-              <div className={styles.groups}>
-                {
-                  movieIdTokens.map(({ token, example }) => {
-                    return (
-                      <NamingOption
-                        key={token}
-                        name={name}
-                        value={value}
-                        token={token}
-                        example={example}
-                        tokenSeparator={tokenSeparator}
-                        tokenCase={tokenCase}
-                        onPress={this.onOptionPress}
-                      />
-                    );
-                  }
-                  )
-                }
-              </div>
-            </FieldSet>
-
-            {
-              additional &&
-                <div>
-                  <FieldSet legend={translate('Quality')}>
-                    <div className={styles.groups}>
-                      {
-                        qualityTokens.map(({ token, example }) => {
-                          return (
-                            <NamingOption
-                              key={token}
-                              name={name}
-                              value={value}
-                              token={token}
-                              example={example}
-                              tokenSeparator={tokenSeparator}
-                              tokenCase={tokenCase}
-                              onPress={this.onOptionPress}
-                            />
-                          );
-                        }
-                        )
-                      }
-                    </div>
-                  </FieldSet>
-
-                  <FieldSet legend={translate('MediaInfo')}>
-                    <div className={styles.groups}>
-                      {
-                        mediaInfoTokens.map(({ token, example, footNote }) => {
-                          return (
-                            <NamingOption
-                              key={token}
-                              name={name}
-                              value={value}
-                              token={token}
-                              example={example}
-                              footNote={footNote}
-                              tokenSeparator={tokenSeparator}
-                              tokenCase={tokenCase}
-                              onPress={this.onOptionPress}
-                            />
-                          );
-                        }
-                        )
-                      }
-                    </div>
-
-                    <div className={styles.footNote}>
-                      <Icon className={styles.icon} name={icons.FOOTNOTE} />
-                      <InlineMarkdown data={translate('MediaInfoFootNote')} />
-                    </div>
-                  </FieldSet>
-
-                  <FieldSet legend={translate('ReleaseGroup')}>
-                    <div className={styles.groups}>
-                      {
-                        releaseGroupTokens.map(({ token, example, footNote }) => {
-                          return (
-                            <NamingOption
-                              key={token}
-                              name={name}
-                              value={value}
-                              token={token}
-                              example={example}
-                              footNote={footNote}
-                              tokenSeparator={tokenSeparator}
-                              tokenCase={tokenCase}
-                              onPress={this.onOptionPress}
-                            />
-                          );
-                        }
-                        )
-                      }
-                    </div>
-
-                    <div className={styles.footNote}>
-                      <Icon className={styles.icon} name={icons.FOOTNOTE} />
-                      <InlineMarkdown data={translate('ReleaseGroupFootNote')} />
-                    </div>
-                  </FieldSet>
-
-                  <FieldSet legend={translate('Edition')}>
-                    <div className={styles.groups}>
-                      {
-                        editionTokens.map(({ token, example, footNote }) => {
-                          return (
-                            <NamingOption
-                              key={token}
-                              name={name}
-                              value={value}
-                              token={token}
-                              example={example}
-                              footNote={footNote}
-                              tokenSeparator={tokenSeparator}
-                              tokenCase={tokenCase}
-                              onPress={this.onOptionPress}
-                            />
-                          );
-                        }
-                        )
-                      }
-                    </div>
-
-                    <div className={styles.footNote}>
-                      <Icon className={styles.icon} name={icons.FOOTNOTE} />
-                      <InlineMarkdown data={translate('EditionFootNote')} />
-                    </div>
-                  </FieldSet>
-
-                  <FieldSet legend={translate('CustomFormats')}>
-                    <div className={styles.groups}>
-                      {
-                        customFormatTokens.map(({ token, example }) => {
-                          return (
-                            <NamingOption
-                              key={token}
-                              name={name}
-                              value={value}
-                              token={token}
-                              example={example}
-                              tokenSeparator={tokenSeparator}
-                              tokenCase={tokenCase}
-                              onPress={this.onOptionPress}
-                            />
-                          );
-                        }
-                        )
-                      }
-                    </div>
-                  </FieldSet>
-
-                  <FieldSet legend={translate('Original')}>
-                    <div className={styles.groups}>
-                      {
-                        originalTokens.map(({ token, example }) => {
-                          return (
-                            <NamingOption
-                              key={token}
-                              name={name}
-                              value={value}
-                              token={token}
-                              example={example}
-                              tokenSeparator={tokenSeparator}
-                              tokenCase={tokenCase}
-                              size={sizes.LARGE}
-                              onPress={this.onOptionPress}
-                            />
-                          );
-                        }
-                        )
-                      }
-                    </div>
-                  </FieldSet>
-                </div>
-            }
-          </ModalBody>
-
-          <ModalFooter>
-            <TextInput
-              name={name}
-              value={value}
-              onChange={onInputChange}
-              onSelectionChange={this.onInputSelectionChange}
-            />
-            <Button onPress={onModalClose}>
-              {translate('Close')}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    );
-  }
-}
-
-NamingModal.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  advancedSettings: PropTypes.bool.isRequired,
-  additional: PropTypes.bool.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-NamingModal.defaultProps = {
-  additional: false
-};
-
-export default NamingModal;

frontend/src/Settings/MediaManagement/Naming/NamingModal.tsx

@@ -0,0 +1,457 @@
+import React, { useCallback, useState } from 'react';
+import FieldSet from 'Components/FieldSet';
+import SelectInput from 'Components/Form/SelectInput';
+import TextInput from 'Components/Form/TextInput';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import Modal from 'Components/Modal/Modal';
+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 { icons, sizes } from 'Helpers/Props';
+import NamingConfig from 'typings/Settings/NamingConfig';
+import translate from 'Utilities/String/translate';
+import NamingOption from './NamingOption';
+import TokenCase from './TokenCase';
+import TokenSeparator from './TokenSeparator';
+import styles from './NamingModal.css';
+
+const separatorOptions: { key: TokenSeparator; value: string }[] = [
+  {
+    key: ' ',
+    get value() {
+      return `${translate('Space')} ( )`;
+    },
+  },
+  {
+    key: '.',
+    get value() {
+      return `${translate('Period')} (.)`;
+    },
+  },
+  {
+    key: '_',
+    get value() {
+      return `${translate('Underscore')} (_)`;
+    },
+  },
+  {
+    key: '-',
+    get value() {
+      return `${translate('Dash')} (-)`;
+    },
+  },
+];
+
+const caseOptions: { key: TokenCase; value: string }[] = [
+  {
+    key: 'title',
+    get value() {
+      return translate('DefaultCase');
+    },
+  },
+  {
+    key: 'lower',
+    get value() {
+      return translate('Lowercase');
+    },
+  },
+  {
+    key: 'upper',
+    get value() {
+      return translate('Uppercase');
+    },
+  },
+];
+
+const fileNameTokens = [
+  {
+    token: '{Movie Title} - {Quality Full}',
+    example: 'Movie Title (2010) - HDTV-720p Proper',
+  },
+];
+
+const movieTokens = [
+  { token: '{Movie Title}', example: "Movie's Title", footNote: true },
+  { token: '{Movie Title:DE}', example: 'Titel des Films', footNote: true },
+  { token: '{Movie CleanTitle}', example: 'Movies Title', footNote: true },
+  {
+    token: '{Movie CleanTitle:DE}',
+    example: 'Titel des Films',
+    footNote: true,
+  },
+  { token: '{Movie TitleThe}', example: "Movie's Title, The", footNote: true },
+  {
+    token: '{Movie CleanTitleThe}',
+    example: 'Movies Title, The',
+    footNote: true,
+  },
+  { token: '{Movie OriginalTitle}', example: 'Τίτλος ταινίας', footNote: true },
+  {
+    token: '{Movie CleanOriginalTitle}',
+    example: 'Τίτλος ταινίας',
+    footNote: true,
+  },
+  { token: '{Movie TitleFirstCharacter}', example: 'M' },
+  { token: '{Movie TitleFirstCharacter:DE}', example: 'T' },
+  {
+    token: '{Movie Collection}',
+    example: 'The Movie Collection',
+    footNote: true,
+  },
+  { token: '{Movie Certification}', example: 'R' },
+  { token: '{Release Year}', example: '2009' },
+];
+
+const movieIdTokens = [
+  { token: '{ImdbId}', example: 'tt12345' },
+  { token: '{TmdbId}', example: '123456' },
+];
+
+const qualityTokens = [
+  { token: '{Quality Full}', example: 'HDTV-720p Proper' },
+  { token: '{Quality Title}', example: 'HDTV-720p' },
+];
+
+const mediaInfoTokens = [
+  { token: '{MediaInfo Simple}', example: 'x264 DTS' },
+  { token: '{MediaInfo Full}', example: 'x264 DTS [EN+DE]', footNote: true },
+
+  { token: '{MediaInfo AudioCodec}', example: 'DTS' },
+  { token: '{MediaInfo AudioChannels}', example: '5.1' },
+  { token: '{MediaInfo AudioLanguages}', example: '[EN+DE]', footNote: true },
+  { token: '{MediaInfo SubtitleLanguages}', example: '[DE]', footNote: true },
+
+  { token: '{MediaInfo VideoCodec}', example: 'x264' },
+  { token: '{MediaInfo VideoBitDepth}', example: '10' },
+  { token: '{MediaInfo VideoDynamicRange}', example: 'HDR' },
+  { token: '{MediaInfo VideoDynamicRangeType}', example: 'DV HDR10' },
+  { token: '{MediaInfo 3D}', example: '3D' },
+];
+
+const releaseGroupTokens = [
+  { token: '{Release Group}', example: 'Rls Grp', footNote: true },
+];
+
+const editionTokens = [
+  { token: '{Edition Tags}', example: 'IMAX', footNote: true },
+];
+
+const customFormatTokens = [
+  { token: '{Custom Formats}', example: 'Surround Sound x264' },
+  { token: '{Custom Format:FormatName}', example: 'AMZN' },
+];
+
+const originalTokens = [
+  { token: '{Original Title}', example: 'Movie.Title.HDTV.x264-EVOLVE' },
+  { token: '{Original Filename}', example: 'movie title hdtv.x264-Evolve' },
+];
+
+interface NamingModalProps {
+  isOpen: boolean;
+  name: keyof Pick<NamingConfig, 'standardMovieFormat' | 'movieFolderFormat'>;
+  value: string;
+  advancedSettings: boolean;
+  movie?: boolean;
+  additional?: boolean;
+  onInputChange: ({ name, value }: { name: string; value: string }) => void;
+  onModalClose: () => void;
+}
+
+function NamingModal(props: NamingModalProps) {
+  const {
+    isOpen,
+    name,
+    value,
+    advancedSettings,
+    movie = false,
+    additional = false,
+    onInputChange,
+    onModalClose,
+  } = props;
+
+  const [tokenSeparator, setTokenSeparator] = useState<TokenSeparator>(' ');
+  const [tokenCase, setTokenCase] = useState<TokenCase>('title');
+  const [selectionStart, setSelectionStart] = useState<number | null>(null);
+  const [selectionEnd, setSelectionEnd] = useState<number | null>(null);
+
+  const handleTokenSeparatorChange = useCallback(
+    ({ value }: { value: TokenSeparator }) => {
+      setTokenSeparator(value);
+    },
+    [setTokenSeparator]
+  );
+
+  const handleTokenCaseChange = useCallback(
+    ({ value }: { value: TokenCase }) => {
+      setTokenCase(value);
+    },
+    [setTokenCase]
+  );
+
+  const handleInputSelectionChange = useCallback(
+    (selectionStart: number, selectionEnd: number) => {
+      setSelectionStart(selectionStart);
+      setSelectionEnd(selectionEnd);
+    },
+    [setSelectionStart, setSelectionEnd]
+  );
+
+  const handleOptionPress = useCallback(
+    ({
+      isFullFilename,
+      tokenValue,
+    }: {
+      isFullFilename: boolean;
+      tokenValue: string;
+    }) => {
+      if (isFullFilename) {
+        onInputChange({ name, value: tokenValue });
+      } else if (selectionStart == null || selectionEnd == null) {
+        onInputChange({
+          name,
+          value: `${value}${tokenValue}`,
+        });
+      } else {
+        const start = value.substring(0, selectionStart);
+        const end = value.substring(selectionEnd);
+        const newValue = `${start}${tokenValue}${end}`;
+
+        onInputChange({ name, value: newValue });
+
+        setSelectionStart(newValue.length - 1);
+        setSelectionEnd(newValue.length - 1);
+      }
+    },
+    [name, value, selectionEnd, selectionStart, onInputChange]
+  );
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {movie ? translate('FileNameTokens') : translate('FolderNameTokens')}
+        </ModalHeader>
+
+        <ModalBody>
+          <div className={styles.namingSelectContainer}>
+            <SelectInput
+              className={styles.namingSelect}
+              name="separator"
+              value={tokenSeparator}
+              values={separatorOptions}
+              onChange={handleTokenSeparatorChange}
+            />
+
+            <SelectInput
+              className={styles.namingSelect}
+              name="case"
+              value={tokenCase}
+              values={caseOptions}
+              onChange={handleTokenCaseChange}
+            />
+          </div>
+
+          {advancedSettings ? null : (
+            <FieldSet legend={translate('FileNames')}>
+              <div className={styles.groups}>
+                {fileNameTokens.map(({ token, example }) => (
+                  <NamingOption
+                    key={token}
+                    token={token}
+                    example={example}
+                    isFullFilename={true}
+                    tokenSeparator={tokenSeparator}
+                    tokenCase={tokenCase}
+                    size={sizes.LARGE}
+                    onPress={handleOptionPress}
+                  />
+                ))}
+              </div>
+            </FieldSet>
+          )}
+
+          <FieldSet legend={translate('Movie')}>
+            <div className={styles.groups}>
+              {movieTokens.map(({ token, example, footNote }) => {
+                return (
+                  <NamingOption
+                    key={token}
+                    token={token}
+                    example={example}
+                    footNote={footNote}
+                    tokenSeparator={tokenSeparator}
+                    tokenCase={tokenCase}
+                    onPress={handleOptionPress}
+                  />
+                );
+              })}
+            </div>
+
+            <div className={styles.footNote}>
+              <Icon className={styles.icon} name={icons.FOOTNOTE} />
+              <InlineMarkdown data={translate('MovieFootNote')} />
+            </div>
+          </FieldSet>
+
+          <FieldSet legend={translate('MovieID')}>
+            <div className={styles.groups}>
+              {movieIdTokens.map(({ token, example }) => {
+                return (
+                  <NamingOption
+                    key={token}
+                    token={token}
+                    example={example}
+                    tokenSeparator={tokenSeparator}
+                    tokenCase={tokenCase}
+                    onPress={handleOptionPress}
+                  />
+                );
+              })}
+            </div>
+          </FieldSet>
+
+          {additional ? (
+            <div>
+              <FieldSet legend={translate('Quality')}>
+                <div className={styles.groups}>
+                  {qualityTokens.map(({ token, example }) => {
+                    return (
+                      <NamingOption
+                        key={token}
+                        token={token}
+                        example={example}
+                        tokenSeparator={tokenSeparator}
+                        tokenCase={tokenCase}
+                        onPress={handleOptionPress}
+                      />
+                    );
+                  })}
+                </div>
+              </FieldSet>
+
+              <FieldSet legend={translate('MediaInfo')}>
+                <div className={styles.groups}>
+                  {mediaInfoTokens.map(({ token, example, footNote }) => {
+                    return (
+                      <NamingOption
+                        key={token}
+                        token={token}
+                        example={example}
+                        footNote={footNote}
+                        tokenSeparator={tokenSeparator}
+                        tokenCase={tokenCase}
+                        onPress={handleOptionPress}
+                      />
+                    );
+                  })}
+                </div>
+
+                <div className={styles.footNote}>
+                  <Icon className={styles.icon} name={icons.FOOTNOTE} />
+                  <InlineMarkdown data={translate('MediaInfoFootNote')} />
+                </div>
+              </FieldSet>
+
+              <FieldSet legend={translate('ReleaseGroup')}>
+                <div className={styles.groups}>
+                  {releaseGroupTokens.map(({ token, example, footNote }) => {
+                    return (
+                      <NamingOption
+                        key={token}
+                        token={token}
+                        example={example}
+                        footNote={footNote}
+                        tokenSeparator={tokenSeparator}
+                        tokenCase={tokenCase}
+                        onPress={handleOptionPress}
+                      />
+                    );
+                  })}
+                </div>
+
+                <div className={styles.footNote}>
+                  <Icon className={styles.icon} name={icons.FOOTNOTE} />
+                  <InlineMarkdown data={translate('ReleaseGroupFootNote')} />
+                </div>
+              </FieldSet>
+
+              <FieldSet legend={translate('Edition')}>
+                <div className={styles.groups}>
+                  {editionTokens.map(({ token, example, footNote }) => {
+                    return (
+                      <NamingOption
+                        key={token}
+                        token={token}
+                        example={example}
+                        footNote={footNote}
+                        tokenSeparator={tokenSeparator}
+                        tokenCase={tokenCase}
+                        onPress={handleOptionPress}
+                      />
+                    );
+                  })}
+                </div>
+
+                <div className={styles.footNote}>
+                  <Icon className={styles.icon} name={icons.FOOTNOTE} />
+                  <InlineMarkdown data={translate('EditionFootNote')} />
+                </div>
+              </FieldSet>
+
+              <FieldSet legend={translate('CustomFormats')}>
+                <div className={styles.groups}>
+                  {customFormatTokens.map(({ token, example }) => {
+                    return (
+                      <NamingOption
+                        key={token}
+                        token={token}
+                        example={example}
+                        tokenSeparator={tokenSeparator}
+                        tokenCase={tokenCase}
+                        onPress={handleOptionPress}
+                      />
+                    );
+                  })}
+                </div>
+              </FieldSet>
+
+              <FieldSet legend={translate('Original')}>
+                <div className={styles.groups}>
+                  {originalTokens.map(({ token, example }) => {
+                    return (
+                      <NamingOption
+                        key={token}
+                        token={token}
+                        example={example}
+                        tokenSeparator={tokenSeparator}
+                        tokenCase={tokenCase}
+                        size={sizes.LARGE}
+                        onPress={handleOptionPress}
+                      />
+                    );
+                  })}
+                </div>
+              </FieldSet>
+            </div>
+          ) : null}
+        </ModalBody>
+
+        <ModalFooter>
+          <TextInput
+            name={name}
+            value={value}
+            onChange={onInputChange}
+            onSelectionChange={handleInputSelectionChange}
+          />
+
+          <Button onPress={onModalClose}>{translate('Close')}</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default NamingModal;

frontend/src/Settings/MediaManagement/Naming/NamingOption.css

@@ -46,6 +46,10 @@
   }
 }
 
+.title {
+  text-transform: none;
+}
+
 .lower {
   text-transform: lowercase;
 }

frontend/src/Settings/MediaManagement/Naming/NamingOption.css.d.ts

@@ -8,6 +8,7 @@ interface CssExports {
   'lower': string;
   'option': string;
   'small': string;
+  'title': string;
   'token': string;
   'upper': string;
 }

frontend/src/Settings/MediaManagement/Naming/NamingOption.js

@@ -1,93 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Icon from 'Components/Icon';
-import Link from 'Components/Link/Link';
-import { icons, sizes } from 'Helpers/Props';
-import styles from './NamingOption.css';
-
-class NamingOption extends Component {
-
-  //
-  // Listeners
-
-  onPress = () => {
-    const {
-      token,
-      tokenSeparator,
-      tokenCase,
-      isFullFilename,
-      onPress
-    } = this.props;
-
-    let tokenValue = token;
-
-    tokenValue = tokenValue.replace(/ /g, tokenSeparator);
-
-    if (tokenCase === 'lower') {
-      tokenValue = token.toLowerCase();
-    } else if (tokenCase === 'upper') {
-      tokenValue = token.toUpperCase();
-    }
-
-    onPress({ isFullFilename, tokenValue });
-  };
-
-  //
-  // Render
-  render() {
-    const {
-      token,
-      tokenSeparator,
-      example,
-      footNote,
-      tokenCase,
-      isFullFilename,
-      size
-    } = this.props;
-
-    return (
-      <Link
-        className={classNames(
-          styles.option,
-          styles[size],
-          styles[tokenCase],
-          isFullFilename && styles.isFullFilename
-        )}
-        onPress={this.onPress}
-      >
-        <div className={styles.token}>
-          {token.replace(/ /g, tokenSeparator)}
-        </div>
-
-        <div className={styles.example}>
-          {example.replace(/ /g, tokenSeparator)}
-
-          {
-            footNote !== 0 &&
-              <Icon className={styles.footNote} name={icons.FOOTNOTE} />
-          }
-        </div>
-      </Link>
-    );
-  }
-}
-
-NamingOption.propTypes = {
-  token: PropTypes.string.isRequired,
-  example: PropTypes.string.isRequired,
-  footNote: PropTypes.number.isRequired,
-  tokenSeparator: PropTypes.string.isRequired,
-  tokenCase: PropTypes.string.isRequired,
-  isFullFilename: PropTypes.bool.isRequired,
-  size: PropTypes.oneOf([sizes.SMALL, sizes.LARGE]),
-  onPress: PropTypes.func.isRequired
-};
-
-NamingOption.defaultProps = {
-  footNote: 0,
-  size: sizes.SMALL,
-  isFullFilename: false
-};
-
-export default NamingOption;

frontend/src/Settings/MediaManagement/Naming/NamingOption.tsx

@@ -0,0 +1,77 @@
+import classNames from 'classnames';
+import React, { useCallback } from 'react';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import { icons } from 'Helpers/Props';
+import { Size } from 'Helpers/Props/sizes';
+import TokenCase from './TokenCase';
+import TokenSeparator from './TokenSeparator';
+import styles from './NamingOption.css';
+
+interface NamingOptionProps {
+  token: string;
+  tokenSeparator: TokenSeparator;
+  example: string;
+  tokenCase: TokenCase;
+  isFullFilename?: boolean;
+  footNote?: boolean;
+  size?: Extract<Size, keyof typeof styles>;
+  onPress: ({
+    isFullFilename,
+    tokenValue,
+  }: {
+    isFullFilename: boolean;
+    tokenValue: string;
+  }) => void;
+}
+
+function NamingOption(props: NamingOptionProps) {
+  const {
+    token,
+    tokenSeparator,
+    example,
+    tokenCase,
+    isFullFilename = false,
+    footNote = false,
+    size = 'small',
+    onPress,
+  } = props;
+
+  const handlePress = useCallback(() => {
+    let tokenValue = token;
+
+    tokenValue = tokenValue.replace(/ /g, tokenSeparator);
+
+    if (tokenCase === 'lower') {
+      tokenValue = token.toLowerCase();
+    } else if (tokenCase === 'upper') {
+      tokenValue = token.toUpperCase();
+    }
+
+    onPress({ isFullFilename, tokenValue });
+  }, [token, tokenCase, tokenSeparator, isFullFilename, onPress]);
+
+  return (
+    <Link
+      className={classNames(
+        styles.option,
+        styles[size],
+        styles[tokenCase],
+        isFullFilename && styles.isFullFilename
+      )}
+      onPress={handlePress}
+    >
+      <div className={styles.token}>{token.replace(/ /g, tokenSeparator)}</div>
+
+      <div className={styles.example}>
+        {example.replace(/ /g, tokenSeparator)}
+
+        {footNote ? (
+          <Icon className={styles.footNote} name={icons.FOOTNOTE} />
+        ) : null}
+      </div>
+    </Link>
+  );
+}
+
+export default NamingOption;

frontend/src/Settings/MediaManagement/Naming/TokenCase.ts

@@ -0,0 +1,3 @@
+type TokenCase = 'title' | 'lower' | 'upper';
+
+export default TokenCase;

frontend/src/Settings/MediaManagement/Naming/TokenSeparator.ts

@@ -0,0 +1,3 @@
+type TokenSeparator = ' ' | '.' | '_' | '-';
+
+export default TokenSeparator;

frontend/src/typings/Settings/NamingConfig.ts

@@ -0,0 +1,14 @@
+type ColonReplacementFormat =
+  | 'delete'
+  | 'dash'
+  | 'spaceDash'
+  | 'spaceDashSpace'
+  | 'smart';
+
+export default interface NamingConfig {
+  renameMovies: boolean;
+  replaceIllegalCharacters: boolean;
+  colonReplacementFormat: ColonReplacementFormat;
+  standardMovieFormat: string;
+  movieFolderFormat: string;
+}

frontend/src/typings/Settings/NamingExample.ts

@@ -0,0 +1,4 @@
+export default interface NamingExample {
+  movieExample: string;
+  movieFolderExample: string;
+}

src/NzbDrone.Core/Localization/Core/en.json

@@ -641,6 +641,7 @@
   "FocusSearchBox": "Focus Search Box",
   "Folder": "Folder",
   "FolderMoveRenameWarning": "This will also rename the movie folder per the movie folder format in settings.",
+  "FolderNameTokens": "Folder Name Tokens",
   "Folders": "Folders",
   "FollowPerson": "Follow Person",
   "Forecast": "Forecast",