version bump to 6.1.1

Co-authored-by: Bogdan <mynameisbogdan@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -2,7 +2,7 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
 {
   "name": "Radarr",
-  "image": "mcr.microsoft.com/devcontainers/dotnet:1-6.0",
+  "image": "mcr.microsoft.com/devcontainers/dotnet:1-8.0",
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       "nodeGypDependencies": true,

.gitignore

@@ -165,15 +165,12 @@ Thumbs.db
 /tools/Addins/*
 packages.config.md5sum
 
-
-# Common IntelliJ Platform excludes
-
-# Ignore Rider projects completely for now
-.idea/
-
 # ignore node_modules symlink
 node_modules
 node_modules.nosync
 
 # API doc generation
 .config/
+
+# Ignore Jetbrains IntelliJ Workspace Directories
+.idea/

.vscode/launch.json

@@ -10,7 +10,7 @@
       "request": "launch",
       "preLaunchTask": "build dotnet",
       // If you have changed target frameworks, make sure to update the program path.
-      "program": "${workspaceFolder}/_output/net6.0/Radarr",
+      "program": "${workspaceFolder}/_output/net8.0/Radarr",
       "args": [],
       "cwd": "${workspaceFolder}",
       // For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console

CONTRIBUTING.md

@@ -1,13 +1,186 @@
+
 # How to Contribute
 
 We're always looking for people to help make Radarr even better, there are a number of ways to contribute.
 
-This file has been moved to the wiki for the latest details please see the [contributing wiki page](https://wiki.servarr.com/radarr/contributing).
+# Documentation
 
-## Documentation
+Setup guides, [FAQ](/radarr/faq), the more information we have on the [wiki](https://wiki.servarr.com/radarr) the better.
 
-Setup guides, [FAQ](https://wiki.servarr.com/radarr/faq), the more information we have on the [wiki](https://wiki.servarr.com/radarr) the better.
+# Development
 
-## Development
+Radarr is written in C# (backend) and JS (frontend). The backend is built on the .NET6 (and _soon_ .NET8) framework, while the frontend utilizes Reactjs.
 
-See the [Wiki Page](https://wiki.servarr.com/radarr/contributing)
+## Tools required
+
+- Visual Studio 2022 or higher is recommended (<https://www.visualstudio.com/vs/>). The community version is free and works (<https://www.visualstudio.com/downloads/>).
+
+> VS 2022 V17.0 or higher is recommended as it includes the .NET6 SDK
+{.is-info}
+
+- HTML/Javascript editor of choice (VS Code/Sublime Text/Webstorm/Atom/etc)
+- [Git](https://git-scm.com/downloads)
+- The [Node.js](https://nodejs.org/) runtime is required. The following versions are supported:
+  - **20** (any minor or patch version within this)
+{.grid-list}
+
+> The Application will **NOT** run on older versions such as `18.x`, `16.x` or any version below 20.0! Due to a dependency issue, it will also not run on `21.x` and is untested on other verisons.
+{.is-warning}
+
+- [Yarn](https://yarnpkg.com/getting-started/install) is required to build the frontend
+  - Yarn is included with **Node 20**+ by default. Enable it with `corepack enable`
+  - For other Node versions, install it with `npm i -g corepack`
+
+## Getting started
+
+1. Fork Radarr
+1. Clone the repository into your development machine. [*info*](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
+
+> Be sure to run lint `yarn lint --fix` on your code for any front end changes before committing.
+For css changes `yarn stylelint-windows --fix` {.is-info}
+
+### Building the frontend
+
+- Navigate to the cloned directory
+- Install the required Node Packages
+
+     ```bash
+     yarn install
+     ```
+
+- Start webpack to monitor your development environment for any changes that need post processing using:
+
+     ```bash
+     yarn start
+     ```
+
+### Building the Backend
+
+The backend solution is most easily built and ran in Visual Studio or Rider, however if the only priority is working on the frontend UI it can be built easily from command line as well when the correct SDK is installed.
+
+#### Visual Studio
+
+> Ensure startup project is set to `Radarr.Console` and framework to `net6.0`
+{.is-info}
+
+1. First `Build` the solution in Visual Studio, this will ensure all projects are correctly built and dependencies restored
+1. Next `Debug/Run` the project in Visual Studio to start Radarr
+1. Open <http://localhost:7878>
+
+#### Command line
+
+1. Clean solution
+
+```shell
+dotnet clean src/Radarr.sln -c Debug
+```
+
+1. Restore and Build debug configuration for the correct platform (Posix or Windows)
+
+```shell
+dotnet msbuild -restore src/Radarr.sln -p:Configuration=Debug -p:Platform=Posix -t:PublishAllRids
+```
+
+1. Run the produced executable from `/_output`
+
+## Contributing Code
+
+- If you're adding a new, already requested feature, please comment on [GitHub Issues](https://github.com/Radarr/Radarr/issues) so work is not duplicated (If you want to add something not already on there, please talk to us first)
+- Rebase from Radarr's develop branch, do not merge
+- Make meaningful commits, or squash them
+- Feel free to make a pull request before work is complete, this will let us see where its at and make comments/suggest improvements
+- Reach out to us on the discord if you have any questions
+- Add tests (unit/integration)
+- Commit with \*nix line endings for consistency (We checkout Windows and commit \*nix)
+- One feature/bug fix per pull request to keep things clean and easy to understand
+- Use 4 spaces instead of tabs, this is the default for VS 2022 and WebStorm
+
+## Pull Requesting
+
+- Only make pull requests to `develop`, never `master`, if you make a PR to `master` we will comment on it and close it
+- You're probably going to get some comments or questions from us, they will be to ensure consistency and maintainability
+- We'll try to respond to pull requests as soon as possible, if its been a day or two, please reach out to us, we may have missed it
+- Each PR should come from its own [feature branch](http://martinfowler.com/bliki/FeatureBranch.html) not develop in your fork, it should have a meaningful branch name (what is being added/fixed)
+  - `new-feature` (Good)
+  - `fix-bug` (Good)
+  - `patch` (Bad)
+  - `develop` (Bad)
+- Commits should be wrote as `New:` or `Fixed:` for changes that would not be considered a `maintenance release`
+
+## Unit Testing
+
+Radarr utilizes nunit for its unit, integration, and automation test suite.
+
+### Running Tests
+
+Tests can be run easily from within VS using the included nunit3testadapter nuget package or from the command line using the included bash script `test.sh`.
+
+From VS simply navigate to Test Explorer and run or debug the tests you'd like to examine.
+
+Tests can be run all at once or one at a time in VS.
+
+From command line the `test.sh` script accepts 3 parameters
+
+```bash
+test.sh <PLATFORM> <TYPE> <COVERAGE>
+```
+
+### Writing Tests
+
+While not always fun, we encourage writing unit tests for any backend code changes. This will ensure the change is functioning as you intended and that future changes dont break the expected behavior.
+
+> We currently require 80% coverage on new code when submitting a PR
+{.is-info}
+
+If you have any questions about any of this, please let us know.
+
+# Translation
+
+Radarr uses a self hosted open access [Weblate](https://translate.servarr.com) instance to manage its json translation files. These files are stored in the repo at `src/NzbDrone.Core/Localization`
+
+## Contributing to an Existing Translation
+
+Weblate handles synchronization and translation of strings for all languages other than English. Editing of translated strings and translating existing strings for supported languages should be performed there for the Radarr project.
+
+The English translation, `en.json`, serves as the source for all other translations and is managed on GitHub repo.
+
+## Adding a Language
+
+Adding translations to Radarr requires two steps
+
+- Adding the Language to weblate
+- Adding the Language to Radarr codebase
+
+## Adding Translation Strings in Code
+
+The English translation, `src/NzbDrone.Core/Localization/en.json`, serves as the source for all other translations and is managed on GitHub repo. When adding a new string to either the UI or backend a key must also be added to `en.json` along with the default value in English. This key may then be consumed as follows:
+
+> PRs for translation of log messages will not be accepted
+{.is-warning}
+
+### Backend Strings
+
+Backend strings may be added utilizing the Localization Service `GetLocalizedString` method
+
+```dotnet
+private readonly ILocalizationService _localizationService;
+
+public IndexerCheck(ILocalizationService localizationService)
+{
+  _localizationService = localizationService;
+}
+        
+var translated = _localizationService.GetLocalizedString("IndexerHealthCheckNoIndexers")
+```
+
+### Frontend Strings
+
+New strings can be added to the frontend by importing the translate function and using a key specified from `en.json`
+
+```js
+import translate from 'Utilities/String/translate';
+
+<div>
+  {translate('UnableToAddANewIndexerPleaseTryAgain')}
+</div>
+```

azure-pipelines.yml

@@ -9,18 +9,18 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '5.26.0'
+  majorVersion: '6.1.1'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.427'
+  dotnetVersion: '8.0.405'
   nodeVersion: '20.X'
   innoVersion: '6.2.2'
-  windowsImage: 'windows-2022'
-  linuxImage: 'ubuntu-22.04'
-  macImage: 'macOS-13'
+  windowsImage: 'windows-2025'
+  linuxImage: 'ubuntu-24.04'
+  macImage: 'macOS-15'
 
 trigger:
   branches:
@@ -106,7 +106,7 @@ stages:
             echo "Extra platforms already enabled"
           else
             echo "Enabling extra platform support"
-            sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64;linux-x86/' $BUNDLEDVERSIONS
+            sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64/' "$BUNDLEDVERSIONS"
           fi
         displayName: Enable Extra Platform Support
       - bash: ./build.sh --backend --enable-extra-platforms
@@ -122,27 +122,23 @@ stages:
         artifact: '$(osName)Backend'
         displayName: Publish Backend
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net6.0/win-x64/publish'
+      - publish: '$(testsFolder)/net8.0/win-x64/publish'
         artifact: win-x64-tests
         displayName: Publish win-x64 Test Package
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net6.0/linux-x64/publish'
+      - publish: '$(testsFolder)/net8.0/linux-x64/publish'
         artifact: linux-x64-tests
         displayName: Publish linux-x64 Test Package
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net6.0/linux-x86/publish'
-        artifact: linux-x86-tests
-        displayName: Publish linux-x86 Test Package
-        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net6.0/linux-musl-x64/publish'
+      - publish: '$(testsFolder)/net8.0/linux-musl-x64/publish'
         artifact: linux-musl-x64-tests
         displayName: Publish linux-musl-x64 Test Package
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net6.0/freebsd-x64/publish'
+      - publish: '$(testsFolder)/net8.0/freebsd-x64/publish'
         artifact: freebsd-x64-tests
         displayName: Publish freebsd-x64 Test Package
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net6.0/osx-x64/publish'
+      - publish: '$(testsFolder)/net8.0/osx-x64/publish'
         artifact: osx-x64-tests
         displayName: Publish osx-x64 Test Package
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
@@ -189,7 +185,7 @@ stages:
         artifact: '$(osName)Frontend'
         displayName: Publish Frontend
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-        
+
   - stage: Installer
     dependsOn:
     - Build_Backend
@@ -260,21 +256,21 @@ stages:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).windows-core-x64.zip'
           archiveType: 'zip'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/win-x64/net6.0
+          rootFolderOrFile: $(artifactsFolder)/win-x64/net8.0
       - task: ArchiveFiles@2
         displayName: Create win-x86 zip
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).windows-core-x86.zip'
           archiveType: 'zip'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/win-x86/net6.0
+          rootFolderOrFile: $(artifactsFolder)/win-x86/net8.0
       - task: ArchiveFiles@2
         displayName: Create osx-x64 app
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-app-core-x64.zip'
           archiveType: 'zip'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/osx-x64-app/net6.0
+          rootFolderOrFile: $(artifactsFolder)/osx-x64-app/net8.0
       - task: ArchiveFiles@2
         displayName: Create osx-x64 tar
         inputs:
@@ -282,14 +278,14 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/osx-x64/net6.0
+          rootFolderOrFile: $(artifactsFolder)/osx-x64/net8.0
       - task: ArchiveFiles@2
         displayName: Create osx-arm64 app
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-app-core-arm64.zip'
           archiveType: 'zip'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/osx-arm64-app/net6.0
+          rootFolderOrFile: $(artifactsFolder)/osx-arm64-app/net8.0
       - task: ArchiveFiles@2
         displayName: Create osx-arm64 tar
         inputs:
@@ -297,7 +293,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/osx-arm64/net6.0
+          rootFolderOrFile: $(artifactsFolder)/osx-arm64/net8.0
       - task: ArchiveFiles@2
         displayName: Create linux-x64 tar
         inputs:
@@ -305,7 +301,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-x64/net6.0
+          rootFolderOrFile: $(artifactsFolder)/linux-x64/net8.0
       - task: ArchiveFiles@2
         displayName: Create linux-musl-x64 tar
         inputs:
@@ -313,15 +309,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-musl-x64/net6.0
-      - task: ArchiveFiles@2
-        displayName: Create linux-x86 tar
-        inputs:
-          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-x86.tar.gz'
-          archiveType: 'tar'
-          tarCompression: 'gz'
-          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-x86/net6.0
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-x64/net8.0
       - task: ArchiveFiles@2
         displayName: Create linux-arm tar
         inputs:
@@ -329,7 +317,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-arm/net6.0
+          rootFolderOrFile: $(artifactsFolder)/linux-arm/net8.0
       - task: ArchiveFiles@2
         displayName: Create linux-musl-arm tar
         inputs:
@@ -337,7 +325,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm/net6.0
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm/net8.0
       - task: ArchiveFiles@2
         displayName: Create linux-arm64 tar
         inputs:
@@ -345,7 +333,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-arm64/net6.0
+          rootFolderOrFile: $(artifactsFolder)/linux-arm64/net8.0
       - task: ArchiveFiles@2
         displayName: Create linux-musl-arm64 tar
         inputs:
@@ -353,7 +341,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/net6.0
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/net8.0
       - task: ArchiveFiles@2
         displayName: Create freebsd-x64 tar
         inputs:
@@ -361,7 +349,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/freebsd-x64/net6.0
+          rootFolderOrFile: $(artifactsFolder)/freebsd-x64/net8.0
       - publish: $(Build.ArtifactStagingDirectory)
         artifact: 'Packages'
         displayName: Publish Packages
@@ -392,7 +380,7 @@ stages:
           SENTRY_AUTH_TOKEN: $(sentryAuthTokenServarr)
           SENTRY_ORG: $(sentryOrg)
           SENTRY_URL: $(sentryUrl)
-    
+
   - stage: Unit_Test
     displayName: Unit Tests
     dependsOn: Build_Backend
@@ -493,29 +481,19 @@ stages:
             testName: 'Musl Net Core'
             artifactName: linux-musl-x64-tests
             containerImage: ghcr.io/servarr/testimages:alpine
-          linux-x86:
-            testName: 'linux-x86'
-            artifactName: linux-x86-tests
-            containerImage: ghcr.io/servarr/testimages:linux-x86
 
       pool:
         vmImage: ${{ variables.linuxImage }}
-      
+
       container: $[ variables['containerImage'] ]
 
       timeoutInMinutes: 10
-        
+
       steps:
       - task: UseDotNet@2
         displayName: 'Install .NET'
         inputs:
           version: $(dotnetVersion)
-        condition: and(succeeded(), ne(variables['testName'], 'linux-x86'))
-      - bash: |
-          SDKURL=$(curl -s https://api.github.com/repos/Servarr/dotnet-linux-x86/releases | jq -rc '.[].assets[].browser_download_url' | grep sdk-${DOTNETVERSION}.*gz$)
-          curl -fsSL $SDKURL | tar xzf - -C /opt/dotnet
-        displayName: 'Install .NET'
-        condition: and(succeeded(), eq(variables['testName'], 'linux-x86'))
       - checkout: none
       - task: DownloadPipelineArtifact@2
         displayName: Download Test Artifact
@@ -559,7 +537,7 @@ stages:
         vmImage: ${{ variables.linuxImage }}
 
       timeoutInMinutes: 10
-        
+
       steps:
       - task: UseDotNet@2
         displayName: 'Install .net core'
@@ -611,12 +589,12 @@ stages:
         Radarr__Postgres__Port: '5432'
         Radarr__Postgres__User: 'radarr'
         Radarr__Postgres__Password: 'radarr'
-  
+
       pool:
         vmImage: ${{ variables.linuxImage }}
 
       timeoutInMinutes: 10
-        
+
       steps:
       - task: UseDotNet@2
         displayName: 'Install .net core'
@@ -699,7 +677,7 @@ stages:
 
       pool:
         vmImage: $(imageName)
-        
+
       steps:
       - task: UseDotNet@2
         displayName: 'Install .net core'
@@ -721,7 +699,7 @@ stages:
           targetPath: $(Build.ArtifactStagingDirectory)
       - task: ExtractFiles@1
         inputs:
-          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)'
           destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
         displayName: Extract Package
       - bash: |
@@ -776,7 +754,7 @@ stages:
             targetPath: $(Build.ArtifactStagingDirectory)
         - task: ExtractFiles@1
           inputs:
-            archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+            archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)'
             destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
           displayName: Extract Package
         - bash: |
@@ -840,7 +818,7 @@ stages:
             targetPath: $(Build.ArtifactStagingDirectory)
         - task: ExtractFiles@1
           inputs:
-            archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+            archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)'
             destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
           displayName: Extract Package
         - bash: |
@@ -926,29 +904,18 @@ stages:
             artifactName: linux-musl-x64-tests
             containerImage: ghcr.io/servarr/testimages:alpine
             pattern: 'Radarr.*.linux-musl-core-x64.tar.gz'
-          linux-x86:
-            testName: 'linux-x86'
-            artifactName: linux-x86-tests
-            containerImage: ghcr.io/servarr/testimages:linux-x86
-            pattern: 'Radarr.*.linux-core-x86.tar.gz'
       pool:
         vmImage: ${{ variables.linuxImage }}
 
       container: $[ variables['containerImage'] ]
 
       timeoutInMinutes: 15
-        
+
       steps:
       - task: UseDotNet@2
         displayName: 'Install .NET'
         inputs:
           version: $(dotnetVersion)
-        condition: and(succeeded(), ne(variables['testName'], 'linux-x86'))
-      - bash: |
-          SDKURL=$(curl -s https://api.github.com/repos/Servarr/dotnet-linux-x86/releases | jq -rc '.[].assets[].browser_download_url' | grep sdk-${DOTNETVERSION}.*gz$)
-          curl -fsSL $SDKURL | tar xzf - -C /opt/dotnet
-        displayName: 'Install .NET'
-        condition: and(succeeded(), eq(variables['testName'], 'linux-x86'))
       - checkout: none
       - task: DownloadPipelineArtifact@2
         displayName: Download Test Artifact
@@ -965,7 +932,7 @@ stages:
           targetPath: $(Build.ArtifactStagingDirectory)
       - task: ExtractFiles@1
         inputs:
-          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)'
           destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
         displayName: Extract Package
       - bash: |
@@ -988,7 +955,7 @@ stages:
   - stage: Automation
     displayName: Automation
     dependsOn: Packages
-    
+
     jobs:
     - job: Automation
       strategy:
@@ -1014,7 +981,7 @@ stages:
 
       pool:
         vmImage: $(imageName)
-        
+
       steps:
       - task: UseDotNet@2
         displayName: 'Install .net core'
@@ -1036,7 +1003,7 @@ stages:
           targetPath: $(Build.ArtifactStagingDirectory)
       - task: ExtractFiles@1
         inputs:
-          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)'
           destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
         displayName: Extract Package
       - bash: |
@@ -1161,7 +1128,7 @@ stages:
       - checkout: self
         submodules: true
         persistCredentials: true
-        fetchDepth: 1    
+        fetchDepth: 1
       - bash: ./docs.sh Windows
         displayName: Create openapi.json
       - bash: |
@@ -1227,22 +1194,23 @@ stages:
           extraProperties: |
             sonar.exclusions=**/obj/**,**/*.dll,**/NzbDrone.Core.Test/Files/**/*,./frontend/**,**/ExternalModules/**,./src/Libraries/**
             sonar.coverage.exclusions=**/Radarr.Api.V3/**/*
-            sonar.cs.opencover.reportsPaths=$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml
+            sonar.cs.cobertura.reportsPaths=$(Build.SourcesDirectory)/CoverageResults/**/coverage.cobertura.xml
             sonar.cs.nunit.reportsPaths=$(Build.SourcesDirectory)/TestResult.xml
       - bash: |
-          ./build.sh --backend -f net6.0 -r win-x64
-          TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
+          ./build.sh --backend -f net8.0 -r win-x64
+          TEST_DIR=_tests/net8.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
       - task: SonarCloudAnalyze@3
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@5.3.11
+      - task: reportgenerator@5
         displayName: Generate Coverage Report
         inputs:
-          reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
+          reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.cobertura.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
           publishCodeCoverageResults: true
+          sourcedirs: src
 
   - stage: Report_Out
     dependsOn:
@@ -1274,4 +1242,3 @@ stages:
             DISCORDCHANNELID: $(discordChannelId)
             DISCORDWEBHOOKKEY: $(discordWebhookKey)
             DISCORDTHREADID: $(discordThreadId)
-

build.sh

@@ -33,14 +33,14 @@ EnableExtraPlatformsInSDK()
         echo "Extra platforms already enabled"
     else
         echo "Enabling extra platform support"
-        sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64;linux-x86/' $BUNDLEDVERSIONS
+        sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64/' "$BUNDLEDVERSIONS"
     fi
 }
 
 EnableExtraPlatforms()
 {
     if grep -qv freebsd-x64 src/Directory.Build.props; then
-        sed -i'' -e "s^<RuntimeIdentifiers>\(.*\)</RuntimeIdentifiers>^<RuntimeIdentifiers>\1;freebsd-x64;linux-x86</RuntimeIdentifiers>^g" src/Directory.Build.props
+        sed -i'' -e "s^<RuntimeIdentifiers>\(.*\)</RuntimeIdentifiers>^<RuntimeIdentifiers>\1;freebsd-x64</RuntimeIdentifiers>^g" src/Directory.Build.props
     fi
 }
 
@@ -79,9 +79,9 @@ Build()
 
     if [[ -z "$RID" || -z "$FRAMEWORK" ]];
     then
-        dotnet msbuild -restore $slnFile -p:Configuration=Release -p:Platform=$platform -t:PublishAllRids
+        dotnet msbuild -restore $slnFile -p:SelfContained=True -p:Configuration=Release -p:Platform=$platform -t:PublishAllRids
     else
-        dotnet msbuild -restore $slnFile -p:Configuration=Release -p:Platform=$platform -p:RuntimeIdentifiers=$RID -t:PublishAllRids
+        dotnet msbuild -restore $slnFile -p:SelfContained=True -p:Configuration=Release -p:Platform=$platform -p:RuntimeIdentifiers=$RID -t:PublishAllRids
     fi
 
     ProgressEnd 'Build'
@@ -137,7 +137,7 @@ PackageLinux()
 
     echo "Adding Radarr.Mono to UpdatePackage"
     cp $folder/Radarr.Mono.* $folder/Radarr.Update
-    if [ "$framework" = "net6.0" ]; then
+    if [ "$framework" = "net8.0" ]; then
         cp $folder/Mono.Posix.NETStandard.* $folder/Radarr.Update
         cp $folder/libMonoPosixHelper.* $folder/Radarr.Update
     fi
@@ -165,7 +165,7 @@ PackageMacOS()
 
     echo "Adding Radarr.Mono to UpdatePackage"
     cp $folder/Radarr.Mono.* $folder/Radarr.Update
-    if [ "$framework" = "net6.0" ]; then
+    if [ "$framework" = "net8.0" ]; then
         cp $folder/Mono.Posix.NETStandard.* $folder/Radarr.Update
         cp $folder/libMonoPosixHelper.* $folder/Radarr.Update
     fi
@@ -377,15 +377,14 @@ then
     Build
     if [[ -z "$RID" || -z "$FRAMEWORK" ]];
     then
-        PackageTests "net6.0" "win-x64"
-        PackageTests "net6.0" "win-x86"
-        PackageTests "net6.0" "linux-x64"
-        PackageTests "net6.0" "linux-musl-x64"
-        PackageTests "net6.0" "osx-x64"
+        PackageTests "net8.0" "win-x64"
+        PackageTests "net8.0" "win-x86"
+        PackageTests "net8.0" "linux-x64"
+        PackageTests "net8.0" "linux-musl-x64"
+        PackageTests "net8.0" "osx-x64"
         if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
         then
-            PackageTests "net6.0" "freebsd-x64"
-            PackageTests "net6.0" "linux-x86"
+            PackageTests "net8.0" "freebsd-x64"
         fi
     else
         PackageTests "$FRAMEWORK" "$RID"
@@ -413,20 +412,19 @@ then
 
     if [[ -z "$RID" || -z "$FRAMEWORK" ]];
     then
-        Package "net6.0" "win-x64"
-        Package "net6.0" "win-x86"
-        Package "net6.0" "linux-x64"
-        Package "net6.0" "linux-musl-x64"
-        Package "net6.0" "linux-arm64"
-        Package "net6.0" "linux-musl-arm64"
-        Package "net6.0" "linux-arm"
-        Package "net6.0" "linux-musl-arm"
-        Package "net6.0" "osx-x64"
-        Package "net6.0" "osx-arm64"
+        Package "net8.0" "win-x64"
+        Package "net8.0" "win-x86"
+        Package "net8.0" "linux-x64"
+        Package "net8.0" "linux-musl-x64"
+        Package "net8.0" "linux-arm64"
+        Package "net8.0" "linux-musl-arm64"
+        Package "net8.0" "linux-arm"
+        Package "net8.0" "linux-musl-arm"
+        Package "net8.0" "osx-x64"
+        Package "net8.0" "osx-arm64"
         if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
         then
-            Package "net6.0" "freebsd-x64"
-            Package "net6.0" "linux-x86"
+            Package "net8.0" "freebsd-x64"
         fi
     else
         Package "$FRAMEWORK" "$RID"
@@ -436,7 +434,7 @@ fi
 if [ "$INSTALLER" = "YES" ];
 then
     InstallInno
-    BuildInstaller "net6.0" "win-x64"
-    BuildInstaller "net6.0" "win-x86"
+    BuildInstaller "net8.0" "win-x64"
+    BuildInstaller "net8.0" "win-x86"
     RemoveInno
 fi

docs.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 set -e
 
-FRAMEWORK="net6.0"
+FRAMEWORK="net8.0"
 PLATFORM=$1
 ARCHITECTURE="${2:-x64}"
 
@@ -38,7 +38,7 @@ dotnet clean $slnFile -c Release
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 8.1.4 Swashbuckle.AspNetCore.Cli
 
 dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v3 &
 

frontend/src/Activity/Blocklist/BlocklistDetailsModal.tsx

@@ -26,7 +26,7 @@ function BlocklistDetailsModal(props: BlocklistDetailsModalProps) {
   return (
     <Modal isOpen={isOpen} onModalClose={onModalClose}>
       <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>Details</ModalHeader>
+        <ModalHeader>{translate('Details')}</ModalHeader>
 
         <ModalBody>
           <DescriptionList>

frontend/src/Activity/Queue/Queue.tsx

@@ -304,7 +304,7 @@ function Queue() {
       <PageToolbar>
         <PageToolbarSection>
           <PageToolbarButton
-            label="Refresh"
+            label={translate('Refresh')}
             iconName={icons.REFRESH}
             isSpinning={isRefreshing}
             onPress={handleRefreshPress}

frontend/src/Activity/Queue/QueueStatus.tsx

@@ -90,7 +90,7 @@ function QueueStatus(props: QueueStatusProps) {
 
     if (trackedDownloadState === 'importing') {
       title += ` - ${translate('Importing')}`;
-      iconKind = kinds.PURPLE;
+      iconKind = kinds.PRIMARY;
     }
 
     if (trackedDownloadState === 'failedPending') {

frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js

@@ -108,7 +108,7 @@ class ImportMovie extends Component {
           {
             !rootFoldersFetching && !!rootFoldersError ?
               <Alert kind={kinds.DANGER}>
-                {translate('UnableToLoadRootFolders')}
+                {translate('RootFoldersLoadError')}
               </Alert> :
               null
           }

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -93,7 +93,7 @@ class ImportMovieSelectFolder extends Component {
           {
             !isFetching && error ?
               <Alert kind={kinds.DANGER}>
-                {translate('UnableToLoadRootFolders')}
+                {translate('RootFoldersLoadError')}
               </Alert> :
               null
           }

frontend/src/App/AppRoutes.tsx

@@ -15,9 +15,9 @@ import MovieIndex from 'Movie/Index/MovieIndex';
 import CustomFormatSettingsPage from 'Settings/CustomFormats/CustomFormatSettingsPage';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
-import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
-import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
-import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
+import ImportListSettings from 'Settings/ImportLists/ImportListSettings';
+import IndexerSettings from 'Settings/Indexers/IndexerSettings';
+import MediaManagement from 'Settings/MediaManagement/MediaManagement';
 import MetadataSettings from 'Settings/Metadata/MetadataSettings';
 import NotificationSettings from 'Settings/Notifications/NotificationSettings';
 import Profiles from 'Settings/Profiles/Profiles';
@@ -99,10 +99,7 @@ function AppRoutes() {
 
       <Route exact={true} path="/settings" component={Settings} />
 
-      <Route
-        path="/settings/mediamanagement"
-        component={MediaManagementConnector}
-      />
+      <Route path="/settings/mediamanagement" component={MediaManagement} />
 
       <Route path="/settings/profiles" component={Profiles} />
 
@@ -113,17 +110,14 @@ function AppRoutes() {
         component={CustomFormatSettingsPage}
       />
 
-      <Route path="/settings/indexers" component={IndexerSettingsConnector} />
+      <Route path="/settings/indexers" component={IndexerSettings} />
 
       <Route
         path="/settings/downloadclients"
         component={DownloadClientSettingsConnector}
       />
 
-      <Route
-        path="/settings/importlists"
-        component={ImportListSettingsConnector}
-      />
+      <Route path="/settings/importlists" component={ImportListSettings} />
 
       <Route path="/settings/connect" component={NotificationSettings} />
 

frontend/src/App/State/AppSectionState.ts

@@ -43,9 +43,15 @@ export interface AppSectionSchemaState<T> {
   isSchemaFetching: boolean;
   isSchemaPopulated: boolean;
   schemaError: Error;
-  schema: {
-    items: T[];
-  };
+  schema: T[];
+  selectedSchema?: T;
+}
+
+export interface AppSectionItemSchemaState<T> {
+  isSchemaFetching: boolean;
+  isSchemaPopulated: boolean;
+  schemaError: Error;
+  schema: T;
 }
 
 export interface AppSectionItemState<T> {
@@ -61,9 +67,10 @@ export interface AppSectionProviderState<T>
     AppSectionSaveState {
   isFetching: boolean;
   isPopulated: boolean;
+  isTesting?: boolean;
   error: Error;
   items: T[];
-  pendingChanges: Partial<T>;
+  pendingChanges?: Partial<T>;
 }
 
 interface AppSectionState<T> {

frontend/src/App/State/SettingsAppState.ts

@@ -1,12 +1,15 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionItemSchemaState,
   AppSectionItemState,
   AppSectionSaveState,
   AppSectionSchemaState,
   PagedAppSectionState,
 } from 'App/State/AppSectionState';
 import Language from 'Language/Language';
+import AutoTagging, { AutoTaggingSpecification } from 'typings/AutoTagging';
 import CustomFormat from 'typings/CustomFormat';
+import DelayProfile from 'typings/DelayProfile';
 import DownloadClient from 'typings/DownloadClient';
 import ImportList from 'typings/ImportList';
 import ImportListExclusion from 'typings/ImportListExclusion';
@@ -16,12 +19,34 @@ import IndexerFlag from 'typings/IndexerFlag';
 import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
 import General from 'typings/Settings/General';
+import IndexerOptions from 'typings/Settings/IndexerOptions';
+import MediaManagement from 'typings/Settings/MediaManagement';
 import NamingConfig from 'typings/Settings/NamingConfig';
 import NamingExample from 'typings/Settings/NamingExample';
 import ReleaseProfile from 'typings/Settings/ReleaseProfile';
 import UiSettings from 'typings/Settings/UiSettings';
 import MetadataAppState from './MetadataAppState';
 
+type Presets<T> = T & {
+  presets: T[];
+};
+
+export interface AutoTaggingAppState
+  extends AppSectionState<AutoTagging>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface AutoTaggingSpecificationAppState
+  extends AppSectionState<AutoTaggingSpecification>,
+    AppSectionDeleteState,
+    AppSectionSaveState,
+    AppSectionSchemaState<AutoTaggingSpecification> {}
+
+export interface DelayProfileAppState
+  extends AppSectionState<DelayProfile>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
     AppSectionDeleteState,
@@ -33,6 +58,10 @@ export interface GeneralAppState
   extends AppSectionItemState<General>,
     AppSectionSaveState {}
 
+export interface MediaManagementAppState
+  extends AppSectionItemState<MediaManagement>,
+    AppSectionSaveState {}
+
 export interface NamingAppState
   extends AppSectionItemState<NamingConfig>,
     AppSectionSaveState {}
@@ -42,12 +71,20 @@ export type NamingExamplesAppState = AppSectionItemState<NamingExample>;
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
     AppSectionDeleteState,
+    AppSectionSaveState,
+    AppSectionSchemaState<Presets<ImportList>> {
+  isTestingAll: boolean;
+}
+
+export interface IndexerOptionsAppState
+  extends AppSectionItemState<IndexerOptions>,
     AppSectionSaveState {}
 
 export interface IndexerAppState
   extends AppSectionState<Indexer>,
     AppSectionDeleteState,
-    AppSectionSaveState {
+    AppSectionSaveState,
+    AppSectionSchemaState<Presets<Indexer>> {
   isTestingAll: boolean;
 }
 
@@ -57,7 +94,7 @@ export interface NotificationAppState
 
 export interface QualityProfilesAppState
   extends AppSectionState<QualityProfile>,
-    AppSectionSchemaState<QualityProfile> {}
+    AppSectionItemSchemaState<QualityProfile> {}
 
 export interface ReleaseProfilesAppState
   extends AppSectionState<ReleaseProfile>,
@@ -88,15 +125,20 @@ export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 
 interface SettingsAppState {
   advancedSettings: boolean;
+  autoTaggings: AutoTaggingAppState;
+  autoTaggingSpecifications: AutoTaggingSpecificationAppState;
   customFormats: CustomFormatAppState;
+  delayProfiles: DelayProfileAppState;
   downloadClients: DownloadClientAppState;
   general: GeneralAppState;
   importListExclusions: ImportListExclusionsSettingsAppState;
   importListOptions: ImportListOptionsSettingsAppState;
   importLists: ImportListAppState;
   indexerFlags: IndexerFlagSettingsAppState;
+  indexerOptions: IndexerOptionsAppState;
   indexers: IndexerAppState;
   languages: LanguageSettingsAppState;
+  mediaManagement: MediaManagementAppState;
   metadata: MetadataAppState;
   naming: NamingAppState;
   namingExamples: NamingExamplesAppState;

frontend/src/App/State/TagsAppState.ts

@@ -17,7 +17,7 @@ export interface TagDetail extends ModelBase {
   indexerIds: number[];
   movieIds: number[];
   notificationIds: number[];
-  restrictionIds: number[];
+  releaseProfileIds: number[];
 }
 
 export interface TagDetailAppState

frontend/src/Collection/Overview/CollectionOverview.js

@@ -196,7 +196,7 @@ class CollectionOverview extends Component {
                       size={13}
                     />
                     <span className={styles.status}>
-                      {`${missingMovies} missing movie(s)`}
+                      {translate('CountMissingMoviesFromLibrary', { count: missingMovies })}
                     </span>
                   </Label>
 

frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js

@@ -56,6 +56,8 @@ function CustomFiltersModalContent(props) {
             {translate('AddCustomFilter')}
           </Button>
         </div>
+        <br />
+        {translate('FilterMoviePropertiesOnlyNotFileWarning')}
       </ModalBody>
 
       <ModalFooter>

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/QualityProfileSelectInput.tsx

@@ -18,7 +18,7 @@ function createQualityProfilesSelector(
   includeMixed: boolean
 ) {
   return createSelector(
-    createSortedSectionSelector(
+    createSortedSectionSelector<QualityProfile, QualityProfilesAppState>(
       'settings.qualityProfiles',
       sortByProp<QualityProfile, 'name'>('name')
     ),

frontend/src/Components/Icon.css

@@ -26,6 +26,10 @@
   color: var(--warningColor);
 }
 
+.primary {
+  color: var(--primaryColor);
+}
+
 .purple {
   color: var(--purple);
 }

frontend/src/Components/Icon.css.d.ts

@@ -6,6 +6,7 @@ interface CssExports {
   'disabled': string;
   'info': string;
   'pink': string;
+  'primary': string;
   'purple': string;
   'success': string;
   'warning': string;

frontend/src/Components/Modal/Modal.css

@@ -19,6 +19,7 @@
 .modal {
   position: relative;
   display: flex;
+  max-width: 90%;
   max-height: 90%;
   border-radius: 6px;
   opacity: 1;

frontend/src/Components/Page/PageSectionContent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Error } from 'App/State/AppSectionState';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import { kinds } from 'Helpers/Props';
@@ -6,7 +7,7 @@ import { kinds } from 'Helpers/Props';
 interface PageSectionContentProps {
   isFetching: boolean;
   isPopulated: boolean;
-  error?: object;
+  error?: Error;
   errorMessage: string;
   children: React.ReactNode;
 }
@@ -18,7 +19,7 @@ function PageSectionContent({
   errorMessage,
   children,
 }: PageSectionContentProps) {
-  if (isFetching) {
+  if (isFetching && !isPopulated) {
     return <LoadingIndicator />;
   }
 

frontend/src/Components/Page/Toolbar/PageToolbarSection.tsx

@@ -16,10 +16,10 @@ const BUTTON_WIDTH = parseInt(dimensions.toolbarButtonWidth);
 const SEPARATOR_MARGIN = parseInt(dimensions.toolbarSeparatorMargin);
 const SEPARATOR_WIDTH = 2 * SEPARATOR_MARGIN + 1;
 
-interface PageToolbarSectionProps {
+export interface PageToolbarSectionProps {
   children?:
-    | (ReactElement<PageToolbarButtonProps> | ReactElement<never>)
-    | (ReactElement<PageToolbarButtonProps> | ReactElement<never>)[];
+    | (ReactElement<PageToolbarButtonProps> | ReactElement<never> | null)
+    | (ReactElement<PageToolbarButtonProps> | ReactElement<never> | null)[];
   alignContent?: Extract<Align, keyof typeof styles>;
   collapseButtons?: boolean;
 }
@@ -80,8 +80,12 @@ function PageToolbarSection({
     if (buttonCount - 1 === maxButtons) {
       const overflowItems: PageToolbarButtonProps[] = [];
 
+      const buttonsWithoutSeparators = validChildren.filter(
+        (child) => Object.keys(child.props).length > 0
+      );
+
       return {
-        buttons: validChildren,
+        buttons: buttonsWithoutSeparators,
         buttonCount,
         overflowItems,
       };

frontend/src/DiscoverMovie/Menus/DiscoverMovieSortMenu.js

@@ -47,6 +47,15 @@ function DiscoverMovieSortMenu(props) {
           {translate('Studio')}
         </SortMenuItem>
 
+        <SortMenuItem
+          name="year"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Year')}
+        </SortMenuItem>
+
         <SortMenuItem
           name="inCinemas"
           sortKey={sortKey}

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css

@@ -36,7 +36,8 @@
 .imdbRating,
 .rottenTomatoesRating,
 .traktRating,
-.runtime {
+.runtime,
+.year {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 90px;

frontend/src/DiscoverMovie/Table/DiscoverMovieHeader.css.d.ts

@@ -22,6 +22,7 @@ interface CssExports {
   'studio': string;
   'tmdbRating': string;
   'traktRating': string;
+  'year': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css

@@ -61,7 +61,8 @@
 .imdbRating,
 .rottenTomatoesRating,
 .traktRating,
-.runtime {
+.runtime,
+.year {
   composes: cell;
 
   flex: 0 0 90px;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.css.d.ts

@@ -28,6 +28,7 @@ interface CssExports {
   'studio': string;
   'tmdbRating': string;
   'traktRating': string;
+  'year': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/DiscoverMovie/Table/DiscoverMovieRow.js

@@ -167,6 +167,14 @@ class DiscoverMovieRow extends Component {
               );
             }
 
+            if (name === 'year') {
+              return (
+                <VirtualTableRowCell key={name} className={styles[name]}>
+                  {year}
+                </VirtualTableRowCell>
+              );
+            }
+
             if (name === 'collection') {
               return (
                 <VirtualTableRowCell

frontend/src/FirstRun/AuthenticationRequiredModalContent.tsx

@@ -54,7 +54,7 @@ export default function AuthenticationRequiredModalContent() {
     dispatch(fetchGeneralSettings());
 
     return () => {
-      dispatch(clearPendingChanges());
+      dispatch(clearPendingChanges({ section: `settings.${SECTION}` }));
     };
   }, [dispatch]);
 

frontend/src/Helpers/Hooks/useIsWindows.ts

@@ -0,0 +1,8 @@
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+
+function useIsWindows() {
+  return useSelector((state: AppState) => state.system.status.item.isWindows);
+}
+
+export default useIsWindows;

frontend/src/Helpers/Hooks/useShowAdvancedSettings.ts

@@ -0,0 +1,8 @@
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+
+function useShowAdvancedSettings() {
+  return useSelector((state: AppState) => state.settings.advancedSettings);
+}
+
+export default useShowAdvancedSettings;

frontend/src/Helpers/Hooks/useTheme.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import themes from 'Styles/Themes';
+
+function createThemeSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.ui.item.theme || window.Radarr.theme,
+    (theme) => theme
+  );
+}
+
+const useTheme = () => {
+  const selectedTheme = useSelector(createThemeSelector());
+  const [resolvedTheme, setResolvedTheme] = useState(selectedTheme);
+
+  useEffect(() => {
+    if (selectedTheme !== 'auto') {
+      setResolvedTheme(selectedTheme);
+      return;
+    }
+
+    const applySystemTheme = () => {
+      setResolvedTheme(
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+      );
+    };
+
+    applySystemTheme();
+
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', applySystemTheme);
+
+    return () => {
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .removeEventListener('change', applySystemTheme);
+    };
+  }, [selectedTheme]);
+
+  return resolvedTheme;
+};
+
+export default useTheme;
+
+export const useThemeColor = (color: string) => {
+  const theme = useTheme();
+  const themeVariables = themes[theme];
+
+  // @ts-expect-error - themeVariables is a string indexable type
+  return themeVariables[color];
+};

frontend/src/Helpers/elementChildren.js

@@ -1,149 +0,0 @@
-// https://github.com/react-bootstrap/react-element-children
-
-import React from 'react';
-
-/**
- * Iterates through children that are typically specified as `props.children`,
- * but only maps over children that are "valid components".
- *
- * The mapFunction provided index will be normalised to the components mapped,
- * so an invalid component would not increase the index.
- *
- * @param {?*} children Children tree container.
- * @param {function(*, int)} func.
- * @param {*} context Context for func.
- * @return {object} Object containing the ordered map of results.
- */
-export function map(children, func, context) {
-  let index = 0;
-
-  return React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child;
-    }
-
-    return func.call(context, child, index++);
-  });
-}
-
-/**
- * Iterates through children that are "valid components".
- *
- * The provided forEachFunc(child, index) will be called for each
- * leaf child with the index reflecting the position relative to "valid components".
- *
- * @param {?*} children Children tree container.
- * @param {function(*, int)} func.
- * @param {*} context Context for context.
- */
-export function forEach(children, func, context) {
-  let index = 0;
-
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return;
-    }
-
-    func.call(context, child, index++);
-  });
-}
-
-/**
- * Count the number of "valid components" in the Children container.
- *
- * @param {?*} children Children tree container.
- * @returns {number}
- */
-export function count(children) {
-  let result = 0;
-
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return;
-    }
-
-    ++result;
-  });
-
-  return result;
-}
-
-/**
- * Finds children that are typically specified as `props.children`,
- * but only iterates over children that are "valid components".
- *
- * The provided forEachFunc(child, index) will be called for each
- * leaf child with the index reflecting the position relative to "valid components".
- *
- * @param {?*} children Children tree container.
- * @param {function(*, int)} func.
- * @param {*} context Context for func.
- * @returns {array} of children that meet the func return statement
- */
-export function filter(children, func, context) {
-  const result = [];
-
-  forEach(children, (child, index) => {
-    if (func.call(context, child, index)) {
-      result.push(child);
-    }
-  });
-
-  return result;
-}
-
-export function find(children, func, context) {
-  let result = null;
-
-  forEach(children, (child, index) => {
-    if (result) {
-      return;
-    }
-    if (func.call(context, child, index)) {
-      result = child;
-    }
-  });
-
-  return result;
-}
-
-export function every(children, func, context) {
-  let result = true;
-
-  forEach(children, (child, index) => {
-    if (!result) {
-      return;
-    }
-    if (!func.call(context, child, index)) {
-      result = false;
-    }
-  });
-
-  return result;
-}
-
-export function some(children, func, context) {
-  let result = false;
-
-  forEach(children, (child, index) => {
-    if (result) {
-      return;
-    }
-
-    if (func.call(context, child, index)) {
-      result = true;
-    }
-  });
-
-  return result;
-}
-
-export function toArray(children) {
-  const result = [];
-
-  forEach(children, (child) => {
-    result.push(child);
-  });
-
-  return result;
-}

frontend/src/Helpers/getDisplayName.js

@@ -1,3 +0,0 @@
-export default function getDisplayName(Component) {
-  return Component.displayName || Component.name || 'Component';
-}

frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.tsx

@@ -10,7 +10,7 @@ import Popover from 'Components/Tooltip/Popover';
 import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import MovieHeadshot from 'Movie/MovieHeadshot';
-import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector';
+import EditImportListModal from 'Settings/ImportLists/ImportLists/EditImportListModal';
 import { deleteImportList } from 'Store/Actions/Settings/importLists';
 import ImportList from 'typings/ImportList';
 import MovieCredit from 'typings/MovieCredit';
@@ -154,7 +154,7 @@ function MovieCastPoster(props: MovieCastPosterProps) {
         {character}
       </div>
 
-      <EditImportListModalConnector
+      <EditImportListModal
         id={importListId}
         isOpen={isEditImportListModalOpen}
         onModalClose={setEditImportListModalClosed}

frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.tsx

@@ -10,7 +10,7 @@ import Popover from 'Components/Tooltip/Popover';
 import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import MovieHeadshot from 'Movie/MovieHeadshot';
-import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector';
+import EditImportListModal from 'Settings/ImportLists/ImportLists/EditImportListModal';
 import { deleteImportList } from 'Store/Actions/Settings/importLists';
 import ImportList from 'typings/ImportList';
 import MovieCredit from 'typings/MovieCredit';
@@ -152,7 +152,7 @@ function MovieCrewPoster(props: MovieCrewPosterProps) {
       </div>
       <div className={classNames(styles.title, 'swiper-no-swiping')}>{job}</div>
 
-      <EditImportListModalConnector
+      <EditImportListModal
         id={importListId}
         isOpen={isEditImportListModalOpen}
         onModalClose={setEditImportListModalClosed}

frontend/src/Movie/Index/MovieIndex.tsx

@@ -284,7 +284,7 @@ const MovieIndex = withScrollPosition((props: MovieIndexProps) => {
             />
 
             <MovieIndexSelectAllButton
-              label="SelectAll"
+              label={translate('SelectAll')}
               isSelectMode={isSelectMode}
               overflowComponent={MovieIndexSelectAllMenuItem}
             />

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -67,6 +67,7 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
     monitored,
     status,
     path,
+    titleSlug,
     overview,
     statistics = {} as Statistics,
     images,
@@ -141,7 +142,9 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
       <div className={styles.content}>
         <div className={styles.poster}>
           <div className={styles.posterContainer}>
-            {isSelectMode ? <MovieIndexPosterSelect movieId={movieId} /> : null}
+            {isSelectMode ? (
+              <MovieIndexPosterSelect movieId={movieId} titleSlug={titleSlug} />
+            ) : null}
 
             {status === 'deleted' ? (
               <div className={styles.deleted} title={translate('Deleted')} />

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -69,6 +69,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     monitored,
     status,
     images,
+    titleSlug,
     tmdbId,
     imdbId,
     youTubeTrailerId,
@@ -141,7 +142,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     setIsDeleteMovieModalOpen(false);
   }, [setIsDeleteMovieModalOpen]);
 
-  const link = `/movie/${tmdbId}`;
+  const link = `/movie/${titleSlug}`;
 
   const elementStyle = {
     width: `${posterWidth}px`,
@@ -151,7 +152,9 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
   return (
     <div className={styles.content}>
       <div className={styles.posterContainer} title={title}>
-        {isSelectMode ? <MovieIndexPosterSelect movieId={movieId} /> : null}
+        {isSelectMode ? (
+          <MovieIndexPosterSelect movieId={movieId} titleSlug={titleSlug} />
+        ) : null}
 
         <Label className={styles.controls}>
           <SpinnerIconButton

frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css

@@ -3,8 +3,8 @@
   top: 0;
   left: 0;
   z-index: 3;
-  width: 36px;
-  height: 36px;
+  width: 100%;
+  height: 100%;
 }
 
 .checkContainer {

frontend/src/Movie/Index/Select/MovieIndexPosterSelect.tsx

@@ -7,15 +7,23 @@ import styles from './MovieIndexPosterSelect.css';
 
 interface MovieIndexPosterSelectProps {
   movieId: number;
+  titleSlug: string;
 }
 
-function MovieIndexPosterSelect(props: MovieIndexPosterSelectProps) {
-  const { movieId } = props;
+function MovieIndexPosterSelect({
+  movieId,
+  titleSlug,
+}: MovieIndexPosterSelectProps) {
   const [selectState, selectDispatch] = useSelect();
   const isSelected = selectState.selectedState[movieId];
 
   const onSelectPress = useCallback(
     (event: SyntheticEvent<HTMLElement, PointerEvent>) => {
+      if (event.nativeEvent.ctrlKey || event.nativeEvent.metaKey) {
+        window.open(`${window.Radarr.urlBase}/movie/${titleSlug}`, '_blank');
+        return;
+      }
+
       const shiftKey = event.nativeEvent.shiftKey;
 
       selectDispatch({
@@ -25,7 +33,7 @@ function MovieIndexPosterSelect(props: MovieIndexPosterSelectProps) {
         shiftKey,
       });
     },
-    [movieId, isSelected, selectDispatch]
+    [movieId, titleSlug, isSelected, selectDispatch]
   );
 
   return (

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -161,7 +161,7 @@ class MovieFileEditorRow extends Component {
                 >
                   {indexerFlags ? (
                     <Popover
-                      anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                      anchor={<Icon name={icons.FLAG} />}
                       title={translate('IndexerFlags')}
                       body={<IndexerFlags indexerFlags={indexerFlags} />}
                       position={tooltipPositions.LEFT}

frontend/src/RootFolder/RootFolderRow.tsx

@@ -82,9 +82,9 @@ function RootFolderRow(props: RootFolderRowProps) {
       <ConfirmModal
         isOpen={isDeleteModalOpen}
         kind={kinds.DANGER}
-        title={translate('DeleteRootFolder')}
-        message={translate('DeleteRootFolderMessageText', { path })}
-        confirmLabel={translate('Delete')}
+        title={translate('RemoveRootFolder')}
+        message={translate('RemoveRootFolderMoviesMessageText', { path })}
+        confirmLabel={translate('Remove')}
         onConfirm={onConfirmDelete}
         onCancel={onDeleteModalClose}
       />

frontend/src/Settings/AdvancedSettingsButton.js

@@ -1,70 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import Link from 'Components/Link/Link';
-import { icons } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './AdvancedSettingsButton.css';
-
-function AdvancedSettingsButton(props) {
-  const {
-    advancedSettings,
-    onAdvancedSettingsPress,
-    showLabel
-  } = props;
-
-  return (
-    <Link
-      className={styles.button}
-      title={advancedSettings ? translate('ShownClickToHide') : translate('HiddenClickToShow')}
-      onPress={onAdvancedSettingsPress}
-    >
-      <Icon
-        name={icons.ADVANCED_SETTINGS}
-        size={21}
-      />
-
-      <span
-        className={classNames(
-          styles.indicatorContainer,
-          'fa-layers fa-fw'
-        )}
-      >
-        <Icon
-          className={styles.indicatorBackground}
-          name={icons.CIRCLE}
-          size={16}
-        />
-
-        <Icon
-          className={advancedSettings ? styles.enabled : styles.disabled}
-          name={advancedSettings ? icons.CHECK : icons.CLOSE}
-          size={10}
-        />
-      </span>
-
-      {
-        showLabel ?
-          <div className={styles.labelContainer}>
-            <div className={styles.label}>
-              {advancedSettings ? translate('HideAdvanced') : translate('ShowAdvanced')}
-            </div>
-          </div> :
-          null
-      }
-    </Link>
-  );
-}
-
-AdvancedSettingsButton.propTypes = {
-  advancedSettings: PropTypes.bool.isRequired,
-  onAdvancedSettingsPress: PropTypes.func.isRequired,
-  showLabel: PropTypes.bool.isRequired
-};
-
-AdvancedSettingsButton.defaultProps = {
-  showLabel: true
-};
-
-export default AdvancedSettingsButton;

frontend/src/Settings/AdvancedSettingsButton.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import { icons } from 'Helpers/Props';
+import { toggleAdvancedSettings } from 'Store/Actions/settingsActions';
+import translate from 'Utilities/String/translate';
+import styles from './AdvancedSettingsButton.css';
+
+interface AdvancedSettingsButtonProps {
+  showLabel: boolean;
+}
+
+function AdvancedSettingsButton({ showLabel }: AdvancedSettingsButtonProps) {
+  const showAdvancedSettings = useSelector(
+    (state: AppState) => state.settings.advancedSettings
+  );
+  const dispatch = useDispatch();
+
+  const handlePress = useCallback(() => {
+    dispatch(toggleAdvancedSettings());
+  }, [dispatch]);
+
+  return (
+    <Link
+      className={styles.button}
+      title={
+        showAdvancedSettings
+          ? translate('ShownClickToHide')
+          : translate('HiddenClickToShow')
+      }
+      onPress={handlePress}
+    >
+      <Icon name={icons.ADVANCED_SETTINGS} size={21} />
+
+      <span
+        className={classNames(styles.indicatorContainer, 'fa-layers fa-fw')}
+      >
+        <Icon
+          className={styles.indicatorBackground}
+          name={icons.CIRCLE}
+          size={16}
+        />
+
+        <Icon
+          className={showAdvancedSettings ? styles.enabled : styles.disabled}
+          name={showAdvancedSettings ? icons.CHECK : icons.CLOSE}
+          size={10}
+        />
+      </span>
+
+      {showLabel ? (
+        <div className={styles.labelContainer}>
+          <div className={styles.label}>
+            {showAdvancedSettings
+              ? translate('HideAdvanced')
+              : translate('ShowAdvanced')}
+          </div>
+        </div>
+      ) : null}
+    </Link>
+  );
+}
+
+export default AdvancedSettingsButton;

frontend/src/Settings/CustomFormats/CustomFormatSettingsPage.tsx

@@ -5,7 +5,7 @@ import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import ParseToolbarButton from 'Parse/ParseToolbarButton';
-import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import SettingsToolbar from 'Settings/SettingsToolbar';
 import translate from 'Utilities/String/translate';
 import CustomFormatsConnector from './CustomFormats/CustomFormatsConnector';
 import ManageCustomFormatsToolbarButton from './CustomFormats/Manage/ManageCustomFormatsToolbarButton';
@@ -13,9 +13,7 @@ import ManageCustomFormatsToolbarButton from './CustomFormats/Manage/ManageCusto
 function CustomFormatSettingsPage() {
   return (
     <PageContent title={translate('CustomFormatsSettings')}>
-      <SettingsToolbarConnector
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
+      <SettingsToolbar
         showSave={false}
         additionalButtons={
           <>

frontend/src/Settings/DownloadClients/DownloadClientSettings.js

@@ -5,7 +5,7 @@ import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import { icons } from 'Helpers/Props';
-import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import SettingsToolbar from 'Settings/SettingsToolbar';
 import translate from 'Utilities/String/translate';
 import DownloadClientsConnector from './DownloadClients/DownloadClientsConnector';
 import ManageDownloadClientsModal from './DownloadClients/Manage/ManageDownloadClientsModal';
@@ -71,7 +71,7 @@ class DownloadClientSettings extends Component {
 
     return (
       <PageContent title={translate('DownloadClientSettings')}>
-        <SettingsToolbarConnector
+        <SettingsToolbar
           isSaving={isSaving}
           hasPendingChanges={hasPendingChanges}
           additionalButtons={

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.js

@@ -38,7 +38,6 @@ class EditDownloadClientModalContent extends Component {
       onModalClose,
       onSavePress,
       onTestPress,
-      onAdvancedSettingsPress,
       onDeleteDownloadClientPress,
       ...otherProps
     } = this.props;
@@ -198,8 +197,6 @@ class EditDownloadClientModalContent extends Component {
           }
 
           <AdvancedSettingsButton
-            advancedSettings={advancedSettings}
-            onAdvancedSettingsPress={onAdvancedSettingsPress}
             showLabel={false}
           />
 
@@ -243,7 +240,6 @@ EditDownloadClientModalContent.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onSavePress: PropTypes.func.isRequired,
   onTestPress: PropTypes.func.isRequired,
-  onAdvancedSettingsPress: PropTypes.func.isRequired,
   onDeleteDownloadClientPress: PropTypes.func
 };
 

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContentConnector.js

@@ -6,8 +6,7 @@ import {
   saveDownloadClient,
   setDownloadClientFieldValue,
   setDownloadClientValue,
-  testDownloadClient,
-  toggleAdvancedSettings
+  testDownloadClient
 } from 'Store/Actions/settingsActions';
 import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
 import EditDownloadClientModalContent from './EditDownloadClientModalContent';
@@ -29,8 +28,7 @@ const mapDispatchToProps = {
   setDownloadClientValue,
   setDownloadClientFieldValue,
   saveDownloadClient,
-  testDownloadClient,
-  toggleAdvancedSettings
+  testDownloadClient
 };
 
 class EditDownloadClientModalContentConnector extends Component {
@@ -63,10 +61,6 @@ class EditDownloadClientModalContentConnector extends Component {
     this.props.testDownloadClient({ id: this.props.id });
   };
 
-  onAdvancedSettingsPress = () => {
-    this.props.toggleAdvancedSettings();
-  };
-
   //
   // Render
 
@@ -76,7 +70,6 @@ class EditDownloadClientModalContentConnector extends Component {
         {...this.props}
         onSavePress={this.onSavePress}
         onTestPress={this.onTestPress}
-        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
         onInputChange={this.onInputChange}
         onFieldChange={this.onFieldChange}
       />
@@ -94,7 +87,6 @@ EditDownloadClientModalContentConnector.propTypes = {
   setDownloadClientFieldValue: PropTypes.func.isRequired,
   saveDownloadClient: PropTypes.func.isRequired,
   testDownloadClient: PropTypes.func.isRequired,
-  toggleAdvancedSettings: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/Settings/General/GeneralSettings.js

@@ -8,7 +8,7 @@ import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import { kinds } from 'Helpers/Props';
-import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import SettingsToolbar from 'Settings/SettingsToolbar';
 import translate from 'Utilities/String/translate';
 import AnalyticSettings from './AnalyticSettings';
 import BackupSettings from './BackupSettings';
@@ -113,7 +113,7 @@ class GeneralSettings extends Component {
 
     return (
       <PageContent title={translate('GeneralSettings')}>
-        <SettingsToolbarConnector
+        <SettingsToolbar
           {...otherProps}
         />
 

frontend/src/Settings/General/SecuritySettings.js

@@ -30,7 +30,9 @@ export const authenticationMethodOptions = [
     key: 'basic',
     get value() {
       return translate('AuthBasic');
-    }
+    },
+    isDisabled: true,
+    isHidden: true
   },
   {
     key: 'forms',

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

@@ -46,7 +46,6 @@ function createImportListExclusionSelector(id?: number) {
       const settings = selectSettings(mapping, pendingChanges, saveError);
 
       return {
-        id,
         isFetching,
         error,
         isSaving,
@@ -171,7 +170,7 @@ function EditImportListExclusionModalContent({
       </ModalBody>
 
       <ModalFooter>
-        {id && (
+        {id ? (
           <Button
             className={styles.deleteButton}
             kind={kinds.DANGER}
@@ -179,7 +178,7 @@ function EditImportListExclusionModalContent({
           >
             {translate('Delete')}
           </Button>
-        )}
+        ) : null}
 
         <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 

frontend/src/Settings/ImportLists/ImportListSettings.js

@@ -1,123 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { icons } from 'Helpers/Props';
-import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
-import translate from 'Utilities/String/translate';
-import ImportListExclusions from './ImportListExclusions/ImportListExclusions';
-import ImportListsConnector from './ImportLists/ImportListsConnector';
-import ManageImportListsModal from './ImportLists/Manage/ManageImportListsModal';
-import ImportListOptions from './Options/ImportListOptions';
-
-class ImportListSettings extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._saveCallback = null;
-
-    this.state = {
-      isSaving: false,
-      hasPendingChanges: false,
-      isManageImportListsOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  setChildSave = (saveCallback) => {
-    this._saveCallback = saveCallback;
-  };
-
-  onChildStateChange = (payload) => {
-    this.setState(payload);
-  };
-
-  onManageImportListsPress = () => {
-    this.setState({ isManageImportListsOpen: true });
-  };
-
-  onManageImportListsModalClose = () => {
-    this.setState({ isManageImportListsOpen: false });
-  };
-
-  onSavePress = () => {
-    if (this._saveCallback) {
-      this._saveCallback();
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      isTestingAll,
-      dispatchTestAllImportLists
-    } = this.props;
-
-    const {
-      isSaving,
-      hasPendingChanges,
-      isManageImportListsOpen
-    } = this.state;
-
-    return (
-      <PageContent title={translate('ImportListSettings')}>
-        <SettingsToolbarConnector
-          isSaving={isSaving}
-          hasPendingChanges={hasPendingChanges}
-          additionalButtons={
-            <Fragment>
-              <PageToolbarSeparator />
-
-              <PageToolbarButton
-                label={translate('TestAllLists')}
-                iconName={icons.TEST}
-                isSpinning={isTestingAll}
-                onPress={dispatchTestAllImportLists}
-              />
-
-              <PageToolbarButton
-                label={translate('ManageLists')}
-                iconName={icons.MANAGE}
-                onPress={this.onManageImportListsPress}
-              />
-            </Fragment>
-          }
-          onSavePress={this.onSavePress}
-        />
-
-        <PageContentBody>
-          <ImportListsConnector />
-
-          <ImportListOptions
-            setChildSave={this.setChildSave}
-            onChildStateChange={this.onChildStateChange}
-          />
-
-          <ImportListExclusions />
-
-          <ManageImportListsModal
-            isOpen={isManageImportListsOpen}
-            onModalClose={this.onManageImportListsModalClose}
-          />
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-}
-
-ImportListSettings.propTypes = {
-  isTestingAll: PropTypes.bool.isRequired,
-  dispatchTestAllImportLists: PropTypes.func.isRequired
-};
-
-export default ImportListSettings;

frontend/src/Settings/ImportLists/ImportListSettings.tsx

@@ -0,0 +1,107 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import { icons } from 'Helpers/Props';
+import SettingsToolbar from 'Settings/SettingsToolbar';
+import { testAllImportLists } from 'Store/Actions/settingsActions';
+import {
+  SaveCallback,
+  SettingsStateChange,
+} from 'typings/Settings/SettingsState';
+import translate from 'Utilities/String/translate';
+import ImportListExclusions from './ImportListExclusions/ImportListExclusions';
+import ImportLists from './ImportLists/ImportLists';
+import ManageImportListsModal from './ImportLists/Manage/ManageImportListsModal';
+import ImportListOptions from './Options/ImportListOptions';
+
+function ImportListSettings() {
+  const dispatch = useDispatch();
+  const isTestingAll = useSelector(
+    (state: AppState) => state.settings.importLists.isTestingAll
+  );
+
+  const saveOptions = useRef<() => void>();
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasPendingChanges, setHasPendingChanges] = useState(false);
+  const [isManageImportListsModalOpen, setIsManageImportListsModalOpen] =
+    useState(false);
+
+  const handleSetChildSave = useCallback((saveCallback: SaveCallback) => {
+    saveOptions.current = saveCallback;
+  }, []);
+
+  const handleChildStateChange = useCallback(
+    ({ isSaving, hasPendingChanges }: SettingsStateChange) => {
+      setIsSaving(isSaving);
+      setHasPendingChanges(hasPendingChanges);
+    },
+    []
+  );
+
+  const handleManageImportListsPress = useCallback(() => {
+    setIsManageImportListsModalOpen(true);
+  }, []);
+
+  const handleManageImportListsModalClose = useCallback(() => {
+    setIsManageImportListsModalOpen(false);
+  }, []);
+
+  const handleSavePress = useCallback(() => {
+    saveOptions.current?.();
+  }, []);
+
+  const handleTestAllIndexersPress = useCallback(() => {
+    dispatch(testAllImportLists());
+  }, [dispatch]);
+
+  return (
+    <PageContent title={translate('ImportListSettings')}>
+      <SettingsToolbar
+        isSaving={isSaving}
+        hasPendingChanges={hasPendingChanges}
+        additionalButtons={
+          <>
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label={translate('TestAllLists')}
+              iconName={icons.TEST}
+              isSpinning={isTestingAll}
+              onPress={handleTestAllIndexersPress}
+            />
+
+            <PageToolbarButton
+              label={translate('ManageLists')}
+              iconName={icons.MANAGE}
+              onPress={handleManageImportListsPress}
+            />
+          </>
+        }
+        onSavePress={handleSavePress}
+      />
+
+      <PageContentBody>
+        <ImportLists />
+
+        <ImportListOptions
+          setChildSave={handleSetChildSave}
+          onChildStateChange={handleChildStateChange}
+        />
+
+        <ImportListExclusions />
+
+        <ManageImportListsModal
+          isOpen={isManageImportListsModalOpen}
+          onModalClose={handleManageImportListsModalClose}
+        />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default ImportListSettings;

frontend/src/Settings/ImportLists/ImportListSettingsConnector.js

@@ -1,21 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { testAllImportLists } from 'Store/Actions/settingsActions';
-import ImportListSettings from './ImportListSettings';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.importLists.isTestingAll,
-    (isTestingAll) => {
-      return {
-        isTestingAll
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchTestAllImportLists: testAllImportLists
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(ImportListSettings);

frontend/src/Settings/ImportLists/ImportLists/AddImportListItem.js

@@ -1,117 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Button from 'Components/Link/Button';
-import Link from 'Components/Link/Link';
-import Menu from 'Components/Menu/Menu';
-import MenuContent from 'Components/Menu/MenuContent';
-import { sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import AddImportListPresetMenuItem from './AddImportListPresetMenuItem';
-import styles from './AddImportListItem.css';
-
-class AddImportListItem extends Component {
-
-  //
-  // Listeners
-
-  onImportListSelect = () => {
-    const {
-      implementation,
-      implementationName,
-      minRefreshInterval
-    } = this.props;
-
-    this.props.onImportListSelect({ implementation, implementationName, minRefreshInterval });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      implementation,
-      implementationName,
-      minRefreshInterval,
-      infoLink,
-      presets,
-      onImportListSelect
-    } = this.props;
-
-    const hasPresets = !!presets && !!presets.length;
-
-    return (
-      <div
-        className={styles.list}
-      >
-        <Link
-          className={styles.underlay}
-          onPress={this.onImportListSelect}
-        />
-
-        <div className={styles.overlay}>
-          <div className={styles.name}>
-            {implementationName}
-          </div>
-
-          <div className={styles.actions}>
-            {
-              hasPresets &&
-                <span>
-                  <Button
-                    size={sizes.SMALL}
-                    onPress={this.onImportListSelect}
-                  >
-                    {translate('Custom')}
-                  </Button>
-
-                  <Menu className={styles.presetsMenu}>
-                    <Button
-                      className={styles.presetsMenuButton}
-                      size={sizes.SMALL}
-                    >
-                      {translate('Presets')}
-                    </Button>
-
-                    <MenuContent>
-                      {
-                        presets.map((preset) => {
-                          return (
-                            <AddImportListPresetMenuItem
-                              key={preset.name}
-                              name={preset.name}
-                              implementation={implementation}
-                              implementationName={implementationName}
-                              minRefreshInterval={minRefreshInterval}
-                              onPress={onImportListSelect}
-                            />
-                          );
-                        })
-                      }
-                    </MenuContent>
-                  </Menu>
-                </span>
-            }
-
-            <Button
-              to={infoLink}
-              size={sizes.SMALL}
-            >
-              {translate('MoreInfo')}
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-AddImportListItem.propTypes = {
-  implementation: PropTypes.string.isRequired,
-  implementationName: PropTypes.string.isRequired,
-  minRefreshInterval: PropTypes.string.isRequired,
-  infoLink: PropTypes.string.isRequired,
-  presets: PropTypes.arrayOf(PropTypes.object),
-  onImportListSelect: PropTypes.func.isRequired
-};
-
-export default AddImportListItem;

frontend/src/Settings/ImportLists/ImportLists/AddImportListItem.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import Menu from 'Components/Menu/Menu';
+import MenuContent from 'Components/Menu/MenuContent';
+import { sizes } from 'Helpers/Props';
+import { selectImportListSchema } from 'Store/Actions/settingsActions';
+import ImportList from 'typings/ImportList';
+import translate from 'Utilities/String/translate';
+import AddImportListPresetMenuItem from './AddImportListPresetMenuItem';
+import styles from './AddImportListItem.css';
+
+interface AddImportListItemProps {
+  implementation: string;
+  implementationName: string;
+  minRefreshInterval: string;
+  infoLink: string;
+  presets?: ImportList[];
+  onImportListSelect: () => void;
+}
+
+function AddImportListItem({
+  implementation,
+  implementationName,
+  minRefreshInterval,
+  infoLink,
+  presets,
+  onImportListSelect,
+}: AddImportListItemProps) {
+  const dispatch = useDispatch();
+  const hasPresets = !!(presets && presets.length);
+
+  const handleImportListSelect = useCallback(() => {
+    dispatch(
+      selectImportListSchema({
+        implementation,
+        implementationName,
+      })
+    );
+
+    onImportListSelect();
+  }, [implementation, implementationName, dispatch, onImportListSelect]);
+
+  return (
+    <div className={styles.list}>
+      <Link className={styles.underlay} onPress={handleImportListSelect} />
+
+      <div className={styles.overlay}>
+        <div className={styles.name}>{implementationName}</div>
+
+        <div className={styles.actions}>
+          {hasPresets && (
+            <span>
+              <Button size={sizes.SMALL} onPress={handleImportListSelect}>
+                {translate('Custom')}
+              </Button>
+
+              <Menu className={styles.presetsMenu}>
+                <Button className={styles.presetsMenuButton} size={sizes.SMALL}>
+                  {translate('Presets')}
+                </Button>
+
+                <MenuContent>
+                  {presets.map((preset) => {
+                    return (
+                      <AddImportListPresetMenuItem
+                        key={preset.name}
+                        name={preset.name}
+                        implementation={implementation}
+                        implementationName={implementationName}
+                        minRefreshInterval={minRefreshInterval}
+                        onPress={onImportListSelect}
+                      />
+                    );
+                  })}
+                </MenuContent>
+              </Menu>
+            </span>
+          )}
+
+          <Button to={infoLink} size={sizes.SMALL}>
+            {translate('MoreInfo')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AddImportListItem;

frontend/src/Settings/ImportLists/ImportLists/AddImportListModal.js

@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import AddImportListModalContentConnector from './AddImportListModalContentConnector';
-
-function AddImportListModal({ isOpen, onModalClose, ...otherProps }) {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <AddImportListModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-AddImportListModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AddImportListModal;

frontend/src/Settings/ImportLists/ImportLists/AddImportListModal.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddImportListModalContent, {
+  AddImportListModalContentProps,
+} from './AddImportListModalContent';
+
+interface AddImportListModalProps extends AddImportListModalContentProps {
+  isOpen: boolean;
+}
+
+function AddImportListModal({
+  isOpen,
+  onModalClose,
+  ...otherProps
+}: AddImportListModalProps) {
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <AddImportListModalContent {...otherProps} onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default AddImportListModal;

frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContent.js

@@ -1,115 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Alert from 'Components/Alert';
-import FieldSet from 'Components/FieldSet';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-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 { kinds } from 'Helpers/Props';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import AddImportListItem from './AddImportListItem';
-import styles from './AddImportListModalContent.css';
-
-class AddImportListModalContent extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      isSchemaFetching,
-      isSchemaPopulated,
-      schemaError,
-      listGroups,
-      onImportListSelect,
-      onModalClose
-    } = this.props;
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('AddImportList')}
-        </ModalHeader>
-
-        <ModalBody>
-          {
-            isSchemaFetching ?
-              <LoadingIndicator /> :
-              null
-          }
-
-          {
-            !isSchemaFetching && !!schemaError ?
-              <Alert kind={kinds.DANGER}>
-                {translate('AddListError')}
-              </Alert> :
-              null
-          }
-
-          {
-            isSchemaPopulated && !schemaError ?
-              <div>
-
-                <Alert kind={kinds.INFO}>
-                  <div>
-                    {translate('SupportedListsMovie')}
-                  </div>
-                  <div>
-                    {translate('SupportedListsMoreInfo')}
-                  </div>
-                </Alert>
-                {
-                  Object.keys(listGroups).map((key) => {
-                    return (
-                      <FieldSet key={key} legend={translate('TypeOfList', {
-                        typeOfList: titleCase(key)
-                      })}
-                      >
-                        <div className={styles.lists}>
-                          {
-                            listGroups[key].map((list) => {
-                              return (
-                                <AddImportListItem
-                                  key={list.implementation}
-                                  implementation={list.implementation}
-                                  {...list}
-                                  onImportListSelect={onImportListSelect}
-                                />
-                              );
-                            })
-                          }
-                        </div>
-                      </FieldSet>
-                    );
-                  })
-                }
-              </div> :
-              null
-          }
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            onPress={onModalClose}
-          >
-            {translate('Close')}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    );
-  }
-}
-
-AddImportListModalContent.propTypes = {
-  isSchemaFetching: PropTypes.bool.isRequired,
-  isSchemaPopulated: PropTypes.bool.isRequired,
-  schemaError: PropTypes.object,
-  listGroups: PropTypes.object.isRequired,
-  onImportListSelect: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AddImportListModalContent;

frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContent.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 { kinds } from 'Helpers/Props';
+import { fetchImportListSchema } from 'Store/Actions/settingsActions';
+import ImportList from 'typings/ImportList';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import AddImportListItem from './AddImportListItem';
+import styles from './AddImportListModalContent.css';
+
+export interface AddImportListModalContentProps {
+  onImportListSelect: () => void;
+  onModalClose: () => void;
+}
+
+function AddImportListModalContent({
+  onImportListSelect,
+  onModalClose,
+}: AddImportListModalContentProps) {
+  const dispatch = useDispatch();
+  const { isSchemaFetching, isSchemaPopulated, schemaError, schema } =
+    useSelector((state: AppState) => state.settings.importLists);
+
+  const listGroups = useMemo(() => {
+    const result = schema.reduce<Record<string, ImportList[]>>((acc, item) => {
+      if (!acc[item.listType]) {
+        acc[item.listType] = [];
+      }
+
+      acc[item.listType].push(item);
+
+      return acc;
+    }, {});
+
+    // Sort the lists by listOrder after grouping them
+    Object.keys(result).forEach((key) => {
+      result[key].sort((a, b) => {
+        return a.listOrder - b.listOrder;
+      });
+    });
+
+    return result;
+  }, [schema]);
+
+  useEffect(() => {
+    dispatch(fetchImportListSchema());
+  }, [dispatch]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('AddImportList')}</ModalHeader>
+
+      <ModalBody>
+        {isSchemaFetching ? <LoadingIndicator /> : null}
+
+        {!isSchemaFetching && !!schemaError ? (
+          <Alert kind={kinds.DANGER}>{translate('AddListError')}</Alert>
+        ) : null}
+
+        {isSchemaPopulated && !schemaError ? (
+          <div>
+            <Alert kind={kinds.INFO}>
+              <div>{translate('SupportedListsMovie')}</div>
+              <div>{translate('SupportedListsMoreInfo')}</div>
+            </Alert>
+            {Object.keys(listGroups).map((key) => {
+              return (
+                <FieldSet
+                  key={key}
+                  legend={translate('TypeOfList', {
+                    typeOfList: titleCase(key),
+                  })}
+                >
+                  <div className={styles.lists}>
+                    {listGroups[key].map((list) => {
+                      return (
+                        <AddImportListItem
+                          key={list.implementation}
+                          {...list}
+                          implementation={list.implementation}
+                          onImportListSelect={onImportListSelect}
+                        />
+                      );
+                    })}
+                  </div>
+                </FieldSet>
+              );
+            })}
+          </div>
+        ) : null}
+      </ModalBody>
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default AddImportListModalContent;

frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContentConnector.js

@@ -1,76 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchImportListSchema, selectImportListSchema } from 'Store/Actions/settingsActions';
-import AddImportListModalContent from './AddImportListModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.importLists,
-    (importLists) => {
-      const {
-        isSchemaFetching,
-        isSchemaPopulated,
-        schemaError,
-        schema
-      } = importLists;
-
-      const listGroups = _.chain(schema)
-        .sortBy((o) => o.listOrder)
-        .groupBy('listType')
-        .value();
-
-      return {
-        isSchemaFetching,
-        isSchemaPopulated,
-        schemaError,
-        listGroups
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchImportListSchema,
-  selectImportListSchema
-};
-
-class AddImportListModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchImportListSchema();
-  }
-
-  //
-  // Listeners
-
-  onImportListSelect = ({ implementation, implementationName, name, minRefreshInterval }) => {
-    this.props.selectImportListSchema({ implementation, implementationName, presetName: name, minRefreshInterval });
-    this.props.onModalClose({ listSelected: true });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <AddImportListModalContent
-        {...this.props}
-        onImportListSelect={this.onImportListSelect}
-      />
-    );
-  }
-}
-
-AddImportListModalContentConnector.propTypes = {
-  fetchImportListSchema: PropTypes.func.isRequired,
-  selectImportListSchema: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AddImportListModalContentConnector);

frontend/src/Settings/ImportLists/ImportLists/AddImportListPresetMenuItem.js

@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import MenuItem from 'Components/Menu/MenuItem';
-
-class AddImportListPresetMenuItem extends Component {
-
-  //
-  // Listeners
-
-  onPress = () => {
-    const {
-      name,
-      implementation,
-      implementationName,
-      minRefreshInterval
-    } = this.props;
-
-    this.props.onPress({
-      name,
-      implementation,
-      implementationName,
-      minRefreshInterval
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      name,
-      implementation,
-      implementationName,
-      minRefreshInterval,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <MenuItem
-        {...otherProps}
-        onPress={this.onPress}
-      >
-        {name}
-      </MenuItem>
-    );
-  }
-}
-
-AddImportListPresetMenuItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  implementation: PropTypes.string.isRequired,
-  implementationName: PropTypes.string.isRequired,
-  minRefreshInterval: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired
-};
-
-export default AddImportListPresetMenuItem;

frontend/src/Settings/ImportLists/ImportLists/AddImportListPresetMenuItem.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import MenuItem, { MenuItemProps } from 'Components/Menu/MenuItem';
+import { selectImportListSchema } from 'Store/Actions/settingsActions';
+
+interface AddImportListPresetMenuItemProps
+  extends Omit<MenuItemProps, 'children'> {
+  name: string;
+  implementation: string;
+  implementationName: string;
+  minRefreshInterval: string;
+  onPress: () => void;
+}
+
+function AddImportListPresetMenuItem({
+  name,
+  implementation,
+  implementationName,
+  minRefreshInterval,
+  onPress,
+  ...otherProps
+}: AddImportListPresetMenuItemProps) {
+  const dispatch = useDispatch();
+
+  const handlePress = useCallback(() => {
+    dispatch(
+      selectImportListSchema({
+        implementation,
+        implementationName,
+        presetName: name,
+      })
+    );
+
+    onPress();
+  }, [name, implementation, implementationName, dispatch, onPress]);
+
+  return (
+    <MenuItem {...otherProps} onPress={handlePress}>
+      {name}
+    </MenuItem>
+  );
+}
+
+export default AddImportListPresetMenuItem;

frontend/src/Settings/ImportLists/ImportLists/EditImportListModal.js

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import { sizes } from 'Helpers/Props';
-import EditImportListModalContentConnector from './EditImportListModalContentConnector';
-
-function EditImportListModal({ isOpen, onModalClose, ...otherProps }) {
-  return (
-    <Modal
-      size={sizes.MEDIUM}
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <EditImportListModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-EditImportListModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default EditImportListModal;

frontend/src/Settings/ImportLists/ImportLists/EditImportListModal.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from 'Components/Modal/Modal';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import {
+  cancelSaveImportList,
+  cancelTestImportList,
+} from 'Store/Actions/settingsActions';
+import EditImportListModalContent, {
+  EditImportListModalContentProps,
+} from './EditImportListModalContent';
+
+const section = 'settings.importLists';
+
+interface EditImportListModalProps extends EditImportListModalContentProps {
+  isOpen: boolean;
+}
+
+function EditImportListModal({
+  isOpen,
+  onModalClose,
+  ...otherProps
+}: EditImportListModalProps) {
+  const dispatch = useDispatch();
+
+  const handleModalClose = useCallback(() => {
+    dispatch(clearPendingChanges({ section }));
+    dispatch(cancelTestImportList({ section }));
+    dispatch(cancelSaveImportList({ section }));
+
+    onModalClose();
+  }, [dispatch, onModalClose]);
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={handleModalClose}>
+      <EditImportListModalContent
+        {...otherProps}
+        onModalClose={handleModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default EditImportListModal;

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalConnector.js

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import { cancelSaveImportList, cancelTestImportList } from 'Store/Actions/settingsActions';
-import EditImportListModal from './EditImportListModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  const section = 'settings.importLists';
-
-  return {
-    dispatchClearPendingChanges() {
-      dispatch(clearPendingChanges({ section }));
-    },
-
-    dispatchCancelTestImportList() {
-      dispatch(cancelTestImportList({ section }));
-    },
-
-    dispatchCancelSaveImportList() {
-      dispatch(cancelSaveImportList({ section }));
-    }
-  };
-}
-
-class EditImportListModalConnector extends Component {
-
-  //
-  // Listeners
-
-  onModalClose = () => {
-    this.props.dispatchClearPendingChanges();
-    this.props.dispatchCancelTestImportList();
-    this.props.dispatchCancelSaveImportList();
-    this.props.onModalClose();
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchClearPendingChanges,
-      dispatchCancelTestImportList,
-      dispatchCancelSaveImportList,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <EditImportListModal
-        {...otherProps}
-        onModalClose={this.onModalClose}
-      />
-    );
-  }
-}
-
-EditImportListModalConnector.propTypes = {
-  onModalClose: PropTypes.func.isRequired,
-  dispatchClearPendingChanges: PropTypes.func.isRequired,
-  dispatchCancelTestImportList: PropTypes.func.isRequired,
-  dispatchCancelSaveImportList: PropTypes.func.isRequired
-};
-
-export default connect(null, createMapDispatchToProps)(EditImportListModalConnector);

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js

@@ -1,308 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import MovieMinimumAvailabilityPopoverContent from 'AddMovie/MovieMinimumAvailabilityPopoverContent';
-import Alert from 'Components/Alert';
-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 ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-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 Popover from 'Components/Tooltip/Popover';
-import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
-import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
-import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
-import translate from 'Utilities/String/translate';
-import styles from './EditImportListModalContent.css';
-
-function EditImportListModalContent(props) {
-  const {
-    advancedSettings,
-    isFetching,
-    error,
-    isSaving,
-    isTesting,
-    saveError,
-    item,
-    onInputChange,
-    onFieldChange,
-    onModalClose,
-    onSavePress,
-    onTestPress,
-    onAdvancedSettingsPress,
-    onDeleteImportListPress,
-    ...otherProps
-  } = props;
-
-  const {
-    id,
-    implementationName,
-    name,
-    enabled,
-    enableAuto,
-    minRefreshInterval,
-    monitor,
-    minimumAvailability,
-    qualityProfileId,
-    rootFolderPath,
-    searchOnAdd,
-    tags,
-    fields,
-    message
-  } = item;
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        {id ? translate('EditImportListImplementation', { implementationName }) : translate('AddImportListImplementation', { implementationName })}
-      </ModalHeader>
-
-      <ModalBody>
-        {
-          isFetching ?
-            <LoadingIndicator /> :
-            null
-        }
-
-        {
-          !isFetching && !!error ?
-            <Alert kind={kinds.DANGER}>
-              {translate('AddListError')}
-            </Alert> :
-            null
-        }
-
-        {
-          !isFetching && !error ?
-            <Form
-              {...otherProps}
-            >
-              {
-                !!message &&
-                  <Alert
-                    className={styles.message}
-                    kind={message.value.type}
-                  >
-                    {message.value.message}
-                  </Alert>
-              }
-
-              <Alert
-                kind={kinds.INFO}
-                className={styles.message}
-              >
-                {translate('ListWillRefreshEveryInterval', {
-                  refreshInterval: formatShortTimeSpan(minRefreshInterval.value)
-                })}
-              </Alert>
-
-              <FormGroup>
-                <FormLabel>{translate('Name')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.TEXT}
-                  name="name"
-                  {...name}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('Enable')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="enabled"
-                  helpText={translate('ListEnabledHelpText')}
-                  {...enabled}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('EnableAutomaticAdd')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="enableAuto"
-                  helpText={translate('EnableAutomaticAddMovieHelpText')}
-                  {...enableAuto}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('Monitor')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.MONITOR_MOVIES_SELECT}
-                  name="monitor"
-                  helpText={translate('ListMonitorMovieHelpText')}
-                  {...monitor}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('SearchOnAdd')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="searchOnAdd"
-                  helpText={translate('ListSearchOnAddMovieHelpText')}
-                  {...searchOnAdd}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>
-                  {translate('MinimumAvailability')}
-
-                  <Popover
-                    anchor={
-                      <Icon
-                        className={styles.labelIcon}
-                        name={icons.INFO}
-                      />
-                    }
-                    title={translate('MinimumAvailability')}
-                    body={<MovieMinimumAvailabilityPopoverContent />}
-                    position={tooltipPositions.RIGHT}
-                  />
-                </FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.AVAILABILITY_SELECT}
-                  name="minimumAvailability"
-                  {...minimumAvailability}
-                  onChange={onInputChange}
-                  helpLink="https://wiki.servarr.com/radarr/faq#what-is-minimum-availability"
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('QualityProfile')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.QUALITY_PROFILE_SELECT}
-                  name="qualityProfileId"
-                  helpText={translate('ListQualityProfileHelpText')}
-                  {...qualityProfileId}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('RootFolder')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.ROOT_FOLDER_SELECT}
-                  name="rootFolderPath"
-                  helpText={translate('ListRootFolderHelpText')}
-                  {...rootFolderPath}
-                  includeMissingValue={true}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('RadarrTags')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.TAG}
-                  name="tags"
-                  helpText={translate('ListTagsHelpText')}
-                  {...tags}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              {
-                fields.map((field) => {
-                  return (
-                    <ProviderFieldFormGroup
-                      key={field.name}
-                      advancedSettings={advancedSettings}
-                      provider="importList"
-                      providerData={item}
-                      {...field}
-                      onChange={onFieldChange}
-                    />
-                  );
-                })
-              }
-
-            </Form> :
-            null
-        }
-      </ModalBody>
-      <ModalFooter>
-        {
-          id &&
-            <Button
-              className={styles.deleteButton}
-              kind={kinds.DANGER}
-              onPress={onDeleteImportListPress}
-            >
-              {translate('Delete')}
-            </Button>
-        }
-
-        <AdvancedSettingsButton
-          advancedSettings={advancedSettings}
-          onAdvancedSettingsPress={onAdvancedSettingsPress}
-          showLabel={false}
-        />
-
-        <SpinnerErrorButton
-          isSpinning={isTesting}
-          error={saveError}
-          onPress={onTestPress}
-        >
-          {translate('Test')}
-        </SpinnerErrorButton>
-
-        <Button
-          onPress={onModalClose}
-        >
-          {translate('Cancel')}
-        </Button>
-
-        <SpinnerErrorButton
-          isSpinning={isSaving}
-          error={saveError}
-          onPress={onSavePress}
-        >
-          {translate('Save')}
-        </SpinnerErrorButton>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-EditImportListModalContent.propTypes = {
-  advancedSettings: PropTypes.bool.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  isSaving: PropTypes.bool.isRequired,
-  isTesting: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  item: PropTypes.object.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onFieldChange: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSavePress: PropTypes.func.isRequired,
-  onTestPress: PropTypes.func.isRequired,
-  onAdvancedSettingsPress: PropTypes.func.isRequired,
-  onDeleteImportListPress: PropTypes.func
-};
-
-export default EditImportListModalContent;

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.tsx

@@ -0,0 +1,313 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import MovieMinimumAvailabilityPopoverContent from 'AddMovie/MovieMinimumAvailabilityPopoverContent';
+import { ImportListAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
+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 ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 Popover from 'Components/Tooltip/Popover';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
+import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
+import {
+  saveImportList,
+  setImportListFieldValue,
+  setImportListValue,
+  testImportList,
+} from 'Store/Actions/settingsActions';
+import { createProviderSettingsSelectorHook } from 'Store/Selectors/createProviderSettingsSelector';
+import ImportList from 'typings/ImportList';
+import { InputChanged } from 'typings/inputs';
+import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
+import translate from 'Utilities/String/translate';
+import styles from './EditImportListModalContent.css';
+
+export interface EditImportListModalContentProps {
+  id?: number;
+  onModalClose: () => void;
+  onDeleteImportListPress?: () => void;
+}
+
+function EditImportListModalContent({
+  id,
+  onModalClose,
+  onDeleteImportListPress,
+}: EditImportListModalContentProps) {
+  const dispatch = useDispatch();
+  const showAdvancedSettings = useShowAdvancedSettings();
+
+  const {
+    isFetching,
+    isSaving,
+    isTesting = false,
+    error,
+    saveError,
+    item,
+    validationErrors,
+    validationWarnings,
+  } = useSelector(
+    createProviderSettingsSelectorHook<ImportList, ImportListAppState>(
+      'importLists',
+      id
+    )
+  );
+
+  const wasSaving = usePrevious(isSaving);
+
+  const {
+    implementationName,
+    name,
+    enabled,
+    enableAuto,
+    minRefreshInterval,
+    monitor,
+    minimumAvailability,
+    rootFolderPath,
+    qualityProfileId,
+    searchOnAdd,
+    tags,
+    fields,
+  } = item;
+
+  const handleInputChange = useCallback(
+    (change: InputChanged) => {
+      // @ts-expect-error - actions are not typed
+      dispatch(setImportListValue(change));
+    },
+    [dispatch]
+  );
+
+  const handleFieldChange = useCallback(
+    (change: InputChanged) => {
+      // @ts-expect-error - actions are not typed
+      dispatch(setImportListFieldValue(change));
+    },
+    [dispatch]
+  );
+
+  const handleTestPress = useCallback(() => {
+    dispatch(testImportList({ id }));
+  }, [id, dispatch]);
+
+  const handleSavePress = useCallback(() => {
+    dispatch(saveImportList({ id }));
+  }, [id, dispatch]);
+
+  useEffect(() => {
+    if (wasSaving && !isSaving && !saveError) {
+      onModalClose();
+    }
+  }, [isSaving, wasSaving, saveError, onModalClose]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {id
+          ? translate('EditImportListImplementation', { implementationName })
+          : translate('AddImportListImplementation', { implementationName })}
+      </ModalHeader>
+
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {!isFetching && !!error ? (
+          <Alert kind={kinds.DANGER}>{translate('AddListError')}</Alert>
+        ) : null}
+
+        {!isFetching && !error ? (
+          <Form
+            validationErrors={validationErrors}
+            validationWarnings={validationWarnings}
+          >
+            <Alert kind={kinds.INFO} className={styles.message}>
+              {translate('ListWillRefreshEveryInterval', {
+                refreshInterval: formatShortTimeSpan(minRefreshInterval.value),
+              })}
+            </Alert>
+
+            <FormGroup>
+              <FormLabel>{translate('Name')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.TEXT}
+                name="name"
+                {...name}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('Enable')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="enabled"
+                helpText={translate('ListEnabledHelpText')}
+                {...enabled}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('EnableAutomaticAdd')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="enableAuto"
+                helpText={translate('EnableAutomaticAddMovieHelpText')}
+                {...enableAuto}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('Monitor')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.MONITOR_MOVIES_SELECT}
+                name="monitor"
+                helpText={translate('ListMonitorMovieHelpText')}
+                {...monitor}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('SearchOnAdd')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="searchOnAdd"
+                helpText={translate('ListSearchOnAddMovieHelpText')}
+                {...searchOnAdd}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('MinimumAvailability')}
+
+                <Popover
+                  anchor={
+                    <Icon className={styles.labelIcon} name={icons.INFO} />
+                  }
+                  title={translate('MinimumAvailability')}
+                  body={<MovieMinimumAvailabilityPopoverContent />}
+                  position={tooltipPositions.RIGHT}
+                />
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.AVAILABILITY_SELECT}
+                name="minimumAvailability"
+                {...minimumAvailability}
+                helpLink="https://wiki.servarr.com/radarr/faq#what-is-minimum-availability"
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('QualityProfile')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.QUALITY_PROFILE_SELECT}
+                name="qualityProfileId"
+                helpText={translate('ListQualityProfileHelpText')}
+                {...qualityProfileId}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('RootFolder')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.ROOT_FOLDER_SELECT}
+                name="rootFolderPath"
+                helpText={translate('ListRootFolderHelpText')}
+                {...rootFolderPath}
+                includeMissingValue={true}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('RadarrTags')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.TAG}
+                name="tags"
+                helpText={translate('ListTagsHelpText')}
+                {...tags}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            {fields?.length ? (
+              <div>
+                {fields.map((field) => {
+                  return (
+                    <ProviderFieldFormGroup
+                      key={field.name}
+                      {...field}
+                      advancedSettings={showAdvancedSettings}
+                      provider="importList"
+                      providerData={item}
+                      onChange={handleFieldChange}
+                    />
+                  );
+                })}
+              </div>
+            ) : null}
+          </Form>
+        ) : null}
+      </ModalBody>
+      <ModalFooter>
+        {id ? (
+          <Button
+            className={styles.deleteButton}
+            kind={kinds.DANGER}
+            onPress={onDeleteImportListPress}
+          >
+            {translate('Delete')}
+          </Button>
+        ) : null}
+
+        <AdvancedSettingsButton showLabel={false} />
+
+        <SpinnerErrorButton
+          isSpinning={isTesting}
+          error={saveError}
+          onPress={handleTestPress}
+        >
+          {translate('Test')}
+        </SpinnerErrorButton>
+
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <SpinnerErrorButton
+          isSpinning={isSaving}
+          error={saveError}
+          onPress={handleSavePress}
+        >
+          {translate('Save')}
+        </SpinnerErrorButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default EditImportListModalContent;

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContentConnector.js

@@ -1,101 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import {
-  saveImportList,
-  setImportListFieldValue,
-  setImportListValue,
-  testImportList,
-  toggleAdvancedSettings
-} from 'Store/Actions/settingsActions';
-import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
-import EditImportListModalContent from './EditImportListModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.advancedSettings,
-    createProviderSettingsSelector('importLists'),
-    (advancedSettings, importList) => {
-      return {
-        advancedSettings,
-        ...importList
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  setImportListValue,
-  setImportListFieldValue,
-  saveImportList,
-  testImportList,
-  toggleAdvancedSettings
-};
-
-class EditImportListModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
-      this.props.onModalClose();
-    }
-  }
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.setImportListValue({ name, value });
-  };
-
-  onFieldChange = ({ name, value }) => {
-    this.props.setImportListFieldValue({ name, value });
-  };
-
-  onSavePress = () => {
-    this.props.saveImportList({ id: this.props.id });
-  };
-
-  onTestPress = () => {
-    this.props.testImportList({ id: this.props.id });
-  };
-
-  onAdvancedSettingsPress = () => {
-    this.props.toggleAdvancedSettings();
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <EditImportListModalContent
-        {...this.props}
-        onSavePress={this.onSavePress}
-        onTestPress={this.onTestPress}
-        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
-        onInputChange={this.onInputChange}
-        onFieldChange={this.onFieldChange}
-      />
-    );
-  }
-}
-
-EditImportListModalContentConnector.propTypes = {
-  id: PropTypes.number,
-  isFetching: PropTypes.bool.isRequired,
-  isSaving: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  item: PropTypes.object.isRequired,
-  setImportListValue: PropTypes.func.isRequired,
-  setImportListFieldValue: PropTypes.func.isRequired,
-  saveImportList: PropTypes.func.isRequired,
-  testImportList: PropTypes.func.isRequired,
-  toggleAdvancedSettings: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(EditImportListModalContentConnector);

frontend/src/Settings/ImportLists/ImportLists/ImportList.css

@@ -4,6 +4,11 @@
   width: 290px;
 }
 
+.nameContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
 .name {
   @add-mixin truncate;
 
@@ -12,6 +17,12 @@
   font-size: 24px;
 }
 
+.cloneButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  height: 36px;
+}
+
 .enabled {
   display: flex;
   flex-wrap: wrap;

frontend/src/Settings/ImportLists/ImportLists/ImportList.css.d.ts

@@ -1,9 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'cloneButton': string;
   'enabled': string;
   'list': string;
   'name': string;
+  'nameContainer': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Settings/ImportLists/ImportLists/ImportList.js

@@ -1,143 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Card from 'Components/Card';
-import Label from 'Components/Label';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
-import TagList from 'Components/TagList';
-import { kinds } from 'Helpers/Props';
-import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
-import translate from 'Utilities/String/translate';
-import EditImportListModalConnector from './EditImportListModalConnector';
-import styles from './ImportList.css';
-
-class ImportList extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isEditImportListModalOpen: false,
-      isDeleteImportListModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onEditImportListPress = () => {
-    this.setState({ isEditImportListModalOpen: true });
-  };
-
-  onEditImportListModalClose = () => {
-    this.setState({ isEditImportListModalOpen: false });
-  };
-
-  onDeleteImportListPress = () => {
-    this.setState({
-      isEditImportListModalOpen: false,
-      isDeleteImportListModalOpen: true
-    });
-  };
-
-  onDeleteImportListModalClose = () => {
-    this.setState({ isDeleteImportListModalOpen: false });
-  };
-
-  onConfirmDeleteImportList = () => {
-    this.props.onConfirmDeleteImportList(this.props.id);
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      id,
-      name,
-      enabled,
-      enableAuto,
-      tags,
-      tagList,
-      minRefreshInterval
-    } = this.props;
-
-    return (
-      <Card
-        className={styles.list}
-        overlayContent={true}
-        onPress={this.onEditImportListPress}
-      >
-        <div className={styles.name}>
-          {name}
-        </div>
-
-        <div className={styles.enabled}>
-          {
-            enabled ?
-              <Label kind={kinds.SUCCESS}>
-                {translate('Enabled')}
-              </Label> :
-              <Label
-                kind={kinds.DISABLED}
-                outline={true}
-              >
-                {translate('Disabled')}
-              </Label>
-          }
-
-          {
-            enableAuto ?
-              <Label kind={kinds.SUCCESS}>
-                {translate('AutomaticAdd')}
-              </Label> :
-              null
-          }
-        </div>
-
-        <TagList
-          tags={tags}
-          tagList={tagList}
-        />
-
-        <div className={styles.enabled}>
-          <Label kind={kinds.DEFAULT} title='List Refresh Interval'>
-            {`${translate('Refresh')}: ${formatShortTimeSpan(minRefreshInterval)}`}
-          </Label>
-        </div>
-
-        <EditImportListModalConnector
-          id={id}
-          isOpen={this.state.isEditImportListModalOpen}
-          onModalClose={this.onEditImportListModalClose}
-          onDeleteImportListPress={this.onDeleteImportListPress}
-        />
-
-        <ConfirmModal
-          isOpen={this.state.isDeleteImportListModalOpen}
-          kind={kinds.DANGER}
-          title={translate('DeleteImportList')}
-          message={translate('DeleteImportListMessageText', { name })}
-          confirmLabel={translate('Delete')}
-          onConfirm={this.onConfirmDeleteImportList}
-          onCancel={this.onDeleteImportListModalClose}
-        />
-      </Card>
-    );
-  }
-}
-
-ImportList.propTypes = {
-  id: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-  enabled: PropTypes.bool.isRequired,
-  enableAuto: PropTypes.bool.isRequired,
-  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
-  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
-  minRefreshInterval: PropTypes.string.isRequired,
-  onConfirmDeleteImportList: PropTypes.func.isRequired
-};
-
-export default ImportList;

frontend/src/Settings/ImportLists/ImportLists/ImportList.tsx

@@ -0,0 +1,130 @@
+import React, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import Card from 'Components/Card';
+import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TagList from 'Components/TagList';
+import { icons, kinds } from 'Helpers/Props';
+import { deleteImportList } from 'Store/Actions/settingsActions';
+import useTags from 'Tags/useTags';
+import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
+import translate from 'Utilities/String/translate';
+import EditImportListModal from './EditImportListModal';
+import styles from './ImportList.css';
+
+interface ImportListProps {
+  id: number;
+  name: string;
+  enabled: boolean;
+  enableAuto: boolean;
+  tags: number[];
+  minRefreshInterval: string;
+  onCloneImportListPress: (id: number) => void;
+}
+
+function ImportList({
+  id,
+  name,
+  enabled,
+  enableAuto,
+  tags,
+  minRefreshInterval,
+  onCloneImportListPress,
+}: ImportListProps) {
+  const dispatch = useDispatch();
+  const tagList = useTags();
+
+  const [isEditImportListModalOpen, setIsEditImportListModalOpen] =
+    useState(false);
+
+  const [isDeleteImportListModalOpen, setIsDeleteImportListModalOpen] =
+    useState(false);
+
+  const handleEditImportListPress = useCallback(() => {
+    setIsEditImportListModalOpen(true);
+  }, []);
+
+  const handleEditImportListModalClose = useCallback(() => {
+    setIsEditImportListModalOpen(false);
+  }, []);
+
+  const handleDeleteImportListPress = useCallback(() => {
+    setIsEditImportListModalOpen(false);
+    setIsDeleteImportListModalOpen(true);
+  }, []);
+
+  const handleDeleteImportListModalClose = useCallback(() => {
+    setIsDeleteImportListModalOpen(false);
+  }, []);
+
+  const handleConfirmDeleteImportList = useCallback(() => {
+    dispatch(deleteImportList({ id }));
+  }, [id, dispatch]);
+
+  const handleCloneImportListPress = useCallback(() => {
+    onCloneImportListPress(id);
+  }, [id, onCloneImportListPress]);
+
+  return (
+    <Card
+      className={styles.list}
+      overlayContent={true}
+      onPress={handleEditImportListPress}
+    >
+      <div className={styles.nameContainer}>
+        <div className={styles.name}>{name}</div>
+
+        <IconButton
+          className={styles.cloneButton}
+          title={translate('CloneImportList')}
+          name={icons.CLONE}
+          onPress={handleCloneImportListPress}
+        />
+      </div>
+
+      <div className={styles.enabled}>
+        {enabled ? (
+          <Label kind={kinds.SUCCESS}>{translate('Enabled')}</Label>
+        ) : (
+          <Label kind={kinds.DISABLED} outline={true}>
+            {translate('Disabled')}
+          </Label>
+        )}
+
+        {enableAuto ? (
+          <Label kind={kinds.SUCCESS}>{translate('AutomaticAdd')}</Label>
+        ) : null}
+      </div>
+
+      <TagList tags={tags} tagList={tagList} />
+
+      <div className={styles.enabled}>
+        <Label kind={kinds.DEFAULT} title={translate('ListRefreshInterval')}>
+          {`${translate('Refresh')}: ${formatShortTimeSpan(
+            minRefreshInterval
+          )}`}
+        </Label>
+      </div>
+
+      <EditImportListModal
+        id={id}
+        isOpen={isEditImportListModalOpen}
+        onModalClose={handleEditImportListModalClose}
+        onDeleteImportListPress={handleDeleteImportListPress}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteImportListModalOpen}
+        kind={kinds.DANGER}
+        title={translate('DeleteImportList')}
+        message={translate('DeleteImportListMessageText', { name })}
+        confirmLabel={translate('Delete')}
+        onConfirm={handleConfirmDeleteImportList}
+        onCancel={handleDeleteImportListModalClose}
+      />
+    </Card>
+  );
+}
+
+export default ImportList;

frontend/src/Settings/ImportLists/ImportLists/ImportLists.js

@@ -1,118 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Card from 'Components/Card';
-import FieldSet from 'Components/FieldSet';
-import Icon from 'Components/Icon';
-import PageSectionContent from 'Components/Page/PageSectionContent';
-import { icons } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import AddImportListModal from './AddImportListModal';
-import EditImportListModalConnector from './EditImportListModalConnector';
-import ImportList from './ImportList';
-import styles from './ImportLists.css';
-
-class ImportLists extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isAddImportListModalOpen: false,
-      isEditImportListModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onAddImportListPress = () => {
-    this.setState({ isAddImportListModalOpen: true });
-  };
-
-  onAddImportListModalClose = ({ listSelected = false } = {}) => {
-    this.setState({
-      isAddImportListModalOpen: false,
-      isEditImportListModalOpen: listSelected
-    });
-  };
-
-  onEditImportListModalClose = () => {
-    this.setState({ isEditImportListModalOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      items,
-      tagList,
-      onConfirmDeleteImportList,
-      ...otherProps
-    } = this.props;
-
-    const {
-      isAddImportListModalOpen,
-      isEditImportListModalOpen
-    } = this.state;
-
-    return (
-      <FieldSet legend={translate('ImportLists')} >
-        <PageSectionContent
-          errorMessage={translate('ImportListsLoadError')}
-          {...otherProps}
-        >
-          <div className={styles.lists}>
-            {
-              items.map((item) => {
-                return (
-                  <ImportList
-                    key={item.id}
-                    {...item}
-                    tagList={tagList}
-                    onConfirmDeleteImportList={onConfirmDeleteImportList}
-                  />
-                );
-              })
-            }
-
-            <Card
-              className={styles.addList}
-              onPress={this.onAddImportListPress}
-            >
-              <div className={styles.center}>
-                <Icon
-                  name={icons.ADD}
-                  size={45}
-                />
-              </div>
-            </Card>
-          </div>
-
-          <AddImportListModal
-            isOpen={isAddImportListModalOpen}
-            onModalClose={this.onAddImportListModalClose}
-          />
-
-          <EditImportListModalConnector
-            isOpen={isEditImportListModalOpen}
-            onModalClose={this.onEditImportListModalClose}
-          />
-        </PageSectionContent>
-      </FieldSet>
-    );
-  }
-}
-
-ImportLists.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onConfirmDeleteImportList: PropTypes.func.isRequired
-};
-
-export default ImportLists;

frontend/src/Settings/ImportLists/ImportLists/ImportLists.tsx

@@ -0,0 +1,109 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ImportListAppState } from 'App/State/SettingsAppState';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons } from 'Helpers/Props';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import {
+  cloneImportList,
+  fetchImportLists,
+} from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import ImportListModel from 'typings/ImportList';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import AddImportListModal from './AddImportListModal';
+import EditImportListModal from './EditImportListModal';
+import ImportList from './ImportList';
+import styles from './ImportLists.css';
+
+function ImportLists() {
+  const dispatch = useDispatch();
+
+  const { isFetching, isPopulated, items, error } = useSelector(
+    createSortedSectionSelector<ImportListModel, ImportListAppState>(
+      'settings.importLists',
+      sortByProp('name')
+    )
+  );
+
+  const [isAddImportListModalOpen, setIsAddImportListModalOpen] =
+    useState(false);
+  const [isEditImportListModalOpen, setIsEditImportListModalOpen] =
+    useState(false);
+
+  const handleAddImportListPress = useCallback(() => {
+    setIsAddImportListModalOpen(true);
+  }, []);
+
+  const handleAddImportListModalClose = useCallback(() => {
+    setIsAddImportListModalOpen(false);
+  }, []);
+
+  const handleImportListSelect = useCallback(() => {
+    setIsAddImportListModalOpen(false);
+    setIsEditImportListModalOpen(true);
+  }, []);
+
+  const handleEditImportListModalClose = useCallback(() => {
+    setIsEditImportListModalOpen(false);
+  }, []);
+
+  const handleCloneImportListPress = useCallback(
+    (id: number) => {
+      dispatch(cloneImportList({ id }));
+      setIsEditImportListModalOpen(true);
+    },
+    [dispatch]
+  );
+
+  useEffect(() => {
+    dispatch(fetchImportLists());
+    dispatch(fetchRootFolders());
+  }, [dispatch]);
+
+  return (
+    <FieldSet legend={translate('ImportLists')}>
+      <PageSectionContent
+        errorMessage={translate('ImportListsLoadError')}
+        error={error}
+        isFetching={isFetching}
+        isPopulated={isPopulated}
+      >
+        <div className={styles.lists}>
+          {items.map((item) => {
+            return (
+              <ImportList
+                key={item.id}
+                {...item}
+                onCloneImportListPress={handleCloneImportListPress}
+              />
+            );
+          })}
+
+          <Card className={styles.addList} onPress={handleAddImportListPress}>
+            <div className={styles.center}>
+              <Icon name={icons.ADD} size={45} />
+            </div>
+          </Card>
+        </div>
+
+        <AddImportListModal
+          isOpen={isAddImportListModalOpen}
+          onImportListSelect={handleImportListSelect}
+          onModalClose={handleAddImportListModalClose}
+        />
+
+        <EditImportListModal
+          isOpen={isEditImportListModalOpen}
+          onModalClose={handleEditImportListModalClose}
+        />
+      </PageSectionContent>
+    </FieldSet>
+  );
+}
+
+export default ImportLists;

frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js

@@ -1,67 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
-import { deleteImportList, fetchImportLists } from 'Store/Actions/settingsActions';
-import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByProp from 'Utilities/Array/sortByProp';
-import ImportLists from './ImportLists';
-
-function createMapStateToProps() {
-  return createSelector(
-    createSortedSectionSelector('settings.importLists', sortByProp('name')),
-    createTagsSelector(),
-    (importLists, tagList) => {
-      return {
-        ...importLists,
-        tagList
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchImportLists,
-  deleteImportList,
-  fetchRootFolders
-};
-
-class ImportListsConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchImportLists();
-    this.props.fetchRootFolders();
-  }
-
-  //
-  // Listeners
-
-  onConfirmDeleteImportList = (id) => {
-    this.props.deleteImportList({ id });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <ImportLists
-        {...this.props}
-        onConfirmDeleteImportList={this.onConfirmDeleteImportList}
-      />
-    );
-  }
-}
-
-ImportListsConnector.propTypes = {
-  fetchImportLists: PropTypes.func.isRequired,
-  deleteImportList: PropTypes.func.isRequired,
-  fetchRootFolders: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(ImportListsConnector);

frontend/src/Settings/ImportLists/Options/ImportListOptions.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useEffect } 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 FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
+import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes, kinds } from 'Helpers/Props';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import {
@@ -20,53 +20,62 @@ import createSettingsSectionSelector from 'Store/Selectors/createSettingsSection
 import translate from 'Utilities/String/translate';
 
 const SECTION = 'importListOptions';
-const cleanLibraryLevelOptions = [
-  { key: 'disabled', value: () => translate('Disabled') },
-  { key: 'logOnly', value: () => translate('LogOnly') },
-  { key: 'keepAndUnmonitor', value: () => translate('KeepAndUnmonitorMovie') },
-  { key: 'removeAndKeep', value: () => translate('RemoveMovieAndKeepFiles') },
+const cleanLibraryLevelOptions: EnhancedSelectInputValue<string>[] = [
+  {
+    key: 'disabled',
+    get value() {
+      return translate('Disabled');
+    },
+  },
+  {
+    key: 'logOnly',
+    get value() {
+      return translate('LogOnly');
+    },
+  },
+  {
+    key: 'keepAndUnmonitor',
+    get value() {
+      return translate('KeepAndUnmonitorMovie');
+    },
+  },
+  {
+    key: 'removeAndKeep',
+    get value() {
+      return translate('RemoveMovieAndKeepFiles');
+    },
+  },
   {
     key: 'removeAndDelete',
-    value: () => translate('RemoveMovieAndDeleteFiles'),
+    get value() {
+      return translate('RemoveMovieAndDeleteFiles');
+    },
   },
 ];
 
-function createImportListOptionsSelector() {
-  return createSelector(
-    (state: AppState) => state.settings.advancedSettings,
-    createSettingsSectionSelector(SECTION),
-    (advancedSettings, sectionSettings) => {
-      return {
-        advancedSettings,
-        save: sectionSettings.isSaving,
-        ...sectionSettings,
-      };
-    }
-  );
-}
-
-interface ImportListOptionsPageProps {
+interface ImportListOptionsProps {
   setChildSave(saveCallback: () => void): void;
   onChildStateChange(payload: unknown): void;
 }
 
-function ImportListOptions(props: ImportListOptionsPageProps) {
-  const { setChildSave, onChildStateChange } = props;
+function ImportListOptions({
+  setChildSave,
+  onChildStateChange,
+}: ImportListOptionsProps) {
+  const dispatch = useDispatch();
+  const showAdvancedSettings = useShowAdvancedSettings();
 
   const {
     isSaving,
     hasPendingChanges,
-    advancedSettings,
     isFetching,
     error,
     settings,
     hasSettings,
-  } = useSelector(createImportListOptionsSelector());
+  } = useSelector(createSettingsSectionSelector(SECTION));
 
   const { listSyncLevel } = settings;
 
-  const dispatch = useDispatch();
-
   const onInputChange = useCallback(
     ({ name, value }: { name: string; value: unknown }) => {
       // @ts-expect-error 'setImportListOptionsValue' isn't typed yet
@@ -80,7 +89,7 @@ function ImportListOptions(props: ImportListOptionsPageProps) {
     setChildSave(() => dispatch(saveImportListOptions()));
 
     return () => {
-      dispatch(clearPendingChanges({ section: SECTION }));
+      dispatch(clearPendingChanges({ section: `settings.${SECTION}` }));
     };
   }, [dispatch, setChildSave]);
 
@@ -91,16 +100,11 @@ function ImportListOptions(props: ImportListOptionsPageProps) {
     });
   }, [onChildStateChange, isSaving, hasPendingChanges]);
 
-  const translatedLevelOptions = cleanLibraryLevelOptions.map(
-    ({ key, value }) => {
-      return {
-        key,
-        value: value(),
-      };
-    }
-  );
+  if (!showAdvancedSettings) {
+    return null;
+  }
 
-  return advancedSettings ? (
+  return (
     <FieldSet legend={translate('Options')}>
       {isFetching ? <LoadingIndicator /> : null}
 
@@ -110,12 +114,12 @@ function ImportListOptions(props: ImportListOptionsPageProps) {
 
       {hasSettings && !isFetching && !error ? (
         <Form>
-          <FormGroup advancedSettings={advancedSettings} isAdvanced={true}>
+          <FormGroup advancedSettings={showAdvancedSettings} isAdvanced={true}>
             <FormLabel>{translate('CleanLibraryLevel')}</FormLabel>
             <FormInputGroup
               type={inputTypes.SELECT}
               name="listSyncLevel"
-              values={translatedLevelOptions}
+              values={cleanLibraryLevelOptions}
               helpText={translate('ListSyncLevelHelpText')}
               onChange={onInputChange}
               {...listSyncLevel}
@@ -124,7 +128,7 @@ function ImportListOptions(props: ImportListOptionsPageProps) {
         </Form>
       ) : null}
     </FieldSet>
-  ) : null;
+  );
 }
 
 export default ImportListOptions;

frontend/src/Settings/Indexers/IndexerSettings.js

@@ -1,120 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { icons } from 'Helpers/Props';
-import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
-import translate from 'Utilities/String/translate';
-import IndexersConnector from './Indexers/IndexersConnector';
-import ManageIndexersModal from './Indexers/Manage/ManageIndexersModal';
-import IndexerOptionsConnector from './Options/IndexerOptionsConnector';
-
-class IndexerSettings extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._saveCallback = null;
-
-    this.state = {
-      isSaving: false,
-      hasPendingChanges: false,
-      isManageIndexersOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onChildMounted = (saveCallback) => {
-    this._saveCallback = saveCallback;
-  };
-
-  onChildStateChange = (payload) => {
-    this.setState(payload);
-  };
-
-  onManageIndexersPress = () => {
-    this.setState({ isManageIndexersOpen: true });
-  };
-
-  onManageIndexersModalClose = () => {
-    this.setState({ isManageIndexersOpen: false });
-  };
-
-  onSavePress = () => {
-    if (this._saveCallback) {
-      this._saveCallback();
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      isTestingAll,
-      dispatchTestAllIndexers
-    } = this.props;
-
-    const {
-      isSaving,
-      hasPendingChanges,
-      isManageIndexersOpen
-    } = this.state;
-
-    return (
-      <PageContent title={translate('IndexerSettings')}>
-        <SettingsToolbarConnector
-          isSaving={isSaving}
-          hasPendingChanges={hasPendingChanges}
-          additionalButtons={
-            <Fragment>
-              <PageToolbarSeparator />
-
-              <PageToolbarButton
-                label={translate('TestAllIndexers')}
-                iconName={icons.TEST}
-                isSpinning={isTestingAll}
-                onPress={dispatchTestAllIndexers}
-              />
-
-              <PageToolbarButton
-                label={translate('ManageIndexers')}
-                iconName={icons.MANAGE}
-                onPress={this.onManageIndexersPress}
-              />
-            </Fragment>
-          }
-          onSavePress={this.onSavePress}
-        />
-
-        <PageContentBody>
-          <IndexersConnector />
-
-          <IndexerOptionsConnector
-            onChildMounted={this.onChildMounted}
-            onChildStateChange={this.onChildStateChange}
-          />
-
-          <ManageIndexersModal
-            isOpen={isManageIndexersOpen}
-            onModalClose={this.onManageIndexersModalClose}
-          />
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-}
-
-IndexerSettings.propTypes = {
-  isTestingAll: PropTypes.bool.isRequired,
-  dispatchTestAllIndexers: PropTypes.func.isRequired
-};
-
-export default IndexerSettings;

frontend/src/Settings/Indexers/IndexerSettings.tsx

@@ -0,0 +1,104 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import { icons } from 'Helpers/Props';
+import SettingsToolbar from 'Settings/SettingsToolbar';
+import { testAllIndexers } from 'Store/Actions/settingsActions';
+import {
+  SaveCallback,
+  SettingsStateChange,
+} from 'typings/Settings/SettingsState';
+import translate from 'Utilities/String/translate';
+import Indexers from './Indexers/Indexers';
+import ManageIndexersModal from './Indexers/Manage/ManageIndexersModal';
+import IndexerOptions from './Options/IndexerOptions';
+
+function IndexerSettings() {
+  const dispatch = useDispatch();
+  const isTestingAll = useSelector(
+    (state: AppState) => state.settings.indexers.isTestingAll
+  );
+
+  const saveOptions = useRef<() => void>();
+
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasPendingChanges, setHasPendingChanges] = useState(false);
+  const [isManageIndexersModalOpen, setIsManageIndexersModalOpen] =
+    useState(false);
+
+  const handleSetChildSave = useCallback((saveCallback: SaveCallback) => {
+    saveOptions.current = saveCallback;
+  }, []);
+
+  const handleChildStateChange = useCallback(
+    ({ isSaving, hasPendingChanges }: SettingsStateChange) => {
+      setIsSaving(isSaving);
+      setHasPendingChanges(hasPendingChanges);
+    },
+    []
+  );
+
+  const handleManageIndexersPress = useCallback(() => {
+    setIsManageIndexersModalOpen(true);
+  }, []);
+
+  const handleManageIndexersModalClose = useCallback(() => {
+    setIsManageIndexersModalOpen(false);
+  }, []);
+
+  const handleSavePress = useCallback(() => {
+    saveOptions.current?.();
+  }, []);
+
+  const handleTestAllIndexersPress = useCallback(() => {
+    dispatch(testAllIndexers());
+  }, [dispatch]);
+
+  return (
+    <PageContent title={translate('IndexerSettings')}>
+      <SettingsToolbar
+        isSaving={isSaving}
+        hasPendingChanges={hasPendingChanges}
+        additionalButtons={
+          <>
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label={translate('TestAllIndexers')}
+              iconName={icons.TEST}
+              isSpinning={isTestingAll}
+              onPress={handleTestAllIndexersPress}
+            />
+
+            <PageToolbarButton
+              label={translate('ManageIndexers')}
+              iconName={icons.MANAGE}
+              onPress={handleManageIndexersPress}
+            />
+          </>
+        }
+        onSavePress={handleSavePress}
+      />
+
+      <PageContentBody>
+        <Indexers />
+
+        <IndexerOptions
+          setChildSave={handleSetChildSave}
+          onChildStateChange={handleChildStateChange}
+        />
+
+        <ManageIndexersModal
+          isOpen={isManageIndexersModalOpen}
+          onModalClose={handleManageIndexersModalClose}
+        />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default IndexerSettings;

frontend/src/Settings/Indexers/IndexerSettingsConnector.js

@@ -1,21 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { testAllIndexers } from 'Store/Actions/settingsActions';
-import IndexerSettings from './IndexerSettings';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.indexers.isTestingAll,
-    (isTestingAll) => {
-      return {
-        isTestingAll
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchTestAllIndexers: testAllIndexers
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(IndexerSettings);

frontend/src/Settings/Indexers/Indexers/AddIndexerItem.js

@@ -1,113 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Button from 'Components/Link/Button';
-import Link from 'Components/Link/Link';
-import Menu from 'Components/Menu/Menu';
-import MenuContent from 'Components/Menu/MenuContent';
-import { sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import AddIndexerPresetMenuItem from './AddIndexerPresetMenuItem';
-import styles from './AddIndexerItem.css';
-
-class AddIndexerItem extends Component {
-
-  //
-  // Listeners
-
-  onIndexerSelect = () => {
-    const {
-      implementation,
-      implementationName
-    } = this.props;
-
-    this.props.onIndexerSelect({ implementation, implementationName });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      implementation,
-      implementationName,
-      infoLink,
-      presets,
-      onIndexerSelect
-    } = this.props;
-
-    const hasPresets = !!presets && !!presets.length;
-
-    return (
-      <div
-        className={styles.indexer}
-      >
-        <Link
-          className={styles.underlay}
-          onPress={this.onIndexerSelect}
-        />
-
-        <div className={styles.overlay}>
-          <div className={styles.name}>
-            {implementationName}
-          </div>
-
-          <div className={styles.actions}>
-            {
-              hasPresets &&
-                <span>
-                  <Button
-                    size={sizes.SMALL}
-                    onPress={this.onIndexerSelect}
-                  >
-                    {translate('Custom')}
-                  </Button>
-
-                  <Menu className={styles.presetsMenu}>
-                    <Button
-                      className={styles.presetsMenuButton}
-                      size={sizes.SMALL}
-                    >
-                      {translate('Presets')}
-                    </Button>
-
-                    <MenuContent>
-                      {
-                        presets.map((preset) => {
-                          return (
-                            <AddIndexerPresetMenuItem
-                              key={preset.name}
-                              name={preset.name}
-                              implementation={implementation}
-                              implementationName={implementationName}
-                              onPress={onIndexerSelect}
-                            />
-                          );
-                        })
-                      }
-                    </MenuContent>
-                  </Menu>
-                </span>
-            }
-
-            <Button
-              to={infoLink}
-              size={sizes.SMALL}
-            >
-              {translate('MoreInfo')}
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-AddIndexerItem.propTypes = {
-  implementation: PropTypes.string.isRequired,
-  implementationName: PropTypes.string.isRequired,
-  infoLink: PropTypes.string.isRequired,
-  presets: PropTypes.arrayOf(PropTypes.object),
-  onIndexerSelect: PropTypes.func.isRequired
-};
-
-export default AddIndexerItem;

frontend/src/Settings/Indexers/Indexers/AddIndexerItem.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import Menu from 'Components/Menu/Menu';
+import MenuContent from 'Components/Menu/MenuContent';
+import { sizes } from 'Helpers/Props';
+import { selectIndexerSchema } from 'Store/Actions/settingsActions';
+import Indexer from 'typings/Indexer';
+import translate from 'Utilities/String/translate';
+import AddIndexerPresetMenuItem from './AddIndexerPresetMenuItem';
+import styles from './AddIndexerItem.css';
+
+interface AddIndexerItemProps {
+  implementation: string;
+  implementationName: string;
+  infoLink: string;
+  presets?: Indexer[];
+  onIndexerSelect: () => void;
+}
+
+function AddIndexerItem({
+  implementation,
+  implementationName,
+  infoLink,
+  presets,
+  onIndexerSelect,
+}: AddIndexerItemProps) {
+  const dispatch = useDispatch();
+  const hasPresets = !!presets && !!presets.length;
+
+  const handleIndexerSelect = useCallback(() => {
+    dispatch(
+      selectIndexerSchema({
+        implementation,
+        implementationName,
+      })
+    );
+
+    onIndexerSelect();
+  }, [implementation, implementationName, dispatch, onIndexerSelect]);
+
+  return (
+    <div className={styles.indexer}>
+      <Link className={styles.underlay} onPress={handleIndexerSelect} />
+
+      <div className={styles.overlay}>
+        <div className={styles.name}>{implementationName}</div>
+
+        <div className={styles.actions}>
+          {hasPresets && (
+            <span>
+              <Button size={sizes.SMALL} onPress={handleIndexerSelect}>
+                {translate('Custom')}
+              </Button>
+
+              <Menu className={styles.presetsMenu}>
+                <Button className={styles.presetsMenuButton} size={sizes.SMALL}>
+                  {translate('Presets')}
+                </Button>
+
+                <MenuContent>
+                  {presets.map((preset) => {
+                    return (
+                      <AddIndexerPresetMenuItem
+                        key={preset.name}
+                        name={preset.name}
+                        implementation={implementation}
+                        implementationName={implementationName}
+                        onPress={onIndexerSelect}
+                      />
+                    );
+                  })}
+                </MenuContent>
+              </Menu>
+            </span>
+          )}
+
+          <Button to={infoLink} size={sizes.SMALL}>
+            {translate('MoreInfo')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AddIndexerItem;

frontend/src/Settings/Indexers/Indexers/AddIndexerModal.js

@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import AddIndexerModalContentConnector from './AddIndexerModalContentConnector';
-
-function AddIndexerModal({ isOpen, onModalClose, ...otherProps }) {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <AddIndexerModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-AddIndexerModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AddIndexerModal;

frontend/src/Settings/Indexers/Indexers/AddIndexerModal.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddIndexerModalContent from './AddIndexerModalContent';
+
+interface AddIndexerModalProps {
+  isOpen: boolean;
+  onIndexerSelect: () => void;
+  onModalClose: () => void;
+}
+
+function AddIndexerModal({
+  isOpen,
+  onIndexerSelect,
+  onModalClose,
+}: AddIndexerModalProps) {
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <AddIndexerModalContent
+        onIndexerSelect={onIndexerSelect}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default AddIndexerModal;

frontend/src/Settings/Indexers/Indexers/AddIndexerModalContent.js

@@ -1,122 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Alert from 'Components/Alert';
-import FieldSet from 'Components/FieldSet';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-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 { kinds } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import AddIndexerItem from './AddIndexerItem';
-import styles from './AddIndexerModalContent.css';
-
-class AddIndexerModalContent extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      isSchemaFetching,
-      isSchemaPopulated,
-      schemaError,
-      usenetIndexers,
-      torrentIndexers,
-      onIndexerSelect,
-      onModalClose
-    } = this.props;
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('AddIndexer')}
-        </ModalHeader>
-
-        <ModalBody>
-          {
-            isSchemaFetching &&
-              <LoadingIndicator />
-          }
-
-          {
-            !isSchemaFetching && !!schemaError &&
-              <Alert kind={kinds.DANGER}>
-                {translate('AddIndexerError')}
-              </Alert>
-          }
-
-          {
-            isSchemaPopulated && !schemaError &&
-              <div>
-
-                <Alert kind={kinds.INFO}>
-                  <div>
-                    {translate('SupportedIndexers')}
-                  </div>
-                  <div>
-                    {translate('SupportedIndexersMoreInfo')}
-                  </div>
-                </Alert>
-
-                <FieldSet legend={translate('Usenet')}>
-                  <div className={styles.indexers}>
-                    {
-                      usenetIndexers.map((indexer) => {
-                        return (
-                          <AddIndexerItem
-                            key={indexer.implementation}
-                            implementation={indexer.implementation}
-                            {...indexer}
-                            onIndexerSelect={onIndexerSelect}
-                          />
-                        );
-                      })
-                    }
-                  </div>
-                </FieldSet>
-
-                <FieldSet legend={translate('Torrents')}>
-                  <div className={styles.indexers}>
-                    {
-                      torrentIndexers.map((indexer) => {
-                        return (
-                          <AddIndexerItem
-                            key={indexer.implementation}
-                            implementation={indexer.implementation}
-                            {...indexer}
-                            onIndexerSelect={onIndexerSelect}
-                          />
-                        );
-                      })
-                    }
-                  </div>
-                </FieldSet>
-              </div>
-          }
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            onPress={onModalClose}
-          >
-            {translate('Close')}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    );
-  }
-}
-
-AddIndexerModalContent.propTypes = {
-  isSchemaFetching: PropTypes.bool.isRequired,
-  isSchemaPopulated: PropTypes.bool.isRequired,
-  schemaError: PropTypes.object,
-  usenetIndexers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  torrentIndexers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onIndexerSelect: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AddIndexerModalContent;

frontend/src/Settings/Indexers/Indexers/AddIndexerModalContent.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 { kinds } from 'Helpers/Props';
+import { fetchIndexerSchema } from 'Store/Actions/settingsActions';
+import Indexer from 'typings/Indexer';
+import translate from 'Utilities/String/translate';
+import AddIndexerItem from './AddIndexerItem';
+import styles from './AddIndexerModalContent.css';
+
+interface AddIndexerModalContentProps {
+  onIndexerSelect: () => void;
+  onModalClose: () => void;
+}
+
+function AddIndexerModalContent({
+  onIndexerSelect,
+  onModalClose,
+}: AddIndexerModalContentProps) {
+  const dispatch = useDispatch();
+
+  const { isSchemaFetching, isSchemaPopulated, schemaError, schema } =
+    useSelector((state: AppState) => state.settings.indexers);
+
+  const { usenetIndexers, torrentIndexers } = useMemo(() => {
+    return schema.reduce<{
+      usenetIndexers: Indexer[];
+      torrentIndexers: Indexer[];
+    }>(
+      (acc, item) => {
+        if (item.protocol === 'usenet') {
+          acc.usenetIndexers.push(item);
+        } else if (item.protocol === 'torrent') {
+          acc.torrentIndexers.push(item);
+        }
+
+        return acc;
+      },
+      {
+        usenetIndexers: [],
+        torrentIndexers: [],
+      }
+    );
+  }, [schema]);
+
+  useEffect(() => {
+    dispatch(fetchIndexerSchema());
+  }, [dispatch]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('AddIndexer')}</ModalHeader>
+
+      <ModalBody>
+        {isSchemaFetching ? <LoadingIndicator /> : null}
+
+        {!isSchemaFetching && !!schemaError ? (
+          <Alert kind={kinds.DANGER}>{translate('AddIndexerError')}</Alert>
+        ) : null}
+
+        {isSchemaPopulated && !schemaError ? (
+          <div>
+            <Alert kind={kinds.INFO}>
+              <div>{translate('SupportedIndexers')}</div>
+              <div>{translate('SupportedIndexersMoreInfo')}</div>
+            </Alert>
+
+            <FieldSet legend={translate('Usenet')}>
+              <div className={styles.indexers}>
+                {usenetIndexers.map((indexer) => {
+                  return (
+                    <AddIndexerItem
+                      key={indexer.implementation}
+                      {...indexer}
+                      implementation={indexer.implementation}
+                      onIndexerSelect={onIndexerSelect}
+                    />
+                  );
+                })}
+              </div>
+            </FieldSet>
+
+            <FieldSet legend={translate('Torrents')}>
+              <div className={styles.indexers}>
+                {torrentIndexers.map((indexer) => {
+                  return (
+                    <AddIndexerItem
+                      key={indexer.implementation}
+                      {...indexer}
+                      implementation={indexer.implementation}
+                      onIndexerSelect={onIndexerSelect}
+                    />
+                  );
+                })}
+              </div>
+            </FieldSet>
+          </div>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default AddIndexerModalContent;

frontend/src/Settings/Indexers/Indexers/AddIndexerModalContentConnector.js

@@ -1,75 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchIndexerSchema, selectIndexerSchema } from 'Store/Actions/settingsActions';
-import AddIndexerModalContent from './AddIndexerModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.indexers,
-    (indexers) => {
-      const {
-        isSchemaFetching,
-        isSchemaPopulated,
-        schemaError,
-        schema
-      } = indexers;
-
-      const usenetIndexers = _.filter(schema, { protocol: 'usenet' });
-      const torrentIndexers = _.filter(schema, { protocol: 'torrent' });
-
-      return {
-        isSchemaFetching,
-        isSchemaPopulated,
-        schemaError,
-        usenetIndexers,
-        torrentIndexers
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchIndexerSchema,
-  selectIndexerSchema
-};
-
-class AddIndexerModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchIndexerSchema();
-  }
-
-  //
-  // Listeners
-
-  onIndexerSelect = ({ implementation, implementationName, name }) => {
-    this.props.selectIndexerSchema({ implementation, implementationName, presetName: name });
-    this.props.onModalClose({ indexerSelected: true });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <AddIndexerModalContent
-        {...this.props}
-        onIndexerSelect={this.onIndexerSelect}
-      />
-    );
-  }
-}
-
-AddIndexerModalContentConnector.propTypes = {
-  fetchIndexerSchema: PropTypes.func.isRequired,
-  selectIndexerSchema: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AddIndexerModalContentConnector);

frontend/src/Settings/Indexers/Indexers/AddIndexerPresetMenuItem.js

@@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import MenuItem from 'Components/Menu/MenuItem';
-
-class AddIndexerPresetMenuItem extends Component {
-
-  //
-  // Listeners
-
-  onPress = () => {
-    const {
-      name,
-      implementation,
-      implementationName
-    } = this.props;
-
-    this.props.onPress({
-      name,
-      implementation,
-      implementationName
-    });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      name,
-      implementation,
-      implementationName,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <MenuItem
-        {...otherProps}
-        onPress={this.onPress}
-      >
-        {name}
-      </MenuItem>
-    );
-  }
-}
-
-AddIndexerPresetMenuItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  implementation: PropTypes.string.isRequired,
-  implementationName: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired
-};
-
-export default AddIndexerPresetMenuItem;

frontend/src/Settings/Indexers/Indexers/AddIndexerPresetMenuItem.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import MenuItem, { MenuItemProps } from 'Components/Menu/MenuItem';
+import { selectIndexerSchema } from 'Store/Actions/settingsActions';
+
+interface AddIndexerPresetMenuItemProps
+  extends Omit<MenuItemProps, 'children'> {
+  name: string;
+  implementation: string;
+  implementationName: string;
+  onPress: () => void;
+}
+
+function AddIndexerPresetMenuItem({
+  name,
+  implementation,
+  implementationName,
+  onPress,
+  ...otherProps
+}: AddIndexerPresetMenuItemProps) {
+  const dispatch = useDispatch();
+
+  const handlePress = useCallback(() => {
+    dispatch(
+      selectIndexerSchema({
+        implementation,
+        implementationName,
+        presetName: name,
+      })
+    );
+
+    onPress();
+  }, [name, implementation, implementationName, dispatch, onPress]);
+
+  return (
+    <MenuItem {...otherProps} onPress={handlePress}>
+      {name}
+    </MenuItem>
+  );
+}
+
+export default AddIndexerPresetMenuItem;

frontend/src/Settings/Indexers/Indexers/EditIndexerModal.js

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import { sizes } from 'Helpers/Props';
-import EditIndexerModalContentConnector from './EditIndexerModalContentConnector';
-
-function EditIndexerModal({ isOpen, onModalClose, ...otherProps }) {
-  return (
-    <Modal
-      size={sizes.MEDIUM}
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
-      <EditIndexerModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-EditIndexerModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default EditIndexerModal;

frontend/src/Settings/Indexers/Indexers/EditIndexerModal.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import {
+  cancelSaveIndexer,
+  cancelTestIndexer,
+} from 'Store/Actions/settingsActions';
+import EditIndexerModalContent, {
+  EditIndexerModalContentProps,
+} from './EditIndexerModalContent';
+
+const section = 'settings.indexers';
+
+interface EditIndexerModalProps extends EditIndexerModalContentProps {
+  isOpen: boolean;
+}
+
+function EditIndexerModal({
+  isOpen,
+  onModalClose,
+  ...otherProps
+}: EditIndexerModalProps) {
+  const dispatch = useDispatch();
+
+  const handleModalClose = useCallback(() => {
+    dispatch(clearPendingChanges({ section }));
+    dispatch(cancelTestIndexer({ section }));
+    dispatch(cancelSaveIndexer({ section }));
+
+    onModalClose();
+  }, [dispatch, onModalClose]);
+
+  return (
+    <Modal size={sizes.MEDIUM} isOpen={isOpen} onModalClose={handleModalClose}>
+      <EditIndexerModalContent
+        {...otherProps}
+        onModalClose={handleModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default EditIndexerModal;

frontend/src/Settings/Indexers/Indexers/EditIndexerModalConnector.js

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import { cancelSaveIndexer, cancelTestIndexer } from 'Store/Actions/settingsActions';
-import EditIndexerModal from './EditIndexerModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  const section = 'settings.indexers';
-
-  return {
-    dispatchClearPendingChanges() {
-      dispatch(clearPendingChanges({ section }));
-    },
-
-    dispatchCancelTestIndexer() {
-      dispatch(cancelTestIndexer({ section }));
-    },
-
-    dispatchCancelSaveIndexer() {
-      dispatch(cancelSaveIndexer({ section }));
-    }
-  };
-}
-
-class EditIndexerModalConnector extends Component {
-
-  //
-  // Listeners
-
-  onModalClose = () => {
-    this.props.dispatchClearPendingChanges();
-    this.props.dispatchCancelTestIndexer();
-    this.props.dispatchCancelSaveIndexer();
-    this.props.onModalClose();
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchClearPendingChanges,
-      dispatchCancelTestIndexer,
-      dispatchCancelSaveIndexer,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <EditIndexerModal
-        {...otherProps}
-        onModalClose={this.onModalClose}
-      />
-    );
-  }
-}
-
-EditIndexerModalConnector.propTypes = {
-  onModalClose: PropTypes.func.isRequired,
-  dispatchClearPendingChanges: PropTypes.func.isRequired,
-  dispatchCancelTestIndexer: PropTypes.func.isRequired,
-  dispatchCancelSaveIndexer: PropTypes.func.isRequired
-};
-
-export default connect(null, createMapDispatchToProps)(EditIndexerModalConnector);

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.js

@@ -1,255 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Alert from 'Components/Alert';
-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 ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
-import Button from 'Components/Link/Button';
-import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes, kinds } from 'Helpers/Props';
-import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
-import translate from 'Utilities/String/translate';
-import styles from './EditIndexerModalContent.css';
-
-function EditIndexerModalContent(props) {
-  const {
-    advancedSettings,
-    isFetching,
-    error,
-    isSaving,
-    isTesting,
-    saveError,
-    item,
-    onInputChange,
-    onFieldChange,
-    onModalClose,
-    onSavePress,
-    onTestPress,
-    onDeleteIndexerPress,
-    onAdvancedSettingsPress,
-    ...otherProps
-  } = props;
-
-  const {
-    id,
-    implementationName,
-    name,
-    enableRss,
-    enableAutomaticSearch,
-    enableInteractiveSearch,
-    supportsRss,
-    supportsSearch,
-    tags,
-    fields,
-    priority,
-    protocol,
-    downloadClientId
-  } = item;
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        {id ? translate('EditIndexerImplementation', { implementationName }) : translate('AddIndexerImplementation', { implementationName })}
-      </ModalHeader>
-
-      <ModalBody>
-        {
-          isFetching &&
-            <LoadingIndicator />
-        }
-
-        {
-          !isFetching && !!error &&
-            <Alert kind={kinds.DANGER}>
-              {translate('AddIndexerError')}
-            </Alert>
-        }
-
-        {
-          !isFetching && !error &&
-            <Form {...otherProps}>
-              <FormGroup>
-                <FormLabel>{translate('Name')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.TEXT}
-                  name="name"
-                  {...name}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('EnableRss')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="enableRss"
-                  helpText={supportsRss.value ? translate('EnableRssHelpText') : undefined}
-                  helpTextWarning={supportsRss.value ? undefined : translate('RssIsNotSupportedWithThisIndexer')}
-                  isDisabled={!supportsRss.value}
-                  {...enableRss}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('EnableAutomaticSearch')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="enableAutomaticSearch"
-                  helpText={supportsSearch.value ? translate('EnableAutomaticSearchHelpText') : undefined}
-                  helpTextWarning={supportsSearch.value ? undefined : translate('SearchIsNotSupportedWithThisIndexer')}
-                  isDisabled={!supportsSearch.value}
-                  {...enableAutomaticSearch}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('EnableInteractiveSearch')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="enableInteractiveSearch"
-                  helpText={supportsSearch.value ? translate('EnableInteractiveSearchHelpText') : undefined}
-                  helpTextWarning={supportsSearch.value ? undefined : translate('SearchIsNotSupportedWithThisIndexer')}
-                  isDisabled={!supportsSearch.value}
-                  {...enableInteractiveSearch}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              {
-                fields.map((field) => {
-                  return (
-                    <ProviderFieldFormGroup
-                      key={field.name}
-                      advancedSettings={advancedSettings}
-                      provider="indexer"
-                      providerData={item}
-                      {...field}
-                      onChange={onFieldChange}
-                    />
-                  );
-                })
-              }
-
-              <FormGroup
-                advancedSettings={advancedSettings}
-                isAdvanced={true}
-              >
-                <FormLabel>{translate('IndexerPriority')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.NUMBER}
-                  name="priority"
-                  helpText={translate('IndexerPriorityHelpText')}
-                  min={1}
-                  max={50}
-                  {...priority}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup
-                advancedSettings={advancedSettings}
-                isAdvanced={true}
-              >
-                <FormLabel>{translate('DownloadClient')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.DOWNLOAD_CLIENT_SELECT}
-                  name="downloadClientId"
-                  helpText={translate('IndexerDownloadClientHelpText')}
-                  {...downloadClientId}
-                  includeAny={true}
-                  protocol={protocol.value}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('Tags')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.TAG}
-                  name="tags"
-                  helpText={translate('IndexerTagMovieHelpText')}
-                  {...tags}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-            </Form>
-        }
-      </ModalBody>
-      <ModalFooter>
-        {
-          id &&
-            <Button
-              className={styles.deleteButton}
-              kind={kinds.DANGER}
-              onPress={onDeleteIndexerPress}
-            >
-              {translate('Delete')}
-            </Button>
-        }
-
-        <AdvancedSettingsButton
-          advancedSettings={advancedSettings}
-          onAdvancedSettingsPress={onAdvancedSettingsPress}
-          showLabel={false}
-        />
-
-        <SpinnerErrorButton
-          isSpinning={isTesting}
-          error={saveError}
-          onPress={onTestPress}
-        >
-          {translate('Test')}
-        </SpinnerErrorButton>
-
-        <Button
-          onPress={onModalClose}
-        >
-          {translate('Cancel')}
-        </Button>
-
-        <SpinnerErrorButton
-          isSpinning={isSaving}
-          error={saveError}
-          onPress={onSavePress}
-        >
-          {translate('Save')}
-        </SpinnerErrorButton>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-EditIndexerModalContent.propTypes = {
-  advancedSettings: PropTypes.bool.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  isSaving: PropTypes.bool.isRequired,
-  isTesting: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  item: PropTypes.object.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onFieldChange: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSavePress: PropTypes.func.isRequired,
-  onTestPress: PropTypes.func.isRequired,
-  onAdvancedSettingsPress: PropTypes.func.isRequired,
-  onDeleteIndexerPress: PropTypes.func
-};
-
-export default EditIndexerModalContent;

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.tsx

@@ -0,0 +1,299 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { IndexerAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
+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 ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 usePrevious from 'Helpers/Hooks/usePrevious';
+import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
+import { inputTypes, kinds } from 'Helpers/Props';
+import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
+import {
+  saveIndexer,
+  setIndexerFieldValue,
+  setIndexerValue,
+  testIndexer,
+} from 'Store/Actions/settingsActions';
+import { createProviderSettingsSelectorHook } from 'Store/Selectors/createProviderSettingsSelector';
+import Indexer from 'typings/Indexer';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+import styles from './EditIndexerModalContent.css';
+
+export interface EditIndexerModalContentProps {
+  id?: number;
+  onModalClose: () => void;
+  onDeleteIndexerPress?: () => void;
+}
+
+function EditIndexerModalContent({
+  id,
+  onModalClose,
+  onDeleteIndexerPress,
+}: EditIndexerModalContentProps) {
+  const dispatch = useDispatch();
+  const showAdvancedSettings = useShowAdvancedSettings();
+
+  const {
+    isFetching,
+    error,
+    isSaving,
+    isTesting = false,
+    saveError,
+    item,
+    validationErrors,
+    validationWarnings,
+  } = useSelector(
+    createProviderSettingsSelectorHook<Indexer, IndexerAppState>('indexers', id)
+  );
+
+  const wasSaving = usePrevious(isSaving);
+
+  const {
+    implementationName = '',
+    name,
+    enableRss,
+    enableAutomaticSearch,
+    enableInteractiveSearch,
+    supportsRss,
+    supportsSearch,
+    tags,
+    fields,
+    priority,
+    protocol,
+    downloadClientId,
+  } = item;
+
+  const handleInputChange = useCallback(
+    (change: InputChanged) => {
+      // @ts-expect-error - actions are not typed
+      dispatch(setIndexerValue(change));
+    },
+    [dispatch]
+  );
+
+  const handleFieldChange = useCallback(
+    (change: InputChanged) => {
+      // @ts-expect-error - actions are not typed
+      dispatch(setIndexerFieldValue(change));
+    },
+    [dispatch]
+  );
+
+  const handleSavePress = useCallback(() => {
+    dispatch(saveIndexer({ id }));
+  }, [id, dispatch]);
+
+  const handleTestPress = useCallback(() => {
+    dispatch(testIndexer({ id }));
+  }, [id, dispatch]);
+
+  useEffect(() => {
+    if (!isSaving && wasSaving && !saveError) {
+      onModalClose();
+    }
+  }, [isSaving, wasSaving, saveError, onModalClose]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {id
+          ? translate('EditIndexerImplementation', { implementationName })
+          : translate('AddIndexerImplementation', { implementationName })}
+      </ModalHeader>
+
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {!isFetching && error ? (
+          <Alert kind={kinds.DANGER}>{translate('AddIndexerError')}</Alert>
+        ) : null}
+
+        {!isFetching && !error ? (
+          <Form
+            validationErrors={validationErrors}
+            validationWarnings={validationWarnings}
+          >
+            <FormGroup>
+              <FormLabel>{translate('Name')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.TEXT}
+                name="name"
+                {...name}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('EnableRss')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="enableRss"
+                helpText={
+                  supportsRss.value ? translate('EnableRssHelpText') : undefined
+                }
+                helpTextWarning={
+                  supportsRss.value
+                    ? undefined
+                    : translate('RssIsNotSupportedWithThisIndexer')
+                }
+                isDisabled={!supportsRss.value}
+                {...enableRss}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('EnableAutomaticSearch')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="enableAutomaticSearch"
+                helpText={
+                  supportsSearch.value
+                    ? translate('EnableAutomaticSearchHelpText')
+                    : undefined
+                }
+                helpTextWarning={
+                  supportsSearch.value
+                    ? undefined
+                    : translate('SearchIsNotSupportedWithThisIndexer')
+                }
+                isDisabled={!supportsSearch.value}
+                {...enableAutomaticSearch}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('EnableInteractiveSearch')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="enableInteractiveSearch"
+                helpText={
+                  supportsSearch.value
+                    ? translate('EnableInteractiveSearchHelpText')
+                    : undefined
+                }
+                helpTextWarning={
+                  supportsSearch.value
+                    ? undefined
+                    : translate('SearchIsNotSupportedWithThisIndexer')
+                }
+                isDisabled={!supportsSearch.value}
+                {...enableInteractiveSearch}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            {fields?.map((field) => {
+              return (
+                <ProviderFieldFormGroup
+                  key={field.name}
+                  advancedSettings={showAdvancedSettings}
+                  provider="indexer"
+                  providerData={item}
+                  {...field}
+                  onChange={handleFieldChange}
+                />
+              );
+            })}
+
+            <FormGroup
+              advancedSettings={showAdvancedSettings}
+              isAdvanced={true}
+            >
+              <FormLabel>{translate('IndexerPriority')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.NUMBER}
+                name="priority"
+                helpText={translate('IndexerPriorityHelpText')}
+                min={1}
+                max={50}
+                {...priority}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup
+              advancedSettings={showAdvancedSettings}
+              isAdvanced={true}
+            >
+              <FormLabel>{translate('DownloadClient')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.DOWNLOAD_CLIENT_SELECT}
+                name="downloadClientId"
+                helpText={translate('IndexerDownloadClientHelpText')}
+                {...downloadClientId}
+                includeAny={true}
+                protocol={protocol.value}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('Tags')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.TAG}
+                name="tags"
+                helpText={translate('IndexerTagMovieHelpText')}
+                {...tags}
+                onChange={handleInputChange}
+              />
+            </FormGroup>
+          </Form>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        {id ? (
+          <Button
+            className={styles.deleteButton}
+            kind={kinds.DANGER}
+            onPress={onDeleteIndexerPress}
+          >
+            {translate('Delete')}
+          </Button>
+        ) : null}
+
+        <AdvancedSettingsButton showLabel={false} />
+
+        <SpinnerErrorButton
+          isSpinning={isTesting}
+          error={saveError}
+          onPress={handleTestPress}
+        >
+          {translate('Test')}
+        </SpinnerErrorButton>
+
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <SpinnerErrorButton
+          isSpinning={isSaving}
+          error={saveError}
+          onPress={handleSavePress}
+        >
+          {translate('Save')}
+        </SpinnerErrorButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default EditIndexerModalContent;

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContentConnector.js

@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { saveIndexer, setIndexerFieldValue, setIndexerValue, testIndexer, toggleAdvancedSettings } from 'Store/Actions/settingsActions';
-import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
-import EditIndexerModalContent from './EditIndexerModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.advancedSettings,
-    createProviderSettingsSelector('indexers'),
-    (advancedSettings, indexer) => {
-      return {
-        advancedSettings,
-        ...indexer
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  setIndexerValue,
-  setIndexerFieldValue,
-  saveIndexer,
-  testIndexer,
-  toggleAdvancedSettings
-};
-
-class EditIndexerModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
-      this.props.onModalClose();
-    }
-  }
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.setIndexerValue({ name, value });
-  };
-
-  onFieldChange = ({ name, value }) => {
-    this.props.setIndexerFieldValue({ name, value });
-  };
-
-  onSavePress = () => {
-    this.props.saveIndexer({ id: this.props.id });
-  };
-
-  onTestPress = () => {
-    this.props.testIndexer({ id: this.props.id });
-  };
-
-  onAdvancedSettingsPress = () => {
-    this.props.toggleAdvancedSettings();
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <EditIndexerModalContent
-        {...this.props}
-        onSavePress={this.onSavePress}
-        onTestPress={this.onTestPress}
-        onAdvancedSettingsPress={this.onAdvancedSettingsPress}
-        onInputChange={this.onInputChange}
-        onFieldChange={this.onFieldChange}
-      />
-    );
-  }
-}
-
-EditIndexerModalContentConnector.propTypes = {
-  id: PropTypes.number,
-  isFetching: PropTypes.bool.isRequired,
-  isSaving: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  item: PropTypes.object.isRequired,
-  setIndexerValue: PropTypes.func.isRequired,
-  setIndexerFieldValue: PropTypes.func.isRequired,
-  toggleAdvancedSettings: PropTypes.func.isRequired,
-  saveIndexer: PropTypes.func.isRequired,
-  testIndexer: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(EditIndexerModalContentConnector);