Show save error in UI

This update moves the minimum, maximum, and preferred quality limits to
the backend, accessible via the new `/qualitydefinition/limits`
endpoint. This change improves support for unofficial Sonarr API clients
and enables a more flexible frontend.

.devcontainer/devcontainer.json

@@ -2,11 +2,11 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
 {
   "name": "Sonarr",
-  "image": "mcr.microsoft.com/devcontainers/dotnet:1-8.0",
+  "image": "mcr.microsoft.com/devcontainers/dotnet:1-6.0",
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       "nodeGypDependencies": true,
-      "version": "20",
+      "version": "16",
       "nvmVersion": "latest"
     }
   },

.github/actions/build/action.yml

@@ -1,188 +0,0 @@
-name: Build Backend
-description: Builds the backend and packages it
-
-inputs:
-  branch:
-    description: "Branch name for this build"
-    required: true
-  version:
-    description: "Version number to build"
-    required: true
-  framework:
-    description: ".net framework used for the build"
-    required: true
-  runtime:
-    description: "Run time to build for"
-    required: true
-  package_tests:
-    description: "True if tests should be packaged for later testing steps"
-
-runs:
-  using: "composite"
-  steps:
-    - name: Setup .NET
-      uses: actions/setup-dotnet@v5
-
-    - name: Setup Environment Variables
-      id: variables
-      shell: bash
-      run: |
-        DOTNET_VERSION=$(jq -r '.sdk.version' global.json)
-
-        echo "SDK_PATH=${{ env.DOTNET_ROOT }}/sdk/${DOTNET_VERSION}" >> "$GITHUB_ENV"
-        echo "SONARR_VERSION=${{ inputs.version }}" >> "$GITHUB_ENV"
-        echo "BRANCH=${{ inputs.branch }}" >> "$GITHUB_ENV"
-
-        if [ "$RUNNER_OS" == "Windows" ]; then
-          echo "NUGET_PACKAGES=D:\nuget\packages" >> "$GITHUB_ENV"
-        fi
-
-    - name: Enable Extra Platforms In SDK
-      if: ${{ inputs.runtime == 'freebsd-x64' }}
-      shell: bash
-      run: |
-        BUNDLEDVERSIONS="${SDK_PATH}/Microsoft.NETCoreSdk.BundledVersions.props"
-
-        if grep -q freebsd-x64 "$BUNDLEDVERSIONS"; then
-          echo "Extra platforms already enabled"
-        else
-          echo "Enabling extra platform support"
-          sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64/' "$BUNDLEDVERSIONS"
-        fi
-
-        if grep -qv freebsd-x64 src/Directory.Build.props; then
-          sed -i'' -e "s^<RuntimeIdentifiers>\(.*\)</RuntimeIdentifiers>^<RuntimeIdentifiers>\1;freebsd-x64</RuntimeIdentifiers>^g" src/Directory.Build.props
-        fi
-
-    - name: Update Version Number
-      shell: bash
-      run: |
-        if [ "$SONARR_VERSION" != "" ]; then
-          echo "Updating version info to: $SONARR_VERSION"
-          sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$SONARR_VERSION<\/AssemblyVersion>/g" src/Directory.Build.props
-          sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BRANCH}<\/AssemblyConfiguration>/g" src/Directory.Build.props
-          sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$SONARR_VERSION<\/string>/g" distribution/macOS/Sonarr.app/Contents/Info.plist
-        fi
-
-    - name: Build Backend
-      shell: bash
-      run: |
-        runtime="${{ inputs.runtime }}"
-        platform=Windows
-        slnFile=src/Sonarr.sln
-        targetingWindows=false
-
-        IFS='-' read -ra SPLIT <<< "$runtime"
-
-        if [ "${SPLIT[0]}" == "win" ]; then
-          platform=Windows
-          targetingWindows=true
-        else
-          platform=Posix
-        fi
-
-        rm -rf _output
-        rm -rf _tests
-
-        echo "Building Sonarr for $runtime, Platform: $platform"
-
-        dotnet msbuild -restore $slnFile -p:SelfContained=True -p:Configuration=Release -p:Platform=$platform -p:RuntimeIdentifiers=$runtime -p:EnableWindowsTargeting=true -t:PublishAllRids
-
-    - name: Package
-      shell: bash
-      run: |
-        framework="${{ inputs.framework }}"
-        runtime="${{ inputs.runtime }}"
-
-        IFS='-' read -ra SPLIT <<< "$runtime"
-
-        case "${SPLIT[0]}" in
-          linux|freebsd*)
-            folder=_artifacts/$runtime/$framework/Sonarr
-
-            echo "Packaging files"
-            rm -rf $folder
-            mkdir -p $folder
-            cp -r _output/$framework/$runtime/publish/* $folder
-            cp -r _output/Sonarr.Update/$framework/$runtime/publish $folder/Sonarr.Update
-            cp LICENSE.md $folder
-
-            echo "Removing Service helpers"
-            rm -f $folder/ServiceUninstall.*
-            rm -f $folder/ServiceInstall.*
-
-            echo "Removing Sonarr.Windows"
-            rm $folder/Sonarr.Windows.*
-
-            echo "Adding Sonarr.Mono to UpdatePackage"
-            cp $folder/Sonarr.Mono.* $folder/Sonarr.Update
-            cp $folder/Mono.Posix.NETStandard.* $folder/Sonarr.Update
-            cp $folder/libMonoPosixHelper.* $folder/Sonarr.Update
-            ;;
-          win)
-            folder=_artifacts/$runtime/$framework/Sonarr
-
-            echo "Packaging files"
-            rm -rf $folder
-            mkdir -p $folder
-            cp -r _output/$framework/$runtime/publish/* $folder
-            cp -r _output/Sonarr.Update/$framework/$runtime/publish $folder/Sonarr.Update
-            cp LICENSE.md $folder
-            cp -r _output/$framework-windows/$runtime/publish/* $folder
-
-            echo "Removing Sonarr.Mono"
-            rm -f $folder/Sonarr.Mono.*
-            rm -f $folder/Mono.Posix.NETStandard.*
-            rm -f $folder/libMonoPosixHelper.*
-
-            echo "Adding Sonarr.Windows to UpdatePackage"
-            cp $folder/Sonarr.Windows.* $folder/Sonarr.Update
-
-            ;;
-          osx)
-            folder=_artifacts/$runtime/$framework/Sonarr
-
-            echo "Packaging files"
-            rm -rf $folder
-            mkdir -p $folder
-            cp -r _output/$framework/$runtime/publish/* $folder
-            cp -r _output/Sonarr.Update/$framework/$runtime/publish $folder/Sonarr.Update
-            cp LICENSE.md $folder
-
-            echo "Removing Service helpers"
-            rm -f $folder/ServiceUninstall.*
-            rm -f $folder/ServiceInstall.*
-
-            echo "Removing Sonarr.Windows"
-            rm $folder/Sonarr.Windows.*
-
-            echo "Adding Sonarr.Mono to UpdatePackage"
-            cp $folder/Sonarr.Mono.* $folder/Sonarr.Update
-            cp $folder/Mono.Posix.NETStandard.* $folder/Sonarr.Update
-            cp $folder/libMonoPosixHelper.* $folder/Sonarr.Update
-            ;;
-        esac
-
-    - name: Package Tests
-      if: ${{ inputs.package_tests }}
-      shell: bash
-      run: |
-        framework="${{ inputs.framework }}"
-        runtime="${{ inputs.runtime }}"
-
-        cp scripts/test.sh "_tests/$framework/$runtime/publish"
-
-        rm -f _tests/$framework/$runtime/*.log.config
-
-    - name: Upload Test Artifacts
-      if: ${{ inputs.package_tests }}
-      uses: ./.github/actions/publish-test-artifact
-      with:
-        framework: ${{ inputs.framework }}
-        runtime: ${{ inputs.runtime }}
-
-    - name: Upload Artifacts
-      uses: actions/upload-artifact@v4
-      with:
-        name: build-${{ inputs.runtime }}
-        path: _artifacts/**/*

.github/actions/package/action.yml

@@ -2,34 +2,34 @@ name: Package
 description: Packages binaries for deployment
 
 inputs:
-  runtime:
-    description: "Binary runtime"
+  platform:
+    description: 'Binary platform'
     required: true
-  framework:
-    description: ".net framework"
+  framework: 
+    description: '.net framework'
     required: true
   artifact:
-    description: "Binary artifact"
+    description: 'Binary artifact'
     required: true
   branch:
-    description: "Git branch used for this build"
+    description: 'Git branch used for this build'
     required: true
   major_version:
-    description: "Sonarr major version"
+    description: 'Sonarr major version'
     required: true
   version:
-    description: "Sonarr version"
+    description: 'Sonarr version'
     required: true
 
 runs:
-  using: "composite"
+  using: 'composite'
   steps:
     - name: Download Artifact
       uses: actions/download-artifact@v4
       with:
         name: ${{ inputs.artifact }}
         path: _output
-
+        
     - name: Download UI Artifact
       uses: actions/download-artifact@v4
       with:
@@ -49,7 +49,7 @@ runs:
       run: $GITHUB_ACTION_PATH/package.sh
 
     - name: Create Windows Installer (x64)
-      if: ${{ inputs.runtime == 'win-x64' }}
+      if: ${{ inputs.platform == 'windows' }}
       working-directory: distribution/windows/setup
       shell: cmd
       run: |
@@ -58,7 +58,7 @@ runs:
         build.bat
 
     - name: Create Windows Installer (x86)
-      if: ${{ inputs.runtime == 'win-x86' }}
+      if: ${{ inputs.platform == 'windows' }}
       working-directory: distribution/windows/setup
       shell: cmd
       run: |
@@ -69,7 +69,7 @@ runs:
     - name: Upload Artifact
       uses: actions/upload-artifact@v4
       with:
-        name: release-${{ inputs.runtime }}
+        name: release_${{ inputs.platform }}
         compression-level: 0
         if-no-files-found: error
         path: |

.github/actions/package/package.sh

@@ -3,7 +3,7 @@
 outputFolder=_output
 artifactsFolder=_artifacts
 uiFolder="$outputFolder/UI"
-framework="${FRAMEWORK:=net8.0}"
+framework="${FRAMEWORK:=net6.0}"
 
 rm -rf $artifactsFolder
 mkdir $artifactsFolder

.github/actions/test/action.yml

@@ -4,8 +4,6 @@ description: Runs unit/integration tests
 inputs:
   use_postgres:
     description: 'Whether postgres should be used for the database'
-  postgres-version:
-    description: 'Which postgres version should be used for the database'
   os:
     description: 'OS that the tests are running on'
     required: true
@@ -29,18 +27,16 @@ runs:
   using: 'composite'
   steps:
     - name: Setup .NET
-      uses: actions/setup-dotnet@v5
+      uses: actions/setup-dotnet@v4
 
     - name: Setup Postgres
       if: ${{ inputs.use_postgres }}
-      uses: ikalnytskyi/action-setup-postgres@v7
-      with:
-        postgres-version: ${{ inputs.postgres-version }}
+      uses: ikalnytskyi/action-setup-postgres@v4
 
     - name: Setup Test Variables
       shell: bash
       run: |
-        echo "RESULTS_NAME=${{ inputs.integration_tests && 'integation-' || 'unit-' }}${{ inputs.artifact }}${{ inputs.use_postgres && '-postgres' }}${{ inputs.use_postgres && inputs.postgres-version && inputs.postgres-version }}" >> "$GITHUB_ENV"
+        echo "RESULTS_NAME=${{ inputs.integration_tests && 'integation-' || 'unit-' }}${{ inputs.artifact }}${{ inputs.use_postgres && '-postgres' }}" >> "$GITHUB_ENV"
 
     - name: Setup Postgres Environment Variables
       if: ${{ inputs.use_postgres }}
@@ -52,14 +48,14 @@ runs:
         echo "Sonarr__Postgres__Password=postgres" >> "$GITHUB_ENV"
 
     - name: Download Artifact
-      uses: actions/download-artifact@v5
+      uses: actions/download-artifact@v4
       with:
         name: ${{ inputs.artifact }}
         path: _tests
 
     - name: Download Binary Artifact
       if: ${{ inputs.integration_tests }}
-      uses: actions/download-artifact@v5
+      uses: actions/download-artifact@v4
       with:
         name: ${{ inputs.binary_artifact }}
         path: _output

.github/workflows/api_docs.yml

@@ -1,12 +1,12 @@
-name: "API Docs"
+name: 'API Docs'
 
 on:
   workflow_dispatch:
   schedule:
-    - cron: "0 0 * * 1"
+    - cron: '0 0 * * 1'
   push:
     branches:
-      - v5-develop
+      - develop
     paths:
       - ".github/workflows/api_docs.yml"
       - "docs.sh"
@@ -33,7 +33,7 @@ jobs:
         id: setup-dotnet
 
       - name: Create openapi.json
-        run: ./scripts/docs.sh Linux x64
+        run: ./docs.sh Linux
 
       - name: Commit API Docs Change
         continue-on-error: true
@@ -46,20 +46,7 @@ jobs:
           then
             git commit -am 'Automated API Docs update' -m "ignore-downstream"
             git push -f --set-upstream origin api-docs
-            curl -X POST -H "Authorization: Bearer ${{ secrets.OPENAPI_PAT }}" -H "Accept: application/vnd.github+json" https://api.github.com/repos/sonarr/sonarr/pulls -d '{"head":"api-docs","base":"v5-develop","title":"Update API docs"}'
+            curl -X POST -H "Authorization: Bearer ${{ secrets.OPENAPI_PAT }}" -H "Accept: application/vnd.github+json" https://api.github.com/repos/sonarr/sonarr/pulls -d '{"head":"api-docs","base":"develop","title":"Update API docs"}'
           else
             echo "No changes since last run"
           fi
-
-      - name: Notify
-        if: failure()
-        uses: tsickert/discord-webhook@v6.0.0
-        with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          username: "GitHub Actions"
-          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
-          embed-title: "${{ github.workflow }}: Failure"
-          embed-url: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
-          embed-description: |
-            Failed to update API docs
-          embed-color: "15158332"

.github/workflows/build.yml

@@ -3,13 +3,13 @@ name: Build
 on:
   push:
     branches:
-      - v5-develop
-      - v5-main
+      - develop
+      - main
     paths-ignore:
       - "src/Sonarr.Api.*/openapi.json"
   pull_request:
     branches:
-      - v5-develop
+      - develop
     paths-ignore:
       - "src/NzbDrone.Core/Localization/Core/**"
       - "src/Sonarr.Api.*/openapi.json"
@@ -19,85 +19,97 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  FRAMEWORK: net8.0
+  FRAMEWORK: net6.0
   RAW_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
-  SONARR_MAJOR_VERSION: 5
-  VERSION: 5.0.0
+  SONARR_MAJOR_VERSION: 4
+  VERSION: 4.0.9
 
 jobs:
-  prepare:
-    runs-on: ubuntu-latest
+  backend:
+    runs-on: windows-latest
     outputs:
       framework: ${{ steps.variables.outputs.framework }}
       major_version: ${{ steps.variables.outputs.major_version }}
       version: ${{ steps.variables.outputs.version }}
-      branch: ${{ steps.variables.outputs.branch }}
     steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
+
       - name: Setup Environment Variables
         id: variables
         shell: bash
         run: |
+          # Add 800 to the build number because GitHub won't let us pick an arbitrary starting point
+          SONARR_VERSION="${{ env.VERSION }}.$((${{ github.run_number }}+800))"
+          DOTNET_VERSION=$(jq -r '.sdk.version' global.json)
+
+          echo "SDK_PATH=${{ env.DOTNET_ROOT }}/sdk/${DOTNET_VERSION}" >> "$GITHUB_ENV"
+          echo "SONARR_VERSION=$SONARR_VERSION" >> "$GITHUB_ENV"
+          echo "BRANCH=${RAW_BRANCH_NAME//\//-}" >> "$GITHUB_ENV"
+
           echo "framework=${{ env.FRAMEWORK }}" >> "$GITHUB_OUTPUT"
           echo "major_version=${{ env.SONARR_MAJOR_VERSION }}" >> "$GITHUB_OUTPUT"
-          echo "version=${{ env.VERSION }}.$((${{ github.run_number }}))" >> "$GITHUB_OUTPUT"
-          echo "branch=${RAW_BRANCH_NAME//\//-}" >> "$GITHUB_OUTPUT"
+          echo "version=$SONARR_VERSION" >> "$GITHUB_OUTPUT"
 
-  backend:
-    needs: prepare
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - runtime: freebsd-x64
-            package_tests: false
-            os: ubuntu-latest
-          - runtime: linux-arm
-            package_tests: false
-            os: ubuntu-latest
-          - runtime: linux-arm64
-            package_tests: false
-            os: ubuntu-latest
-          - runtime: linux-musl-arm64
-            package_tests: false
-            os: ubuntu-latest
-          - runtime: linux-musl-x64
-            package_tests: false
-            os: ubuntu-latest
-          - runtime: linux-x64
-            package_tests: true
-            os: ubuntu-latest
-          - runtime: osx-arm64
-            package_tests: true
-            os: ubuntu-latest
-          - runtime: osx-x64
-            package_tests: false
-            os: ubuntu-latest
-          - runtime: win-x64
-            package_tests: true
-            os: ubuntu-latest
-          - runtime: win-x86
-            package_tests: false
-            os: ubuntu-latest
+      - name: Enable Extra Platforms In SDK
+        shell: bash
+        run: ./build.sh --enable-extra-platforms-in-sdk
 
-    runs-on: ${{ matrix.os }}
-    steps:
-      - name: Check out
-        uses: actions/checkout@v5
+      - name: Build Backend
+        shell: bash
+        run: ./build.sh --backend --enable-extra-platforms --packages
 
-      - name: Build
-        uses: ./.github/actions/build
+      # Test Artifacts
+
+      - name: Publish win-x64 Test Artifact
+        uses: ./.github/actions/publish-test-artifact
         with:
-          branch: ${{ needs.prepare.outputs.branch }}
-          version: ${{ needs.prepare.outputs.version }}
-          framework: ${{ needs.prepare.outputs.framework }}
-          runtime: ${{ matrix.runtime }}
-          package_tests: ${{ matrix.package_tests }}
+          framework: ${{ env.FRAMEWORK }}
+          runtime: win-x64
+
+      - name: Publish linux-x64 Test Artifact
+        uses: ./.github/actions/publish-test-artifact
+        with:
+          framework: ${{ env.FRAMEWORK }}
+          runtime: linux-x64
+
+      - name: Publish osx-arm64 Test Artifact
+        uses: ./.github/actions/publish-test-artifact
+        with:
+          framework: ${{ env.FRAMEWORK }}
+          runtime: osx-arm64
+
+      # Build Artifacts (grouped by OS)
+
+      - name: Publish FreeBSD Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_freebsd
+          path: _artifacts/freebsd-*/**/*
+      - name: Publish Linux Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_linux
+          path: _artifacts/linux-*/**/*
+      - name: Publish macOS Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_macos
+          path: _artifacts/osx-*/**/*
+      - name: Publish Windows Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_windows
+          path: _artifacts/win-*/**/*
 
   frontend:
     runs-on: ubuntu-latest
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Volta
         uses: volta-cli/action@v4
@@ -139,7 +151,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test
@@ -152,13 +164,9 @@ jobs:
   unit_test_postgres:
     needs: backend
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        postgres-version: [16, 17]
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test
@@ -168,10 +176,9 @@ jobs:
           pattern: Sonarr.*.Test.dll
           filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
           use_postgres: true
-          postgres-version: ${{ matrix.postgres-version }}
 
   integration_test:
-    needs: [prepare, backend]
+    needs: backend
     strategy:
       fail-fast: false
       matrix:
@@ -180,22 +187,22 @@ jobs:
           - os: ubuntu-latest
             artifact: tests-linux-x64
             filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory=IntegrationTest
-            binary_artifact: build-linux-x64
-            binary_path: linux-x64/${{ needs.prepare.outputs.framework }}/Sonarr
+            binary_artifact: build_linux
+            binary_path: linux-x64/${{ needs.backend.outputs.framework }}/Sonarr
           - os: macos-latest
             artifact: tests-osx-arm64
             filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory=IntegrationTest
-            binary_artifact: build-osx-arm64
-            binary_path: osx-arm64/${{ needs.prepare.outputs.framework }}/Sonarr
+            binary_artifact: build_macos
+            binary_path: osx-arm64/${{ needs.backend.outputs.framework }}/Sonarr
           - os: windows-latest
             artifact: tests-win-x64
             filter: TestCategory!=ManualTest&TestCategory!=LINUX&TestCategory=IntegrationTest
-            binary_artifact: build-win-x64
-            binary_path: win-x64/${{ needs.prepare.outputs.framework }}/Sonarr
+            binary_artifact: build_windows
+            binary_path: win-x64/${{ needs.backend.outputs.framework }}/Sonarr
     runs-on: ${{ matrix.os }}
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test
@@ -209,29 +216,20 @@ jobs:
           binary_path: ${{ matrix.binary_path }}
 
   deploy:
-    if: ${{ github.ref_name == 'v5-develop-final' || github.ref_name == 'v5-main-final' }}
-    needs:
-      [
-        prepare,
-        backend,
-        frontend,
-        unit_test,
-        unit_test_postgres,
-        integration_test,
-      ]
+    if: ${{ github.ref_name == 'develop' || github.ref_name == 'main' }}
+    needs: [backend, frontend, unit_test, unit_test_postgres, integration_test]
     secrets: inherit
     uses: ./.github/workflows/deploy.yml
     with:
-      framework: ${{ needs.prepare.outputs.framework }}
+      framework: ${{ needs.backend.outputs.framework }}
       branch: ${{ github.ref_name }}
-      major_version: ${{ needs.prepare.outputs.major_version }}
-      version: ${{ needs.prepare.outputs.version }}
+      major_version: ${{ needs.backend.outputs.major_version }}
+      version: ${{ needs.backend.outputs.version }}
 
   notify:
     name: Discord Notification
     needs:
       [
-        prepare,
         backend,
         frontend,
         unit_test,
@@ -239,7 +237,7 @@ jobs:
         integration_test,
         deploy,
       ]
-    if: ${{ !cancelled() && (github.ref_name == 'v5-develop-final' || github.ref_name == 'v5-main-final') }}
+    if: ${{ !cancelled() && (github.ref_name == 'develop' || github.ref_name == 'main') }}
     env:
       STATUS: ${{ contains(needs.*.result, 'failure') && 'failure' || 'success' }}
     runs-on: ubuntu-latest
@@ -255,5 +253,5 @@ jobs:
           embed-url: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
           embed-description: |
             **Branch** ${{ github.ref }}
-            **Build** ${{ needs.prepare.outputs.version }}
+            **Build** ${{ needs.backend.outputs.version }}
           embed-color: ${{ env.STATUS == 'success' && '3066993' || '15158332' }}

.github/workflows/conflict_labeler.yml

@@ -7,7 +7,6 @@ on:
   pull_request_target:
     branches:
       - develop
-      - v5-develop
     types: [synchronize]
 
 jobs:
@@ -22,5 +21,6 @@ jobs:
       - name: Apply label
         uses: eps1lon/actions-label-merge-conflict@v3
         with:
-          dirtyLabel: "merge-conflict"
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          dirtyLabel: 'merge-conflict'
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          

.github/workflows/deploy.yml

@@ -3,20 +3,20 @@ name: Deploy
 on:
   workflow_call:
     inputs:
-      framework:
-        description: ".net framework"
+      framework: 
+        description: '.net framework'
         type: string
         required: true
       branch:
-        description: "Git branch used for this build"
+        description: 'Git branch used for this build'
         type: string
         required: true
       major_version:
-        description: "Sonarr major version"
+        description: 'Sonarr major version'
         type: string
         required: true
       version:
-        description: "Sonarr version"
+        description: 'Sonarr version'
         type: string
         required: true
     secrets:
@@ -27,42 +27,31 @@ jobs:
   package:
     strategy:
       matrix:
+        platform: [freebsd, linux, macos, windows]
         include:
-          - runtime: freebsd-x64
+          - platform: freebsd
             os: ubuntu-latest
-          - runtime: linux-arm
+          - platform: linux
             os: ubuntu-latest
-          - runtime: linux-arm64
+          - platform: macos
             os: ubuntu-latest
-          - runtime: linux-musl-arm64
-            os: ubuntu-latest
-          - runtime: linux-musl-x64
-            os: ubuntu-latest
-          - runtime: linux-x64
-            os: ubuntu-latest
-          - runtime: osx-arm64
-            os: ubuntu-latest
-          - runtime: osx-x64
-            os: ubuntu-latest
-          - runtime: win-x64
-            os: windows-latest
-          - runtime: win-x86
+          - platform: windows
             os: windows-latest
 
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Check out
-        uses: actions/checkout@v4
+    - name: Check out
+      uses: actions/checkout@v4
 
-      - name: Package
-        uses: ./.github/actions/package
-        with:
-          framework: ${{ inputs.framework }}
-          runtime: ${{ matrix.runtime }}
-          artifact: build-${{ matrix.runtime }}
-          branch: ${{ inputs.branch }}
-          major_version: ${{ inputs.major_version }}
-          version: ${{ inputs.version }}
+    - name: Package
+      uses: ./.github/actions/package
+      with:
+        framework: ${{ inputs.framework }}
+        platform: ${{ matrix.platform }}
+        artifact: build_${{ matrix.platform }}
+        branch: ${{ inputs.branch }}
+        major_version: ${{ inputs.major_version }}
+        version: ${{ inputs.version }}
 
   release:
     needs: package
@@ -70,102 +59,102 @@ jobs:
     permissions:
       contents: write
     steps:
-      - name: Check out
-        uses: actions/checkout@v4
+    - name: Check out
+      uses: actions/checkout@v4
 
-      - name: Download release artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: _artifacts
-          pattern: release-*
-          merge-multiple: true
+    - name: Download release artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: _artifacts
+        pattern: release_*
+        merge-multiple: true
 
-      - name: Get Previous Release
-        id: previous-release
-        uses: cardinalby/git-get-release-action@v1
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        with:
-          latest: true
-          prerelease: ${{ inputs.branch != 'main' }}
+    - name: Get Previous Release
+      id: previous-release
+      uses: cardinalby/git-get-release-action@v1
+      env:
+        GITHUB_TOKEN: ${{ github.token }}
+      with:
+        latest: true
+        prerelease: ${{ inputs.branch != 'main' }}
 
-      - name: Generate Release Notes
-        id: generate-release-notes
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ github.token }}
-          result-encoding: string
-          script: |
-            const { data } = await github.rest.repos.generateReleaseNotes({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              tag_name: 'v${{ inputs.version }}',
-              target_commitish: '${{ github.sha }}',
-              previous_tag_name: '${{ steps.previous-release.outputs.tag_name }}',
-            })
-            return data.body
+    - name: Generate Release Notes
+      id: generate-release-notes
+      uses: actions/github-script@v7
+      with:
+        github-token: ${{ github.token }}
+        result-encoding: string
+        script: |
+          const { data } = await github.rest.repos.generateReleaseNotes({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            tag_name: 'v${{ inputs.version }}',
+            target_commitish: '${{ github.sha }}',
+            previous_tag_name: '${{ steps.previous-release.outputs.tag_name }}',
+          })
+          return data.body
 
-      - name: Create release
-        uses: ncipollo/release-action@v1
-        with:
-          artifacts: _artifacts/Sonarr.*
-          commit: ${{ github.sha }}
-          generateReleaseNotes: false
-          body: ${{ steps.generate-release-notes.outputs.result }}
-          name: ${{ inputs.version }}
-          prerelease: ${{ inputs.branch != 'main' }}
-          skipIfReleaseExists: true
-          tag: v${{ inputs.version }}
+    - name: Create release
+      uses: ncipollo/release-action@v1
+      with:
+        artifacts: _artifacts/Sonarr.*
+        commit: ${{ github.sha }}
+        generateReleaseNotes: false
+        body: ${{ steps.generate-release-notes.outputs.result }}
+        name: ${{ inputs.version }}
+        prerelease: ${{ inputs.branch != 'main' }}
+        skipIfReleaseExists: true
+        tag: v${{ inputs.version }}
 
-      - name: Publish to Services
-        shell: bash
-        working-directory: _artifacts
-        run: |
-          branch=${{ inputs.branch }}
-          version=${{ inputs.version }}
-          lastCommit=${{ github.sha }}
-
-          hashes="["
-
-          addHash() {
-            path=$1
-            os=$2
-            arch=$3
-            type=$4
-
-            local hash=$(sha256sum *.$version.$path | awk '{ print $1; }')
-            echo "{ \""Os\"": \""$os\"", \""Arch\"": \""$arch\"", \""Type\"": \""$type\"", \""Hash\"": \""$hash\"" }"
-          }
-
-          hashes="$hashes $(addHash "linux-arm.tar.gz" "linux" "arm" "archive")"
-          hashes="$hashes, $(addHash "linux-arm64.tar.gz" "linux" "arm64" "archive")"
-          hashes="$hashes, $(addHash "linux-x64.tar.gz" "linux" "x64" "archive")"
-          # hashes="$hashes, $(addHash "linux-x86.tar.gz" "linux" "x86" "archive")"
-
-          # hashes="$hashes, $(addHash "linux-musl-arm.tar.gz" "linuxmusl" "arm" "archive")"
-          hashes="$hashes, $(addHash "linux-musl-arm64.tar.gz" "linuxmusl" "arm64" "archive")"
-          hashes="$hashes, $(addHash "linux-musl-x64.tar.gz" "linuxmusl" "x64" "archive")"
-
-          hashes="$hashes, $(addHash "osx-arm64.tar.gz" "osx" "arm64" "archive")"
-          hashes="$hashes, $(addHash "osx-x64.tar.gz" "osx" "x64" "archive")"
-
-          hashes="$hashes, $(addHash "osx-arm64-app.zip" "osx" "arm64" "installer")"
-          hashes="$hashes, $(addHash "osx-x64-app.zip" "osx" "x64" "installer")"
-
-          hashes="$hashes, $(addHash "win-x64.zip" "windows" "x64" "archive")"
-          hashes="$hashes, $(addHash "win-x86.zip" "windows" "x86" "archive")"
-
-          hashes="$hashes, $(addHash "win-x64-installer.exe" "windows" "x64" "installer")"
-          hashes="$hashes, $(addHash "win-x86-installer.exe" "windows" "x86" "installer")"
-
-          hashes="$hashes, $(addHash "freebsd-x64.tar.gz" "freebsd" "x64" "archive")"
-
-          hashes="$hashes ]"
-
-          json="{\""branch\"":\""$branch\"", \""version\"":\""$version\"", \""lastCommit\"":\""$lastCommit\"", \""hashes\"":$hashes, \""gitHubRelease\"":true}"
-          url="https://services.sonarr.tv/v1/update"
-
-          echo "Publishing update $version ($branch) to: $url"
-          echo "$json"
-
-          curl -H "Content-Type: application/json" -H "X-Api-Key: ${{ secrets.SERVICES_API_KEY }}" -X POST -d "$json" --fail-with-body $url
+    - name: Publish to Services
+      shell: bash
+      working-directory: _artifacts
+      run: |
+        branch=${{ inputs.branch }}
+        version=${{ inputs.version }}
+        lastCommit=${{ github.sha }}
+        
+        hashes="["
+        
+        addHash() {
+          path=$1
+          os=$2
+          arch=$3
+          type=$4
+        
+          local hash=$(sha256sum *.$version.$path | awk '{ print $1; }')
+          echo "{ \""Os\"": \""$os\"", \""Arch\"": \""$arch\"", \""Type\"": \""$type\"", \""Hash\"": \""$hash\"" }"
+        }
+        
+        hashes="$hashes $(addHash "linux-arm.tar.gz" "linux" "arm" "archive")"
+        hashes="$hashes, $(addHash "linux-arm64.tar.gz" "linux" "arm64" "archive")"
+        hashes="$hashes, $(addHash "linux-x64.tar.gz" "linux" "x64" "archive")"
+        # hashes="$hashes, $(addHash "linux-x86.tar.gz" "linux" "x86" "archive")"
+        
+        # hashes="$hashes, $(addHash "linux-musl-arm.tar.gz" "linuxmusl" "arm" "archive")"
+        hashes="$hashes, $(addHash "linux-musl-arm64.tar.gz" "linuxmusl" "arm64" "archive")"
+        hashes="$hashes, $(addHash "linux-musl-x64.tar.gz" "linuxmusl" "x64" "archive")"
+        
+        hashes="$hashes, $(addHash "osx-arm64.tar.gz" "osx" "arm64" "archive")"
+        hashes="$hashes, $(addHash "osx-x64.tar.gz" "osx" "x64" "archive")"
+        
+        hashes="$hashes, $(addHash "osx-arm64-app.zip" "osx" "arm64" "installer")"
+        hashes="$hashes, $(addHash "osx-x64-app.zip" "osx" "x64" "installer")"
+        
+        hashes="$hashes, $(addHash "win-x64.zip" "windows" "x64" "archive")"
+        hashes="$hashes, $(addHash "win-x86.zip" "windows" "x86" "archive")"
+        
+        hashes="$hashes, $(addHash "win-x64-installer.exe" "windows" "x64" "installer")"
+        hashes="$hashes, $(addHash "win-x86-installer.exe" "windows" "x86" "installer")"
+        
+        hashes="$hashes, $(addHash "freebsd-x64.tar.gz" "freebsd" "x64" "archive")"
+        
+        hashes="$hashes ]"
+        
+        json="{\""branch\"":\""$branch\"", \""version\"":\""$version\"", \""lastCommit\"":\""$lastCommit\"", \""hashes\"":$hashes, \""gitHubRelease\"":true}"
+        url="https://services.sonarr.tv/v1/update"
+        
+        echo "Publishing update $version ($branch) to: $url"
+        echo "$json"
+        
+        curl -H "Content-Type: application/json" -H "X-Api-Key: ${{ secrets.SERVICES_API_KEY }}" -X POST -d "$json" --fail-with-body $url

.github/workflows/support-requests.yml

@@ -1,29 +0,0 @@
-name: 'Support Requests'
-
-on:
-  issues:
-    types: [labeled, unlabeled, reopened]
-
-permissions:
-  issues: write
-
-jobs:
-  action:
-    runs-on: ubuntu-latest
-    if: github.repository == 'Sonarr/Sonarr'
-    steps:
-      - uses: dessant/support-requests@v4
-        with:
-          github-token: ${{ github.token }}
-          support-label: 'support'
-          issue-comment: >
-            :wave: @{issue-author}, we use the issue tracker exclusively
-            for bug reports and feature requests. However, this issue appears
-            to be a support request. Please use one of the support channels: 
-            [forums](https://forums.sonarr.tv/), [subreddit](https://www.reddit.com/r/sonarr/), 
-            [discord](https://discord.gg/Ex7FmFK), or [IRC](https://web.libera.chat/?channels=#sonarr) 
-            for support/questions.
-          close-issue: true
-          issue-close-reason: 'not planned'
-          lock-issue: false
-          issue-lock-reason: 'off-topic'

.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/net8.0/Sonarr",
+      "program": "${workspaceFolder}/_output/net6.0/Sonarr",
       "args": [],
       "cwd": "${workspaceFolder}",
       // For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console

CONTRIBUTING.md

@@ -1,35 +1,32 @@
-# How to Contribute
+# How to Contribute #
 
 We're always looking for people to help make Sonarr even better, there are a number of ways to contribute.
 
-## Documentation
-
+## Documentation ##
 Setup guides, [FAQ](https://wiki.servarr.com/sonarr/faq), the more information we have on the [wiki](https://wiki.servarr.com/sonarr) the better.
 
-## Development
+## Development ##
 
-### Tools required
-
-- Visual Studio 2019 or higher (https://www.visualstudio.com/vs/). The community version is free and works (https://www.visualstudio.com/downloads/).
+### Tools required ###
+- Visual Studio 2019 or higher (https://www.visualstudio.com/vs/).  The community version is free and works (https://www.visualstudio.com/downloads/).
 - HTML/Javascript editor of choice (VS Code/Sublime Text/Webstorm/Atom/etc)
 - [Git](https://git-scm.com/downloads)
 - [NodeJS](https://nodejs.org/en/download/) (Node 10.X.X or higher)
 - [Yarn](https://yarnpkg.com/)
 
-### Getting started
+### Getting started ###
 
 1. Fork Sonarr
-2. Clone the repository into your development machine. [_info_](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
+2. Clone the repository into your development machine. [*info*](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
 3. Install the required Node Packages `yarn install`
 4. Start webpack to monitor your dev environment for any frontend changes that need post processing using `yarn start` command.
 5. Build the project in Visual Studio, Setting startup project to `Sonarr.Console` and framework to `x86`
 6. Debug the project in Visual Studio
 7. Open http://localhost:8989
 
-### Contributing Code
-
+### Contributing Code ###
 - If you're adding a new, already requested feature, please comment on [Github Issues](https://github.com/Sonarr/Sonarr/issues "Github Issues") so work is not duplicated (If you want to add something not already on there, please talk to us first)
-- Rebase from Sonarr's `v5-develop` branch, don't merge
+- Rebase from Sonarr's `develop` branch, don't 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 our [forums](https://forums.sonarr.tv/), [subreddit](https://www.reddit.com/r/sonarr/), [discord](https://discord.gg/Ex7FmFK), or [IRC](https://web.libera.chat/?channels=#sonarr) if you have any questions
@@ -38,9 +35,8 @@ Setup guides, [FAQ](https://wiki.servarr.com/sonarr/faq), the more information w
 - One feature/bug fix per pull request to keep things clean and easy to understand
 - Use 4 spaces instead of tabs, this should be the default for VS 2019 and WebStorm
 
-### Pull Requesting
-
-- Only make pull requests to the default branch (currently `v5-develop`), never `main`, if you make a PR to main we'll comment on it and close it
+### Pull Requesting ###
+- Only make pull requests to develop (currently `develop`), never `main`, if you make a PR to master we'll 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)

Logo/Jetbrains/dottrace.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1.3318" y1="43.7371" x2="67.0419" y2="26.0967">
+			<stop  offset="0.1237" style="stop-color:#7866FF"/>
+			<stop  offset="0.5376" style="stop-color:#FE2EB6"/>
+			<stop  offset="0.8548" style="stop-color:#FD0486"/>
+		</linearGradient>
+		<polygon style="fill:url(#SVGID_1_);" points="67.3,16 43.7,0 0,31.1 11.1,70 58.9,60.3 		"/>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="45.9148" y1="38.9098" x2="67.6577" y2="9.0989">
+			<stop  offset="0.1237" style="stop-color:#FF0080"/>
+			<stop  offset="0.2587" style="stop-color:#FE0385"/>
+			<stop  offset="0.4109" style="stop-color:#FA0C92"/>
+			<stop  offset="0.5713" style="stop-color:#F41BA9"/>
+			<stop  offset="0.7363" style="stop-color:#EB2FC8"/>
+			<stop  offset="0.8656" style="stop-color:#E343E6"/>
+		</linearGradient>
+		<polygon style="fill:url(#SVGID_2_);" points="67.3,16 43.7,0 38,15.7 38,47.8 70,47.8 		"/>
+	</g>
+	<g>
+		<rect x="13.4" y="13.4" style="fill:#000000;" width="43.2" height="43.2"/>
+		<rect x="17.4" y="48.5" style="fill:#FFFFFF;" width="16.2" height="2.7"/>
+		<g>
+			<path style="fill:#FFFFFF;" d="M17.4,19.1h6.9c5.6,0,9.5,3.8,9.5,8.9V28c0,5-3.9,8.9-9.5,8.9h-6.9V19.1z M21.4,22.7v10.7h3
+				c3.2,0,5.4-2.2,5.4-5.3V28c0-3.2-2.2-5.4-5.4-5.4H21.4z"/>
+			<polygon style="fill:#FFFFFF;" points="40.3,22.7 34.9,22.7 34.9,19.1 49.6,19.1 49.6,22.7 44.2,22.7 44.2,37 40.3,37 			"/>
+		</g>
+	</g>
+</g>
+</svg>

Logo/Jetbrains/jetbrains.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="120.1px" height="130.2px" viewBox="0 0 120.1 130.2" style="enable-background:new 0 0 120.1 130.2;" xml:space="preserve"
+	>
+<g>
+	<linearGradient id="XMLID_2_" gradientUnits="userSpaceOnUse" x1="31.8412" y1="120.5578" x2="110.2402" y2="73.24">
+		<stop  offset="0" style="stop-color:#FCEE39"/>
+		<stop  offset="1" style="stop-color:#F37B3D"/>
+	</linearGradient>
+	<path id="XMLID_3041_" style="fill:url(#XMLID_2_);" d="M118.6,71.8c0.9-0.8,1.4-1.9,1.5-3.2c0.1-2.6-1.8-4.7-4.4-4.9
+		c-1.2-0.1-2.4,0.4-3.3,1.1l0,0l-83.8,45.9c-1.9,0.8-3.6,2.2-4.7,4.1c-2.9,4.8-1.3,11,3.6,13.9c3.4,2,7.5,1.8,10.7-0.2l0,0l0,0
+		c0.2-0.2,0.5-0.3,0.7-0.5l78-54.8C117.3,72.9,118.4,72.1,118.6,71.8L118.6,71.8L118.6,71.8z"/>
+	<linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="48.3607" y1="6.9083" x2="119.9179" y2="69.5546">
+		<stop  offset="0" style="stop-color:#EF5A6B"/>
+		<stop  offset="0.57" style="stop-color:#F26F4E"/>
+		<stop  offset="1" style="stop-color:#F37B3D"/>
+	</linearGradient>
+	<path id="XMLID_3049_" style="fill:url(#XMLID_3_);" d="M118.8,65.1L118.8,65.1L55,2.5C53.6,1,51.6,0,49.3,0
+		c-4.3,0-7.7,3.5-7.7,7.7v0c0,2.1,0.8,3.9,2.1,5.3l0,0l0,0c0.4,0.4,0.8,0.7,1.2,1l67.4,57.7l0,0c0.8,0.7,1.8,1.2,3,1.3
+		c2.6,0.1,4.7-1.8,4.9-4.4C120.2,67.3,119.7,66,118.8,65.1z"/>
+	<linearGradient id="XMLID_4_" gradientUnits="userSpaceOnUse" x1="52.9467" y1="63.6407" x2="10.5379" y2="37.1562">
+		<stop  offset="0" style="stop-color:#7C59A4"/>
+		<stop  offset="0.3852" style="stop-color:#AF4C92"/>
+		<stop  offset="0.7654" style="stop-color:#DC4183"/>
+		<stop  offset="0.957" style="stop-color:#ED3D7D"/>
+	</linearGradient>
+	<path id="XMLID_3042_" style="fill:url(#XMLID_4_);" d="M57.1,59.5C57,59.5,17.7,28.5,16.9,28l0,0l0,0c-0.6-0.3-1.2-0.6-1.8-0.9
+		c-5.8-2.2-12.2,0.8-14.4,6.6c-1.9,5.1,0.2,10.7,4.6,13.4l0,0l0,0C6,47.5,6.6,47.8,7.3,48c0.4,0.2,45.4,18.8,45.4,18.8l0,0
+		c1.8,0.8,3.9,0.3,5.1-1.2C59.3,63.7,59,61,57.1,59.5z"/>
+	<linearGradient id="XMLID_5_" gradientUnits="userSpaceOnUse" x1="52.1736" y1="3.7019" x2="10.7706" y2="37.8971">
+		<stop  offset="0" style="stop-color:#EF5A6B"/>
+		<stop  offset="0.364" style="stop-color:#EE4E72"/>
+		<stop  offset="1" style="stop-color:#ED3D7D"/>
+	</linearGradient>
+	<path id="XMLID_3057_" style="fill:url(#XMLID_5_);" d="M49.3,0c-1.7,0-3.3,0.6-4.6,1.5L4.9,28.3c-0.1,0.1-0.2,0.1-0.2,0.2l-0.1,0
+		l0,0c-1.7,1.2-3.1,3-3.9,5.1C-1.5,39.4,1.5,45.9,7.3,48c3.6,1.4,7.5,0.7,10.4-1.4l0,0l0,0c0.7-0.5,1.3-1,1.8-1.6l34.6-31.2l0,0
+		c1.8-1.4,3-3.6,3-6.1v0C57.1,3.5,53.6,0,49.3,0z"/>
+	<g id="XMLID_3008_">
+		<rect id="XMLID_3033_" x="34.6" y="37.4" style="fill:#000000;" width="51" height="51"/>
+		<rect id="XMLID_3032_" x="39" y="78.8" style="fill:#FFFFFF;" width="19.1" height="3.2"/>
+		<g id="XMLID_3009_">
+			<path id="XMLID_3030_" style="fill:#FFFFFF;" d="M38.8,50.8l1.5-1.4c0.4,0.5,0.8,0.8,1.3,0.8c0.6,0,0.9-0.4,0.9-1.2l0-5.3l2.3,0
+				l0,5.3c0,1-0.3,1.8-0.8,2.3c-0.5,0.5-1.3,0.8-2.3,0.8C40.2,52.2,39.4,51.6,38.8,50.8z"/>
+			<path id="XMLID_3028_" style="fill:#FFFFFF;" d="M45.3,43.8l6.7,0v1.9l-4.4,0V47l4,0l0,1.8l-4,0l0,1.3l4.5,0l0,2l-6.7,0
+				L45.3,43.8z"/>
+			<path id="XMLID_3026_" style="fill:#FFFFFF;" d="M55,45.8l-2.5,0l0-2l7.3,0l0,2l-2.5,0l0,6.3l-2.3,0L55,45.8z"/>
+			<path id="XMLID_3022_" style="fill:#FFFFFF;" d="M39,54l4.3,0c1,0,1.8,0.3,2.3,0.7c0.3,0.3,0.5,0.8,0.5,1.4v0
+				c0,1-0.5,1.5-1.3,1.9c1,0.3,1.6,0.9,1.6,2v0c0,1.4-1.2,2.3-3.1,2.3l-4.3,0L39,54z M43.8,56.6c0-0.5-0.4-0.7-1-0.7l-1.5,0l0,1.5
+				l1.4,0C43.4,57.3,43.8,57.1,43.8,56.6L43.8,56.6z M43,59l-1.8,0l0,1.5H43c0.7,0,1.1-0.3,1.1-0.8v0C44.1,59.2,43.7,59,43,59z"/>
+			<path id="XMLID_3019_" style="fill:#FFFFFF;" d="M46.8,54l3.9,0c1.3,0,2.1,0.3,2.7,0.9c0.5,0.5,0.7,1.1,0.7,1.9v0
+				c0,1.3-0.7,2.1-1.7,2.6l2,2.9l-2.6,0l-1.7-2.5h-1l0,2.5l-2.3,0L46.8,54z M50.6,58c0.8,0,1.2-0.4,1.2-1v0c0-0.7-0.5-1-1.2-1
+				l-1.5,0v2H50.6z"/>
+			<path id="XMLID_3016_" style="fill:#FFFFFF;" d="M56.8,54l2.2,0l3.5,8.4l-2.5,0l-0.6-1.5l-3.2,0l-0.6,1.5l-2.4,0L56.8,54z
+				 M58.8,59l-0.9-2.3L57,59L58.8,59z"/>
+			<path id="XMLID_3014_" style="fill:#FFFFFF;" d="M62.8,54l2.3,0l0,8.3l-2.3,0L62.8,54z"/>
+			<path id="XMLID_3012_" style="fill:#FFFFFF;" d="M65.7,54l2.1,0l3.4,4.4l0-4.4l2.3,0l0,8.3l-2,0L68,57.8l0,4.6l-2.3,0L65.7,54z"
+				/>
+			<path id="XMLID_3010_" style="fill:#FFFFFF;" d="M73.7,61.1l1.3-1.5c0.8,0.7,1.7,1,2.7,1c0.6,0,1-0.2,1-0.6v0
+				c0-0.4-0.3-0.5-1.4-0.8c-1.8-0.4-3.1-0.9-3.1-2.6v0c0-1.5,1.2-2.7,3.2-2.7c1.4,0,2.5,0.4,3.4,1.1l-1.2,1.6
+				c-0.8-0.5-1.6-0.8-2.3-0.8c-0.6,0-0.8,0.2-0.8,0.5v0c0,0.4,0.3,0.5,1.4,0.8c1.9,0.4,3.1,1,3.1,2.6v0c0,1.7-1.3,2.7-3.4,2.7
+				C76.1,62.5,74.7,62,73.7,61.1z"/>
+		</g>
+	</g>
+</g>
+</svg>

Logo/Jetbrains/resharper.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="22.9451" y1="75.7869" x2="74.7868" y2="20.6415">
+				<stop  offset="1.612903e-002" style="stop-color:#B35BA3"/>
+				<stop  offset="0.4044" style="stop-color:#C41E57"/>
+				<stop  offset="0.4677" style="stop-color:#C41E57"/>
+				<stop  offset="0.6505" style="stop-color:#EB8523"/>
+				<stop  offset="0.9516" style="stop-color:#FEBD11"/>
+			</linearGradient>
+			<polygon style="fill:url(#SVGID_1_);" points="49.8,15.2 36,36.7 58.4,70 70,23.1 			"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="17.7187" y1="73.2922" x2="69.5556" y2="18.1519">
+				<stop  offset="1.612903e-002" style="stop-color:#B35BA3"/>
+				<stop  offset="0.4044" style="stop-color:#C41E57"/>
+				<stop  offset="0.4677" style="stop-color:#C41E57"/>
+				<stop  offset="0.7043" style="stop-color:#EB8523"/>
+			</linearGradient>
+			<polygon style="fill:url(#SVGID_2_);" points="51.1,15.7 49,0 18.8,33.6 27.6,42.3 20.8,70 58.4,70 			"/>
+		</g>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1.8281" y1="53.4275" x2="48.8245" y2="9.2255">
+			<stop  offset="1.612903e-002" style="stop-color:#B35BA3"/>
+			<stop  offset="0.6613" style="stop-color:#C41E57"/>
+		</linearGradient>
+		<polygon style="fill:url(#SVGID_3_);" points="49,0 11.6,0 0,47.1 55.6,47.1 		"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="49.8935" y1="-11.5569" x2="48.8588" y2="24.0352">
+			<stop  offset="0.5" style="stop-color:#C41E57"/>
+			<stop  offset="0.6668" style="stop-color:#D13F48"/>
+			<stop  offset="0.7952" style="stop-color:#D94F39"/>
+			<stop  offset="0.8656" style="stop-color:#DD5433"/>
+		</linearGradient>
+		<polygon style="fill:url(#SVGID_4_);" points="55.3,47.1 51.1,15.7 49,0 41.7,23 		"/>
+	</g>
+	<g>
+		
+			<rect x="13.4" y="13.5" transform="matrix(-1 2.577289e-003 -2.577289e-003 -1 70.0288 70.081)" style="fill:#000000;" width="43.2" height="43.2"/>
+		
+			<rect x="17.6" y="48.6" transform="matrix(1 -2.577289e-003 2.577289e-003 1 -0.1287 6.634109e-002)" style="fill:#FFFFFF;" width="16.2" height="2.7"/>
+		<path style="fill:#FFFFFF;" d="M17.4,19.1l8.2,0c2.3,0,4,0.6,5.2,1.8c1,1,1.5,2.4,1.5,4.1l0,0.1c0,1.5-0.3,2.6-1.1,3.5
+			c-0.7,0.9-1.6,1.6-2.8,2l4.4,6.4l-4.6,0l-3.7-5.5l-3.3,0l0,5.5l-3.9,0L17.4,19.1z M25.3,27.8c1,0,1.7-0.2,2.2-0.7
+			c0.5-0.5,0.8-1.1,0.8-1.8l0-0.1c0-0.9-0.3-1.5-0.8-1.9c-0.5-0.4-1.3-0.6-2.3-0.6l-3.9,0l0,5.1L25.3,27.8z"/>
+		<path style="fill:#FFFFFF;" d="M36,33.2l-1.9,0l0-3.3l2.5,0l0.6-3.8l-2.3,0l0-3.3l2.8,0l0.6-3.7l3.4,0l-0.6,3.7l3.7,0l0.6-3.7
+			l3.4,0l-0.6,3.7l1.9,0l0,3.3l-2.5,0L47,29.9l2.3,0l0,3.3l-2.8,0L45.8,37l-3.4,0l0.7-3.8l-3.7,0L38.7,37l-3.4,0L36,33.2z
+			 M43.7,29.9l0.6-3.8l-3.7,0L40,29.9L43.7,29.9z"/>
+	</g>
+</g>
+</svg>

Logo/Jetbrains/teamcity.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.7738" y1="31.2729" x2="40.1662" y2="31.2729">
+			<stop  offset="0" style="stop-color:#905CFB"/>
+			<stop  offset="6.772543e-002" style="stop-color:#776CF9"/>
+			<stop  offset="0.1729" style="stop-color:#5681F7"/>
+			<stop  offset="0.2865" style="stop-color:#3B92F5"/>
+			<stop  offset="0.4097" style="stop-color:#269FF4"/>
+			<stop  offset="0.5474" style="stop-color:#17A9F3"/>
+			<stop  offset="0.7111" style="stop-color:#0FAEF2"/>
+			<stop  offset="0.9677" style="stop-color:#0CB0F2"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_1_);" d="M39.7,47.9l-6.1-34c-0.4-2.4-1.2-4.8-2.7-7.1c-2-3.2-5.2-5.4-8.8-6.3
+			C7.9-2.9-2.6,11.3,3.6,23.9c0,0,0,0,0,0l14.8,31.7c0.4,1,1,2,1.7,2.9c1.2,1.6,2.8,2.8,4.7,3.4C34.4,64.9,42.1,56.4,39.7,47.9z"/>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="5.3113" y1="9.6691" x2="69.2278" y2="43.8664">
+			<stop  offset="0" style="stop-color:#905CFB"/>
+			<stop  offset="6.772543e-002" style="stop-color:#776CF9"/>
+			<stop  offset="0.1729" style="stop-color:#5681F7"/>
+			<stop  offset="0.2865" style="stop-color:#3B92F5"/>
+			<stop  offset="0.4097" style="stop-color:#269FF4"/>
+			<stop  offset="0.5474" style="stop-color:#17A9F3"/>
+			<stop  offset="0.7111" style="stop-color:#0FAEF2"/>
+			<stop  offset="0.9677" style="stop-color:#0CB0F2"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_2_);" d="M67.4,26.5c-1.4-2.2-3.4-3.9-5.7-4.9L25.5,1.7l0,0c-1-0.5-2.1-1-3.3-1.3
+			C6.7-3.2-4.4,13.8,5.5,27c1.5,2,3.6,3.6,6,4.5L48,47.9c0.8,0.5,1.6,0.8,2.5,1.1C64.5,53.4,75.1,38.6,67.4,26.5z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-19.2836" y1="70.8198" x2="55.9833" y2="33.1863">
+			<stop  offset="0" style="stop-color:#3BEA62"/>
+			<stop  offset="0.117" style="stop-color:#31DE80"/>
+			<stop  offset="0.3025" style="stop-color:#24CEA8"/>
+			<stop  offset="0.4844" style="stop-color:#1AC1C9"/>
+			<stop  offset="0.6592" style="stop-color:#12B7DF"/>
+			<stop  offset="0.8238" style="stop-color:#0EB2ED"/>
+			<stop  offset="0.9677" style="stop-color:#0CB0F2"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_3_);" d="M67.4,26.5c-1.8-2.8-4.6-4.8-7.9-5.6c-3.5-0.8-6.8-0.5-9.6,0.7L11.4,36.1
+			c0,0-0.2,0.1-0.6,0.4C0.9,40.4-4,53.3,4,64c1.8,2.4,4.3,4.2,7.1,5c5.3,1.6,10.1,1,14-1.1c0,0,0.1,0,0.1,0l37.6-20.1
+			c0,0,0,0,0.1-0.1C69.5,43.9,72.6,34.6,67.4,26.5z"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="38.9439" y1="5.8503" x2="5.4232" y2="77.5093">
+			<stop  offset="0" style="stop-color:#3BEA62"/>
+			<stop  offset="9.397750e-002" style="stop-color:#2FDB87"/>
+			<stop  offset="0.196" style="stop-color:#24CEA8"/>
+			<stop  offset="0.3063" style="stop-color:#1BC3C3"/>
+			<stop  offset="0.4259" style="stop-color:#14BAD8"/>
+			<stop  offset="0.5596" style="stop-color:#10B5E7"/>
+			<stop  offset="0.7185" style="stop-color:#0DB1EF"/>
+			<stop  offset="0.9677" style="stop-color:#0CB0F2"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_4_);" d="M50.3,12.8c1.2-2.7,1.1-6-0.9-9c-1.1-1.8-2.9-3-4.9-3.5c-4.5-1.1-8.3,1-10.1,4.2L3.5,42
+			c0,0,0,0,0,0.1C-0.9,47.9-1.6,56.5,4,64c1.8,2.4,4.3,4.2,7.1,5c10.5,3.3,19.3-2.5,22.1-10.8L50.3,12.8z"/>
+	</g>
+	<g>
+		<rect x="13.4" y="13.4" style="fill:#000000;" width="43.2" height="43.2"/>
+		<rect x="17.5" y="48.5" style="fill:#FFFFFF;" width="16.2" height="2.7"/>
+		<polygon style="fill:#FFFFFF;" points="22.9,22.7 17.5,22.7 17.5,19.1 32.3,19.1 32.3,22.7 26.8,22.7 26.8,37 22.9,37 		"/>
+		<path style="fill:#FFFFFF;" d="M32.5,28.1L32.5,28.1c0-5.1,3.8-9.3,9.3-9.3c3.4,0,5.4,1.1,7.1,2.8l-2.5,2.9c-1.4-1.3-2.8-2-4.6-2
+			c-3,0-5.2,2.5-5.2,5.6V28c0,3.1,2.1,5.6,5.2,5.6c2,0,3.3-0.8,4.7-2.1l2.5,2.5c-1.8,2-3.9,3.2-7.3,3.2
+			C36.4,37.3,32.5,33.2,32.5,28.1"/>
+	</g>
+</g>
+</svg>

README.md

@@ -1,6 +1,6 @@
-# <img width="24px" src="./Logo/256.png" alt="Sonarr"></img> Sonarr
+# <img width="24px" src="./Logo/256.png" alt="Sonarr"></img> Sonarr 
 
-[![Translated](https://translate.servarr.com/widget/servarr/sonarr/svg-badge.svg)](https://translate.servarr.com/engage/servarr/)
+[![Translated](https://translate.servarr.com/widgets/servarr/-/sonarr/svg-badge.svg)](https://translate.servarr.com/engage/servarr/)
 [![Backers on Open Collective](https://opencollective.com/Sonarr/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/Sonarr/sponsors/badge.svg)](#sponsors)
 [![Mega Sponsors on Open Collective](https://opencollective.com/Sonarr/megasponsors/badge.svg)](#mega-sponsors)
@@ -12,7 +12,7 @@ Sonarr is a PVR for Usenet and BitTorrent users. It can monitor multiple RSS fee
 - [Download/Installation](https://sonarr.tv/#downloads-v3)
 - [FAQ](https://wiki.servarr.com/sonarr/faq)
 - [Wiki](https://wiki.servarr.com/Sonarr)
-- [API Documentation](https://sonarr.tv/docs/api)
+- [v4 Beta API Documentation](https://sonarr.tv/docs/api)
 - [Donate](https://sonarr.tv/donate)
 
 ## Support
@@ -33,7 +33,7 @@ Note: GitHub Issues are for Bugs and Feature Requests Only
 - Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
 - Automatically detects new episodes
 - Can scan your existing library and download any missing episodes
-- Can watch for better quality of the episodes you already have and do an automatic upgrade. _eg. from DVD to Blu-Ray_
+- Can watch for better quality of the episodes you already have and do an automatic upgrade. *eg. from DVD to Blu-Ray*
 - Automatic failed download handling will try another release if one fails
 - Manual search so you can pick any release or to see why a release was not downloaded automatically
 - Fully configurable episode renaming
@@ -52,7 +52,7 @@ This project exists thanks to all the people who contribute. [Contribute](CONTRI
 
 ### Supporters
 
-This project would not be possible without the support of our users and software providers.
+This project would not be possible without the support of our users and software providers. 
 [**Become a sponsor or backer**](https://opencollective.com/sonarr) to help us out!
 
 #### Mega Sponsors
@@ -69,17 +69,13 @@ This project would not be possible without the support of our users and software
 
 #### JetBrains
 
-Thank you to [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png" alt="JetBrains" width="96">](http://www.jetbrains.com/) for providing us with free licenses to their great tools
+Thank you to [<img src="/Logo/Jetbrains/jetbrains.svg" alt="JetBrains" width="32"> JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools
 
-[<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/TeamCity.png" alt="TeamCity" width="64">](http://www.jetbrains.com/teamcity/)
-
-[<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/ReSharper.png" alt="ReSharper" width="64">](http://www.jetbrains.com/resharper/)
-
-[<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/dotTrace.png" alt="dotTrace" width="64">](http://www.jetbrains.com/dottrace/)
-
-[<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/Rider.png" alt="Rider" width="64">](http://www.jetbrains.com/rider/)
+* [<img src="/Logo/Jetbrains/teamcity.svg" alt="TeamCity" width="32"> TeamCity](http://www.jetbrains.com/teamcity/)
+* [<img src="/Logo/Jetbrains/resharper.svg" alt="ReSharper" width="32"> ReSharper](http://www.jetbrains.com/resharper/)
+* [<img src="/Logo/Jetbrains/dottrace.svg" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)
 
 ### Licenses
 
-- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-- Copyright 2010-2025
+- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)	
+- Copyright 2010-2023

build.sh

@@ -0,0 +1,455 @@
+#! /usr/bin/env bash
+set -e
+
+outputFolder='_output'
+testPackageFolder='_tests'
+artifactsFolder="_artifacts";
+framework="${FRAMEWORK:=net6.0}"
+
+ProgressStart()
+{
+    echo "::group::$1"
+    echo "Start '$1'"
+}
+
+ProgressEnd()
+{
+    echo "Finish '$1'"
+    echo "::endgroup::"
+}
+
+UpdateVersionNumber()
+{
+    if [ "$SONARR_VERSION" != "" ]; then
+        echo "Updating version info to: $SONARR_VERSION"
+        sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$SONARR_VERSION<\/AssemblyVersion>/g" src/Directory.Build.props
+        sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BRANCH}<\/AssemblyConfiguration>/g" src/Directory.Build.props
+        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$SONARR_VERSION<\/string>/g" distribution/macOS/Sonarr.app/Contents/Info.plist
+    fi
+}
+
+EnableExtraPlatformsInSDK()
+{
+    BUNDLEDVERSIONS="${SDK_PATH}/Microsoft.NETCoreSdk.BundledVersions.props"
+    if grep -q freebsd-x64 "$BUNDLEDVERSIONS"; then
+        echo "Extra platforms already enabled"
+    else
+        echo "Enabling extra platform support"
+        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</RuntimeIdentifiers>^g" src/Directory.Build.props
+    fi
+}
+
+LintUI()
+{
+    ProgressStart 'ESLint'
+    yarn lint
+    ProgressEnd 'ESLint'
+
+    ProgressStart 'Stylelint'
+    yarn stylelint
+    ProgressEnd 'Stylelint'
+}
+
+Build()
+{
+    ProgressStart 'Build'
+
+    rm -rf $outputFolder
+    rm -rf $testPackageFolder
+
+    slnFile=src/Sonarr.sln
+
+    if [ $os = "windows" ]; then
+        platform=Windows
+    else
+        platform=Posix
+    fi
+
+    dotnet clean $slnFile -c Debug
+    dotnet clean $slnFile -c Release
+
+    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
+    then
+        dotnet msbuild -restore $slnFile -p:Configuration=Release -p:Platform=$platform -t:PublishAllRids
+    else
+        dotnet msbuild -restore $slnFile -p:Configuration=Release -p:Platform=$platform -p:RuntimeIdentifiers=$RID -t:PublishAllRids
+    fi
+
+    ProgressEnd 'Build'
+}
+
+YarnInstall()
+{
+    ProgressStart 'yarn install'
+    yarn install --frozen-lockfile --network-timeout 120000
+    ProgressEnd 'yarn install'
+}
+
+RunWebpack()
+{
+    ProgressStart 'Running webpack'
+    yarn run build --env production
+    ProgressEnd 'Running webpack'
+}
+
+PackageFiles()
+{
+    local folder="$1"
+    local framework="$2"
+    local runtime="$3"
+
+    rm -rf $folder
+    mkdir -p $folder
+    cp -r $outputFolder/$framework/$runtime/publish/* $folder
+    cp -r $outputFolder/Sonarr.Update/$framework/$runtime/publish $folder/Sonarr.Update
+    
+    if [ "$FRONTEND" = "YES" ];
+    then
+        cp -r $outputFolder/UI $folder
+    fi
+
+    echo "Adding LICENSE"
+    cp LICENSE.md $folder
+}
+
+PackageLinux()
+{
+    local framework="$1"
+    local runtime="$2"
+
+    ProgressStart "Creating $runtime Package for $framework"
+
+    local folder=$artifactsFolder/$runtime/$framework/Sonarr
+
+    PackageFiles "$folder" "$framework" "$runtime"
+
+    echo "Removing Service helpers"
+    rm -f $folder/ServiceUninstall.*
+    rm -f $folder/ServiceInstall.*
+
+    echo "Removing Sonarr.Windows"
+    rm $folder/Sonarr.Windows.*
+
+    echo "Adding Sonarr.Mono to UpdatePackage"
+    cp $folder/Sonarr.Mono.* $folder/Sonarr.Update
+    if [ "$framework" = "$framework" ]; then
+        cp $folder/Mono.Posix.NETStandard.* $folder/Sonarr.Update
+        cp $folder/libMonoPosixHelper.* $folder/Sonarr.Update
+    fi
+
+    ProgressEnd "Creating $runtime Package for $framework"
+}
+
+PackageMacOS()
+{
+    local framework="$1"
+    local runtime="$2"
+
+    ProgressStart "Creating $runtime Package for $framework"
+
+    local folder=$artifactsFolder/$runtime/$framework/Sonarr
+
+    PackageFiles "$folder" "$framework" "$runtime"
+
+    echo "Removing Service helpers"
+    rm -f $folder/ServiceUninstall.*
+    rm -f $folder/ServiceInstall.*
+
+    echo "Removing Sonarr.Windows"
+    rm $folder/Sonarr.Windows.*
+
+    echo "Adding Sonarr.Mono to UpdatePackage"
+    cp $folder/Sonarr.Mono.* $folder/Sonarr.Update
+    if [ "$framework" = "$framework" ]; then
+        cp $folder/Mono.Posix.NETStandard.* $folder/Sonarr.Update
+        cp $folder/libMonoPosixHelper.* $folder/Sonarr.Update
+    fi
+
+    ProgressEnd "Creating $runtime Package for $framework"
+}
+
+PackageMacOSApp()
+{
+    local framework="$1"
+    local runtime="$2"
+
+    ProgressStart "Creating $runtime App Package for $framework"
+
+    local folder=$artifactsFolder/$runtime-app/$framework
+
+    rm -rf $folder
+    mkdir -p $folder
+    cp -r distribution/macOS/Sonarr.app $folder
+    mkdir -p $folder/Sonarr.app/Contents/MacOS
+
+    echo "Copying Binaries"
+    cp -r $artifactsFolder/$runtime/$framework/Sonarr/* $folder/Sonarr.app/Contents/MacOS
+
+    echo "Removing Update Folder"
+    rm -r $folder/Sonarr.app/Contents/MacOS/Sonarr.Update
+
+    ProgressEnd "Creating $runtime App Package for $framework"
+}
+
+PackageWindows()
+{
+    local framework="$1"
+    local runtime="$2"
+
+    ProgressStart "Creating Windows Package for $framework"
+
+    local folder=$artifactsFolder/$runtime/$framework/Sonarr
+
+    PackageFiles "$folder" "$framework" "$runtime"
+    cp -r $outputFolder/$framework-windows/$runtime/publish/* $folder
+
+    echo "Removing Sonarr.Mono"
+    rm -f $folder/Sonarr.Mono.*
+    rm -f $folder/Mono.Posix.NETStandard.*
+    rm -f $folder/libMonoPosixHelper.*
+
+    echo "Adding Sonarr.Windows to UpdatePackage"
+    cp $folder/Sonarr.Windows.* $folder/Sonarr.Update
+
+    ProgressEnd "Creating Windows Package for $framework"
+}
+
+Package()
+{
+    local framework="$1"
+    local runtime="$2"
+    local SPLIT
+
+    IFS='-' read -ra SPLIT <<< "$runtime"
+
+    case "${SPLIT[0]}" in
+        linux|freebsd*)
+            PackageLinux "$framework" "$runtime"
+            ;;
+        win)
+            PackageWindows "$framework" "$runtime"
+            ;;
+        osx)
+            PackageMacOS "$framework" "$runtime"
+            ;;
+    esac
+}
+
+PackageTests()
+{
+    local framework="$1"
+    local runtime="$2"
+
+    ProgressStart "Creating $runtime Test Package for $framework"
+
+    cp test.sh "$testPackageFolder/$framework/$runtime/publish"
+
+    rm -f $testPackageFolder/$framework/$runtime/*.log.config
+
+    ProgressEnd "Creating $runtime Test Package for $framework"
+}
+
+UploadTestArtifacts()
+{
+    local framework="$1"
+
+    ProgressStart 'Publishing Test Artifacts'
+
+    # Tests
+    for dir in $testPackageFolder/$framework/*
+    do
+        local runtime=$(basename "$dir")
+        echo "##teamcity[publishArtifacts '$testPackageFolder/$framework/$runtime/publish/** => tests.$runtime.zip']"
+    done
+
+    ProgressEnd 'Publishing Test Artifacts'
+}
+
+UploadArtifacts()
+{
+    local framework="$1"
+
+    ProgressStart 'Publishing Artifacts'
+
+    # Releases
+    for dir in $artifactsFolder/*
+    do
+        local runtime=$(basename "$dir")
+
+        echo "##teamcity[publishArtifacts '$artifactsFolder/$runtime/$framework/** => Sonarr.$BRANCH.$SONARR_VERSION.$runtime.zip']"
+    done
+
+    # Debian Package / Windows installer / macOS app
+    echo "##teamcity[publishArtifacts 'distribution/** => distribution.zip']"
+
+    ProgressEnd 'Publishing Artifacts'
+}
+
+UploadUIArtifacts()
+{
+    local framework="$1"
+
+    ProgressStart 'Publishing UI Artifacts'
+
+    # UI folder
+    echo "##teamcity[publishArtifacts '$outputFolder/UI/** => UI.zip']"
+
+    ProgressEnd 'Publishing UI Artifacts'
+}
+
+# Use mono or .net depending on OS
+case "$(uname -s)" in
+    CYGWIN*|MINGW32*|MINGW64*|MSYS*)
+        # on windows, use dotnet
+        os="windows"
+        ;;
+    *)
+        # otherwise use mono
+        os="posix"
+        ;;
+esac
+
+POSITIONAL=()
+
+if [ $# -eq 0 ]; then
+    echo "No arguments provided, building everything"
+    BACKEND=YES
+    FRONTEND=YES
+    PACKAGES=YES
+    LINT=YES
+    ENABLE_EXTRA_PLATFORMS=NO
+    ENABLE_EXTRA_PLATFORMS_IN_SDK=NO
+fi
+
+while [[ $# -gt 0 ]]
+do
+key="$1"
+
+case $key in
+    --backend)
+        BACKEND=YES
+        shift # past argument
+        ;;
+    --enable-bsd|--enable-extra-platforms)
+        ENABLE_EXTRA_PLATFORMS=YES
+        shift # past argument
+        ;;
+    --enable-extra-platforms-in-sdk)
+        ENABLE_EXTRA_PLATFORMS_IN_SDK=YES
+        shift # past argument
+        ;;
+    -r|--runtime)
+        RID="$2"
+        shift # past argument
+        shift # past value
+        ;;
+    -f|--framework)
+        FRAMEWORK="$2"
+        shift # past argument
+        shift # past value
+        ;;
+    --frontend)
+        FRONTEND=YES
+        shift # past argument
+        ;;
+    --packages)
+        PACKAGES=YES
+        shift # past argument
+        ;;
+    --lint)
+        LINT=YES
+        shift # past argument
+        ;;
+    --all)
+        BACKEND=YES
+        FRONTEND=YES
+        PACKAGES=YES
+        LINT=YES
+        shift # past argument
+        ;;
+    *)    # unknown option
+        POSITIONAL+=("$1") # save it in an array for later
+        shift # past argument
+        ;;
+esac
+done
+set -- "${POSITIONAL[@]}" # restore positional parameters
+
+if [ "$ENABLE_EXTRA_PLATFORMS_IN_SDK" = "YES" ];
+then
+    EnableExtraPlatformsInSDK
+fi
+
+if [ "$BACKEND" = "YES" ];
+then
+    UpdateVersionNumber
+    if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
+    then
+        EnableExtraPlatforms
+    fi
+
+    Build
+
+    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
+    then
+        PackageTests "$framework" "win-x64"
+        PackageTests "$framework" "win-x86"
+        PackageTests "$framework" "linux-x64"
+        PackageTests "$framework" "linux-musl-x64"
+        PackageTests "$framework" "osx-x64"
+        if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
+        then
+            PackageTests "$framework" "freebsd-x64"
+        fi
+    else
+        PackageTests "$FRAMEWORK" "$RID"
+    fi
+
+    UploadTestArtifacts "$framework"
+fi
+
+if [ "$FRONTEND" = "YES" ];
+then
+    YarnInstall
+
+    if [ "$LINT" = "YES" ];
+    then
+        LintUI
+    fi
+
+    RunWebpack
+    UploadUIArtifacts
+fi
+
+if [ "$PACKAGES" = "YES" ];
+then
+    UpdateVersionNumber
+
+    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
+    then
+        Package "$framework" "win-x64"
+        Package "$framework" "win-x86"
+        Package "$framework" "linux-x64"
+        Package "$framework" "linux-musl-x64"
+        Package "$framework" "linux-arm64"
+        Package "$framework" "linux-musl-arm64"
+        Package "$framework" "linux-arm"
+        Package "$framework" "osx-x64"
+        Package "$framework" "osx-arm64"
+        if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
+        then
+            Package "$framework" "freebsd-x64"
+        fi
+    else
+        Package "$FRAMEWORK" "$RID"
+    fi
+
+    UploadArtifacts "$framework"
+fi

distribution/debian/install.sh

@@ -6,8 +6,6 @@
 ### Version V1.0.1 2024-01-02 - StevieTV - remove UTF8-BOM
 ### Version V1.0.2 2024-01-03 - markus101 - Get user input from /dev/tty
 ### Version V1.0.3 2024-01-06 - StevieTV - exit script when it is ran from install directory
-### Version V1.0.4 2025-04-05 - kaecyra - Allow user/group to be supplied via CLI, add unattended mode
-### Version V1.0.5 2025-07-08 - bparkin1283 - use systemctl instead of service for stopping app
 
 ### Boilerplate Warning
 #THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
@@ -18,8 +16,8 @@
 #OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 #WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-scriptversion="1.0.4"
-scriptdate="2025-04-05"
+scriptversion="1.0.3"
+scriptdate="2024-01-06"
 
 set -euo pipefail
 
@@ -51,106 +49,18 @@ if [ "$installdir" == "$(dirname -- "$( readlink -f -- "$0"; )")" ] || [ "$bindi
     exit
 fi
 
-show_help() {
-    cat <<EOF
-Usage: $(basename "$0") [OPTIONS]
-
-Options:
-  --user <name>       What user will $app run under?
-                      User will be created if it doesn't already exist.
-
-  --group <name>      What group will $app run under?
-                      Group will be created if it doesn't already exist.
-
-  -u                  Unattended mode
-                      The installer will not prompt or pause, making it suitable for automated installations.
-                      This option requires the use of --user and --group to supply those inputs for the script.
-
-  -h, --help          Show this help message and exit
-EOF
-}
-
-# Default values for command-line arguments
-arg_user=""
-arg_group=""
-arg_unattended=false
-
-# Parse command-line arguments
-while [[ $# -gt 0 ]]; do
-    case "$1" in
-        --user=*)
-            arg_user="${1#*=}"
-            shift
-            ;;
-        --user)
-            if [[ -n "$2" && "$2" != -* ]]; then
-                arg_user="$2"
-                shift 2
-            else
-                echo "Error: --user requires a value." >&2
-                exit 1
-            fi
-            ;;
-        --group=*)
-            arg_group="${1#*=}"
-            shift
-            ;;
-        --group)
-            if [[ -n "$2" && "$2" != -* ]]; then
-                arg_group="$2"
-                shift 2
-            else
-                echo "Error: --group requires a value." >&2
-                exit 1
-            fi
-            ;;
-        -u)
-            arg_unattended=true
-            shift
-            ;;
-        -h|--help)
-            show_help
-            exit 0
-            ;;
-        *)
-            echo "Unknown option: $1" >&2
-            echo "Use --help to see valid options." >&2
-            exit 1
-            ;;
-    esac
-done
-
-# If unattended mode is requested, require user and group
-if $arg_unattended; then
-    if [[ -z "$arg_user" || -z "$arg_group" ]]; then
-        echo "Error: --user and --group are required when using -u (unattended mode)." >&2
-        exit 1
-    fi
-fi
-
-# Prompt User if necessary
-if [ -n "$arg_user" ]; then
-    app_uid="$arg_user"
-else
-    read -r -p "What user should ${app^} run as? (Default: $app): " app_uid < /dev/tty
-fi
+# Prompt User
+read -r -p "What user should ${app^} run as? (Default: $app): " app_uid < /dev/tty
 app_uid=$(echo "$app_uid" | tr -d ' ')
 app_uid=${app_uid:-$app}
-
-# Prompt Group if necessary
-if [ -n "$arg_group" ]; then
-    app_guid="$arg_group"
-else
-    read -r -p "What group should ${app^} run as? (Default: media): " app_guid < /dev/tty
-fi
+# Prompt Group
+read -r -p "What group should ${app^} run as? (Default: media): " app_guid < /dev/tty
 app_guid=$(echo "$app_guid" | tr -d ' ')
 app_guid=${app_guid:-media}
 
 echo "This will install [${app^}] to [$bindir] and use [$datadir] for the AppData Directory"
 echo "${app^} will run as the user [$app_uid] and group [$app_guid]. By continuing, you've confirmed that the selected user and group will have READ and WRITE access to your Media Library and Download Client Completed Download directories"
-if ! $arg_unattended; then
-    read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
-fi
+read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
 
 # Create User / Group as needed
 if [ "$app_guid" != "$app_uid" ]; then
@@ -168,10 +78,11 @@ if ! getent group "$app_guid" | grep -qw "$app_uid"; then
     echo "Added User [$app_uid] to Group [$app_guid]"
 fi
 
-# Stop and disable the App if running
-if [ $(systemctl is-active "$app") = "active" ]; then
-    systemctl disable --now -q "$app"
-    echo "Stopped and disabled existing $app"
+# Stop the App if running
+if service --status-all | grep -Fq "$app"; then
+    systemctl stop "$app"
+    systemctl disable "$app".service
+    echo "Stopped existing $app"
 fi
 
 # Create Appdata Directory

distribution/windows/setup/build.bat

@@ -1,7 +1,7 @@
 @REM SET SONARR_MAJOR_VERSION=4
 @REM SET SONARR_VERSION=4.0.0.5
 @REM SET BRANCH=develop
-@REM SET FRAMEWORK=net8.0
+@REM SET FRAMEWORK=net6.0
 @REM SET RUNTIME=win-x64
 
 inno\ISCC.exe sonarr.iss

docker/tests/mono/startup.sh

@@ -7,9 +7,9 @@ cd /data/test
 
 runTest()
 {
-    bash scripts/test.sh Linux $1
+    bash test.sh Linux $1
     cp TestResult.xml /data/_tests_results/TestResult_$1.xml
 }
 
 runTest Integration
-runTest Unit
+runTest Unit

docs.sh

@@ -1,16 +1,15 @@
 #!/bin/bash
 set -e
 
-FRAMEWORK="net8.0"
+FRAMEWORK="net6.0"
 PLATFORM=$1
-ARCHITECTURE="${2:-x64}"
 
 if [ "$PLATFORM" = "Windows" ]; then
-  RUNTIME="win-$ARCHITECTURE"
+  RUNTIME="win-x64"
 elif [ "$PLATFORM" = "Linux" ]; then
-  RUNTIME="linux-$ARCHITECTURE"
+  RUNTIME="linux-x64"
 elif [ "$PLATFORM" = "Mac" ]; then
-  RUNTIME="osx-$ARCHITECTURE"
+  RUNTIME="osx-x64"
 else
   echo "Platform must be provided as first argument: Windows, Linux or Mac"
   exit 1
@@ -23,7 +22,7 @@ rm -rf $outputFolder
 rm -rf $testPackageFolder
 
 slnFile=src/Sonarr.sln
-outputFile=src/Sonarr.Api.V5/openapi.json
+
 platform=Posix
 
 if [ "$PLATFORM" = "Windows" ]; then
@@ -38,20 +37,12 @@ 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 8.0.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
-# Remove the openapi.json file so we can check if it was created
-rm $outputFile
-
-dotnet tool run swagger tofile --output ./src/Sonarr.Api.V5/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v5 &
+dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v3 &
 
 sleep 45
 
 kill %1
 
-if [ ! -f $outputFile ]; then
-  echo "$outputFile not found, check logs for errors"
-  exit 1
-fi
-
 exit 0

frontend/.eslintrc.js

@@ -210,6 +210,7 @@ module.exports = {
     'no-undef-init': 'off',
     'no-undefined': 'off',
     'no-unused-vars': ['error', { args: 'none', ignoreRestSiblings: true }],
+    'no-use-before-define': 'error',
 
     // Node.js and CommonJS
 
@@ -363,11 +364,7 @@ module.exports = {
           {
             args: 'after-used',
             argsIgnorePattern: '^_',
-            caughtErrorsIgnorePattern: '^_',
-            destructuredArrayIgnorePattern: '^_',
-            varsIgnorePattern: '^_',
             ignoreRestSiblings: true
-
           }
         ],
         '@typescript-eslint/explicit-function-return-type': 'off',

frontend/build/webpack.config.js

@@ -14,6 +14,7 @@ module.exports = (env) => {
   const srcFolder = path.join(frontendFolder, 'src');
   const isProduction = !!env.production;
   const isProfiling = isProduction && !!env.profile;
+  const inlineWebWorkers = 'no-fallback';
 
   const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
 
@@ -25,7 +26,6 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
-    target: 'web',
 
     stats: {
       children: false
@@ -51,7 +51,8 @@ module.exports = (env) => {
         'node_modules'
       ],
       alias: {
-        jquery: 'jquery/dist/jquery.min'
+        jquery: 'jquery/dist/jquery.min',
+        'react-middle-truncate': 'react-middle-truncate/lib/react-middle-truncate'
       },
       fallback: {
         buffer: false,
@@ -65,7 +66,7 @@ module.exports = (env) => {
 
     output: {
       path: distFolder,
-      publicPath: 'auto',
+      publicPath: '/',
       filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
       sourceMapFilename: '[file].map'
     },
@@ -159,6 +160,16 @@ module.exports = (env) => {
 
     module: {
       rules: [
+        {
+          test: /\.worker\.js$/,
+          use: {
+            loader: 'worker-loader',
+            options: {
+              filename: '[name].js',
+              inline: inlineWebWorkers
+            }
+          }
+        },
         {
           test: [/\.jsx?$/, /\.tsx?$/],
           exclude: /(node_modules|JsLibraries)/,
@@ -176,7 +187,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: '3.42'
+                      corejs: 3
                     }
                   ]
                 ]

frontend/src/Activity/Blocklist/Blocklist.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { setQueueOptions } from 'Activity/Queue/queueOptionsStore';
 import { SelectProvider } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -16,8 +16,20 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
+import usePaging from 'Components/Table/usePaging';
+import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
+import usePrevious from 'Helpers/Hooks/usePrevious';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { align, icons, kinds } from 'Helpers/Props';
+import {
+  clearBlocklist,
+  fetchBlocklist,
+  gotoBlocklistPage,
+  removeBlocklistItems,
+  setBlocklistFilter,
+  setBlocklistSort,
+  setBlocklistTableOption,
+} from 'Store/Actions/blocklistActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
@@ -31,35 +43,27 @@ import {
 import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import BlocklistFilterModal from './BlocklistFilterModal';
-import {
-  setBlocklistOption,
-  useBlocklistOptions,
-} from './blocklistOptionsStore';
 import BlocklistRow from './BlocklistRow';
-import useBlocklist, {
-  useFilters,
-  useRemoveBlocklistItems,
-} from './useBlocklist';
 
 function Blocklist() {
+  const requestCurrentPage = useCurrentPage();
+
   const {
-    records,
+    isFetching,
+    isPopulated,
+    error,
+    items,
+    columns,
+    selectedFilterKey,
+    filters,
+    sortKey,
+    sortDirection,
+    page,
+    pageSize,
     totalPages,
     totalRecords,
-    isFetching,
-    isFetched,
-    isLoading,
-    error,
-    page,
-    goToPage,
-    refetch,
-  } = useBlocklist();
-
-  const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
-    useBlocklistOptions();
-
-  const filters = useFilters();
-  const { isRemoving, removeBlocklistItems } = useRemoveBlocklistItems();
+    isRemoving,
+  } = useSelector((state: AppState) => state.blocklist);
 
   const customFilters = useSelector(createCustomFiltersSelector('blocklist'));
   const isClearingBlocklistExecuting = useSelector(
@@ -78,27 +82,28 @@ function Blocklist() {
     return getSelectedIds(selectedState);
   }, [selectedState]);
 
+  const wasClearingBlocklistExecuting = usePrevious(
+    isClearingBlocklistExecuting
+  );
+
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      setSelectState({
-        type: value ? 'selectAll' : 'unselectAll',
-        items: records,
-      });
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
     },
-    [records, setSelectState]
+    [items, setSelectState]
   );
 
   const handleSelectedChange = useCallback(
     ({ id, value, shiftKey = false }: SelectStateInputProps) => {
       setSelectState({
         type: 'toggleSelected',
-        items: records,
+        items,
         id,
         isSelected: value,
         shiftKey,
       });
     },
-    [records, setSelectState]
+    [items, setSelectState]
   );
 
   const handleRemoveSelectedPress = useCallback(() => {
@@ -106,9 +111,9 @@ function Blocklist() {
   }, [setIsConfirmRemoveModalOpen]);
 
   const handleRemoveSelectedConfirmed = useCallback(() => {
-    removeBlocklistItems({ ids: selectedIds });
+    dispatch(removeBlocklistItems({ ids: selectedIds }));
     setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, setIsConfirmRemoveModalOpen, removeBlocklistItems]);
+  }, [selectedIds, setIsConfirmRemoveModalOpen, dispatch]);
 
   const handleConfirmRemoveModalClose = useCallback(() => {
     setIsConfirmRemoveModalOpen(false);
@@ -119,46 +124,66 @@ function Blocklist() {
   }, [setIsConfirmClearModalOpen]);
 
   const handleClearBlocklistConfirmed = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: commandNames.CLEAR_BLOCKLIST,
-        commandFinished: () => {
-          goToPage(1);
-        },
-      })
-    );
+    dispatch(executeCommand({ name: commandNames.CLEAR_BLOCKLIST }));
     setIsConfirmClearModalOpen(false);
-  }, [setIsConfirmClearModalOpen, goToPage, dispatch]);
+  }, [setIsConfirmClearModalOpen, dispatch]);
 
   const handleConfirmClearModalClose = useCallback(() => {
     setIsConfirmClearModalOpen(false);
   }, [setIsConfirmClearModalOpen]);
 
+  const {
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  } = usePaging({
+    page,
+    totalPages,
+    gotoPage: gotoBlocklistPage,
+  });
+
   const handleFilterSelect = useCallback(
-    (selectedFilterKey: string | number) => {
-      setBlocklistOption('selectedFilterKey', selectedFilterKey);
+    (selectedFilterKey: string) => {
+      dispatch(setBlocklistFilter({ selectedFilterKey }));
     },
-    []
+    [dispatch]
   );
 
-  const handleSortPress = useCallback((sortKey: string) => {
-    setBlocklistOption('sortKey', sortKey);
-  }, []);
+  const handleSortPress = useCallback(
+    (sortKey: string) => {
+      dispatch(setBlocklistSort({ sortKey }));
+    },
+    [dispatch]
+  );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
-      setQueueOptions(payload);
+      dispatch(setBlocklistTableOption(payload));
 
       if (payload.pageSize) {
-        goToPage(1);
+        dispatch(gotoBlocklistPage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
+  useEffect(() => {
+    if (requestCurrentPage) {
+      dispatch(fetchBlocklist());
+    } else {
+      dispatch(gotoBlocklistPage({ page: 1 }));
+    }
+
+    return () => {
+      dispatch(clearBlocklist());
+    };
+  }, [requestCurrentPage, dispatch]);
+
   useEffect(() => {
     const repopulate = () => {
-      refetch();
+      dispatch(fetchBlocklist());
     };
 
     registerPagePopulator(repopulate);
@@ -166,10 +191,16 @@ function Blocklist() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [refetch]);
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (wasClearingBlocklistExecuting && !isClearingBlocklistExecuting) {
+      dispatch(gotoBlocklistPage({ page: 1 }));
+    }
+  }, [isClearingBlocklistExecuting, wasClearingBlocklistExecuting, dispatch]);
 
   return (
-    <SelectProvider items={records}>
+    <SelectProvider items={items}>
       <PageContent title={translate('Blocklist')}>
         <PageToolbar>
           <PageToolbarSection>
@@ -184,7 +215,7 @@ function Blocklist() {
             <PageToolbarButton
               label={translate('Clear')}
               iconName={icons.CLEAR}
-              isDisabled={!records.length}
+              isDisabled={!items.length}
               isSpinning={isClearingBlocklistExecuting}
               onPress={handleClearBlocklistPress}
             />
@@ -214,13 +245,13 @@ function Blocklist() {
         </PageToolbar>
 
         <PageContentBody>
-          {isLoading && !isFetched ? <LoadingIndicator /> : null}
+          {isFetching && !isPopulated ? <LoadingIndicator /> : null}
 
-          {!isLoading && !!error ? (
+          {!isFetching && !!error ? (
             <Alert kind={kinds.DANGER}>{translate('BlocklistLoadError')}</Alert>
           ) : null}
 
-          {isFetched && !error && !records.length ? (
+          {isPopulated && !error && !items.length ? (
             <Alert kind={kinds.INFO}>
               {selectedFilterKey === 'all'
                 ? translate('NoBlocklistItems')
@@ -228,7 +259,7 @@ function Blocklist() {
             </Alert>
           ) : null}
 
-          {isFetched && !error && !!records.length ? (
+          {isPopulated && !error && !!items.length ? (
             <div>
               <Table
                 selectAll={true}
@@ -243,7 +274,7 @@ function Blocklist() {
                 onSortPress={handleSortPress}
               >
                 <TableBody>
-                  {records.map((item) => {
+                  {items.map((item) => {
                     return (
                       <BlocklistRow
                         key={item.id}
@@ -261,7 +292,11 @@ function Blocklist() {
                 totalPages={totalPages}
                 totalRecords={totalRecords}
                 isFetching={isFetching}
-                onPageSelect={goToPage}
+                onFirstPagePress={handleFirstPagePress}
+                onPreviousPagePress={handlePreviousPagePress}
+                onNextPagePress={handleNextPagePress}
+                onLastPagePress={handleLastPagePress}
+                onPageSelect={handlePageSelect}
               />
             </div>
           ) : null}

frontend/src/Activity/Blocklist/BlocklistDetailsModal.tsx

@@ -16,19 +16,13 @@ interface BlocklistDetailsModalProps {
   protocol: DownloadProtocol;
   indexer?: string;
   message?: string;
-  source?: string;
   onModalClose: () => void;
 }
 
-function BlocklistDetailsModal({
-  isOpen,
-  sourceTitle,
-  protocol,
-  indexer,
-  message,
-  source,
-  onModalClose,
-}: BlocklistDetailsModalProps) {
+function BlocklistDetailsModal(props: BlocklistDetailsModalProps) {
+  const { isOpen, sourceTitle, protocol, indexer, message, onModalClose } =
+    props;
+
   return (
     <Modal isOpen={isOpen} onModalClose={onModalClose}>
       <ModalContent onModalClose={onModalClose}>
@@ -56,9 +50,6 @@ function BlocklistDetailsModal({
                 data={message}
               />
             ) : null}
-            {source ? (
-              <DescriptionListItem title={translate('Source')} data={source} />
-            ) : null}
           </DescriptionList>
         </ModalBody>
 

frontend/src/Activity/Blocklist/BlocklistFilterModal.tsx

@@ -1,26 +1,53 @@
 import React, { useCallback } from 'react';
-import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
-import { setBlocklistOption } from './blocklistOptionsStore';
-import useBlocklist, { FILTER_BUILDER } from './useBlocklist';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setBlocklistFilter } from 'Store/Actions/blocklistActions';
 
-type BlocklistFilterModalProps = FilterModalProps<History>;
+function createBlocklistSelector() {
+  return createSelector(
+    (state: AppState) => state.blocklist.items,
+    (blocklistItems) => {
+      return blocklistItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.blocklist.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
+
+interface BlocklistFilterModalProps {
+  isOpen: boolean;
+}
 
 export default function BlocklistFilterModal(props: BlocklistFilterModalProps) {
-  const { records } = useBlocklist();
+  const sectionItems = useSelector(createBlocklistSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'blocklist';
+
+  const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
-      setBlocklistOption('selectedFilterKey', selectedFilterKey);
+    (payload: unknown) => {
+      dispatch(setBlocklistFilter(payload));
     },
-    []
+    [dispatch]
   );
 
   return (
     <FilterModal
+      // TODO: Don't spread all the props
       {...props}
-      sectionItems={records}
-      filterBuilderProps={FILTER_BUILDER}
-      customFilterType="blocklist"
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
       dispatchSetFilter={dispatchSetFilter}
     />
   );

frontend/src/Activity/Blocklist/BlocklistRow.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -11,11 +12,11 @@ import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds } from 'Helpers/Props';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
 import useSeries from 'Series/useSeries';
+import { removeBlocklistItem } from 'Store/Actions/blocklistActions';
 import Blocklist from 'typings/Blocklist';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
 import BlocklistDetailsModal from './BlocklistDetailsModal';
-import { useRemoveBlocklistItem } from './useBlocklist';
 import styles from './BlocklistRow.css';
 
 interface BlocklistRowProps extends Blocklist {
@@ -24,24 +25,25 @@ interface BlocklistRowProps extends Blocklist {
   onSelectedChange: (options: SelectStateInputProps) => void;
 }
 
-function BlocklistRow({
-  id,
-  seriesId,
-  sourceTitle,
-  languages,
-  quality,
-  customFormats,
-  date,
-  protocol,
-  indexer,
-  message,
-  source,
-  isSelected,
-  columns,
-  onSelectedChange,
-}: BlocklistRowProps) {
+function BlocklistRow(props: BlocklistRowProps) {
+  const {
+    id,
+    seriesId,
+    sourceTitle,
+    languages,
+    quality,
+    customFormats,
+    date,
+    protocol,
+    indexer,
+    message,
+    isSelected,
+    columns,
+    onSelectedChange,
+  } = props;
+
   const series = useSeries(seriesId);
-  const { isRemoving, removeBlocklistItem } = useRemoveBlocklistItem(id);
+  const dispatch = useDispatch();
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
 
   const handleDetailsPress = useCallback(() => {
@@ -53,8 +55,8 @@ function BlocklistRow({
   }, [setIsDetailsModalOpen]);
 
   const handleRemovePress = useCallback(() => {
-    removeBlocklistItem();
-  }, [removeBlocklistItem]);
+    dispatch(removeBlocklistItem({ id }));
+  }, [id, dispatch]);
 
   if (!series) {
     return null;
@@ -137,7 +139,6 @@ function BlocklistRow({
                 title={translate('RemoveFromBlocklist')}
                 name={icons.REMOVE}
                 kind={kinds.DANGER}
-                isSpinning={isRemoving}
                 onPress={handleRemovePress}
               />
             </TableRowCell>
@@ -153,7 +154,6 @@ function BlocklistRow({
         protocol={protocol}
         indexer={indexer}
         message={message}
-        source={source}
         onModalClose={handleDetailsModalClose}
       />
     </TableRow>

frontend/src/Activity/Blocklist/blocklistOptionsStore.ts

@@ -1,71 +0,0 @@
-import {
-  createOptionsStore,
-  PageableOptions,
-} from 'Helpers/Hooks/useOptionsStore';
-import translate from 'Utilities/String/translate';
-
-export type BlocklistOptions = PageableOptions;
-
-const { useOptions, useOption, setOptions, setOption } =
-  createOptionsStore<BlocklistOptions>('blocklist_options', () => {
-    return {
-      pageSize: 20,
-      selectedFilterKey: 'all',
-      sortKey: 'time',
-      sortDirection: 'descending',
-      columns: [
-        {
-          name: 'series.sortTitle',
-          label: () => translate('SeriesTitle'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'sourceTitle',
-          label: () => translate('SourceTitle'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'languages',
-          label: () => translate('Languages'),
-          isVisible: false,
-        },
-        {
-          name: 'quality',
-          label: () => translate('Quality'),
-          isVisible: true,
-        },
-        {
-          name: 'customFormats',
-          label: () => translate('Formats'),
-          isSortable: false,
-          isVisible: true,
-        },
-        {
-          name: 'date',
-          label: () => translate('Date'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'indexer',
-          label: () => translate('Indexer'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'actions',
-          label: '',
-          columnLabel: () => translate('Actions'),
-          isVisible: true,
-          isModifiable: false,
-        },
-      ],
-    };
-  });
-
-export const useBlocklistOptions = useOptions;
-export const setBlocklistOptions = setOptions;
-export const useBlocklistOption = useOption;
-export const setBlocklistOption = setOption;

frontend/src/Activity/Blocklist/useBlocklist.ts

@@ -1,116 +0,0 @@
-import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import usePage from 'Helpers/Hooks/usePage';
-import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
-import { filterBuilderValueTypes } from 'Helpers/Props';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import Blocklist from 'typings/Blocklist';
-import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
-import translate from 'Utilities/String/translate';
-import { useBlocklistOptions } from './blocklistOptionsStore';
-
-interface BulkBlocklistData {
-  ids: number[];
-}
-
-export const FILTERS: Filter[] = [
-  {
-    key: 'all',
-    label: () => translate('All'),
-    filters: [],
-  },
-];
-
-export const FILTER_BUILDER: FilterBuilderProp<Blocklist>[] = [
-  {
-    name: 'seriesIds',
-    label: () => translate('Series'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.SERIES,
-  },
-  {
-    name: 'protocols',
-    label: () => translate('Protocol'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.PROTOCOL,
-  },
-];
-
-const useBlocklist = () => {
-  const { page, goToPage } = usePage('blocklist');
-  const { pageSize, selectedFilterKey, sortKey, sortDirection } =
-    useBlocklistOptions();
-  const customFilters = useSelector(
-    createCustomFiltersSelector('blocklist')
-  ) as CustomFilter[];
-
-  const filters = useMemo(() => {
-    return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
-  }, [selectedFilterKey, customFilters]);
-
-  const { refetch, ...query } = usePagedApiQuery<Blocklist>({
-    path: '/blocklist',
-    page,
-    pageSize,
-    filters,
-    sortKey,
-    sortDirection,
-    queryOptions: {
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  return {
-    ...query,
-    goToPage,
-    page,
-    refetch,
-  };
-};
-
-export default useBlocklist;
-
-export const useFilters = () => {
-  return FILTERS;
-};
-
-export const useRemoveBlocklistItem = (id: number) => {
-  const queryClient = useQueryClient();
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/blocklist/${id}`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/blocklist'] });
-      },
-    },
-  });
-
-  return {
-    removeBlocklistItem: mutate,
-    isRemoving: isPending,
-  };
-};
-
-export const useRemoveBlocklistItems = () => {
-  const queryClient = useQueryClient();
-
-  const { mutate, isPending } = useApiMutation<unknown, BulkBlocklistData>({
-    path: `/blocklist/bulk`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/blocklist'] });
-      },
-    },
-  });
-
-  return {
-    removeBlocklistItems: mutate,
-    isRemoving: isPending,
-  };
-};

frontend/src/Activity/History/Details/HistoryDetails.tsx

@@ -18,7 +18,6 @@ import {
 } from 'typings/History';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatAge from 'Utilities/Number/formatAge';
-import formatBytes from 'Utilities/Number/formatBytes';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import styles from './HistoryDetails.css';
@@ -42,7 +41,6 @@ function HistoryDetails(props: HistoryDetailsProps) {
       indexer,
       releaseGroup,
       seriesMatchType,
-      releaseSource,
       customFormatScore,
       nzbInfoUrl,
       downloadClient,
@@ -51,36 +49,10 @@ function HistoryDetails(props: HistoryDetailsProps) {
       ageHours,
       ageMinutes,
       publishedDate,
-      size,
     } = data as GrabbedHistoryData;
 
     const downloadClientNameInfo = downloadClientName ?? downloadClient;
 
-    let releaseSourceMessage = '';
-
-    switch (releaseSource) {
-      case 'Unknown':
-        releaseSourceMessage = translate('Unknown');
-        break;
-      case 'Rss':
-        releaseSourceMessage = translate('Rss');
-        break;
-      case 'Search':
-        releaseSourceMessage = translate('Search');
-        break;
-      case 'UserInvokedSearch':
-        releaseSourceMessage = translate('UserInvokedSearch');
-        break;
-      case 'InteractiveSearch':
-        releaseSourceMessage = translate('InteractiveSearch');
-        break;
-      case 'ReleasePush':
-        releaseSourceMessage = translate('ReleasePush');
-        break;
-      default:
-        releaseSourceMessage = '';
-    }
-
     return (
       <DescriptionList>
         <DescriptionListItem
@@ -116,14 +88,6 @@ function HistoryDetails(props: HistoryDetailsProps) {
           />
         ) : null}
 
-        {releaseSource ? (
-          <DescriptionListItem
-            descriptionClassName={styles.description}
-            title={translate('ReleaseSource')}
-            data={releaseSourceMessage}
-          />
-        ) : null}
-
         {nzbInfoUrl ? (
           <span>
             <DescriptionListItemTitle>
@@ -162,19 +126,12 @@ function HistoryDetails(props: HistoryDetailsProps) {
             })}
           />
         ) : null}
-
-        {size ? (
-          <DescriptionListItem
-            title={translate('Size')}
-            data={formatBytes(size)}
-          />
-        ) : null}
       </DescriptionList>
     );
   }
 
   if (eventType === 'downloadFailed') {
-    const { indexer, message, source } = data as DownloadFailedHistory;
+    const { message } = data as DownloadFailedHistory;
 
     return (
       <DescriptionList>
@@ -188,23 +145,15 @@ function HistoryDetails(props: HistoryDetailsProps) {
           <DescriptionListItem title={translate('GrabId')} data={downloadId} />
         ) : null}
 
-        {indexer ? (
-          <DescriptionListItem title={translate('Indexer')} data={indexer} />
-        ) : null}
-
         {message ? (
           <DescriptionListItem title={translate('Message')} data={message} />
         ) : null}
-
-        {source ? (
-          <DescriptionListItem title={translate('Source')} data={source} />
-        ) : null}
       </DescriptionList>
     );
   }
 
   if (eventType === 'downloadFolderImported') {
-    const { customFormatScore, droppedPath, importedPath, size } =
+    const { customFormatScore, droppedPath, importedPath } =
       data as DownloadFolderImportedHistory;
 
     return (
@@ -237,20 +186,12 @@ function HistoryDetails(props: HistoryDetailsProps) {
             data={formatCustomFormatScore(parseInt(customFormatScore))}
           />
         ) : null}
-
-        {size ? (
-          <DescriptionListItem
-            title={translate('FileSize')}
-            data={formatBytes(size)}
-          />
-        ) : null}
       </DescriptionList>
     );
   }
 
   if (eventType === 'episodeFileDeleted') {
-    const { reason, customFormatScore, size } =
-      data as EpisodeFileDeletedHistory;
+    const { reason, customFormatScore } = data as EpisodeFileDeletedHistory;
 
     let reasonMessage = '';
 
@@ -280,13 +221,6 @@ function HistoryDetails(props: HistoryDetailsProps) {
             data={formatCustomFormatScore(parseInt(customFormatScore))}
           />
         ) : null}
-
-        {size ? (
-          <DescriptionListItem
-            title={translate('FileSize')}
-            data={formatBytes(size)}
-          />
-        ) : null}
       </DescriptionList>
     );
   }

frontend/src/Activity/History/History.tsx

@@ -80,7 +80,7 @@ function History() {
   });
 
   const handleFilterSelect = useCallback(
-    (selectedFilterKey: string | number) => {
+    (selectedFilterKey: string) => {
       dispatch(setHistoryFilter({ selectedFilterKey }));
     },
     [dispatch]

frontend/src/Activity/History/HistoryFilterModal.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
-import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
+import FilterModal from 'Components/Filter/FilterModal';
 import { setHistoryFilter } from 'Store/Actions/historyActions';
 
 function createHistorySelector() {
@@ -23,16 +23,19 @@ function createFilterBuilderPropsSelector() {
   );
 }
 
-type HistoryFilterModalProps = FilterModalProps<History>;
+interface HistoryFilterModalProps {
+  isOpen: boolean;
+}
 
 export default function HistoryFilterModal(props: HistoryFilterModalProps) {
   const sectionItems = useSelector(createHistorySelector());
   const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'history';
 
   const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    (payload: { selectedFilterKey: string | number }) => {
+    (payload: unknown) => {
       dispatch(setHistoryFilter(payload));
     },
     [dispatch]
@@ -40,10 +43,11 @@ export default function HistoryFilterModal(props: HistoryFilterModalProps) {
 
   return (
     <FilterModal
+      // TODO: Don't spread all the props
       {...props}
       sectionItems={sectionItems}
       filterBuilderProps={filterBuilderProps}
-      customFilterType="history"
+      customFilterType={customFilterType}
       dispatchSetFilter={dispatchSetFilter}
     />
   );

frontend/src/Activity/History/HistoryRow.tsx

@@ -195,14 +195,9 @@ function HistoryRow(props: HistoryRowProps) {
         }
 
         if (name === 'downloadClient') {
-          const downloadClientName =
-            'downloadClientName' in data ? data.downloadClientName : null;
-          const downloadClient =
-            'downloadClient' in data ? data.downloadClient : null;
-
           return (
             <TableRowCell key={name} className={styles.downloadClient}>
-              {downloadClientName ?? downloadClient ?? ''}
+              {'downloadClient' in data ? data.downloadClient : ''}
             </TableRowCell>
           );
         }

frontend/src/Activity/Queue/Details/QueueDetailsProvider.tsx

@@ -1,113 +0,0 @@
-import React, { createContext, ReactNode, useContext, useMemo } from 'react';
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import Queue from 'typings/Queue';
-
-interface EpisodeDetails {
-  episodeIds: number[];
-}
-
-interface SeriesDetails {
-  seriesId: number;
-}
-
-interface AllDetails {
-  all: boolean;
-}
-
-type QueueDetailsFilter = AllDetails | EpisodeDetails | SeriesDetails;
-
-interface QueueDetailsProps {
-  children: ReactNode;
-}
-
-const QueueDetailsContext = createContext<Queue[] | undefined>(undefined);
-
-export default function QueueDetailsProvider({
-  children,
-  ...filter
-}: QueueDetailsProps & QueueDetailsFilter) {
-  const { data } = useApiQuery<Queue[]>({
-    path: '/queue/details',
-    queryParams: { ...filter },
-    queryOptions: {
-      enabled: Object.keys(filter).length > 0,
-    },
-  });
-
-  return (
-    <QueueDetailsContext.Provider value={data}>
-      {children}
-    </QueueDetailsContext.Provider>
-  );
-}
-
-export function useQueueItemForEpisode(episodeId: number) {
-  const queue = useContext(QueueDetailsContext);
-
-  return useMemo(() => {
-    return queue?.find((item) => item.episodeIds.includes(episodeId));
-  }, [episodeId, queue]);
-}
-
-export function useIsDownloadingEpisodes(episodeIds: number[]) {
-  const queue = useContext(QueueDetailsContext);
-
-  return useMemo(() => {
-    if (!queue) {
-      return false;
-    }
-
-    return queue.some((item) =>
-      item.episodeIds?.some((e) => episodeIds.includes(e))
-    );
-  }, [episodeIds, queue]);
-}
-
-export interface SeriesQueueDetails {
-  count: number;
-  episodesWithFiles: number;
-}
-
-export function useQueueDetailsForSeries(
-  seriesId: number,
-  seasonNumber?: number
-) {
-  const queue = useContext(QueueDetailsContext);
-
-  return useMemo<SeriesQueueDetails>(() => {
-    if (!queue) {
-      return { count: 0, episodesWithFiles: 0 };
-    }
-
-    return queue.reduce<SeriesQueueDetails>(
-      (acc: SeriesQueueDetails, item) => {
-        if (
-          item.trackedDownloadState === 'imported' ||
-          item.seriesId !== seriesId
-        ) {
-          return acc;
-        }
-
-        if (seasonNumber != null && item.seasonNumber !== seasonNumber) {
-          return acc;
-        }
-
-        acc.count++;
-
-        if (item.episodeHasFile) {
-          acc.episodesWithFiles++;
-        }
-
-        return acc;
-      },
-      {
-        count: 0,
-        episodesWithFiles: 0,
-      }
-    );
-  }, [seriesId, seasonNumber, queue]);
-}
-
-export const useQueueDetails = () => {
-  return useContext(QueueDetailsContext) ?? [];
-};

frontend/src/Activity/Queue/EpisodeCellContent.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import Episode from 'Episode/Episode';
-import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
-import Series from 'Series/Series';
-import translate from 'Utilities/String/translate';
-
-interface EpisodeCellContentProps {
-  episodes: Episode[];
-  isFullSeason: boolean;
-  seasonNumber?: number;
-  series?: Series;
-}
-
-export default function EpisodeCellContent({
-  episodes,
-  isFullSeason,
-  seasonNumber,
-  series,
-}: EpisodeCellContentProps) {
-  if (episodes.length === 0) {
-    return '-';
-  }
-
-  if (isFullSeason && seasonNumber != null) {
-    return translate('SeasonNumberToken', { seasonNumber });
-  }
-
-  if (episodes.length === 1) {
-    const episode = episodes[0];
-
-    return (
-      <SeasonEpisodeNumber
-        seasonNumber={episode.seasonNumber}
-        episodeNumber={episode.episodeNumber}
-        absoluteEpisodeNumber={episode.absoluteEpisodeNumber}
-        seriesType={series?.seriesType}
-        alternateTitles={series?.alternateTitles}
-        sceneSeasonNumber={episode.sceneSeasonNumber}
-        sceneEpisodeNumber={episode.sceneEpisodeNumber}
-        sceneAbsoluteEpisodeNumber={episode.sceneAbsoluteEpisodeNumber}
-        unverifiedSceneNumbering={episode.unverifiedSceneNumbering}
-      />
-    );
-  }
-
-  const firstEpisode = episodes[0];
-  const lastEpisode = episodes[episodes.length - 1];
-
-  return (
-    <>
-      <SeasonEpisodeNumber
-        seasonNumber={firstEpisode.seasonNumber}
-        episodeNumber={firstEpisode.episodeNumber}
-        absoluteEpisodeNumber={firstEpisode.absoluteEpisodeNumber}
-        seriesType={series?.seriesType}
-        alternateTitles={series?.alternateTitles}
-        sceneSeasonNumber={firstEpisode.sceneSeasonNumber}
-        sceneEpisodeNumber={firstEpisode.sceneEpisodeNumber}
-        sceneAbsoluteEpisodeNumber={firstEpisode.sceneAbsoluteEpisodeNumber}
-        unverifiedSceneNumbering={firstEpisode.unverifiedSceneNumbering}
-      />
-      {' - '}
-      <SeasonEpisodeNumber
-        seasonNumber={lastEpisode.seasonNumber}
-        episodeNumber={lastEpisode.episodeNumber}
-        absoluteEpisodeNumber={lastEpisode.absoluteEpisodeNumber}
-        seriesType={series?.seriesType}
-        alternateTitles={series?.alternateTitles}
-        sceneSeasonNumber={lastEpisode.sceneSeasonNumber}
-        sceneEpisodeNumber={lastEpisode.sceneEpisodeNumber}
-        sceneAbsoluteEpisodeNumber={lastEpisode.sceneAbsoluteEpisodeNumber}
-        unverifiedSceneNumbering={lastEpisode.unverifiedSceneNumbering}
-      />
-    </>
-  );
-}

frontend/src/Activity/Queue/EpisodeTitleCellContent.css

@@ -1,13 +0,0 @@
-.multiple {
-  cursor: default;
-}
-
-.row {
-  display: flex;
-}
-
-.episodeNumber {
-  margin-right: 8px;
-  font-weight: bold;
-  cursor: default;
-}

frontend/src/Activity/Queue/EpisodeTitleCellContent.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import Popover from 'Components/Tooltip/Popover';
-import Episode from 'Episode/Episode';
-import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
-import Series from 'Series/Series';
-import translate from 'Utilities/String/translate';
-import styles from './EpisodeTitleCellContent.css';
-
-interface EpisodeTitleCellContentProps {
-  episodes: Episode[];
-  series?: Series;
-}
-
-export default function EpisodeTitleCellContent({
-  episodes,
-  series,
-}: EpisodeTitleCellContentProps) {
-  if (episodes.length === 0 || !series) {
-    return '-';
-  }
-
-  if (episodes.length === 1) {
-    const episode = episodes[0];
-
-    return (
-      <EpisodeTitleLink
-        episodeId={episode.id}
-        seriesId={series.id}
-        episodeTitle={episode.title}
-        episodeEntity="episodes"
-        showOpenSeriesButton={true}
-      />
-    );
-  }
-
-  return (
-    <Popover
-      anchor={
-        <span className={styles.multiple}>{translate('MultipleEpisodes')}</span>
-      }
-      title={translate('EpisodeTitles')}
-      body={
-        <>
-          {episodes.map((episode) => {
-            return (
-              <div key={episode.id} className={styles.row}>
-                <div className={styles.episodeNumber}>
-                  {episode.episodeNumber}
-                </div>
-
-                <EpisodeTitleLink
-                  episodeId={episode.id}
-                  seriesId={series.id}
-                  episodeTitle={episode.title}
-                  episodeEntity="episodes"
-                  showOpenSeriesButton={true}
-                />
-              </div>
-            );
-          })}
-        </>
-      }
-      position="right"
-    />
-  );
-}

frontend/src/Activity/Queue/Queue.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import * as commandNames from 'Commands/commandNames';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -21,15 +22,28 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
+import usePaging from 'Components/Table/usePaging';
 import createEpisodesFetchingSelector from 'Episode/createEpisodesFetchingSelector';
+import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
 import useSelectState from 'Helpers/Hooks/useSelectState';
 import { align, icons, kinds } from 'Helpers/Props';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
+import {
+  clearQueue,
+  fetchQueue,
+  gotoQueuePage,
+  grabQueueItems,
+  removeQueueItems,
+  setQueueFilter,
+  setQueueSort,
+  setQueueTableOption,
+} from 'Store/Actions/queueActions';
 import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { CheckInputChanged } from 'typings/inputs';
 import { SelectStateInputProps } from 'typings/props';
+import QueueItem from 'typings/Queue';
 import { TableOptionsChangePayload } from 'typings/Table';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import {
@@ -40,45 +54,33 @@ import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import QueueFilterModal from './QueueFilterModal';
 import QueueOptions from './QueueOptions';
-import {
-  setQueueOption,
-  setQueueOptions,
-  useQueueOptions,
-} from './queueOptionsStore';
 import QueueRow from './QueueRow';
-import RemoveQueueItemModal from './RemoveQueueItemModal';
-import useQueueStatus from './Status/useQueueStatus';
-import useQueue, {
-  useFilters,
-  useGrabQueueItems,
-  useRemoveQueueItems,
-} from './useQueue';
+import RemoveQueueItemModal, { RemovePressProps } from './RemoveQueueItemModal';
+import createQueueStatusSelector from './Status/createQueueStatusSelector';
 
 function Queue() {
+  const requestCurrentPage = useCurrentPage();
   const dispatch = useDispatch();
 
   const {
-    records,
+    isFetching,
+    isPopulated,
+    error,
+    items,
+    columns,
+    selectedFilterKey,
+    filters,
+    sortKey,
+    sortDirection,
+    page,
+    pageSize,
     totalPages,
     totalRecords,
-    error,
-    isFetching,
-    isFetched,
-    isLoading,
-    page,
-    goToPage,
-    refetch,
-  } = useQueue();
+    isGrabbing,
+    isRemoving,
+  } = useSelector((state: AppState) => state.queue.paged);
 
-  const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
-    useQueueOptions();
-
-  const filters = useFilters();
-
-  const { isRemoving, removeQueueItems } = useRemoveQueueItems();
-  const { isGrabbing, grabQueueItems } = useGrabQueueItems();
-
-  const { count } = useQueueStatus();
+  const { count } = useSelector(createQueueStatusSelector());
   const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
     useSelector(createEpisodesFetchingSelector());
   const customFilters = useSelector(createCustomFiltersSelector('queue'));
@@ -98,46 +100,41 @@ function Queue() {
   }, [selectedState]);
 
   const isPendingSelected = useMemo(() => {
-    return records.some((item) => {
+    return items.some((item) => {
       return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
     });
-  }, [records, selectedIds]);
+  }, [items, selectedIds]);
 
   const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
     useState(false);
 
   const isRefreshing =
-    isLoading || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting;
+    isFetching || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting;
   const isAllPopulated =
-    isFetched &&
-    (isEpisodesPopulated ||
-      !records.length ||
-      records.every((e) => !e.episodeIds?.length));
+    isPopulated &&
+    (isEpisodesPopulated || !items.length || items.every((e) => !e.episodeId));
   const hasError = error || episodesError;
   const selectedCount = selectedIds.length;
   const disableSelectedActions = selectedCount === 0;
 
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      setSelectState({
-        type: value ? 'selectAll' : 'unselectAll',
-        items: records,
-      });
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
     },
-    [records, setSelectState]
+    [items, setSelectState]
   );
 
   const handleSelectedChange = useCallback(
     ({ id, value, shiftKey = false }: SelectStateInputProps) => {
       setSelectState({
         type: 'toggleSelected',
-        items: records,
+        items,
         id,
         isSelected: value,
         shiftKey,
       });
     },
-    [records, setSelectState]
+    [items, setSelectState]
   );
 
   const handleRefreshPress = useCallback(() => {
@@ -153,60 +150,93 @@ function Queue() {
   }, []);
 
   const handleGrabSelectedPress = useCallback(() => {
-    grabQueueItems({ ids: selectedIds });
-  }, [selectedIds, grabQueueItems]);
+    dispatch(grabQueueItems({ ids: selectedIds }));
+  }, [selectedIds, dispatch]);
 
   const handleRemoveSelectedPress = useCallback(() => {
     shouldBlockRefresh.current = true;
     setIsConfirmRemoveModalOpen(true);
   }, [setIsConfirmRemoveModalOpen]);
 
-  const handleRemoveSelectedConfirmed = useCallback(() => {
-    shouldBlockRefresh.current = false;
-    removeQueueItems({ ids: selectedIds });
-    setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, setIsConfirmRemoveModalOpen, removeQueueItems]);
+  const handleRemoveSelectedConfirmed = useCallback(
+    (payload: RemovePressProps) => {
+      shouldBlockRefresh.current = false;
+      dispatch(removeQueueItems({ ids: selectedIds, ...payload }));
+      setIsConfirmRemoveModalOpen(false);
+    },
+    [selectedIds, setIsConfirmRemoveModalOpen, dispatch]
+  );
 
   const handleConfirmRemoveModalClose = useCallback(() => {
     shouldBlockRefresh.current = false;
     setIsConfirmRemoveModalOpen(false);
   }, [setIsConfirmRemoveModalOpen]);
 
+  const {
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  } = usePaging({
+    page,
+    totalPages,
+    gotoPage: gotoQueuePage,
+  });
+
   const handleFilterSelect = useCallback(
-    (selectedFilterKey: string | number) => {
-      setQueueOption('selectedFilterKey', selectedFilterKey);
+    (selectedFilterKey: string) => {
+      dispatch(setQueueFilter({ selectedFilterKey }));
     },
-    []
+    [dispatch]
   );
 
-  const handleSortPress = useCallback((sortKey: string) => {
-    setQueueOption('sortKey', sortKey);
-  }, []);
+  const handleSortPress = useCallback(
+    (sortKey: string) => {
+      dispatch(setQueueSort({ sortKey }));
+    },
+    [dispatch]
+  );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
-      setQueueOptions(payload);
+      dispatch(setQueueTableOption(payload));
 
       if (payload.pageSize) {
-        goToPage(1);
+        dispatch(gotoQueuePage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
   useEffect(() => {
-    const episodeIds = selectUniqueIds(records, 'episodeIds');
+    if (requestCurrentPage) {
+      dispatch(fetchQueue());
+    } else {
+      dispatch(gotoQueuePage({ page: 1 }));
+    }
+
+    return () => {
+      dispatch(clearQueue());
+    };
+  }, [requestCurrentPage, dispatch]);
+
+  useEffect(() => {
+    const episodeIds = selectUniqueIds<QueueItem, number | undefined>(
+      items,
+      'episodeId'
+    );
 
     if (episodeIds.length) {
       dispatch(fetchEpisodes({ episodeIds }));
     } else {
       dispatch(clearEpisodes());
     }
-  }, [records, dispatch]);
+  }, [items, dispatch]);
 
   useEffect(() => {
     const repopulate = () => {
-      refetch();
+      dispatch(fetchQueue());
     };
 
     registerPagePopulator(repopulate);
@@ -214,7 +244,7 @@ function Queue() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [refetch]);
+  }, [dispatch]);
 
   if (!shouldBlockRefresh.current) {
     currentQueue.current = (
@@ -225,7 +255,7 @@ function Queue() {
           <Alert kind={kinds.DANGER}>{translate('QueueLoadError')}</Alert>
         ) : null}
 
-        {isAllPopulated && !hasError && !records.length ? (
+        {isAllPopulated && !hasError && !items.length ? (
           <Alert kind={kinds.INFO}>
             {selectedFilterKey !== 'all' && count > 0
               ? translate('QueueFilterHasNoItems')
@@ -233,7 +263,7 @@ function Queue() {
           </Alert>
         ) : null}
 
-        {isAllPopulated && !hasError && !!records.length ? (
+        {isAllPopulated && !hasError && !!items.length ? (
           <div>
             <Table
               selectAll={true}
@@ -249,10 +279,11 @@ function Queue() {
               onSortPress={handleSortPress}
             >
               <TableBody>
-                {records.map((item) => {
+                {items.map((item) => {
                   return (
                     <QueueRow
                       key={item.id}
+                      episodeId={item.episodeId}
                       isSelected={selectedState[item.id]}
                       columns={columns}
                       {...item}
@@ -271,7 +302,11 @@ function Queue() {
               totalPages={totalPages}
               totalRecords={totalRecords}
               isFetching={isFetching}
-              onPageSelect={goToPage}
+              onFirstPagePress={handleFirstPagePress}
+              onPreviousPagePress={handlePreviousPagePress}
+              onNextPagePress={handleNextPagePress}
+              onLastPagePress={handleLastPagePress}
+              onPageSelect={handlePageSelect}
             />
           </div>
         ) : null}
@@ -342,7 +377,7 @@ function Queue() {
         canChangeCategory={
           isConfirmRemoveModalOpen &&
           selectedIds.every((id) => {
-            const item = records.find((i) => i.id === id);
+            const item = items.find((i) => i.id === id);
 
             return !!(item && item.downloadClientHasPostImportCategory);
           })
@@ -350,7 +385,7 @@ function Queue() {
         canIgnore={
           isConfirmRemoveModalOpen &&
           selectedIds.every((id) => {
-            const item = records.find((i) => i.id === id);
+            const item = items.find((i) => i.id === id);
 
             return !!(item && item.seriesId && item.episodeId);
           })
@@ -358,7 +393,7 @@ function Queue() {
         isPending={
           isConfirmRemoveModalOpen &&
           selectedIds.every((id) => {
-            const item = records.find((i) => i.id === id);
+            const item = items.find((i) => i.id === id);
 
             if (!item) {
               return false;

frontend/src/Activity/Queue/QueueDetails.tsx

@@ -14,7 +14,7 @@ import styles from './QueueDetails.css';
 interface QueueDetailsProps {
   title: string;
   size: number;
-  sizeLeft: number;
+  sizeleft: number;
   estimatedCompletionTime?: string;
   status: string;
   trackedDownloadState?: QueueTrackedDownloadState;
@@ -28,7 +28,7 @@ function QueueDetails(props: QueueDetailsProps) {
   const {
     title,
     size,
-    sizeLeft,
+    sizeleft,
     status,
     trackedDownloadState = 'downloading',
     trackedDownloadStatus = 'ok',
@@ -37,7 +37,7 @@ function QueueDetails(props: QueueDetailsProps) {
     progressBar,
   } = props;
 
-  const progress = 100 - (sizeLeft / size) * 100;
+  const progress = 100 - (sizeleft / size) * 100;
   const isDownloading = status === 'downloading';
   const isPaused = status === 'paused';
   const hasWarning = trackedDownloadStatus === 'warning';
@@ -61,7 +61,7 @@ function QueueDetails(props: QueueDetailsProps) {
         anchor={progressBar!}
         title={`${state} - ${progress.toFixed(1)}%`}
         body={<div>{title}</div>}
-        position="bottom-start"
+        position={tooltipPositions.LEFT}
       />
     );
   }

frontend/src/Activity/Queue/QueueFilterModal.tsx

@@ -1,26 +1,53 @@
 import React, { useCallback } from 'react';
-import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
-import { setQueueOption } from './queueOptionsStore';
-import useQueue, { FILTER_BUILDER } from './useQueue';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setQueueFilter } from 'Store/Actions/queueActions';
 
-type QueueFilterModalProps = FilterModalProps<History>;
+function createQueueSelector() {
+  return createSelector(
+    (state: AppState) => state.queue.paged.items,
+    (queueItems) => {
+      return queueItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.queue.paged.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
+
+interface QueueFilterModalProps {
+  isOpen: boolean;
+}
 
 export default function QueueFilterModal(props: QueueFilterModalProps) {
-  const { records } = useQueue();
+  const sectionItems = useSelector(createQueueSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'queue';
+
+  const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
-      setQueueOption('selectedFilterKey', selectedFilterKey);
+    (payload: unknown) => {
+      dispatch(setQueueFilter(payload));
     },
-    []
+    [dispatch]
   );
 
   return (
     <FilterModal
+      // TODO: Don't spread all the props
       {...props}
-      sectionItems={records}
-      filterBuilderProps={FILTER_BUILDER}
-      customFilterType="queue"
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
       dispatchSetFilter={dispatchSetFilter}
     />
   );

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -1,30 +1,33 @@
 import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
-import { OptionChanged } from 'Helpers/Hooks/useOptionsStore';
 import { inputTypes } from 'Helpers/Props';
+import { gotoQueuePage, setQueueOption } from 'Store/Actions/queueActions';
+import { CheckInputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
-import {
-  QueueOptions as QueueOptionsType,
-  setQueueOption,
-  useQueueOption,
-} from './queueOptionsStore';
-import useQueue from './useQueue';
 
 function QueueOptions() {
-  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
-  const { goToPage } = useQueue();
+  const dispatch = useDispatch();
+  const { includeUnknownSeriesItems } = useSelector(
+    (state: AppState) => state.queue.options
+  );
 
   const handleOptionChange = useCallback(
-    ({ name, value }: OptionChanged<QueueOptionsType>) => {
-      setQueueOption(name, value);
+    ({ name, value }: CheckInputChanged) => {
+      dispatch(
+        setQueueOption({
+          [name]: value,
+        })
+      );
 
       if (name === 'includeUnknownSeriesItems') {
-        goToPage(1);
+        dispatch(gotoQueuePage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
   return (
@@ -36,7 +39,6 @@ function QueueOptions() {
         name="includeUnknownSeriesItems"
         value={includeUnknownSeriesItems}
         helpText={translate('ShowUnknownSeriesItemsHelpText')}
-        // @ts-expect-error - The typing for inputs needs more work
         onChange={handleOptionChange}
       />
     </FormGroup>

frontend/src/Activity/Queue/QueueRow.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
+import { Error } from 'App/State/AppSectionState';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ProgressBar from 'Components/ProgressBar';
@@ -14,13 +15,16 @@ import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
-import useEpisodes from 'Episode/useEpisodes';
+import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
+import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
+import useEpisode from 'Episode/useEpisode';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
 import useSeries from 'Series/useSeries';
+import { grabQueueItem, removeQueueItem } from 'Store/Actions/queueActions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import CustomFormat from 'typings/CustomFormat';
 import { SelectStateInputProps } from 'typings/props';
@@ -32,18 +36,15 @@ import {
 import formatBytes from 'Utilities/Number/formatBytes';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
-import EpisodeCellContent from './EpisodeCellContent';
-import EpisodeTitleCellContent from './EpisodeTitleCellContent';
 import QueueStatusCell from './QueueStatusCell';
-import RemoveQueueItemModal from './RemoveQueueItemModal';
-import TimeLeftCell from './TimeLeftCell';
-import { useGrabQueueItem, useRemoveQueueItem } from './useQueue';
+import RemoveQueueItemModal, { RemovePressProps } from './RemoveQueueItemModal';
+import TimeleftCell from './TimeleftCell';
 import styles from './QueueRow.css';
 
 interface QueueRowProps {
   id: number;
   seriesId?: number;
-  episodeIds: number[];
+  episodeId?: number;
   downloadId?: string;
   title: string;
   status: string;
@@ -57,16 +58,16 @@ interface QueueRowProps {
   customFormatScore: number;
   protocol: DownloadProtocol;
   indexer?: string;
-  isFullSeason: boolean;
-  seasonNumbers: number[];
   outputPath?: string;
   downloadClient?: string;
   downloadClientHasPostImportCategory?: boolean;
   estimatedCompletionTime?: string;
   added?: string;
-  timeLeft?: string;
+  timeleft?: string;
   size: number;
-  sizeLeft: number;
+  sizeleft: number;
+  isGrabbing?: boolean;
+  grabError?: Error;
   isRemoving?: boolean;
   isSelected?: boolean;
   columns: Column[];
@@ -78,7 +79,7 @@ function QueueRow(props: QueueRowProps) {
   const {
     id,
     seriesId,
-    episodeIds,
+    episodeId,
     downloadId,
     title,
     status,
@@ -96,25 +97,25 @@ function QueueRow(props: QueueRowProps) {
     downloadClient,
     downloadClientHasPostImportCategory,
     estimatedCompletionTime,
-    isFullSeason,
-    seasonNumbers,
     added,
-    timeLeft,
+    timeleft,
     size,
-    sizeLeft,
+    sizeleft,
+    isGrabbing = false,
+    grabError,
+    isRemoving = false,
     isSelected,
     columns,
     onSelectedChange,
     onQueueRowModalOpenOrClose,
   } = props;
 
+  const dispatch = useDispatch();
   const series = useSeries(seriesId);
-  const episodes = useEpisodes(episodeIds, 'episodes');
+  const episode = useEpisode(episodeId, 'episodes');
   const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
     createUISettingsSelector()
   );
-  const { removeQueueItem, isRemoving } = useRemoveQueueItem(id);
-  const { grabQueueItem, isGrabbing, grabError } = useGrabQueueItem(id);
 
   const [isRemoveQueueItemModalOpen, setIsRemoveQueueItemModalOpen] =
     useState(false);
@@ -123,8 +124,8 @@ function QueueRow(props: QueueRowProps) {
     useState(false);
 
   const handleGrabPress = useCallback(() => {
-    grabQueueItem();
-  }, [grabQueueItem]);
+    dispatch(grabQueueItem({ id }));
+  }, [id, dispatch]);
 
   const handleInteractiveImportPress = useCallback(() => {
     onQueueRowModalOpenOrClose(true);
@@ -141,22 +142,21 @@ function QueueRow(props: QueueRowProps) {
     setIsRemoveQueueItemModalOpen(true);
   }, [setIsRemoveQueueItemModalOpen, onQueueRowModalOpenOrClose]);
 
-  const handleRemoveQueueItemModalConfirmed = useCallback(() => {
-    onQueueRowModalOpenOrClose(false);
-    removeQueueItem();
-    setIsRemoveQueueItemModalOpen(false);
-  }, [
-    setIsRemoveQueueItemModalOpen,
-    removeQueueItem,
-    onQueueRowModalOpenOrClose,
-  ]);
+  const handleRemoveQueueItemModalConfirmed = useCallback(
+    (payload: RemovePressProps) => {
+      onQueueRowModalOpenOrClose(false);
+      dispatch(removeQueueItem({ id, ...payload }));
+      setIsRemoveQueueItemModalOpen(false);
+    },
+    [id, setIsRemoveQueueItemModalOpen, onQueueRowModalOpenOrClose, dispatch]
+  );
 
   const handleRemoveQueueItemModalClose = useCallback(() => {
     onQueueRowModalOpenOrClose(false);
     setIsRemoveQueueItemModalOpen(false);
   }, [setIsRemoveQueueItemModalOpen, onQueueRowModalOpenOrClose]);
 
-  const progress = 100 - (sizeLeft / size) * 100;
+  const progress = 100 - (sizeleft / size) * 100;
   const showInteractiveImport =
     status === 'completed' && trackedDownloadStatus === 'warning';
   const isPending =
@@ -209,12 +209,23 @@ function QueueRow(props: QueueRowProps) {
         if (name === 'episode') {
           return (
             <TableRowCell key={name}>
-              <EpisodeCellContent
-                episodes={episodes}
-                isFullSeason={isFullSeason}
-                seasonNumber={seasonNumbers[0]}
-                series={series}
-              />
+              {episode ? (
+                <SeasonEpisodeNumber
+                  seasonNumber={episode.seasonNumber}
+                  episodeNumber={episode.episodeNumber}
+                  absoluteEpisodeNumber={episode.absoluteEpisodeNumber}
+                  seriesType={series?.seriesType}
+                  alternateTitles={series?.alternateTitles}
+                  sceneSeasonNumber={episode.sceneSeasonNumber}
+                  sceneEpisodeNumber={episode.sceneEpisodeNumber}
+                  sceneAbsoluteEpisodeNumber={
+                    episode.sceneAbsoluteEpisodeNumber
+                  }
+                  unverifiedSceneNumbering={episode.unverifiedSceneNumbering}
+                />
+              ) : (
+                '-'
+              )}
             </TableRowCell>
           );
         }
@@ -222,37 +233,27 @@ function QueueRow(props: QueueRowProps) {
         if (name === 'episodes.title') {
           return (
             <TableRowCell key={name}>
-              <EpisodeTitleCellContent episodes={episodes} series={series} />
+              {series && episode ? (
+                <EpisodeTitleLink
+                  episodeId={episode.id}
+                  seriesId={series.id}
+                  episodeTitle={episode.title}
+                  episodeEntity="episodes"
+                  showOpenSeriesButton={true}
+                />
+              ) : (
+                '-'
+              )}
             </TableRowCell>
           );
         }
 
         if (name === 'episodes.airDateUtc') {
-          if (episodes.length === 0) {
-            return <TableRowCell key={name}>-</TableRowCell>;
+          if (episode) {
+            return <RelativeDateCell key={name} date={episode.airDateUtc} />;
           }
 
-          if (episodes.length === 1) {
-            return (
-              <RelativeDateCell key={name} date={episodes[0].airDateUtc} />
-            );
-          }
-
-          return (
-            <TableRowCell key={name}>
-              <RelativeDateCell
-                key={name}
-                component="span"
-                date={episodes[0].airDateUtc}
-              />
-              {' - '}
-              <RelativeDateCell
-                key={name}
-                component="span"
-                date={episodes[episodes.length - 1].airDateUtc}
-              />
-            </TableRowCell>
-          );
+          return <TableRowCell key={name}>-</TableRowCell>;
         }
 
         if (name === 'languages') {
@@ -324,13 +325,13 @@ function QueueRow(props: QueueRowProps) {
 
         if (name === 'estimatedCompletionTime') {
           return (
-            <TimeLeftCell
+            <TimeleftCell
               key={name}
               status={status}
               estimatedCompletionTime={estimatedCompletionTime}
-              timeLeft={timeLeft}
+              timeleft={timeleft}
               size={size}
-              sizeLeft={sizeLeft}
+              sizeleft={sizeleft}
               showRelativeDates={showRelativeDates}
               shortDateFormat={shortDateFormat}
               timeFormat={timeFormat}

frontend/src/Activity/Queue/QueueStatus.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon, { IconKind } from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, kinds } from 'Helpers/Props';
 import { TooltipPosition } from 'Helpers/Props/tooltipPositions';
@@ -61,7 +61,7 @@ function QueueStatus(props: QueueStatusProps) {
 
   // status === 'downloading'
   let iconName = icons.DOWNLOADING;
-  let iconKind: IconKind = kinds.DEFAULT;
+  let iconKind: IconProps['kind'] = kinds.DEFAULT;
   let title = translate('Downloading');
 
   if (status === 'paused') {
@@ -90,7 +90,7 @@ function QueueStatus(props: QueueStatusProps) {
 
     if (trackedDownloadState === 'importing') {
       title += ` - ${translate('Importing')}`;
-      iconKind = kinds.PRIMARY;
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {

frontend/src/Activity/Queue/RemoveQueueItemModal.tsx

@@ -1,24 +1,24 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 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 Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import { OptionChanged } from 'Helpers/Hooks/useOptionsStore';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
-import {
-  QueueOptions,
-  setQueueOption,
-  useQueueOption,
-} from './queueOptionsStore';
 import styles from './RemoveQueueItemModal.css';
 
+export interface RemovePressProps {
+  remove: boolean;
+  changeCategory: boolean;
+  blocklist: boolean;
+  skipRedownload: boolean;
+}
+
 interface RemoveQueueItemModalProps {
   isOpen: boolean;
   sourceTitle?: string;
@@ -26,10 +26,16 @@ interface RemoveQueueItemModalProps {
   canIgnore: boolean;
   isPending: boolean;
   selectedCount?: number;
-  onRemovePress(): void;
+  onRemovePress(props: RemovePressProps): void;
   onModalClose: () => void;
 }
 
+type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore';
+type BlocklistMethod =
+  | 'doNotBlocklist'
+  | 'blocklistAndSearch'
+  | 'blocklistOnly';
+
 function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
   const {
     isOpen,
@@ -43,7 +49,11 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
   } = props;
 
   const multipleSelected = selectedCount && selectedCount > 1;
-  const { removalMethod, blocklistMethod } = useQueueOption('removalOptions');
+
+  const [removalMethod, setRemovalMethod] =
+    useState<RemovalMethod>('removeFromClient');
+  const [blocklistMethod, setBlocklistMethod] =
+    useState<BlocklistMethod>('doNotBlocklist');
 
   const { title, message } = useMemo(() => {
     if (!selectedCount) {
@@ -69,7 +79,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
   }, [sourceTitle, selectedCount]);
 
   const removalMethodOptions = useMemo(() => {
-    const options: EnhancedSelectInputValue<string>[] = [
+    return [
       {
         key: 'removeFromClient',
         value: translate('RemoveFromDownloadClient'),
@@ -96,12 +106,10 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
           : translate('IgnoreDownloadHint'),
       },
     ];
-
-    return options;
   }, [canChangeCategory, canIgnore, multipleSelected]);
 
   const blocklistMethodOptions = useMemo(() => {
-    const options: EnhancedSelectInputValue<string>[] = [
+    return [
       {
         key: 'doNotBlocklist',
         value: translate('DoNotBlocklist'),
@@ -123,28 +131,46 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
           : translate('BlocklistOnlyHint'),
       },
     ];
-
-    return options;
   }, [isPending, multipleSelected]);
 
-  const handleRemovalOptionInputChange = useCallback(
-    ({ name, value }: OptionChanged<QueueOptions['removalOptions']>) => {
-      setQueueOption('removalOptions', {
-        removalMethod,
-        blocklistMethod,
-        [name]: value,
-      });
+  const handleRemovalMethodChange = useCallback(
+    ({ value }: { value: RemovalMethod }) => {
+      setRemovalMethod(value);
     },
-    [removalMethod, blocklistMethod]
+    [setRemovalMethod]
+  );
+
+  const handleBlocklistMethodChange = useCallback(
+    ({ value }: { value: BlocklistMethod }) => {
+      setBlocklistMethod(value);
+    },
+    [setBlocklistMethod]
   );
 
   const handleConfirmRemove = useCallback(() => {
-    onRemovePress();
-  }, [onRemovePress]);
+    onRemovePress({
+      remove: removalMethod === 'removeFromClient',
+      changeCategory: removalMethod === 'changeCategory',
+      blocklist: blocklistMethod !== 'doNotBlocklist',
+      skipRedownload: blocklistMethod === 'blocklistOnly',
+    });
+
+    setRemovalMethod('removeFromClient');
+    setBlocklistMethod('doNotBlocklist');
+  }, [
+    removalMethod,
+    blocklistMethod,
+    setRemovalMethod,
+    setBlocklistMethod,
+    onRemovePress,
+  ]);
 
   const handleModalClose = useCallback(() => {
+    setRemovalMethod('removeFromClient');
+    setBlocklistMethod('doNotBlocklist');
+
     onModalClose();
-  }, [onModalClose]);
+  }, [setRemovalMethod, setBlocklistMethod, onModalClose]);
 
   return (
     <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={handleModalClose}>
@@ -167,8 +193,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
                 helpTextWarning={translate(
                   'RemoveQueueItemRemovalMethodHelpTextWarning'
                 )}
-                // @ts-expect-error - The typing for inputs needs more work
-                onChange={handleRemovalOptionInputChange}
+                onChange={handleRemovalMethodChange}
               />
             </FormGroup>
           )}
@@ -186,8 +211,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
               value={blocklistMethod}
               values={blocklistMethodOptions}
               helpText={translate('BlocklistReleaseHelpText')}
-              // @ts-expect-error - The typing for inputs needs more work
-              onChange={handleRemovalOptionInputChange}
+              onChange={handleBlocklistMethodChange}
             />
           </FormGroup>
         </ModalBody>

frontend/src/Activity/Queue/Status/QueueStatus.tsx

@@ -1,9 +1,33 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
-import useQueueStatus from './useQueueStatus';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { fetchQueueStatus } from 'Store/Actions/queueActions';
+import createQueueStatusSelector from './createQueueStatusSelector';
 
 function QueueStatus() {
-  const { errors, warnings, count } = useQueueStatus();
+  const dispatch = useDispatch();
+  const { isConnected, isReconnecting } = useSelector(
+    (state: AppState) => state.app
+  );
+  const { isPopulated, count, errors, warnings } = useSelector(
+    createQueueStatusSelector()
+  );
+
+  const wasReconnecting = usePrevious(isReconnecting);
+
+  useEffect(() => {
+    if (!isPopulated) {
+      dispatch(fetchQueueStatus());
+    }
+  }, [isPopulated, dispatch]);
+
+  useEffect(() => {
+    if (isConnected && wasReconnecting) {
+      dispatch(fetchQueueStatus());
+    }
+  }, [isConnected, wasReconnecting, dispatch]);
 
   return (
     <PageSidebarStatus count={count} errors={errors} warnings={warnings} />

frontend/src/Activity/Queue/Status/createQueueStatusSelector.ts

@@ -0,0 +1,32 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createQueueStatusSelector() {
+  return createSelector(
+    (state: AppState) => state.queue.status.isPopulated,
+    (state: AppState) => state.queue.status.item,
+    (state: AppState) => state.queue.options.includeUnknownSeriesItems,
+    (isPopulated, status, includeUnknownSeriesItems) => {
+      const {
+        errors,
+        warnings,
+        unknownErrors,
+        unknownWarnings,
+        count,
+        totalCount,
+      } = status;
+
+      return {
+        ...status,
+        isPopulated,
+        count: includeUnknownSeriesItems ? totalCount : count,
+        errors: includeUnknownSeriesItems ? errors || unknownErrors : errors,
+        warnings: includeUnknownSeriesItems
+          ? warnings || unknownWarnings
+          : warnings,
+      };
+    }
+  );
+}
+
+export default createQueueStatusSelector;

frontend/src/Activity/Queue/Status/useQueueStatus.ts

@@ -1,54 +0,0 @@
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import { useQueueOption } from '../queueOptionsStore';
-
-export interface QueueStatus {
-  totalCount: number;
-  count: number;
-  unknownCount: number;
-  errors: boolean;
-  warnings: boolean;
-  unknownErrors: boolean;
-  unknownWarnings: boolean;
-}
-
-export default function useQueueStatus() {
-  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
-
-  const { data } = useApiQuery<QueueStatus>({
-    path: '/queue/status',
-    queryParams: {
-      includeUnknownSeriesItems,
-    },
-  });
-
-  if (!data) {
-    return {
-      count: 0,
-      errors: false,
-      warnings: false,
-    };
-  }
-
-  const {
-    errors,
-    warnings,
-    unknownErrors,
-    unknownWarnings,
-    count,
-    totalCount,
-  } = data;
-
-  if (includeUnknownSeriesItems) {
-    return {
-      count: totalCount,
-      errors: errors || unknownErrors,
-      warnings: warnings || unknownWarnings,
-    };
-  }
-
-  return {
-    count,
-    errors,
-    warnings,
-  };
-}

frontend/src/Activity/Queue/TimeleftCell.css

@@ -1,4 +1,4 @@
-.timeLeft {
+.timeleft {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;

frontend/src/Activity/Queue/TimeleftCell.css.d.ts

@@ -1,7 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'message': string;
+  'timeleft': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Activity/Queue/TimeleftCell.tsx

@@ -8,26 +8,26 @@ import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
-import styles from './TimeLeftCell.css';
+import styles from './TimeleftCell.css';
 
-interface TimeLeftCellProps {
+interface TimeleftCellProps {
   estimatedCompletionTime?: string;
-  timeLeft?: string;
+  timeleft?: string;
   status: string;
   size: number;
-  sizeLeft: number;
+  sizeleft: number;
   showRelativeDates: boolean;
   shortDateFormat: string;
   timeFormat: string;
 }
 
-function TimeLeftCell(props: TimeLeftCellProps) {
+function TimeleftCell(props: TimeleftCellProps) {
   const {
     estimatedCompletionTime,
-    timeLeft,
+    timeleft,
     status,
     size,
-    sizeLeft,
+    sizeleft,
     showRelativeDates,
     shortDateFormat,
     timeFormat,
@@ -44,7 +44,7 @@ function TimeLeftCell(props: TimeLeftCellProps) {
     });
 
     return (
-      <TableRowCell className={styles.timeLeft}>
+      <TableRowCell className={styles.timeleft}>
         <Tooltip
           anchor={<Icon name={icons.INFO} />}
           tooltip={translate('DelayingDownloadUntil', { date, time })}
@@ -66,7 +66,7 @@ function TimeLeftCell(props: TimeLeftCellProps) {
     });
 
     return (
-      <TableRowCell className={styles.timeLeft}>
+      <TableRowCell className={styles.timeleft}>
         <Tooltip
           anchor={<Icon name={icons.INFO} />}
           tooltip={translate('RetryingDownloadOn', { date, time })}
@@ -77,21 +77,21 @@ function TimeLeftCell(props: TimeLeftCellProps) {
     );
   }
 
-  if (!timeLeft || status === 'completed' || status === 'failed') {
-    return <TableRowCell className={styles.timeLeft}>-</TableRowCell>;
+  if (!timeleft || status === 'completed' || status === 'failed') {
+    return <TableRowCell className={styles.timeleft}>-</TableRowCell>;
   }
 
   const totalSize = formatBytes(size);
-  const remainingSize = formatBytes(sizeLeft);
+  const remainingSize = formatBytes(sizeleft);
 
   return (
     <TableRowCell
-      className={styles.timeLeft}
+      className={styles.timeleft}
       title={`${remainingSize} / ${totalSize}`}
     >
-      {formatTimeSpan(timeLeft)}
+      {formatTimeSpan(timeleft)}
     </TableRowCell>
   );
 }
 
-export default TimeLeftCell;
+export default TimeleftCell;

frontend/src/Activity/Queue/queueOptionsStore.ts

@@ -1,160 +0,0 @@
-import React from 'react';
-import Icon from 'Components/Icon';
-import {
-  createOptionsStore,
-  PageableOptions,
-} from 'Helpers/Hooks/useOptionsStore';
-import { icons } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-
-interface QueueRemovalOptions {
-  removalMethod: 'changeCategory' | 'ignore' | 'removeFromClient';
-  blocklistMethod: 'blocklistAndSearch' | 'blocklistOnly' | 'doNotBlocklist';
-}
-
-export interface QueueOptions extends PageableOptions {
-  includeUnknownSeriesItems: boolean;
-  removalOptions: QueueRemovalOptions;
-}
-
-const { useOptions, useOption, setOptions, setOption } =
-  createOptionsStore<QueueOptions>('queue_options', () => {
-    return {
-      includeUnknownSeriesItems: true,
-      pageSize: 20,
-      selectedFilterKey: 'all',
-      sortKey: 'time',
-      sortDirection: 'descending',
-      columns: [
-        {
-          name: 'status',
-          label: '',
-          columnLabel: () => translate('Status'),
-          isSortable: true,
-          isVisible: true,
-          isModifiable: false,
-        },
-        {
-          name: 'series.sortTitle',
-          label: () => translate('Series'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'episode',
-          label: () => translate('EpisodeMaybePlural'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'episodes.title',
-          label: () => translate('EpisodeTitleMaybePlural'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'episodes.airDateUtc',
-          label: () => translate('EpisodeAirDate'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'languages',
-          label: () => translate('Languages'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'quality',
-          label: () => translate('Quality'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'customFormats',
-          label: () => translate('Formats'),
-          isSortable: false,
-          isVisible: true,
-        },
-        {
-          name: 'customFormatScore',
-          columnLabel: () => translate('CustomFormatScore'),
-          label: React.createElement(Icon, {
-            name: icons.SCORE,
-            title: () => translate('CustomFormatScore'),
-          }),
-          isVisible: false,
-        },
-        {
-          name: 'protocol',
-          label: () => translate('Protocol'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'indexer',
-          label: () => translate('Indexer'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'downloadClient',
-          label: () => translate('DownloadClient'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'title',
-          label: () => translate('ReleaseTitle'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'size',
-          label: () => translate('Size'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'outputPath',
-          label: () => translate('OutputPath'),
-          isSortable: false,
-          isVisible: false,
-        },
-        {
-          name: 'estimatedCompletionTime',
-          label: () => translate('TimeLeft'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'added',
-          label: () => translate('Added'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'progress',
-          label: () => translate('Progress'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'actions',
-          label: '',
-          columnLabel: () => translate('Actions'),
-          isVisible: true,
-          isModifiable: false,
-        },
-      ],
-      removalOptions: {
-        removalMethod: 'removeFromClient',
-        blocklistMethod: 'doNotBlocklist',
-      },
-    };
-  });
-
-export const useQueueOptions = useOptions;
-export const setQueueOptions = setOptions;
-export const useQueueOption = useOption;
-export const setQueueOption = setOption;

frontend/src/Activity/Queue/useQueue.ts

@@ -1,203 +0,0 @@
-import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import usePage from 'Helpers/Hooks/usePage';
-import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
-import { filterBuilderValueTypes } from 'Helpers/Props';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import Queue from 'typings/Queue';
-import getQueryString from 'Utilities/Fetch/getQueryString';
-import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
-import translate from 'Utilities/String/translate';
-import { useQueueOptions } from './queueOptionsStore';
-
-interface BulkQueueData {
-  ids: number[];
-}
-
-export const FILTERS: Filter[] = [
-  {
-    key: 'all',
-    label: () => translate('All'),
-    filters: [],
-  },
-];
-
-export const FILTER_BUILDER: FilterBuilderProp<Queue>[] = [
-  {
-    name: 'seriesIds',
-    label: () => translate('Series'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.SERIES,
-  },
-  {
-    name: 'quality',
-    label: () => translate('Quality'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.QUALITY,
-  },
-  {
-    name: 'languages',
-    label: () => translate('Languages'),
-    type: 'contains',
-    valueType: filterBuilderValueTypes.LANGUAGE,
-  },
-  {
-    name: 'protocol',
-    label: () => translate('Protocol'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.PROTOCOL,
-  },
-  {
-    name: 'status',
-    label: () => translate('Status'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.QUEUE_STATUS,
-  },
-];
-
-const useQueue = () => {
-  const { page, goToPage } = usePage('queue');
-  const {
-    includeUnknownSeriesItems,
-    pageSize,
-    selectedFilterKey,
-    sortKey,
-    sortDirection,
-  } = useQueueOptions();
-  const customFilters = useSelector(
-    createCustomFiltersSelector('queue')
-  ) as CustomFilter[];
-
-  const filters = useMemo(() => {
-    return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
-  }, [selectedFilterKey, customFilters]);
-
-  const { refetch, ...query } = usePagedApiQuery<Queue>({
-    path: '/queue',
-    page,
-    pageSize,
-    filters,
-    queryParams: {
-      includeUnknownSeriesItems,
-    },
-    sortKey,
-    sortDirection,
-    queryOptions: {
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  return {
-    ...query,
-    goToPage,
-    page,
-    refetch,
-  };
-};
-
-export default useQueue;
-
-export const useFilters = () => {
-  return FILTERS;
-};
-
-const useRemovalOptions = () => {
-  const { removalOptions } = useQueueOptions();
-
-  return {
-    remove: removalOptions.removalMethod === 'removeFromClient',
-    changeCategory: removalOptions.removalMethod === 'changeCategory',
-    blocklist: removalOptions.blocklistMethod !== 'doNotBlocklist',
-    skipRedownload: removalOptions.blocklistMethod === 'blocklistOnly',
-  };
-};
-
-export const useRemoveQueueItem = (id: number) => {
-  const queryClient = useQueryClient();
-  const removalOptions = useRemovalOptions();
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/queue/${id}${getQueryString(removalOptions)}`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/queue'] });
-      },
-    },
-  });
-
-  return {
-    removeQueueItem: mutate,
-    isRemoving: isPending,
-  };
-};
-
-export const useRemoveQueueItems = () => {
-  const queryClient = useQueryClient();
-  const removalOptions = useRemovalOptions();
-
-  const { mutate, isPending } = useApiMutation<unknown, BulkQueueData>({
-    path: `/queue/bulk${getQueryString(removalOptions)}`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/queue'] });
-      },
-    },
-  });
-
-  return {
-    removeQueueItems: mutate,
-    isRemoving: isPending,
-  };
-};
-
-export const useGrabQueueItem = (id: number) => {
-  const queryClient = useQueryClient();
-  const [grabError, setGrabError] = useState<string | null>(null);
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/queue/grab/${id}`,
-    method: 'POST',
-    mutationOptions: {
-      onMutate: () => {
-        setGrabError(null);
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/queue'] });
-      },
-      onError: () => {
-        setGrabError('Error grabbing queue item');
-      },
-    },
-  });
-
-  return {
-    grabQueueItem: mutate,
-    isGrabbing: isPending,
-    grabError,
-  };
-};
-
-export const useGrabQueueItems = () => {
-  const queryClient = useQueryClient();
-
-  // Explicitly define the types for the mutation so we can pass in no arguments to mutate as expected.
-  const { mutate, isPending } = useApiMutation<unknown, BulkQueueData>({
-    path: '/queue/grab/bulk',
-    method: 'POST',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/queue'] });
-      },
-    },
-  });
-
-  return {
-    grabQueueItems: mutate,
-    isGrabbing: isPending,
-  };
-};

frontend/src/AddSeries/AddNewSeries/AddNewSeries.js

@@ -0,0 +1,213 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextInput from 'Components/Form/TextInput';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { icons, kinds } from 'Helpers/Props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import AddNewSeriesSearchResultConnector from './AddNewSeriesSearchResultConnector';
+import styles from './AddNewSeries.css';
+
+class AddNewSeries extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      term: props.term || '',
+      isFetching: false
+    };
+  }
+
+  componentDidMount() {
+    const term = this.state.term;
+
+    if (term) {
+      this.props.onSeriesLookupChange(term);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      term,
+      isFetching
+    } = this.props;
+
+    if (term && term !== prevProps.term) {
+      this.setState({
+        term,
+        isFetching: true
+      });
+      this.props.onSeriesLookupChange(term);
+    } else if (isFetching !== prevProps.isFetching) {
+      this.setState({
+        isFetching
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onSearchInputChange = ({ value }) => {
+    const hasValue = !!value.trim();
+
+    this.setState({ term: value, isFetching: hasValue }, () => {
+      if (hasValue) {
+        this.props.onSeriesLookupChange(value);
+      } else {
+        this.props.onClearSeriesLookup();
+      }
+    });
+  };
+
+  onClearSeriesLookupPress = () => {
+    this.setState({ term: '' });
+    this.props.onClearSeriesLookup();
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      error,
+      items,
+      hasExistingSeries
+    } = this.props;
+
+    const term = this.state.term;
+    const isFetching = this.state.isFetching;
+
+    return (
+      <PageContent title={translate('AddNewSeries')}>
+        <PageContentBody>
+          <div className={styles.searchContainer}>
+            <div className={styles.searchIconContainer}>
+              <Icon
+                name={icons.SEARCH}
+                size={20}
+              />
+            </div>
+
+            <TextInput
+              className={styles.searchInput}
+              name="seriesLookup"
+              value={term}
+              placeholder="eg. Breaking Bad, tvdb:####"
+              autoFocus={true}
+              onChange={this.onSearchInputChange}
+            />
+
+            <Button
+              className={styles.clearLookupButton}
+              onPress={this.onClearSeriesLookupPress}
+            >
+              <Icon
+                name={icons.REMOVE}
+                size={20}
+              />
+            </Button>
+          </div>
+
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error ?
+              <div className={styles.message}>
+                <div className={styles.helpText}>
+                  {translate('AddNewSeriesError')}
+                </div>
+                <div>{getErrorMessage(error)}</div>
+              </div> : null
+          }
+
+          {
+            !isFetching && !error && !!items.length &&
+              <div className={styles.searchResults}>
+                {
+                  items.map((item) => {
+                    return (
+                      <AddNewSeriesSearchResultConnector
+                        key={item.tvdbId}
+                        {...item}
+                      />
+                    );
+                  })
+                }
+              </div>
+          }
+
+          {
+            !isFetching && !error && !items.length && !!term &&
+              <div className={styles.message}>
+                <div className={styles.noResults}>{translate('CouldNotFindResults', { term })}</div>
+                <div>{translate('SearchByTvdbId')}</div>
+                <div>
+                  <Link to="https://wiki.servarr.com/sonarr/faq#why-cant-i-add-a-new-series-when-i-know-the-tvdb-id">
+                    {translate('WhyCantIFindMyShow')}
+                  </Link>
+                </div>
+              </div>
+          }
+
+          {
+            term ?
+              null :
+              <div className={styles.message}>
+                <div className={styles.helpText}>
+                  {translate('AddNewSeriesHelpText')}
+                </div>
+                <div>{translate('SearchByTvdbId')}</div>
+              </div>
+          }
+
+          {
+            !term && !hasExistingSeries ?
+              <div className={styles.message}>
+                <div className={styles.noSeriesText}>
+                  {translate('NoSeriesHaveBeenAdded')}
+                </div>
+                <div>
+                  <Button
+                    to="/add/import"
+                    kind={kinds.PRIMARY}
+                  >
+                    {translate('ImportExistingSeries')}
+                  </Button>
+                </div>
+              </div> :
+              null
+          }
+
+          <div />
+        </PageContentBody>
+      </PageContent>
+    );
+  }
+}
+
+AddNewSeries.propTypes = {
+  term: PropTypes.string,
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasExistingSeries: PropTypes.bool.isRequired,
+  onSeriesLookupChange: PropTypes.func.isRequired,
+  onClearSeriesLookup: PropTypes.func.isRequired
+};
+
+export default AddNewSeries;

frontend/src/AddSeries/AddNewSeries/AddNewSeries.tsx

@@ -1,149 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import Alert from 'Components/Alert';
-import TextInput from 'Components/Form/TextInput';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import Link from 'Components/Link/Link';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import useDebounce from 'Helpers/Hooks/useDebounce';
-import useQueryParams from 'Helpers/Hooks/useQueryParams';
-import { icons, kinds } from 'Helpers/Props';
-import { InputChanged } from 'typings/inputs';
-import getErrorMessage from 'Utilities/Object/getErrorMessage';
-import translate from 'Utilities/String/translate';
-import AddNewSeriesSearchResult from './AddNewSeriesSearchResult';
-import { useLookupSeries } from './useAddSeries';
-import styles from './AddNewSeries.css';
-
-function AddNewSeries() {
-  const { term: initialTerm = '' } = useQueryParams<{ term: string }>();
-
-  const seriesCount = useSelector(
-    (state: AppState) => state.series.items.length
-  );
-
-  const [term, setTerm] = useState(initialTerm);
-  const [isFetching, setIsFetching] = useState(false);
-  const query = useDebounce(term, term ? 300 : 0);
-
-  const handleSearchInputChange = useCallback(
-    ({ value }: InputChanged<string>) => {
-      setTerm(value);
-      setIsFetching(!!value.trim());
-    },
-    []
-  );
-
-  const handleClearSeriesLookupPress = useCallback(() => {
-    setTerm('');
-    setIsFetching(false);
-  }, []);
-
-  const {
-    isFetching: isFetchingApi,
-    error,
-    data = [],
-  } = useLookupSeries(query);
-
-  useEffect(() => {
-    setIsFetching(isFetchingApi);
-  }, [isFetchingApi]);
-
-  useEffect(() => {
-    setTerm(initialTerm);
-  }, [initialTerm]);
-
-  return (
-    <PageContent title={translate('AddNewSeries')}>
-      <PageContentBody>
-        <div className={styles.searchContainer}>
-          <div className={styles.searchIconContainer}>
-            <Icon name={icons.SEARCH} size={20} />
-          </div>
-
-          <TextInput
-            className={styles.searchInput}
-            name="seriesLookup"
-            value={term}
-            placeholder="eg. Breaking Bad, tvdb:####"
-            autoFocus={true}
-            onChange={handleSearchInputChange}
-          />
-
-          <Button
-            className={styles.clearLookupButton}
-            onPress={handleClearSeriesLookupPress}
-          >
-            <Icon name={icons.REMOVE} size={20} />
-          </Button>
-        </div>
-
-        {isFetching ? <LoadingIndicator /> : null}
-
-        {!isFetching && !!error ? (
-          <div className={styles.message}>
-            <div className={styles.helpText}>
-              {translate('AddNewSeriesError')}
-            </div>
-
-            <Alert kind={kinds.DANGER}>{getErrorMessage(error)}</Alert>
-          </div>
-        ) : null}
-
-        {!isFetching && !error && !!data.length ? (
-          <div className={styles.searchResults}>
-            {data.map((item) => {
-              return (
-                <AddNewSeriesSearchResult key={item.tvdbId} series={item} />
-              );
-            })}
-          </div>
-        ) : null}
-
-        {!isFetching && !error && !data.length && term ? (
-          <div className={styles.message}>
-            <div className={styles.noResults}>
-              {translate('CouldNotFindResults', { term })}
-            </div>
-            <div>{translate('SearchByTvdbId')}</div>
-            <div>
-              <Link to="https://wiki.servarr.com/sonarr/faq#why-cant-i-add-a-new-series-when-i-know-the-tvdb-id">
-                {translate('WhyCantIFindMyShow')}
-              </Link>
-            </div>
-          </div>
-        ) : null}
-
-        {term ? null : (
-          <div className={styles.message}>
-            <div className={styles.helpText}>
-              {translate('AddNewSeriesHelpText')}
-            </div>
-            <div>{translate('SearchByTvdbId')}</div>
-          </div>
-        )}
-
-        {!term && !seriesCount ? (
-          <div className={styles.message}>
-            <div className={styles.noSeriesText}>
-              {translate('NoSeriesHaveBeenAdded')}
-            </div>
-            <div>
-              <Button to="/add/import" kind={kinds.PRIMARY}>
-                {translate('ImportExistingSeries')}
-              </Button>
-            </div>
-          </div>
-        ) : null}
-
-        <div />
-      </PageContentBody>
-    </PageContent>
-  );
-}
-
-export default AddNewSeries;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesConnector.js

@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearAddSeries, lookupSeries } from 'Store/Actions/addSeriesActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import parseUrl from 'Utilities/String/parseUrl';
+import AddNewSeries from './AddNewSeries';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addSeries,
+    (state) => state.series.items.length,
+    (state) => state.router.location,
+    (addSeries, existingSeriesCount, location) => {
+      const { params } = parseUrl(location.search);
+
+      return {
+        ...addSeries,
+        term: params.term,
+        hasExistingSeries: existingSeriesCount > 0
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  lookupSeries,
+  clearAddSeries,
+  fetchRootFolders
+};
+
+class AddNewSeriesConnector extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._seriesLookupTimeout = null;
+  }
+
+  componentDidMount() {
+    this.props.fetchRootFolders();
+  }
+
+  componentWillUnmount() {
+    if (this._seriesLookupTimeout) {
+      clearTimeout(this._seriesLookupTimeout);
+    }
+
+    this.props.clearAddSeries();
+  }
+
+  //
+  // Listeners
+
+  onSeriesLookupChange = (term) => {
+    if (this._seriesLookupTimeout) {
+      clearTimeout(this._seriesLookupTimeout);
+    }
+
+    if (term.trim() === '') {
+      this.props.clearAddSeries();
+    } else {
+      this._seriesLookupTimeout = setTimeout(() => {
+        this.props.lookupSeries({ term });
+      }, 300);
+    }
+  };
+
+  onClearSeriesLookup = () => {
+    this.props.clearAddSeries();
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      term,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <AddNewSeries
+        term={term}
+        {...otherProps}
+        onSeriesLookupChange={this.onSeriesLookupChange}
+        onClearSeriesLookup={this.onClearSeriesLookup}
+      />
+    );
+  }
+}
+
+AddNewSeriesConnector.propTypes = {
+  term: PropTypes.string,
+  lookupSeries: PropTypes.func.isRequired,
+  clearAddSeries: PropTypes.func.isRequired,
+  fetchRootFolders: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewSeriesConnector);

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModal.js

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

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModal.tsx

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

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.js

@@ -0,0 +1,300 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
+import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
+import CheckInput from 'Components/Form/CheckInput';
+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 Icon from 'Components/Icon';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+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 SeriesPoster from 'Series/SeriesPoster';
+import * as seriesTypes from 'Utilities/Series/seriesTypes';
+import translate from 'Utilities/String/translate';
+import styles from './AddNewSeriesModalContent.css';
+
+class AddNewSeriesModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      seriesType: props.initialSeriesType === seriesTypes.STANDARD ?
+        props.seriesType.value :
+        props.initialSeriesType
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.seriesType.value !== prevProps.seriesType.value) {
+      this.setState({ seriesType: this.props.seriesType.value });
+    }
+  }
+
+  //
+  // Listeners
+
+  onQualityProfileIdChange = ({ value }) => {
+    this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
+  };
+
+  onAddSeriesPress = () => {
+    const {
+      seriesType
+    } = this.state;
+
+    this.props.onAddSeriesPress(
+      seriesType
+    );
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      title,
+      year,
+      overview,
+      images,
+      isAdding,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      seriesType,
+      seasonFolder,
+      searchForMissingEpisodes,
+      searchForCutoffUnmetEpisodes,
+      folder,
+      tags,
+      isSmallScreen,
+      isWindows,
+      onModalClose,
+      onInputChange,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {title}
+
+          {
+            !title.contains(year) && !!year &&
+              <span className={styles.year}>({year})</span>
+          }
+        </ModalHeader>
+
+        <ModalBody>
+          <div className={styles.container}>
+            {
+              isSmallScreen ?
+                null :
+                <div className={styles.poster}>
+                  <SeriesPoster
+                    className={styles.poster}
+                    images={images}
+                    size={250}
+                  />
+                </div>
+            }
+
+            <div className={styles.info}>
+              {
+                overview ?
+                  <div className={styles.overview}>
+                    {overview}
+                  </div> :
+                  null
+              }
+
+              <Form {...otherProps}>
+                <FormGroup>
+                  <FormLabel>{translate('RootFolder')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.ROOT_FOLDER_SELECT}
+                    name="rootFolderPath"
+                    valueOptions={{
+                      seriesFolder: folder,
+                      isWindows
+                    }}
+                    selectedValueOptions={{
+                      seriesFolder: folder,
+                      isWindows
+                    }}
+                    helpText={translate('AddNewSeriesRootFolderHelpText', { folder })}
+                    onChange={onInputChange}
+                    {...rootFolderPath}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>
+                    {translate('Monitor')}
+
+                    <Popover
+                      anchor={
+                        <Icon
+                          className={styles.labelIcon}
+                          name={icons.INFO}
+                        />
+                      }
+                      title={translate('MonitoringOptions')}
+                      body={<SeriesMonitoringOptionsPopoverContent />}
+                      position={tooltipPositions.RIGHT}
+                    />
+                  </FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.MONITOR_EPISODES_SELECT}
+                    name="monitor"
+                    onChange={onInputChange}
+                    {...monitor}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('QualityProfile')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.QUALITY_PROFILE_SELECT}
+                    name="qualityProfileId"
+                    onChange={this.onQualityProfileIdChange}
+                    {...qualityProfileId}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>
+                    {translate('SeriesType')}
+
+                    <Popover
+                      anchor={
+                        <Icon
+                          className={styles.labelIcon}
+                          name={icons.INFO}
+                        />
+                      }
+                      title={translate('SeriesTypes')}
+                      body={<SeriesTypePopoverContent />}
+                      position={tooltipPositions.RIGHT}
+                    />
+                  </FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.SERIES_TYPE_SELECT}
+                    name="seriesType"
+                    onChange={onInputChange}
+                    {...seriesType}
+                    value={this.state.seriesType}
+                    helpText={translate('SeriesTypesHelpText')}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('SeasonFolder')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="seasonFolder"
+                    onChange={onInputChange}
+                    {...seasonFolder}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('Tags')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="tags"
+                    onChange={onInputChange}
+                    {...tags}
+                  />
+                </FormGroup>
+              </Form>
+            </div>
+          </div>
+        </ModalBody>
+
+        <ModalFooter className={styles.modalFooter}>
+          <div>
+            <label className={styles.searchLabelContainer}>
+              <span className={styles.searchLabel}>
+                {translate('AddNewSeriesSearchForMissingEpisodes')}
+              </span>
+
+              <CheckInput
+                containerClassName={styles.searchInputContainer}
+                className={styles.searchInput}
+                name="searchForMissingEpisodes"
+                onChange={onInputChange}
+                {...searchForMissingEpisodes}
+              />
+            </label>
+
+            <label className={styles.searchLabelContainer}>
+              <span className={styles.searchLabel}>
+                {translate('AddNewSeriesSearchForCutoffUnmetEpisodes')}
+              </span>
+
+              <CheckInput
+                containerClassName={styles.searchInputContainer}
+                className={styles.searchInput}
+                name="searchForCutoffUnmetEpisodes"
+                onChange={onInputChange}
+                {...searchForCutoffUnmetEpisodes}
+              />
+            </label>
+          </div>
+
+          <SpinnerButton
+            className={styles.addButton}
+            kind={kinds.SUCCESS}
+            isSpinning={isAdding}
+            onPress={this.onAddSeriesPress}
+          >
+            {translate('AddSeriesWithTitle', { title })}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddNewSeriesModalContent.propTypes = {
+  title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  overview: PropTypes.string,
+  initialSeriesType: PropTypes.string.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  seriesType: PropTypes.object.isRequired,
+  seasonFolder: PropTypes.object.isRequired,
+  searchForMissingEpisodes: PropTypes.object.isRequired,
+  searchForCutoffUnmetEpisodes: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
+  tags: PropTypes.object.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onAddSeriesPress: PropTypes.func.isRequired
+};
+
+export default AddNewSeriesModalContent;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.tsx

@@ -1,296 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import AddSeries from 'AddSeries/AddSeries';
-import {
-  AddSeriesOptions,
-  setAddSeriesOption,
-  useAddSeriesOptions,
-} from 'AddSeries/addSeriesOptionsStore';
-import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
-import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
-import CheckInput from 'Components/Form/CheckInput';
-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 Icon from 'Components/Icon';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-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 { SeriesType } from 'Series/Series';
-import SeriesPoster from 'Series/SeriesPoster';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import selectSettings from 'Store/Selectors/selectSettings';
-import useIsWindows from 'System/useIsWindows';
-import { InputChanged } from 'typings/inputs';
-import translate from 'Utilities/String/translate';
-import { useAddSeries } from './useAddSeries';
-import styles from './AddNewSeriesModalContent.css';
-
-export interface AddNewSeriesModalContentProps {
-  series: AddSeries;
-  initialSeriesType: SeriesType;
-  onModalClose: () => void;
-}
-
-function AddNewSeriesModalContent({
-  series,
-  initialSeriesType,
-  onModalClose,
-}: AddNewSeriesModalContentProps) {
-  const { title, year, overview, images, folder } = series;
-  const options = useAddSeriesOptions();
-  const { isSmallScreen } = useSelector(createDimensionsSelector());
-  const isWindows = useIsWindows();
-
-  const { isAdding, addError, addSeries } = useAddSeries();
-
-  const { settings, validationErrors, validationWarnings } = useMemo(() => {
-    return selectSettings(options, {}, addError);
-  }, [options, addError]);
-
-  const [seriesType, setSeriesType] = useState<SeriesType>(
-    initialSeriesType === 'standard'
-      ? settings.seriesType.value
-      : initialSeriesType
-  );
-
-  const {
-    monitor,
-    qualityProfileId,
-    rootFolderPath,
-    searchForCutoffUnmetEpisodes,
-    searchForMissingEpisodes,
-    seasonFolder,
-    seriesType: seriesTypeSetting,
-    tags,
-  } = settings;
-
-  const handleInputChange = useCallback(
-    ({ name, value }: InputChanged<string | number | boolean | number[]>) => {
-      setAddSeriesOption(name as keyof AddSeriesOptions, value);
-    },
-    []
-  );
-
-  const handleQualityProfileIdChange = useCallback(
-    ({ value }: InputChanged<string | number>) => {
-      setAddSeriesOption('qualityProfileId', value as number);
-    },
-    []
-  );
-
-  const handleAddSeriesPress = useCallback(() => {
-    addSeries({
-      ...series,
-      rootFolderPath: rootFolderPath.value,
-      monitor: monitor.value,
-      qualityProfileId: qualityProfileId.value,
-      seriesType,
-      seasonFolder: seasonFolder.value,
-      searchForMissingEpisodes: searchForMissingEpisodes.value,
-      searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
-      tags: tags.value,
-    });
-  }, [
-    series,
-    seriesType,
-    rootFolderPath,
-    monitor,
-    qualityProfileId,
-    seasonFolder,
-    searchForMissingEpisodes,
-    searchForCutoffUnmetEpisodes,
-    tags,
-    addSeries,
-  ]);
-
-  useEffect(() => {
-    setSeriesType(seriesTypeSetting.value);
-  }, [seriesTypeSetting]);
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        {title}
-
-        {!title.includes(String(year)) && year ? (
-          <span className={styles.year}>({year})</span>
-        ) : null}
-      </ModalHeader>
-
-      <ModalBody>
-        <div className={styles.container}>
-          {isSmallScreen ? null : (
-            <div className={styles.poster}>
-              <SeriesPoster
-                className={styles.poster}
-                images={images}
-                size={250}
-              />
-            </div>
-          )}
-
-          <div className={styles.info}>
-            {overview ? (
-              <div className={styles.overview}>{overview}</div>
-            ) : null}
-
-            <Form
-              validationErrors={validationErrors}
-              validationWarnings={validationWarnings}
-            >
-              <FormGroup>
-                <FormLabel>{translate('RootFolder')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.ROOT_FOLDER_SELECT}
-                  name="rootFolderPath"
-                  valueOptions={{
-                    seriesFolder: folder,
-                    isWindows,
-                  }}
-                  selectedValueOptions={{
-                    seriesFolder: folder,
-                    isWindows,
-                  }}
-                  helpText={translate('AddNewSeriesRootFolderHelpText', {
-                    folder,
-                  })}
-                  onChange={handleInputChange}
-                  {...rootFolderPath}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>
-                  {translate('Monitor')}
-
-                  <Popover
-                    anchor={
-                      <Icon className={styles.labelIcon} name={icons.INFO} />
-                    }
-                    title={translate('MonitoringOptions')}
-                    body={<SeriesMonitoringOptionsPopoverContent />}
-                    position={tooltipPositions.RIGHT}
-                  />
-                </FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.MONITOR_EPISODES_SELECT}
-                  name="monitor"
-                  onChange={handleInputChange}
-                  {...monitor}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('QualityProfile')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.QUALITY_PROFILE_SELECT}
-                  name="qualityProfileId"
-                  onChange={handleQualityProfileIdChange}
-                  {...qualityProfileId}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>
-                  {translate('SeriesType')}
-
-                  <Popover
-                    anchor={
-                      <Icon className={styles.labelIcon} name={icons.INFO} />
-                    }
-                    title={translate('SeriesTypes')}
-                    body={<SeriesTypePopoverContent />}
-                    position={tooltipPositions.RIGHT}
-                  />
-                </FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.SERIES_TYPE_SELECT}
-                  name="seriesType"
-                  onChange={handleInputChange}
-                  {...seriesTypeSetting}
-                  value={seriesType}
-                  helpText={translate('SeriesTypesHelpText')}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('SeasonFolder')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="seasonFolder"
-                  onChange={handleInputChange}
-                  {...seasonFolder}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>{translate('Tags')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.TAG}
-                  name="tags"
-                  onChange={handleInputChange}
-                  {...tags}
-                />
-              </FormGroup>
-            </Form>
-          </div>
-        </div>
-      </ModalBody>
-
-      <ModalFooter className={styles.modalFooter}>
-        <div>
-          <label className={styles.searchLabelContainer}>
-            <span className={styles.searchLabel}>
-              {translate('AddNewSeriesSearchForMissingEpisodes')}
-            </span>
-
-            <CheckInput
-              containerClassName={styles.searchInputContainer}
-              className={styles.searchInput}
-              name="searchForMissingEpisodes"
-              onChange={handleInputChange}
-              {...searchForMissingEpisodes}
-            />
-          </label>
-
-          <label className={styles.searchLabelContainer}>
-            <span className={styles.searchLabel}>
-              {translate('AddNewSeriesSearchForCutoffUnmetEpisodes')}
-            </span>
-
-            <CheckInput
-              containerClassName={styles.searchInputContainer}
-              className={styles.searchInput}
-              name="searchForCutoffUnmetEpisodes"
-              onChange={handleInputChange}
-              {...searchForCutoffUnmetEpisodes}
-            />
-          </label>
-        </div>
-
-        <SpinnerButton
-          className={styles.addButton}
-          kind={kinds.SUCCESS}
-          isSpinning={isAdding}
-          onPress={handleAddSeriesPress}
-        >
-          {translate('AddSeriesWithTitle', { title })}
-        </SpinnerButton>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-export default AddNewSeriesModalContent;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContentConnector.js

@@ -0,0 +1,110 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { addSeries, setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import selectSettings from 'Store/Selectors/selectSettings';
+import AddNewSeriesModalContent from './AddNewSeriesModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addSeries,
+    createDimensionsSelector(),
+    createSystemStatusSelector(),
+    (addSeriesState, dimensions, systemStatus) => {
+      const {
+        isAdding,
+        addError,
+        defaults
+      } = addSeriesState;
+
+      const {
+        settings,
+        validationErrors,
+        validationWarnings
+      } = selectSettings(defaults, {}, addError);
+
+      return {
+        isAdding,
+        addError,
+        isSmallScreen: dimensions.isSmallScreen,
+        validationErrors,
+        validationWarnings,
+        isWindows: systemStatus.isWindows,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setAddSeriesDefault,
+  addSeries
+};
+
+class AddNewSeriesModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setAddSeriesDefault({ [name]: value });
+  };
+
+  onAddSeriesPress = (seriesType) => {
+    const {
+      tvdbId,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      seasonFolder,
+      searchForMissingEpisodes,
+      searchForCutoffUnmetEpisodes,
+      tags
+    } = this.props;
+
+    this.props.addSeries({
+      tvdbId,
+      rootFolderPath: rootFolderPath.value,
+      monitor: monitor.value,
+      qualityProfileId: qualityProfileId.value,
+      seriesType,
+      seasonFolder: seasonFolder.value,
+      searchForMissingEpisodes: searchForMissingEpisodes.value,
+      searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
+      tags: tags.value
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddNewSeriesModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onAddSeriesPress={this.onAddSeriesPress}
+      />
+    );
+  }
+}
+
+AddNewSeriesModalContentConnector.propTypes = {
+  tvdbId: PropTypes.number.isRequired,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  seriesType: PropTypes.object.isRequired,
+  seasonFolder: PropTypes.object.isRequired,
+  searchForMissingEpisodes: PropTypes.object.isRequired,
+  searchForCutoffUnmetEpisodes: PropTypes.object.isRequired,
+  tags: PropTypes.object.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  setAddSeriesDefault: PropTypes.func.isRequired,
+  addSeries: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewSeriesModalContentConnector);

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css

@@ -70,15 +70,10 @@
 }
 
 .originalLanguageName,
-.network,
-.genres {
+.network {
   margin-left: 8px;
 }
 
-.genres {
-  pointer-events: all;
-}
-
 .tvdbLink {
   composes: link from '~Components/Link/Link.css';
 

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts

@@ -3,7 +3,6 @@
 interface CssExports {
   'alreadyExistsIcon': string;
   'content': string;
-  'genres': string;
   'icons': string;
   'network': string;
   'originalLanguageName': string;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -0,0 +1,257 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import MetadataAttribution from 'Components/MetadataAttribution';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import SeriesPoster from 'Series/SeriesPoster';
+import translate from 'Utilities/String/translate';
+import AddNewSeriesModal from './AddNewSeriesModal';
+import styles from './AddNewSeriesSearchResult.css';
+
+class AddNewSeriesSearchResult extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isNewAddSeriesModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isExistingSeries && this.props.isExistingSeries) {
+      this.onAddSeriesModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.setState({ isNewAddSeriesModalOpen: true });
+  };
+
+  onAddSeriesModalClose = () => {
+    this.setState({ isNewAddSeriesModalOpen: false });
+  };
+
+  onTVDBLinkPress = (event) => {
+    event.stopPropagation();
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      tvdbId,
+      title,
+      titleSlug,
+      year,
+      network,
+      originalLanguage,
+      status,
+      overview,
+      statistics,
+      ratings,
+      folder,
+      seriesType,
+      images,
+      isExistingSeries,
+      isSmallScreen
+    } = this.props;
+
+    const seasonCount = statistics.seasonCount;
+
+    const {
+      isNewAddSeriesModalOpen
+    } = this.state;
+
+    const linkProps = isExistingSeries ? { to: `/series/${titleSlug}` } : { onPress: this.onPress };
+    let seasons = translate('OneSeason');
+
+    if (seasonCount > 1) {
+      seasons = translate('CountSeasons', { count: seasonCount });
+    }
+
+    return (
+      <div className={styles.searchResult}>
+        <Link
+          className={styles.underlay}
+          {...linkProps}
+        />
+
+        <div className={styles.overlay}>
+          {
+            isSmallScreen ?
+              null :
+              <SeriesPoster
+                className={styles.poster}
+                images={images}
+                size={250}
+                overflow={true}
+                lazy={false}
+              />
+          }
+
+          <div className={styles.content}>
+            <div className={styles.titleRow}>
+              <div className={styles.titleContainer}>
+                <div className={styles.title}>
+                  {title}
+
+                  {
+                    !title.contains(year) && year ?
+                      <span className={styles.year}>
+                        ({year})
+                      </span> :
+                      null
+                  }
+                </div>
+              </div>
+
+              <div className={styles.icons}>
+                {
+                  isExistingSeries ?
+                    <Icon
+                      className={styles.alreadyExistsIcon}
+                      name={icons.CHECK_CIRCLE}
+                      size={36}
+                      title={translate('AlreadyInYourLibrary')}
+                    /> :
+                    null
+                }
+
+                <Link
+                  className={styles.tvdbLink}
+                  to={`https://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+                  onPress={this.onTVDBLinkPress}
+                >
+                  <Icon
+                    className={styles.tvdbLinkIcon}
+                    name={icons.EXTERNAL_LINK}
+                    size={28}
+                  />
+                </Link>
+              </div>
+            </div>
+
+            <div>
+              <Label size={sizes.LARGE}>
+                <HeartRating
+                  rating={ratings.value}
+                  votes={ratings.votes}
+                  iconSize={13}
+                />
+              </Label>
+
+              {
+                originalLanguage?.name ?
+                  <Label size={sizes.LARGE}>
+                    <Icon
+                      name={icons.LANGUAGE}
+                      size={13}
+                    />
+
+                    <span className={styles.originalLanguageName}>
+                      {originalLanguage.name}
+                    </span>
+                  </Label> :
+                  null
+              }
+
+              {
+                network ?
+                  <Label size={sizes.LARGE}>
+                    <Icon
+                      name={icons.NETWORK}
+                      size={13}
+                    />
+
+                    <span className={styles.network}>
+                      {network}
+                    </span>
+                  </Label> :
+                  null
+              }
+
+              {
+                seasonCount ?
+                  <Label size={sizes.LARGE}>
+                    {seasons}
+                  </Label> :
+                  null
+              }
+
+              {
+                status === 'ended' ?
+                  <Label
+                    kind={kinds.DANGER}
+                    size={sizes.LARGE}
+                  >
+                    {translate('Ended')}
+                  </Label> :
+                  null
+              }
+
+              {
+                status === 'upcoming' ?
+                  <Label
+                    kind={kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {translate('Upcoming')}
+                  </Label> :
+                  null
+              }
+            </div>
+
+            <div className={styles.overview}>
+              {overview}
+            </div>
+
+            <MetadataAttribution />
+          </div>
+        </div>
+
+        <AddNewSeriesModal
+          isOpen={isNewAddSeriesModalOpen && !isExistingSeries}
+          tvdbId={tvdbId}
+          title={title}
+          year={year}
+          overview={overview}
+          folder={folder}
+          initialSeriesType={seriesType}
+          images={images}
+          onModalClose={this.onAddSeriesModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+AddNewSeriesSearchResult.propTypes = {
+  tvdbId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  titleSlug: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  network: PropTypes.string,
+  originalLanguage: PropTypes.object,
+  status: PropTypes.string.isRequired,
+  overview: PropTypes.string,
+  statistics: PropTypes.object.isRequired,
+  ratings: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
+  seriesType: PropTypes.string.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isExistingSeries: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired
+};
+
+export default AddNewSeriesSearchResult;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.tsx

@@ -1,182 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { useSelector } from 'react-redux';
-import AddSeries from 'AddSeries/AddSeries';
-import HeartRating from 'Components/HeartRating';
-import Icon from 'Components/Icon';
-import Label from 'Components/Label';
-import Link from 'Components/Link/Link';
-import MetadataAttribution from 'Components/MetadataAttribution';
-import { icons, kinds, sizes } from 'Helpers/Props';
-import { Statistics } from 'Series/Series';
-import SeriesGenres from 'Series/SeriesGenres';
-import SeriesPoster from 'Series/SeriesPoster';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
-import translate from 'Utilities/String/translate';
-import AddNewSeriesModal from './AddNewSeriesModal';
-import styles from './AddNewSeriesSearchResult.css';
-
-interface AddNewSeriesSearchResultProps {
-  series: AddSeries;
-}
-
-function AddNewSeriesSearchResult({ series }: AddNewSeriesSearchResultProps) {
-  const {
-    tvdbId,
-    titleSlug,
-    title,
-    year,
-    network,
-    originalLanguage,
-    genres = [],
-    status,
-    statistics = {} as Statistics,
-    ratings,
-    overview,
-    seriesType,
-    images,
-  } = series;
-
-  const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
-  const { isSmallScreen } = useSelector(createDimensionsSelector());
-  const [isNewAddSeriesModalOpen, setIsNewAddSeriesModalOpen] = useState(false);
-
-  const seasonCount = statistics.seasonCount;
-  const handlePress = useCallback(() => {
-    setIsNewAddSeriesModalOpen(true);
-  }, []);
-
-  const handleAddSeriesModalClose = useCallback(() => {
-    setIsNewAddSeriesModalOpen(false);
-  }, []);
-
-  const handleTvdbLinkPress = useCallback((event: React.SyntheticEvent) => {
-    event.stopPropagation();
-  }, []);
-
-  const linkProps = isExistingSeries
-    ? { to: `/series/${titleSlug}` }
-    : { onPress: handlePress };
-  let seasons = translate('OneSeason');
-
-  if (seasonCount > 1) {
-    seasons = translate('CountSeasons', { count: seasonCount });
-  }
-
-  return (
-    <div className={styles.searchResult}>
-      <Link className={styles.underlay} {...linkProps} />
-
-      <div className={styles.overlay}>
-        {isSmallScreen ? null : (
-          <SeriesPoster
-            className={styles.poster}
-            images={images}
-            size={250}
-            overflow={true}
-            lazy={false}
-          />
-        )}
-
-        <div className={styles.content}>
-          <div className={styles.titleRow}>
-            <div className={styles.titleContainer}>
-              <div className={styles.title}>
-                {title}
-
-                {!title.includes(String(year)) && year ? (
-                  <span className={styles.year}>({year})</span>
-                ) : null}
-              </div>
-            </div>
-
-            <div className={styles.icons}>
-              {isExistingSeries ? (
-                <Icon
-                  className={styles.alreadyExistsIcon}
-                  name={icons.CHECK_CIRCLE}
-                  size={36}
-                  title={translate('AlreadyInYourLibrary')}
-                />
-              ) : null}
-
-              <Link
-                className={styles.tvdbLink}
-                to={`https://www.thetvdb.com/?tab=series&id=${tvdbId}`}
-                onPress={handleTvdbLinkPress}
-              >
-                <Icon
-                  className={styles.tvdbLinkIcon}
-                  name={icons.EXTERNAL_LINK}
-                  size={28}
-                />
-              </Link>
-            </div>
-          </div>
-
-          <div>
-            <Label size={sizes.LARGE}>
-              <HeartRating
-                rating={ratings.value}
-                votes={ratings.votes}
-                iconSize={13}
-              />
-            </Label>
-
-            {originalLanguage?.name ? (
-              <Label size={sizes.LARGE}>
-                <Icon name={icons.LANGUAGE} size={13} />
-
-                <span className={styles.originalLanguageName}>
-                  {originalLanguage.name}
-                </span>
-              </Label>
-            ) : null}
-
-            {network ? (
-              <Label size={sizes.LARGE}>
-                <Icon name={icons.NETWORK} size={13} />
-
-                <span className={styles.network}>{network}</span>
-              </Label>
-            ) : null}
-
-            {genres.length > 0 ? (
-              <Label size={sizes.LARGE}>
-                <Icon name={icons.GENRE} size={13} />
-                <SeriesGenres className={styles.genres} genres={genres} />
-              </Label>
-            ) : null}
-
-            {seasonCount ? <Label size={sizes.LARGE}>{seasons}</Label> : null}
-
-            {status === 'ended' ? (
-              <Label kind={kinds.DANGER} size={sizes.LARGE}>
-                {translate('Ended')}
-              </Label>
-            ) : null}
-
-            {status === 'upcoming' ? (
-              <Label kind={kinds.INFO} size={sizes.LARGE}>
-                {translate('Upcoming')}
-              </Label>
-            ) : null}
-          </div>
-
-          <div className={styles.overview}>{overview}</div>
-
-          <MetadataAttribution />
-        </div>
-      </div>
-
-      <AddNewSeriesModal
-        isOpen={isNewAddSeriesModalOpen && !isExistingSeries}
-        series={series}
-        initialSeriesType={seriesType}
-        onModalClose={handleAddSeriesModalClose}
-      />
-    </div>
-  );
-}
-
-export default AddNewSeriesSearchResult;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResultConnector.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
+import AddNewSeriesSearchResult from './AddNewSeriesSearchResult';
+
+function createMapStateToProps() {
+  return createSelector(
+    createExistingSeriesSelector(),
+    createDimensionsSelector(),
+    (isExistingSeries, dimensions) => {
+      return {
+        isExistingSeries,
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(AddNewSeriesSearchResult);

frontend/src/AddSeries/AddNewSeries/useAddSeries.ts

@@ -1,51 +0,0 @@
-import { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import AddSeries from 'AddSeries/AddSeries';
-import { AddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import Series from 'Series/Series';
-import { updateItem } from 'Store/Actions/baseActions';
-
-type AddSeriesPayload = AddSeries & AddSeriesOptions;
-
-export const useLookupSeries = (query: string) => {
-  return useApiQuery<AddSeries[]>({
-    path: '/series/lookup',
-    queryParams: {
-      term: query,
-    },
-    queryOptions: {
-      enabled: !!query,
-      // Disable refetch on window focus to prevent refetching when the user switch tabs
-      refetchOnWindowFocus: false,
-    },
-  });
-};
-
-export const useAddSeries = () => {
-  const dispatch = useDispatch();
-
-  const onAddSuccess = useCallback(
-    (data: Series) => {
-      dispatch(updateItem({ section: 'series', ...data }));
-    },
-    [dispatch]
-  );
-
-  const { isPending, error, mutate } = useApiMutation<Series, AddSeriesPayload>(
-    {
-      path: '/series',
-      method: 'POST',
-      mutationOptions: {
-        onSuccess: onAddSuccess,
-      },
-    }
-  );
-
-  return {
-    isAdding: isPending,
-    addError: error,
-    addSeries: mutate,
-  };
-};

frontend/src/AddSeries/AddSeries.ts

@@ -1,7 +0,0 @@
-import Series from 'Series/Series';
-
-interface AddSeries extends Series {
-  folder: string;
-}
-
-export default AddSeries;

frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js

@@ -0,0 +1,179 @@
+import { reduce } from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import ImportSeriesFooterConnector from './ImportSeriesFooterConnector';
+import ImportSeriesTableConnector from './ImportSeriesTableConnector';
+
+class ImportSeries extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.scrollerRef = React.createRef();
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {}
+    };
+  }
+
+  //
+  // Listeners
+
+  getSelectedIds = () => {
+    return reduce(
+      this.state.selectedState,
+      (result, value, id) => {
+        if (value) {
+          result.push(id);
+        }
+
+        return result;
+      },
+      []
+    );
+  };
+
+  onSelectAllChange = ({ value }) => {
+    // Only select non-dupes
+    this.setState(selectAll(this.state.selectedState, value));
+  };
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  };
+
+  onRemoveSelectedStateItem = (id) => {
+    this.setState((state) => {
+      const selectedState = Object.assign({}, state.selectedState);
+      delete selectedState[id];
+
+      return {
+        ...state,
+        selectedState
+      };
+    });
+  };
+
+  onInputChange = ({ name, value }) => {
+    this.props.onInputChange(this.getSelectedIds(), name, value);
+  };
+
+  onImportPress = () => {
+    this.props.onImportPress(this.getSelectedIds());
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      rootFolderId,
+      path,
+      rootFoldersFetching,
+      rootFoldersPopulated,
+      rootFoldersError,
+      unmappedFolders
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState
+    } = this.state;
+
+    return (
+      <PageContent title={translate('ImportSeries')}>
+        <PageContentBody ref={this.scrollerRef} >
+          {
+            rootFoldersFetching ? <LoadingIndicator /> : null
+          }
+
+          {
+            !rootFoldersFetching && !!rootFoldersError ?
+              <Alert kind={kinds.DANGER}>
+                {translate('RootFoldersLoadError')}
+              </Alert> :
+              null
+          }
+
+          {
+            !rootFoldersError &&
+            !rootFoldersFetching &&
+            rootFoldersPopulated &&
+            !unmappedFolders.length ?
+              <Alert kind={kinds.INFO}>
+                {translate('AllSeriesInRootFolderHaveBeenImported', { path })}
+              </Alert> :
+              null
+          }
+
+          {
+            !rootFoldersError &&
+            !rootFoldersFetching &&
+            rootFoldersPopulated &&
+            !!unmappedFolders.length &&
+            this.scrollerRef.current ?
+              <ImportSeriesTableConnector
+                rootFolderId={rootFolderId}
+                unmappedFolders={unmappedFolders}
+                allSelected={allSelected}
+                allUnselected={allUnselected}
+                selectedState={selectedState}
+                scroller={this.scrollerRef.current}
+                onSelectAllChange={this.onSelectAllChange}
+                onSelectedChange={this.onSelectedChange}
+                onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
+              /> :
+              null
+          }
+        </PageContentBody>
+
+        {
+          !rootFoldersError &&
+          !rootFoldersFetching &&
+          !!unmappedFolders.length ?
+            <ImportSeriesFooterConnector
+              selectedIds={this.getSelectedIds()}
+              onInputChange={this.onInputChange}
+              onImportPress={this.onImportPress}
+            /> :
+            null
+        }
+      </PageContent>
+    );
+  }
+}
+
+ImportSeries.propTypes = {
+  rootFolderId: PropTypes.number.isRequired,
+  path: PropTypes.string,
+  rootFoldersFetching: PropTypes.bool.isRequired,
+  rootFoldersPopulated: PropTypes.bool.isRequired,
+  rootFoldersError: PropTypes.object,
+  unmappedFolders: PropTypes.arrayOf(PropTypes.object),
+  items: PropTypes.arrayOf(PropTypes.object),
+  onInputChange: PropTypes.func.isRequired,
+  onImportPress: PropTypes.func.isRequired
+};
+
+ImportSeries.defaultProps = {
+  unmappedFolders: []
+};
+
+export default ImportSeries;

frontend/src/AddSeries/ImportSeries/Import/ImportSeries.tsx

@@ -1,127 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router';
-import {
-  setAddSeriesOption,
-  useAddSeriesOption,
-} from 'AddSeries/addSeriesOptionsStore';
-import { SelectProvider } from 'App/SelectContext';
-import AppState from 'App/State/AppState';
-import Alert from 'Components/Alert';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import { kinds } from 'Helpers/Props';
-import { clearImportSeries } from 'Store/Actions/importSeriesActions';
-import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
-import translate from 'Utilities/String/translate';
-import ImportSeriesFooter from './ImportSeriesFooter';
-import ImportSeriesTable from './ImportSeriesTable';
-
-function ImportSeries() {
-  const dispatch = useDispatch();
-  const { rootFolderId: rootFolderIdString } = useParams<{
-    rootFolderId: string;
-  }>();
-  const rootFolderId = parseInt(rootFolderIdString);
-
-  const {
-    isFetching: rootFoldersFetching,
-    isPopulated: rootFoldersPopulated,
-    error: rootFoldersError,
-    items: rootFolders,
-  } = useSelector((state: AppState) => state.rootFolders);
-
-  const { path, unmappedFolders } = useMemo(() => {
-    const rootFolder = rootFolders.find((r) => r.id === rootFolderId);
-
-    return {
-      path: rootFolder?.path ?? '',
-      unmappedFolders:
-        rootFolder?.unmappedFolders.map((unmappedFolders) => {
-          return {
-            ...unmappedFolders,
-            id: unmappedFolders.name,
-          };
-        }) ?? [],
-    };
-  }, [rootFolders, rootFolderId]);
-
-  const qualityProfiles = useSelector(
-    (state: AppState) => state.settings.qualityProfiles.items
-  );
-
-  const defaultQualityProfileId = useAddSeriesOption('qualityProfileId');
-
-  const scrollerRef = useRef<HTMLDivElement>(null);
-
-  const items = useMemo(() => {
-    return unmappedFolders.map((unmappedFolder) => {
-      return {
-        ...unmappedFolder,
-        id: unmappedFolder.name,
-      };
-    });
-  }, [unmappedFolders]);
-
-  useEffect(() => {
-    dispatch(fetchRootFolders({ id: rootFolderId, timeout: false }));
-
-    return () => {
-      dispatch(clearImportSeries());
-    };
-  }, [rootFolderId, dispatch]);
-
-  useEffect(() => {
-    if (
-      !defaultQualityProfileId ||
-      !qualityProfiles.some((p) => p.id === defaultQualityProfileId)
-    ) {
-      setAddSeriesOption('qualityProfileId', qualityProfiles[0].id);
-    }
-  }, [defaultQualityProfileId, qualityProfiles, dispatch]);
-
-  return (
-    <SelectProvider items={items}>
-      <PageContent title={translate('ImportSeries')}>
-        <PageContentBody ref={scrollerRef}>
-          {rootFoldersFetching ? <LoadingIndicator /> : null}
-
-          {!rootFoldersFetching && !!rootFoldersError ? (
-            <Alert kind={kinds.DANGER}>
-              {translate('RootFoldersLoadError')}
-            </Alert>
-          ) : null}
-
-          {!rootFoldersError &&
-          !rootFoldersFetching &&
-          rootFoldersPopulated &&
-          !unmappedFolders.length ? (
-            <Alert kind={kinds.INFO}>
-              {translate('AllSeriesInRootFolderHaveBeenImported', { path })}
-            </Alert>
-          ) : null}
-
-          {!rootFoldersError &&
-          !rootFoldersFetching &&
-          rootFoldersPopulated &&
-          !!unmappedFolders.length &&
-          scrollerRef.current ? (
-            <ImportSeriesTable
-              unmappedFolders={unmappedFolders}
-              scrollerRef={scrollerRef}
-            />
-          ) : null}
-        </PageContentBody>
-
-        {!rootFoldersError &&
-        !rootFoldersFetching &&
-        !!unmappedFolders.length ? (
-          <ImportSeriesFooter />
-        ) : null}
-      </PageContent>
-    </SelectProvider>
-  );
-}
-
-export default ImportSeries;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesConnector.js

@@ -0,0 +1,153 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createRouteMatchShape from 'Helpers/Props/Shapes/createRouteMatchShape';
+import { setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
+import { clearImportSeries, importSeries, setImportSeriesValue } from 'Store/Actions/importSeriesActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import ImportSeries from './ImportSeries';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { match }) => match,
+    (state) => state.rootFolders,
+    (state) => state.addSeries,
+    (state) => state.importSeries,
+    (state) => state.settings.qualityProfiles,
+    (
+      match,
+      rootFolders,
+      addSeries,
+      importSeriesState,
+      qualityProfiles
+    ) => {
+      const {
+        isFetching: rootFoldersFetching,
+        isPopulated: rootFoldersPopulated,
+        error: rootFoldersError,
+        items
+      } = rootFolders;
+
+      const rootFolderId = parseInt(match.params.rootFolderId);
+
+      const result = {
+        rootFolderId,
+        rootFoldersFetching,
+        rootFoldersPopulated,
+        rootFoldersError,
+        qualityProfiles: qualityProfiles.items,
+        defaultQualityProfileId: addSeries.defaults.qualityProfileId
+      };
+
+      if (items.length) {
+        const rootFolder = _.find(items, { id: rootFolderId });
+
+        return {
+          ...result,
+          ...rootFolder,
+          items: importSeriesState.items
+        };
+      }
+
+      return result;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSetImportSeriesValue: setImportSeriesValue,
+  dispatchImportSeries: importSeries,
+  dispatchClearImportSeries: clearImportSeries,
+  dispatchFetchRootFolders: fetchRootFolders,
+  dispatchSetAddSeriesDefault: setAddSeriesDefault
+};
+
+class ImportSeriesConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      rootFolderId,
+      qualityProfiles,
+      defaultQualityProfileId,
+      dispatchFetchRootFolders,
+      dispatchSetAddSeriesDefault
+    } = this.props;
+
+    dispatchFetchRootFolders({ id: rootFolderId, timeout: false });
+
+    let setDefaults = false;
+    const setDefaultPayload = {};
+
+    if (
+      !defaultQualityProfileId ||
+      !qualityProfiles.some((p) => p.id === defaultQualityProfileId)
+    ) {
+      setDefaults = true;
+      setDefaultPayload.qualityProfileId = qualityProfiles[0].id;
+    }
+
+    if (setDefaults) {
+      dispatchSetAddSeriesDefault(setDefaultPayload);
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.dispatchClearImportSeries();
+  }
+
+  //
+  // Listeners
+
+  onInputChange = (ids, name, value) => {
+    this.props.dispatchSetAddSeriesDefault({ [name]: value });
+
+    ids.forEach((id) => {
+      this.props.dispatchSetImportSeriesValue({
+        id,
+        [name]: value
+      });
+    });
+  };
+
+  onImportPress = (ids) => {
+    this.props.dispatchImportSeries({ ids });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportSeries
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onImportPress={this.onImportPress}
+      />
+    );
+  }
+}
+
+const routeMatchShape = createRouteMatchShape({
+  rootFolderId: PropTypes.string.isRequired
+});
+
+ImportSeriesConnector.propTypes = {
+  match: routeMatchShape.isRequired,
+  rootFolderId: PropTypes.number.isRequired,
+  rootFoldersFetching: PropTypes.bool.isRequired,
+  rootFoldersPopulated: PropTypes.bool.isRequired,
+  qualityProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  defaultQualityProfileId: PropTypes.number.isRequired,
+  dispatchSetImportSeriesValue: PropTypes.func.isRequired,
+  dispatchImportSeries: PropTypes.func.isRequired,
+  dispatchClearImportSeries: PropTypes.func.isRequired,
+  dispatchFetchRootFolders: PropTypes.func.isRequired,
+  dispatchSetAddSeriesDefault: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesConnector);

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.css

@@ -1,10 +1,18 @@
 .inputContainer {
   margin-right: 20px;
   min-width: 150px;
+
+  div {
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
 }
 
 .label {
-  margin-bottom: 10px;
+  margin-bottom: 3px;
   font-weight: bold;
 }
 

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.js

@@ -0,0 +1,300 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import CheckInput from 'Components/Form/CheckInput';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContentFooter from 'Components/Page/PageContentFooter';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ImportSeriesFooter.css';
+
+const MIXED = 'mixed';
+
+class ImportSeriesFooter extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const {
+      defaultMonitor,
+      defaultQualityProfileId,
+      defaultSeasonFolder,
+      defaultSeriesType
+    } = props;
+
+    this.state = {
+      monitor: defaultMonitor,
+      qualityProfileId: defaultQualityProfileId,
+      seriesType: defaultSeriesType,
+      seasonFolder: defaultSeasonFolder
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      defaultMonitor,
+      defaultQualityProfileId,
+      defaultSeriesType,
+      defaultSeasonFolder,
+      isMonitorMixed,
+      isQualityProfileIdMixed,
+      isSeriesTypeMixed,
+      isSeasonFolderMixed
+    } = this.props;
+
+    const {
+      monitor,
+      qualityProfileId,
+      seriesType,
+      seasonFolder
+    } = this.state;
+
+    const newState = {};
+
+    if (isMonitorMixed && monitor !== MIXED) {
+      newState.monitor = MIXED;
+    } else if (!isMonitorMixed && monitor !== defaultMonitor) {
+      newState.monitor = defaultMonitor;
+    }
+
+    if (isQualityProfileIdMixed && qualityProfileId !== MIXED) {
+      newState.qualityProfileId = MIXED;
+    } else if (!isQualityProfileIdMixed && qualityProfileId !== defaultQualityProfileId) {
+      newState.qualityProfileId = defaultQualityProfileId;
+    }
+
+    if (isSeriesTypeMixed && seriesType !== MIXED) {
+      newState.seriesType = MIXED;
+    } else if (!isSeriesTypeMixed && seriesType !== defaultSeriesType) {
+      newState.seriesType = defaultSeriesType;
+    }
+
+    if (isSeasonFolderMixed && seasonFolder != null) {
+      newState.seasonFolder = null;
+    } else if (!isSeasonFolderMixed && seasonFolder !== defaultSeasonFolder) {
+      newState.seasonFolder = defaultSeasonFolder;
+    }
+
+    if (!_.isEmpty(newState)) {
+      this.setState(newState);
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ [name]: value });
+    this.props.onInputChange({ name, value });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedCount,
+      isImporting,
+      isLookingUpSeries,
+      isMonitorMixed,
+      isQualityProfileIdMixed,
+      isSeriesTypeMixed,
+      hasUnsearchedItems,
+      importError,
+      onImportPress,
+      onLookupPress,
+      onCancelLookupPress
+    } = this.props;
+
+    const {
+      monitor,
+      qualityProfileId,
+      seriesType,
+      seasonFolder
+    } = this.state;
+
+    return (
+      <PageContentFooter>
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            {translate('Monitor')}
+          </div>
+
+          <FormInputGroup
+            type={inputTypes.MONITOR_EPISODES_SELECT}
+            name="monitor"
+            value={monitor}
+            isDisabled={!selectedCount}
+            includeMixed={isMonitorMixed}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            {translate('QualityProfile')}
+          </div>
+
+          <FormInputGroup
+            type={inputTypes.QUALITY_PROFILE_SELECT}
+            name="qualityProfileId"
+            value={qualityProfileId}
+            isDisabled={!selectedCount}
+            includeMixed={isQualityProfileIdMixed}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            {translate('SeriesType')}
+          </div>
+
+          <FormInputGroup
+            type={inputTypes.SERIES_TYPE_SELECT}
+            name="seriesType"
+            value={seriesType}
+            isDisabled={!selectedCount}
+            includeMixed={isSeriesTypeMixed}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <div className={styles.label}>
+            {translate('SeasonFolder')}
+          </div>
+
+          <CheckInput
+            name="seasonFolder"
+            value={seasonFolder}
+            isDisabled={!selectedCount}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div>
+          <div className={styles.label}>
+            &nbsp;
+          </div>
+
+          <div className={styles.importButtonContainer}>
+            <SpinnerButton
+              className={styles.importButton}
+              kind={kinds.PRIMARY}
+              isSpinning={isImporting}
+              isDisabled={!selectedCount || isLookingUpSeries}
+              onPress={onImportPress}
+            >
+              {translate('ImportCountSeries', { selectedCount })}
+            </SpinnerButton>
+
+            {
+              isLookingUpSeries ?
+                <Button
+                  className={styles.loadingButton}
+                  kind={kinds.WARNING}
+                  onPress={onCancelLookupPress}
+                >
+                  {translate('CancelProcessing')}
+                </Button> :
+                null
+            }
+
+            {
+              hasUnsearchedItems ?
+                <Button
+                  className={styles.loadingButton}
+                  kind={kinds.SUCCESS}
+                  onPress={onLookupPress}
+                >
+                  {translate('StartProcessing')}
+                </Button> :
+                null
+            }
+
+            {
+              isLookingUpSeries ?
+                <LoadingIndicator
+                  className={styles.loading}
+                  size={24}
+                /> :
+                null
+            }
+
+            {
+              isLookingUpSeries ?
+                translate('ProcessingFolders') :
+                null
+            }
+
+            {
+              importError ?
+                <Popover
+                  anchor={
+                    <Icon
+                      className={styles.importError}
+                      name={icons.WARNING}
+                      kind={kinds.WARNING}
+                    />
+                  }
+                  title={translate('ImportErrors')}
+                  body={
+                    <ul>
+                      {
+                        Array.isArray(importError.responseJSON) ?
+                          importError.responseJSON.map((error, index) => {
+                            return (
+                              <li key={index}>
+                                {error.errorMessage}
+                              </li>
+                            );
+                          }) :
+                          <li>
+                            {
+                              JSON.stringify(importError.responseJSON)
+                            }
+                          </li>
+                      }
+                    </ul>
+                  }
+                  position={tooltipPositions.RIGHT}
+                /> :
+                null
+            }
+          </div>
+        </div>
+      </PageContentFooter>
+    );
+  }
+}
+
+ImportSeriesFooter.propTypes = {
+  selectedCount: PropTypes.number.isRequired,
+  isImporting: PropTypes.bool.isRequired,
+  isLookingUpSeries: PropTypes.bool.isRequired,
+  defaultMonitor: PropTypes.string.isRequired,
+  defaultQualityProfileId: PropTypes.number,
+  defaultSeriesType: PropTypes.string.isRequired,
+  defaultSeasonFolder: PropTypes.bool.isRequired,
+  isMonitorMixed: PropTypes.bool.isRequired,
+  isQualityProfileIdMixed: PropTypes.bool.isRequired,
+  isSeriesTypeMixed: PropTypes.bool.isRequired,
+  isSeasonFolderMixed: PropTypes.bool.isRequired,
+  hasUnsearchedItems: PropTypes.bool.isRequired,
+  importError: PropTypes.object,
+  onInputChange: PropTypes.func.isRequired,
+  onImportPress: PropTypes.func.isRequired,
+  onLookupPress: PropTypes.func.isRequired,
+  onCancelLookupPress: PropTypes.func.isRequired
+};
+
+export default ImportSeriesFooter;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.tsx

@@ -1,314 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  AddSeriesOptions,
-  setAddSeriesOption,
-  useAddSeriesOptions,
-} from 'AddSeries/addSeriesOptionsStore';
-import { useSelect } from 'App/SelectContext';
-import AppState from 'App/State/AppState';
-import CheckInput from 'Components/Form/CheckInput';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import PageContentFooter from 'Components/Page/PageContentFooter';
-import Popover from 'Components/Tooltip/Popover';
-import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
-import { SeriesMonitor, SeriesType } from 'Series/Series';
-import {
-  cancelLookupSeries,
-  importSeries,
-  lookupUnsearchedSeries,
-  setImportSeriesValue,
-} from 'Store/Actions/importSeriesActions';
-import { InputChanged } from 'typings/inputs';
-import translate from 'Utilities/String/translate';
-import getSelectedIds from 'Utilities/Table/getSelectedIds';
-import styles from './ImportSeriesFooter.css';
-
-type MixedType = 'mixed';
-
-function ImportSeriesFooter() {
-  const dispatch = useDispatch();
-  const {
-    monitor: defaultMonitor,
-    qualityProfileId: defaultQualityProfileId,
-    seriesType: defaultSeriesType,
-    seasonFolder: defaultSeasonFolder,
-  } = useAddSeriesOptions();
-
-  const { isLookingUpSeries, isImporting, items, importError } = useSelector(
-    (state: AppState) => state.importSeries
-  );
-
-  const [monitor, setMonitor] = useState<SeriesMonitor | MixedType>(
-    defaultMonitor
-  );
-  const [qualityProfileId, setQualityProfileId] = useState<number | MixedType>(
-    defaultQualityProfileId
-  );
-  const [seriesType, setSeriesType] = useState<SeriesType | MixedType>(
-    defaultSeriesType
-  );
-  const [seasonFolder, setSeasonFolder] = useState<boolean | MixedType>(
-    defaultSeasonFolder
-  );
-
-  const [selectState] = useSelect();
-
-  const selectedIds = useMemo(() => {
-    return getSelectedIds(selectState.selectedState, (id) => id);
-  }, [selectState.selectedState]);
-
-  const {
-    hasUnsearchedItems,
-    isMonitorMixed,
-    isQualityProfileIdMixed,
-    isSeriesTypeMixed,
-    isSeasonFolderMixed,
-  } = useMemo(() => {
-    let isMonitorMixed = false;
-    let isQualityProfileIdMixed = false;
-    let isSeriesTypeMixed = false;
-    let isSeasonFolderMixed = false;
-    let hasUnsearchedItems = false;
-
-    items.forEach((item) => {
-      if (item.monitor !== defaultMonitor) {
-        isMonitorMixed = true;
-      }
-
-      if (item.qualityProfileId !== defaultQualityProfileId) {
-        isQualityProfileIdMixed = true;
-      }
-
-      if (item.seriesType !== defaultSeriesType) {
-        isSeriesTypeMixed = true;
-      }
-
-      if (item.seasonFolder !== defaultSeasonFolder) {
-        isSeasonFolderMixed = true;
-      }
-
-      if (!item.isPopulated) {
-        hasUnsearchedItems = true;
-      }
-    });
-
-    return {
-      hasUnsearchedItems: !isLookingUpSeries && hasUnsearchedItems,
-      isMonitorMixed,
-      isQualityProfileIdMixed,
-      isSeriesTypeMixed,
-      isSeasonFolderMixed,
-    };
-  }, [
-    defaultMonitor,
-    defaultQualityProfileId,
-    defaultSeasonFolder,
-    defaultSeriesType,
-    items,
-    isLookingUpSeries,
-  ]);
-
-  const handleInputChange = useCallback(
-    ({ name, value }: InputChanged<string | number | boolean | number[]>) => {
-      if (name === 'monitor') {
-        setMonitor(value as SeriesMonitor);
-      } else if (name === 'qualityProfileId') {
-        setQualityProfileId(value as number);
-      } else if (name === 'seriesType') {
-        setSeriesType(value as SeriesType);
-      } else if (name === 'seasonFolder') {
-        setSeasonFolder(value as boolean);
-      }
-
-      setAddSeriesOption(name as keyof AddSeriesOptions, value);
-
-      selectedIds.forEach((id) => {
-        dispatch(
-          // @ts-expect-error - actions are not typed
-          setImportSeriesValue({
-            id,
-            [name]: value,
-          })
-        );
-      });
-    },
-    [selectedIds, dispatch]
-  );
-
-  const handleLookupPress = useCallback(() => {
-    dispatch(lookupUnsearchedSeries());
-  }, [dispatch]);
-
-  const handleCancelLookupPress = useCallback(() => {
-    dispatch(cancelLookupSeries());
-  }, [dispatch]);
-
-  const handleImportPress = useCallback(() => {
-    dispatch(importSeries({ ids: selectedIds }));
-  }, [selectedIds, dispatch]);
-
-  useEffect(() => {
-    if (isMonitorMixed && monitor !== 'mixed') {
-      setMonitor('mixed');
-    } else if (!isMonitorMixed && monitor !== defaultMonitor) {
-      setMonitor(defaultMonitor);
-    }
-  }, [defaultMonitor, isMonitorMixed, monitor]);
-
-  useEffect(() => {
-    if (isQualityProfileIdMixed && qualityProfileId !== 'mixed') {
-      setQualityProfileId('mixed');
-    } else if (
-      !isQualityProfileIdMixed &&
-      qualityProfileId !== defaultQualityProfileId
-    ) {
-      setQualityProfileId(defaultQualityProfileId);
-    }
-  }, [defaultQualityProfileId, isQualityProfileIdMixed, qualityProfileId]);
-
-  useEffect(() => {
-    if (isSeriesTypeMixed && seriesType !== 'mixed') {
-      setSeriesType('mixed');
-    } else if (!isSeriesTypeMixed && seriesType !== defaultSeriesType) {
-      setSeriesType(defaultSeriesType);
-    }
-  }, [defaultSeriesType, isSeriesTypeMixed, seriesType]);
-
-  useEffect(() => {
-    if (isSeasonFolderMixed && seasonFolder !== 'mixed') {
-      setSeasonFolder('mixed');
-    } else if (!isSeasonFolderMixed && seasonFolder !== defaultSeasonFolder) {
-      setSeasonFolder(defaultSeasonFolder);
-    }
-  }, [defaultSeasonFolder, isSeasonFolderMixed, seasonFolder]);
-
-  const selectedCount = selectedIds.length;
-
-  return (
-    <PageContentFooter>
-      <div className={styles.inputContainer}>
-        <div className={styles.label}>{translate('Monitor')}</div>
-
-        <FormInputGroup
-          type={inputTypes.MONITOR_EPISODES_SELECT}
-          name="monitor"
-          value={monitor}
-          isDisabled={!selectedCount}
-          includeMixed={isMonitorMixed}
-          onChange={handleInputChange}
-        />
-      </div>
-
-      <div className={styles.inputContainer}>
-        <div className={styles.label}>{translate('QualityProfile')}</div>
-
-        <FormInputGroup
-          type={inputTypes.QUALITY_PROFILE_SELECT}
-          name="qualityProfileId"
-          value={qualityProfileId}
-          isDisabled={!selectedCount}
-          includeMixed={isQualityProfileIdMixed}
-          onChange={handleInputChange}
-        />
-      </div>
-
-      <div className={styles.inputContainer}>
-        <div className={styles.label}>{translate('SeriesType')}</div>
-
-        <FormInputGroup
-          type={inputTypes.SERIES_TYPE_SELECT}
-          name="seriesType"
-          value={seriesType}
-          isDisabled={!selectedCount}
-          includeMixed={isSeriesTypeMixed}
-          onChange={handleInputChange}
-        />
-      </div>
-
-      <div className={styles.inputContainer}>
-        <div className={styles.label}>{translate('SeasonFolder')}</div>
-
-        <CheckInput
-          name="seasonFolder"
-          value={seasonFolder}
-          isDisabled={!selectedCount}
-          onChange={handleInputChange}
-        />
-      </div>
-
-      <div>
-        <div className={styles.label}>&nbsp;</div>
-
-        <div className={styles.importButtonContainer}>
-          <SpinnerButton
-            className={styles.importButton}
-            kind={kinds.PRIMARY}
-            isSpinning={isImporting}
-            isDisabled={!selectedCount || isLookingUpSeries}
-            onPress={handleImportPress}
-          >
-            {translate('ImportCountSeries', { selectedCount })}
-          </SpinnerButton>
-
-          {isLookingUpSeries ? (
-            <Button
-              className={styles.loadingButton}
-              kind={kinds.WARNING}
-              onPress={handleCancelLookupPress}
-            >
-              {translate('CancelProcessing')}
-            </Button>
-          ) : null}
-
-          {hasUnsearchedItems ? (
-            <Button
-              className={styles.loadingButton}
-              kind={kinds.SUCCESS}
-              onPress={handleLookupPress}
-            >
-              {translate('StartProcessing')}
-            </Button>
-          ) : null}
-
-          {isLookingUpSeries ? (
-            <LoadingIndicator className={styles.loading} size={24} />
-          ) : null}
-
-          {isLookingUpSeries ? translate('ProcessingFolders') : null}
-
-          {importError ? (
-            <Popover
-              anchor={
-                <Icon
-                  className={styles.importError}
-                  name={icons.WARNING}
-                  kind={kinds.WARNING}
-                />
-              }
-              title={translate('ImportErrors')}
-              body={
-                <ul>
-                  {Array.isArray(importError.responseJSON) ? (
-                    importError.responseJSON.map((error, index) => {
-                      return <li key={index}>{error.errorMessage}</li>;
-                    })
-                  ) : (
-                    <li>{JSON.stringify(importError.responseJSON)}</li>
-                  )}
-                </ul>
-              }
-              position={tooltipPositions.RIGHT}
-            />
-          ) : null}
-        </div>
-      </div>
-    </PageContentFooter>
-  );
-}
-
-export default ImportSeriesFooter;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooterConnector.js

@@ -0,0 +1,63 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { cancelLookupSeries, lookupUnsearchedSeries } from 'Store/Actions/importSeriesActions';
+import ImportSeriesFooter from './ImportSeriesFooter';
+
+function isMixed(items, selectedIds, defaultValue, key) {
+  return _.some(items, (series) => {
+    return selectedIds.indexOf(series.id) > -1 && series[key] !== defaultValue;
+  });
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addSeries,
+    (state) => state.importSeries,
+    (state, { selectedIds }) => selectedIds,
+    (addSeries, importSeries, selectedIds) => {
+      const {
+        monitor: defaultMonitor,
+        qualityProfileId: defaultQualityProfileId,
+        seriesType: defaultSeriesType,
+        seasonFolder: defaultSeasonFolder
+      } = addSeries.defaults;
+
+      const {
+        isLookingUpSeries,
+        isImporting,
+        items,
+        importError
+      } = importSeries;
+
+      const isMonitorMixed = isMixed(items, selectedIds, defaultMonitor, 'monitor');
+      const isQualityProfileIdMixed = isMixed(items, selectedIds, defaultQualityProfileId, 'qualityProfileId');
+      const isSeriesTypeMixed = isMixed(items, selectedIds, defaultSeriesType, 'seriesType');
+      const isSeasonFolderMixed = isMixed(items, selectedIds, defaultSeasonFolder, 'seasonFolder');
+      const hasUnsearchedItems = !isLookingUpSeries && items.some((item) => !item.isPopulated);
+
+      return {
+        selectedCount: selectedIds.length,
+        isLookingUpSeries,
+        isImporting,
+        defaultMonitor,
+        defaultQualityProfileId,
+        defaultSeriesType,
+        defaultSeasonFolder,
+        isMonitorMixed,
+        isQualityProfileIdMixed,
+        isSeriesTypeMixed,
+        isSeasonFolderMixed,
+        importError,
+        hasUnsearchedItems
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  onLookupPress: lookupUnsearchedSeries,
+  onCancelLookupPress: cancelLookupSeries
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesFooter);

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesHeader.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
 import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
@@ -7,21 +8,16 @@ import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
 import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, tooltipPositions } from 'Helpers/Props';
-import { CheckInputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
 import styles from './ImportSeriesHeader.css';
 
-interface ImportSeriesHeaderProps {
-  allSelected: boolean;
-  allUnselected: boolean;
-  onSelectAllChange: (change: CheckInputChanged) => void;
-}
+function ImportSeriesHeader(props) {
+  const {
+    allSelected,
+    allUnselected,
+    onSelectAllChange
+  } = props;
 
-function ImportSeriesHeader({
-  allSelected,
-  allUnselected,
-  onSelectAllChange,
-}: ImportSeriesHeaderProps) {
   return (
     <VirtualTableHeader>
       <VirtualTableSelectAllHeaderCell
@@ -30,15 +26,26 @@ function ImportSeriesHeader({
         onSelectAllChange={onSelectAllChange}
       />
 
-      <VirtualTableHeaderCell className={styles.folder} name="folder">
+      <VirtualTableHeaderCell
+        className={styles.folder}
+        name="folder"
+      >
         {translate('Folder')}
       </VirtualTableHeaderCell>
 
-      <VirtualTableHeaderCell className={styles.monitor} name="monitor">
+      <VirtualTableHeaderCell
+        className={styles.monitor}
+        name="monitor"
+      >
         {translate('Monitor')}
 
         <Popover
-          anchor={<Icon className={styles.detailsIcon} name={icons.INFO} />}
+          anchor={
+            <Icon
+              className={styles.detailsIcon}
+              name={icons.INFO}
+            />
+          }
           title={translate('MonitoringOptions')}
           body={<SeriesMonitoringOptionsPopoverContent />}
           position={tooltipPositions.RIGHT}
@@ -52,11 +59,19 @@ function ImportSeriesHeader({
         {translate('QualityProfile')}
       </VirtualTableHeaderCell>
 
-      <VirtualTableHeaderCell className={styles.seriesType} name="seriesType">
+      <VirtualTableHeaderCell
+        className={styles.seriesType}
+        name="seriesType"
+      >
         {translate('SeriesType')}
 
         <Popover
-          anchor={<Icon className={styles.detailsIcon} name={icons.INFO} />}
+          anchor={
+            <Icon
+              className={styles.detailsIcon}
+              name={icons.INFO}
+            />
+          }
           title={translate('SeriesType')}
           body={<SeriesTypePopoverContent />}
           position={tooltipPositions.RIGHT}
@@ -70,11 +85,20 @@ function ImportSeriesHeader({
         {translate('SeasonFolder')}
       </VirtualTableHeaderCell>
 
-      <VirtualTableHeaderCell className={styles.series} name="series">
+      <VirtualTableHeaderCell
+        className={styles.series}
+        name="series"
+      >
         {translate('Series')}
       </VirtualTableHeaderCell>
     </VirtualTableHeader>
   );
 }
 
+ImportSeriesHeader.propTypes = {
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired
+};
+
 export default ImportSeriesHeader;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRow.js

@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
+import { inputTypes } from 'Helpers/Props';
+import ImportSeriesSelectSeriesConnector from './SelectSeries/ImportSeriesSelectSeriesConnector';
+import styles from './ImportSeriesRow.css';
+
+function ImportSeriesRow(props) {
+  const {
+    id,
+    relativePath,
+    monitor,
+    qualityProfileId,
+    seasonFolder,
+    seriesType,
+    selectedSeries,
+    isExistingSeries,
+    isSelected,
+    onSelectedChange,
+    onInputChange
+  } = props;
+
+  return (
+    <>
+      <VirtualTableSelectCell
+        inputClassName={styles.selectInput}
+        id={id}
+        isSelected={isSelected}
+        isDisabled={!selectedSeries || isExistingSeries}
+        onSelectedChange={onSelectedChange}
+      />
+
+      <VirtualTableRowCell className={styles.folder}>
+        {relativePath}
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.monitor}>
+        <FormInputGroup
+          type={inputTypes.MONITOR_EPISODES_SELECT}
+          name="monitor"
+          value={monitor}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.qualityProfile}>
+        <FormInputGroup
+          type={inputTypes.QUALITY_PROFILE_SELECT}
+          name="qualityProfileId"
+          value={qualityProfileId}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.seriesType}>
+        <FormInputGroup
+          type={inputTypes.SERIES_TYPE_SELECT}
+          name="seriesType"
+          value={seriesType}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.seasonFolder}>
+        <FormInputGroup
+          type={inputTypes.CHECK}
+          name="seasonFolder"
+          value={seasonFolder}
+          onChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+
+      <VirtualTableRowCell className={styles.series}>
+        <ImportSeriesSelectSeriesConnector
+          id={id}
+          isExistingSeries={isExistingSeries}
+          onInputChange={onInputChange}
+        />
+      </VirtualTableRowCell>
+    </>
+  );
+}
+
+ImportSeriesRow.propTypes = {
+  id: PropTypes.string.isRequired,
+  relativePath: PropTypes.string.isRequired,
+  monitor: PropTypes.string.isRequired,
+  qualityProfileId: PropTypes.number.isRequired,
+  seriesType: PropTypes.string.isRequired,
+  seasonFolder: PropTypes.bool.isRequired,
+  selectedSeries: PropTypes.object,
+  isExistingSeries: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isSelected: PropTypes.bool,
+  onSelectedChange: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired
+};
+
+ImportSeriesRow.defaultsProps = {
+  items: []
+};
+
+export default ImportSeriesRow;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRow.tsx

@@ -1,135 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import { useSelect } from 'App/SelectContext';
-import AppState from 'App/State/AppState';
-import { ImportSeries } from 'App/State/ImportSeriesAppState';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
-import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
-import { inputTypes } from 'Helpers/Props';
-import { setImportSeriesValue } from 'Store/Actions/importSeriesActions';
-import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
-import { InputChanged } from 'typings/inputs';
-import { SelectStateInputProps } from 'typings/props';
-import ImportSeriesSelectSeries from './SelectSeries/ImportSeriesSelectSeries';
-import styles from './ImportSeriesRow.css';
-
-function createItemSelector(id: string) {
-  return createSelector(
-    (state: AppState) => state.importSeries.items,
-    (items) => {
-      return (
-        items.find((item) => {
-          return item.id === id;
-        }) || ({} as ImportSeries)
-      );
-    }
-  );
-}
-
-interface ImportSeriesRowProps {
-  id: string;
-}
-
-function ImportSeriesRow({ id }: ImportSeriesRowProps) {
-  const dispatch = useDispatch();
-
-  const {
-    relativePath,
-    monitor,
-    qualityProfileId,
-    seasonFolder,
-    seriesType,
-    selectedSeries,
-  } = useSelector(createItemSelector(id));
-
-  const isExistingSeries = useSelector(
-    createExistingSeriesSelector(selectedSeries?.tvdbId)
-  );
-
-  const [selectState, selectDispatch] = useSelect();
-
-  const handleInputChange = useCallback(
-    ({ name, value }: InputChanged) => {
-      dispatch(
-        // @ts-expect-error - actions are not typed
-        setImportSeriesValue({
-          id,
-          [name]: value,
-        })
-      );
-    },
-    [id, dispatch]
-  );
-
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey }: SelectStateInputProps) => {
-      selectDispatch({
-        type: 'toggleSelected',
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [selectDispatch]
-  );
-
-  return (
-    <>
-      <VirtualTableSelectCell
-        inputClassName={styles.selectInput}
-        id={id}
-        isSelected={selectState.selectedState[id]}
-        isDisabled={!selectedSeries || isExistingSeries}
-        onSelectedChange={handleSelectedChange}
-      />
-
-      <VirtualTableRowCell className={styles.folder}>
-        {relativePath}
-      </VirtualTableRowCell>
-
-      <VirtualTableRowCell className={styles.monitor}>
-        <FormInputGroup
-          type={inputTypes.MONITOR_EPISODES_SELECT}
-          name="monitor"
-          value={monitor}
-          onChange={handleInputChange}
-        />
-      </VirtualTableRowCell>
-
-      <VirtualTableRowCell className={styles.qualityProfile}>
-        <FormInputGroup
-          type={inputTypes.QUALITY_PROFILE_SELECT}
-          name="qualityProfileId"
-          value={qualityProfileId}
-          onChange={handleInputChange}
-        />
-      </VirtualTableRowCell>
-
-      <VirtualTableRowCell className={styles.seriesType}>
-        <FormInputGroup
-          type={inputTypes.SERIES_TYPE_SELECT}
-          name="seriesType"
-          value={seriesType}
-          onChange={handleInputChange}
-        />
-      </VirtualTableRowCell>
-
-      <VirtualTableRowCell className={styles.seasonFolder}>
-        <FormInputGroup
-          type={inputTypes.CHECK}
-          name="seasonFolder"
-          value={seasonFolder}
-          onChange={handleInputChange}
-        />
-      </VirtualTableRowCell>
-
-      <VirtualTableRowCell className={styles.series}>
-        <ImportSeriesSelectSeries id={id} onInputChange={handleInputChange} />
-      </VirtualTableRowCell>
-    </>
-  );
-}
-
-export default ImportSeriesRow;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRowConnector.js

@@ -0,0 +1,89 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setImportSeriesValue } from 'Store/Actions/importSeriesActions';
+import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
+import ImportSeriesRow from './ImportSeriesRow';
+
+function createImportSeriesItemSelector() {
+  return createSelector(
+    (state, { id }) => id,
+    (state) => state.importSeries.items,
+    (id, items) => {
+      return _.find(items, { id }) || {};
+    }
+  );
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    createImportSeriesItemSelector(),
+    createAllSeriesSelector(),
+    (item, series) => {
+      const selectedSeries = item && item.selectedSeries;
+      const isExistingSeries = !!selectedSeries && _.some(series, { tvdbId: selectedSeries.tvdbId });
+
+      return {
+        ...item,
+        isExistingSeries
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setImportSeriesValue
+};
+
+class ImportSeriesRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setImportSeriesValue({
+      id: this.props.id,
+      [name]: value
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    // Don't show the row until we have the information we require for it.
+
+    const {
+      items,
+      monitor,
+      seriesType,
+      seasonFolder
+    } = this.props;
+
+    if (!items || !monitor || !seriesType || !seasonFolder == null) {
+      return null;
+    }
+
+    return (
+      <ImportSeriesRow
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onSeriesSelect={this.onSeriesSelect}
+      />
+    );
+  }
+}
+
+ImportSeriesRowConnector.propTypes = {
+  rootFolderId: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
+  monitor: PropTypes.string,
+  seriesType: PropTypes.string,
+  seasonFolder: PropTypes.bool,
+  items: PropTypes.arrayOf(PropTypes.object),
+  setImportSeriesValue: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesRowConnector);

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTable.css

@@ -1,7 +0,0 @@
-.row {
-  transition: background-color 500ms;
-
-  &:hover {
-    background-color: var(--tableRowHoverBackgroundColor);
-  }
-}

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTable.js

@@ -0,0 +1,188 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
+import ImportSeriesHeader from './ImportSeriesHeader';
+import ImportSeriesRowConnector from './ImportSeriesRowConnector';
+
+class ImportSeriesTable extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      unmappedFolders,
+      defaultMonitor,
+      defaultQualityProfileId,
+      defaultSeriesType,
+      defaultSeasonFolder,
+      onSeriesLookup,
+      onSetImportSeriesValue
+    } = this.props;
+
+    const values = {
+      monitor: defaultMonitor,
+      qualityProfileId: defaultQualityProfileId,
+      seriesType: defaultSeriesType,
+      seasonFolder: defaultSeasonFolder
+    };
+
+    unmappedFolders.forEach((unmappedFolder) => {
+      const id = unmappedFolder.name;
+
+      onSeriesLookup(id, unmappedFolder.path, unmappedFolder.relativePath);
+
+      onSetImportSeriesValue({
+        id,
+        ...values
+      });
+    });
+  }
+
+  // This isn't great, but it's the most reliable way to ensure the items
+  // are checked off even if they aren't actually visible since the cells
+  // are virtualized.
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      selectedState,
+      onSelectedChange,
+      onRemoveSelectedStateItem
+    } = this.props;
+
+    prevProps.items.forEach((prevItem) => {
+      const {
+        id
+      } = prevItem;
+
+      const item = _.find(items, { id });
+
+      if (!item) {
+        onRemoveSelectedStateItem(id);
+        return;
+      }
+
+      const selectedSeries = item.selectedSeries;
+      const isSelected = selectedState[id];
+
+      const isExistingSeries = !!selectedSeries &&
+        _.some(prevProps.allSeries, { tvdbId: selectedSeries.tvdbId });
+
+      // Props doesn't have a selected series or
+      // the selected series is an existing series.
+      if ((!selectedSeries && prevItem.selectedSeries) || (isExistingSeries && !prevItem.selectedSeries)) {
+        onSelectedChange({ id, value: false });
+
+        return;
+      }
+
+      // State is selected, but a series isn't selected or
+      // the selected series is an existing series.
+      if (isSelected && (!selectedSeries || isExistingSeries)) {
+        onSelectedChange({ id, value: false });
+
+        return;
+      }
+
+      // A series is being selected that wasn't previously selected.
+      if (selectedSeries && selectedSeries !== prevItem.selectedSeries) {
+        onSelectedChange({ id, value: true });
+
+        return;
+      }
+    });
+  }
+
+  //
+  // Control
+
+  rowRenderer = ({ key, rowIndex, style }) => {
+    const {
+      rootFolderId,
+      items,
+      selectedState,
+      onSelectedChange
+    } = this.props;
+
+    const item = items[rowIndex];
+
+    return (
+      <VirtualTableRow
+        key={key}
+        style={style}
+      >
+        <ImportSeriesRowConnector
+          key={item.id}
+          rootFolderId={rootFolderId}
+          isSelected={selectedState[item.id]}
+          onSelectedChange={onSelectedChange}
+          id={item.id}
+        />
+      </VirtualTableRow>
+    );
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      allSelected,
+      allUnselected,
+      isSmallScreen,
+      scroller,
+      selectedState,
+      onSelectAllChange
+    } = this.props;
+
+    if (!items.length) {
+      return null;
+    }
+
+    return (
+      <VirtualTable
+        items={items}
+        scroller={scroller}
+        isSmallScreen={isSmallScreen}
+        rowHeight={52}
+        overscanRowCount={2}
+        rowRenderer={this.rowRenderer}
+        header={
+          <ImportSeriesHeader
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          />
+        }
+        selectedState={selectedState}
+      />
+    );
+  }
+}
+
+ImportSeriesTable.propTypes = {
+  rootFolderId: PropTypes.number.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object),
+  unmappedFolders: PropTypes.arrayOf(PropTypes.object),
+  defaultMonitor: PropTypes.string.isRequired,
+  defaultQualityProfileId: PropTypes.number,
+  defaultSeriesType: PropTypes.string.isRequired,
+  defaultSeasonFolder: PropTypes.bool.isRequired,
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  selectedState: PropTypes.object.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  allSeries: PropTypes.arrayOf(PropTypes.object),
+  scroller: PropTypes.instanceOf(Element).isRequired,
+  onSelectAllChange: PropTypes.func.isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onRemoveSelectedStateItem: PropTypes.func.isRequired,
+  onSeriesLookup: PropTypes.func.isRequired,
+  onSetImportSeriesValue: PropTypes.func.isRequired
+};
+
+export default ImportSeriesTable;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTable.tsx

@@ -1,209 +0,0 @@
-import React, { RefObject, useCallback, useEffect, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
-import { useAddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
-import { useSelect } from 'App/SelectContext';
-import AppState from 'App/State/AppState';
-import { ImportSeries } from 'App/State/ImportSeriesAppState';
-import VirtualTable from 'Components/Table/VirtualTable';
-import usePrevious from 'Helpers/Hooks/usePrevious';
-import {
-  queueLookupSeries,
-  setImportSeriesValue,
-} from 'Store/Actions/importSeriesActions';
-import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import { CheckInputChanged } from 'typings/inputs';
-import { SelectStateInputProps } from 'typings/props';
-import { UnmappedFolder } from 'typings/RootFolder';
-import ImportSeriesHeader from './ImportSeriesHeader';
-import ImportSeriesRow from './ImportSeriesRow';
-import styles from './ImportSeriesTable.css';
-
-const ROW_HEIGHT = 52;
-
-interface RowItemData {
-  items: ImportSeries[];
-}
-
-interface ImportSeriesTableProps {
-  unmappedFolders: UnmappedFolder[];
-  scrollerRef: RefObject<HTMLElement>;
-}
-
-function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
-  const { items } = data;
-
-  if (index >= items.length) {
-    return null;
-  }
-
-  const item = items[index];
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        ...style,
-      }}
-      className={styles.row}
-    >
-      <ImportSeriesRow key={item.id} id={item.id} />
-    </div>
-  );
-}
-
-function ImportSeriesTable({
-  unmappedFolders,
-  scrollerRef,
-}: ImportSeriesTableProps) {
-  const dispatch = useDispatch();
-
-  const { monitor, qualityProfileId, seriesType, seasonFolder } =
-    useAddSeriesOptions();
-
-  const items = useSelector((state: AppState) => state.importSeries.items);
-  const { isSmallScreen } = useSelector(createDimensionsSelector());
-  const allSeries = useSelector(createAllSeriesSelector());
-  const [selectState, selectDispatch] = useSelect();
-
-  const defaultValues = useRef({
-    monitor,
-    qualityProfileId,
-    seriesType,
-    seasonFolder,
-  });
-
-  const listRef = useRef<FixedSizeList<RowItemData>>(null);
-  const initialUnmappedFolders = useRef(unmappedFolders);
-  const previousItems = usePrevious(items);
-  const { allSelected, allUnselected, selectedState } = selectState;
-
-  const handleSelectAllChange = useCallback(
-    ({ value }: CheckInputChanged) => {
-      selectDispatch({
-        type: value ? 'selectAll' : 'unselectAll',
-      });
-    },
-    [selectDispatch]
-  );
-
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey }: SelectStateInputProps) => {
-      selectDispatch({
-        type: 'toggleSelected',
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [selectDispatch]
-  );
-
-  const handleRemoveSelectedStateItem = useCallback(
-    (id: string) => {
-      selectDispatch({
-        type: 'removeItem',
-        id,
-      });
-    },
-    [selectDispatch]
-  );
-
-  useEffect(() => {
-    initialUnmappedFolders.current.forEach(({ name, path, relativePath }) => {
-      dispatch(
-        queueLookupSeries({
-          name,
-          path,
-          relativePath,
-          term: name,
-        })
-      );
-
-      dispatch(
-        // @ts-expect-error - actions are not typed
-        setImportSeriesValue({
-          id: name,
-          ...defaultValues.current,
-        })
-      );
-    });
-  }, [dispatch]);
-
-  useEffect(() => {
-    previousItems?.forEach((prevItem) => {
-      const { id } = prevItem;
-
-      const item = items.find((i) => i.id === id);
-
-      if (!item) {
-        handleRemoveSelectedStateItem(id);
-        return;
-      }
-
-      const selectedSeries = item.selectedSeries;
-      const isSelected = selectedState[id];
-
-      const isExistingSeries =
-        !!selectedSeries &&
-        allSeries.some((s) => s.tvdbId === selectedSeries.tvdbId);
-
-      if (
-        (!selectedSeries && prevItem.selectedSeries) ||
-        (isExistingSeries && !prevItem.selectedSeries)
-      ) {
-        handleSelectedChange({ id, value: false, shiftKey: false });
-
-        return;
-      }
-
-      if (isSelected && (!selectedSeries || isExistingSeries)) {
-        handleSelectedChange({ id, value: false, shiftKey: false });
-
-        return;
-      }
-
-      if (selectedSeries && selectedSeries !== prevItem.selectedSeries) {
-        handleSelectedChange({ id, value: true, shiftKey: false });
-
-        return;
-      }
-    });
-  }, [
-    allSeries,
-    items,
-    previousItems,
-    selectedState,
-    handleRemoveSelectedStateItem,
-    handleSelectedChange,
-  ]);
-
-  if (!items.length) {
-    return null;
-  }
-
-  return (
-    <VirtualTable
-      Header={
-        <ImportSeriesHeader
-          allSelected={allSelected}
-          allUnselected={allUnselected}
-          onSelectAllChange={handleSelectAllChange}
-        />
-      }
-      itemCount={items.length}
-      itemData={{
-        items,
-      }}
-      isSmallScreen={isSmallScreen}
-      listRef={listRef}
-      rowHeight={ROW_HEIGHT}
-      Row={Row}
-      scrollerRef={scrollerRef}
-    />
-  );
-}
-
-export default ImportSeriesTable;

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTableConnector.js

@@ -0,0 +1,44 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { queueLookupSeries, setImportSeriesValue } from 'Store/Actions/importSeriesActions';
+import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
+import ImportSeriesTable from './ImportSeriesTable';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addSeries,
+    (state) => state.importSeries,
+    (state) => state.app.dimensions,
+    createAllSeriesSelector(),
+    (addSeries, importSeries, dimensions, allSeries) => {
+      return {
+        defaultMonitor: addSeries.defaults.monitor,
+        defaultQualityProfileId: addSeries.defaults.qualityProfileId,
+        defaultSeriesType: addSeries.defaults.seriesType,
+        defaultSeasonFolder: addSeries.defaults.seasonFolder,
+        items: importSeries.items,
+        isSmallScreen: dimensions.isSmallScreen,
+        allSeries
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onSeriesLookup(name, path, relativePath) {
+      dispatch(queueLookupSeries({
+        name,
+        path,
+        relativePath,
+        term: name
+      }));
+    },
+
+    onSetImportSeriesValue(values) {
+      dispatch(setImportSeriesValue(values));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(ImportSeriesTable);

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js

@@ -1,36 +1,29 @@
+import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
-import { useSelector } from 'react-redux';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
-import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
 import ImportSeriesTitle from './ImportSeriesTitle';
 import styles from './ImportSeriesSearchResult.css';
 
-interface ImportSeriesSearchResultProps {
-  tvdbId: number;
-  title: string;
-  year: number;
-  network?: string;
-  onPress: (tvdbId: number) => void;
-}
+function ImportSeriesSearchResult(props) {
+  const {
+    tvdbId,
+    title,
+    year,
+    network,
+    isExistingSeries,
+    onPress
+  } = props;
 
-function ImportSeriesSearchResult({
-  tvdbId,
-  title,
-  year,
-  network,
-  onPress,
-}: ImportSeriesSearchResultProps) {
-  const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
-
-  const handlePress = useCallback(() => {
-    onPress(tvdbId);
-  }, [tvdbId, onPress]);
+  const onPressCallback = useCallback(() => onPress(tvdbId), [tvdbId, onPress]);
 
   return (
     <div className={styles.container}>
-      <Link className={styles.series} onPress={handlePress}>
+      <Link
+        className={styles.series}
+        onPress={onPressCallback}
+      >
         <ImportSeriesTitle
           title={title}
           year={year}
@@ -53,4 +46,13 @@ function ImportSeriesSearchResult({
   );
 }
 
+ImportSeriesSearchResult.propTypes = {
+  tvdbId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  network: PropTypes.string,
+  isExistingSeries: PropTypes.bool.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
 export default ImportSeriesSearchResult;

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResultConnector.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
+import ImportSeriesSearchResult from './ImportSeriesSearchResult';
+
+function createMapStateToProps() {
+  return createSelector(
+    createExistingSeriesSelector(),
+    (isExistingSeries) => {
+      return {
+        isExistingSeries
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(ImportSeriesSearchResult);

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.js

@@ -0,0 +1,303 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Manager, Popper, Reference } from 'react-popper';
+import FormInputButton from 'Components/Form/FormInputButton';
+import TextInput from 'Components/Form/TextInput';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Portal from 'Components/Portal';
+import { icons, kinds } from 'Helpers/Props';
+import getUniqueElementId from 'Utilities/getUniqueElementId';
+import translate from 'Utilities/String/translate';
+import ImportSeriesSearchResultConnector from './ImportSeriesSearchResultConnector';
+import ImportSeriesTitle from './ImportSeriesTitle';
+import styles from './ImportSeriesSelectSeries.css';
+
+class ImportSeriesSelectSeries extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._seriesLookupTimeout = null;
+    this._scheduleUpdate = null;
+    this._buttonId = getUniqueElementId();
+    this._contentId = getUniqueElementId();
+
+    this.state = {
+      term: props.id,
+      isOpen: false
+    };
+  }
+
+  componentDidUpdate() {
+    if (this._scheduleUpdate) {
+      this._scheduleUpdate();
+    }
+  }
+
+  //
+  // Control
+
+  _addListener() {
+    window.addEventListener('click', this.onWindowClick);
+  }
+
+  _removeListener() {
+    window.removeEventListener('click', this.onWindowClick);
+  }
+
+  //
+  // Listeners
+
+  onWindowClick = (event) => {
+    const button = document.getElementById(this._buttonId);
+    const content = document.getElementById(this._contentId);
+
+    if (!button || !content) {
+      return;
+    }
+
+    if (
+      !button.contains(event.target) &&
+      !content.contains(event.target) &&
+      this.state.isOpen
+    ) {
+      this.setState({ isOpen: false });
+      this._removeListener();
+    }
+  };
+
+  onPress = () => {
+    if (this.state.isOpen) {
+      this._removeListener();
+    } else {
+      this._addListener();
+    }
+
+    this.setState({ isOpen: !this.state.isOpen });
+  };
+
+  onSearchInputChange = ({ value }) => {
+    if (this._seriesLookupTimeout) {
+      clearTimeout(this._seriesLookupTimeout);
+    }
+
+    this.setState({ term: value }, () => {
+      this._seriesLookupTimeout = setTimeout(() => {
+        this.props.onSearchInputChange(value);
+      }, 200);
+    });
+  };
+
+  onRefreshPress = () => {
+    this.props.onSearchInputChange(this.state.term);
+  };
+
+  onSeriesSelect = (tvdbId) => {
+    this.setState({ isOpen: false });
+
+    this.props.onSeriesSelect(tvdbId);
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedSeries,
+      isExistingSeries,
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      isQueued,
+      isLookingUpSeries
+    } = this.props;
+
+    const errorMessage = error &&
+      error.responseJSON &&
+      error.responseJSON.message;
+
+    return (
+      <Manager>
+        <Reference>
+          {({ ref }) => (
+            <div
+              ref={ref}
+              id={this._buttonId}
+            >
+              <Link
+                ref={ref}
+                className={styles.button}
+                component="div"
+                onPress={this.onPress}
+              >
+                {
+                  isLookingUpSeries && isQueued && !isPopulated ?
+                    <LoadingIndicator
+                      className={styles.loading}
+                      size={20}
+                    /> :
+                    null
+                }
+
+                {
+                  isPopulated && selectedSeries && isExistingSeries ?
+                    <Icon
+                      className={styles.warningIcon}
+                      name={icons.WARNING}
+                      kind={kinds.WARNING}
+                    /> :
+                    null
+                }
+
+                {
+                  isPopulated && selectedSeries ?
+                    <ImportSeriesTitle
+                      title={selectedSeries.title}
+                      year={selectedSeries.year}
+                      network={selectedSeries.network}
+                      isExistingSeries={isExistingSeries}
+                    /> :
+                    null
+                }
+
+                {
+                  isPopulated && !selectedSeries ?
+                    <div className={styles.noMatches}>
+                      <Icon
+                        className={styles.warningIcon}
+                        name={icons.WARNING}
+                        kind={kinds.WARNING}
+                      />
+
+                      {translate('NoMatchFound')}
+                    </div> :
+                    null
+                }
+
+                {
+                  !isFetching && !!error ?
+                    <div>
+                      <Icon
+                        className={styles.warningIcon}
+                        title={errorMessage}
+                        name={icons.WARNING}
+                        kind={kinds.WARNING}
+                      />
+
+                      {translate('SearchFailedError')}
+                    </div> :
+                    null
+                }
+
+                <div className={styles.dropdownArrowContainer}>
+                  <Icon
+                    name={icons.CARET_DOWN}
+                  />
+                </div>
+              </Link>
+            </div>
+          )}
+        </Reference>
+
+        <Portal>
+          <Popper
+            placement="bottom"
+            modifiers={{
+              preventOverflow: {
+                boundariesElement: 'viewport'
+              }
+            }}
+          >
+            {({ ref, style, scheduleUpdate }) => {
+              this._scheduleUpdate = scheduleUpdate;
+
+              return (
+                <div
+                  ref={ref}
+                  id={this._contentId}
+                  className={styles.contentContainer}
+                  style={style}
+                >
+                  {
+                    this.state.isOpen ?
+                      <div className={styles.content}>
+                        <div className={styles.searchContainer}>
+                          <div className={styles.searchIconContainer}>
+                            <Icon name={icons.SEARCH} />
+                          </div>
+
+                          <TextInput
+                            className={styles.searchInput}
+                            name={`${name}_textInput`}
+                            value={this.state.term}
+                            onChange={this.onSearchInputChange}
+                          />
+
+                          <FormInputButton
+                            kind={kinds.DEFAULT}
+                            spinnerIcon={icons.REFRESH}
+                            canSpin={true}
+                            isSpinning={isFetching}
+                            onPress={this.onRefreshPress}
+                          >
+                            <Icon name={icons.REFRESH} />
+                          </FormInputButton>
+                        </div>
+
+                        <div className={styles.results}>
+                          {
+                            items.map((item) => {
+                              return (
+                                <ImportSeriesSearchResultConnector
+                                  key={item.tvdbId}
+                                  tvdbId={item.tvdbId}
+                                  title={item.title}
+                                  year={item.year}
+                                  network={item.network}
+                                  onPress={this.onSeriesSelect}
+                                />
+                              );
+                            })
+                          }
+                        </div>
+                      </div> :
+                      null
+                  }
+                </div>
+              );
+            }}
+          </Popper>
+        </Portal>
+      </Manager>
+    );
+  }
+}
+
+ImportSeriesSelectSeries.propTypes = {
+  id: PropTypes.string.isRequired,
+  selectedSeries: PropTypes.object,
+  isExistingSeries: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isQueued: PropTypes.bool.isRequired,
+  isLookingUpSeries: PropTypes.bool.isRequired,
+  onSearchInputChange: PropTypes.func.isRequired,
+  onSeriesSelect: PropTypes.func.isRequired
+};
+
+ImportSeriesSelectSeries.defaultProps = {
+  isFetching: true,
+  isPopulated: false,
+  items: [],
+  isQueued: true
+};
+
+export default ImportSeriesSelectSeries;

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.tsx

@@ -1,259 +0,0 @@
-import {
-  autoUpdate,
-  flip,
-  FloatingPortal,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-} from '@floating-ui/react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import FormInputButton from 'Components/Form/FormInputButton';
-import TextInput from 'Components/Form/TextInput';
-import Icon from 'Components/Icon';
-import Link from 'Components/Link/Link';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { icons, kinds } from 'Helpers/Props';
-import {
-  queueLookupSeries,
-  setImportSeriesValue,
-} from 'Store/Actions/importSeriesActions';
-import createImportSeriesItemSelector from 'Store/Selectors/createImportSeriesItemSelector';
-import { InputChanged } from 'typings/inputs';
-import getErrorMessage from 'Utilities/Object/getErrorMessage';
-import translate from 'Utilities/String/translate';
-import ImportSeriesSearchResult from './ImportSeriesSearchResult';
-import ImportSeriesTitle from './ImportSeriesTitle';
-import styles from './ImportSeriesSelectSeries.css';
-
-interface ImportSeriesSelectSeriesProps {
-  id: string;
-  onInputChange: (input: InputChanged) => void;
-}
-
-function ImportSeriesSelectSeries({
-  id,
-  onInputChange,
-}: ImportSeriesSelectSeriesProps) {
-  const dispatch = useDispatch();
-  const isLookingUpSeries = useSelector(
-    (state: AppState) => state.importSeries.isLookingUpSeries
-  );
-
-  const {
-    error,
-    isFetching = true,
-    isPopulated = false,
-    items = [],
-    isQueued = true,
-    selectedSeries,
-    isExistingSeries,
-    term: itemTerm,
-    // @ts-expect-error - ignoring this for now
-  } = useSelector(createImportSeriesItemSelector(id, { id }));
-
-  const seriesLookupTimeout = useRef<ReturnType<typeof setTimeout>>();
-
-  const [term, setTerm] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
-
-  const errorMessage = getErrorMessage(error);
-
-  const handlePress = useCallback(() => {
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  }, []);
-
-  const handleSearchInputChange = useCallback(
-    ({ value }: InputChanged<string>) => {
-      if (seriesLookupTimeout.current) {
-        clearTimeout(seriesLookupTimeout.current);
-      }
-
-      setTerm(value);
-
-      seriesLookupTimeout.current = setTimeout(() => {
-        dispatch(
-          queueLookupSeries({
-            name: id,
-            term: value,
-            topOfQueue: true,
-          })
-        );
-      }, 200);
-    },
-    [id, dispatch]
-  );
-
-  const handleRefreshPress = useCallback(() => {
-    dispatch(
-      queueLookupSeries({
-        name: id,
-        term,
-        topOfQueue: true,
-      })
-    );
-  }, [id, term, dispatch]);
-
-  const handleSeriesSelect = useCallback(
-    (tvdbId: number) => {
-      setIsOpen(false);
-
-      const selectedSeries = items.find((item) => item.tvdbId === tvdbId)!;
-
-      dispatch(
-        // @ts-expect-error - actions are not typed
-        setImportSeriesValue({
-          id,
-          selectedSeries,
-        })
-      );
-
-      if (selectedSeries.seriesType !== 'standard') {
-        onInputChange({
-          name: 'seriesType',
-          value: selectedSeries.seriesType,
-        });
-      }
-    },
-    [id, items, dispatch, onInputChange]
-  );
-
-  useEffect(() => {
-    setTerm(itemTerm);
-  }, [itemTerm]);
-
-  const { refs, context, floatingStyles } = useFloating({
-    middleware: [
-      flip({
-        crossAxis: false,
-        mainAxis: true,
-      }),
-    ],
-    open: isOpen,
-    placement: 'bottom',
-    whileElementsMounted: autoUpdate,
-    onOpenChange: setIsOpen,
-  });
-
-  const click = useClick(context);
-  const dismiss = useDismiss(context);
-
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    click,
-    dismiss,
-  ]);
-
-  return (
-    <>
-      <div ref={refs.setReference} {...getReferenceProps()}>
-        <Link className={styles.button} component="div" onPress={handlePress}>
-          {isLookingUpSeries && isQueued && !isPopulated ? (
-            <LoadingIndicator className={styles.loading} size={20} />
-          ) : null}
-
-          {isPopulated && selectedSeries && isExistingSeries ? (
-            <Icon
-              className={styles.warningIcon}
-              name={icons.WARNING}
-              kind={kinds.WARNING}
-            />
-          ) : null}
-
-          {isPopulated && selectedSeries ? (
-            <ImportSeriesTitle
-              title={selectedSeries.title}
-              year={selectedSeries.year}
-              network={selectedSeries.network}
-              isExistingSeries={isExistingSeries}
-            />
-          ) : null}
-
-          {isPopulated && !selectedSeries ? (
-            <div>
-              <Icon
-                className={styles.warningIcon}
-                name={icons.WARNING}
-                kind={kinds.WARNING}
-              />
-
-              {translate('NoMatchFound')}
-            </div>
-          ) : null}
-
-          {!isFetching && !!error ? (
-            <div>
-              <Icon
-                className={styles.warningIcon}
-                title={errorMessage}
-                name={icons.WARNING}
-                kind={kinds.WARNING}
-              />
-
-              {translate('SearchFailedError')}
-            </div>
-          ) : null}
-
-          <div className={styles.dropdownArrowContainer}>
-            <Icon name={icons.CARET_DOWN} />
-          </div>
-        </Link>
-      </div>
-      {isOpen ? (
-        <FloatingPortal id="portal-root">
-          <div
-            ref={refs.setFloating}
-            className={styles.contentContainer}
-            style={floatingStyles}
-            {...getFloatingProps()}
-          >
-            {isOpen ? (
-              <div className={styles.content}>
-                <div className={styles.searchContainer}>
-                  <div className={styles.searchIconContainer}>
-                    <Icon name={icons.SEARCH} />
-                  </div>
-
-                  <TextInput
-                    className={styles.searchInput}
-                    name={`${name}_textInput`}
-                    value={term}
-                    onChange={handleSearchInputChange}
-                  />
-
-                  <FormInputButton
-                    kind={kinds.DEFAULT}
-                    spinnerIcon={icons.REFRESH}
-                    canSpin={true}
-                    isSpinning={isFetching}
-                    onPress={handleRefreshPress}
-                  >
-                    <Icon name={icons.REFRESH} />
-                  </FormInputButton>
-                </div>
-
-                <div className={styles.results}>
-                  {items.map((item) => {
-                    return (
-                      <ImportSeriesSearchResult
-                        key={item.tvdbId}
-                        tvdbId={item.tvdbId}
-                        title={item.title}
-                        year={item.year}
-                        network={item.network}
-                        onPress={handleSeriesSelect}
-                      />
-                    );
-                  })}
-                </div>
-              </div>
-            ) : null}
-          </div>
-        </FloatingPortal>
-      ) : null}
-    </>
-  );
-}
-
-export default ImportSeriesSelectSeries;

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeriesConnector.js

@@ -0,0 +1,87 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { queueLookupSeries, setImportSeriesValue } from 'Store/Actions/importSeriesActions';
+import createImportSeriesItemSelector from 'Store/Selectors/createImportSeriesItemSelector';
+import * as seriesTypes from 'Utilities/Series/seriesTypes';
+import ImportSeriesSelectSeries from './ImportSeriesSelectSeries';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.importSeries.isLookingUpSeries,
+    createImportSeriesItemSelector(),
+    (isLookingUpSeries, item) => {
+      return {
+        isLookingUpSeries,
+        ...item
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  queueLookupSeries,
+  setImportSeriesValue
+};
+
+class ImportSeriesSelectSeriesConnector extends Component {
+
+  //
+  // Listeners
+
+  onSearchInputChange = (term) => {
+    this.props.queueLookupSeries({
+      name: this.props.id,
+      term,
+      topOfQueue: true
+    });
+  };
+
+  onSeriesSelect = (tvdbId) => {
+    const {
+      id,
+      items,
+      onInputChange
+    } = this.props;
+
+    const selectedSeries = items.find((item) => item.tvdbId === tvdbId);
+
+    this.props.setImportSeriesValue({
+      id,
+      selectedSeries
+    });
+
+    if (selectedSeries.seriesType !== seriesTypes.STANDARD) {
+      onInputChange({
+        name: 'seriesType',
+        value: selectedSeries.seriesType
+      });
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportSeriesSelectSeries
+        {...this.props}
+        onSearchInputChange={this.onSearchInputChange}
+        onSeriesSelect={this.onSeriesSelect}
+      />
+    );
+  }
+}
+
+ImportSeriesSelectSeriesConnector.propTypes = {
+  id: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object),
+  selectedSeries: PropTypes.object,
+  isSelected: PropTypes.bool,
+  onInputChange: PropTypes.func.isRequired,
+  queueLookupSeries: PropTypes.func.isRequired,
+  setImportSeriesValue: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesSelectSeriesConnector);

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ImportSeriesTitle.css';
+
+function ImportSeriesTitle(props) {
+  const {
+    title,
+    year,
+    network,
+    isExistingSeries
+  } = props;
+
+  return (
+    <div className={styles.titleContainer}>
+      <div className={styles.title}>
+        {title}
+      </div>
+
+      {
+        !title.contains(year) &&
+        year > 0 ?
+          <span className={styles.year}>
+            ({year})
+          </span> :
+          null
+      }
+
+      {
+        network ?
+          <Label>{network}</Label> :
+          null
+      }
+
+      {
+        isExistingSeries ?
+          <Label
+            kind={kinds.WARNING}
+          >
+            {translate('Existing')}
+          </Label> :
+          null
+      }
+    </div>
+  );
+}
+
+ImportSeriesTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  network: PropTypes.string,
+  isExistingSeries: PropTypes.bool.isRequired
+};
+
+export default ImportSeriesTitle;

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import Label from 'Components/Label';
-import { kinds } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './ImportSeriesTitle.css';
-
-interface ImportSeriesTitleProps {
-  title: string;
-  year: number;
-  network?: string;
-  isExistingSeries: boolean;
-}
-
-function ImportSeriesTitle({
-  title,
-  year,
-  network,
-  isExistingSeries,
-}: ImportSeriesTitleProps) {
-  return (
-    <div className={styles.titleContainer}>
-      <div className={styles.title}>{title}</div>
-
-      {year > 0 && !title.includes(String(year)) ? (
-        <span className={styles.year}>({year})</span>
-      ) : null}
-
-      {network ? <Label>{network}</Label> : null}
-
-      {isExistingSeries ? (
-        <Label kind={kinds.WARNING}>{translate('Existing')}</Label>
-      ) : null}
-    </div>
-  );
-}
-
-export default ImportSeriesTitle;

frontend/src/AddSeries/ImportSeries/ImportSeries.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
+import ImportSeriesConnector from 'AddSeries/ImportSeries/Import/ImportSeriesConnector';
+import ImportSeriesSelectFolderConnector from 'AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolderConnector';
+import Switch from 'Components/Router/Switch';
+
+class ImportSeries extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Switch>
+        <Route
+          exact={true}
+          path="/add/import"
+          component={ImportSeriesSelectFolderConnector}
+        />
+
+        <Route
+          path="/add/import/:rootFolderId"
+          component={ImportSeriesConnector}
+        />
+      </Switch>
+    );
+  }
+}
+
+export default ImportSeries;

frontend/src/AddSeries/ImportSeries/ImportSeriesPage.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import Switch from 'Components/Router/Switch';
-import ImportSeries from './Import/ImportSeries';
-import ImportSeriesSelectFolder from './SelectFolder/ImportSeriesSelectFolder';
-
-function ImportSeriesPage() {
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path="/add/import"
-        component={ImportSeriesSelectFolder}
-      />
-
-      <Route path="/add/import/:rootFolderId" component={ImportSeries} />
-    </Switch>
-  );
-}
-
-export default ImportSeriesPage;

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js

@@ -0,0 +1,188 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import RootFolders from 'RootFolder/RootFolders';
+import translate from 'Utilities/String/translate';
+import styles from './ImportSeriesSelectFolder.css';
+
+class ImportSeriesSelectFolder extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isAddNewRootFolderModalOpen: false
+    };
+  }
+
+  //
+  // Lifecycle
+
+  onAddNewRootFolderPress = () => {
+    this.setState({ isAddNewRootFolderModalOpen: true });
+  };
+
+  onNewRootFolderSelect = ({ value }) => {
+    this.props.onNewRootFolderSelect(value);
+  };
+
+  onAddRootFolderModalClose = () => {
+    this.setState({ isAddNewRootFolderModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isWindows,
+      isFetching,
+      isPopulated,
+      isSaving,
+      error,
+      saveError,
+      items
+    } = this.props;
+
+    const hasRootFolders = items.length > 0;
+    const goodFolderExample = (isWindows) ? 'C:\\tv shows' : '/tv shows';
+    const badFolderExample = (isWindows) ? 'C:\\tv shows\\the simpsons' : '/tv shows/the simpsons';
+
+    return (
+      <PageContent title={translate('ImportSeries')}>
+        <PageContentBody>
+          {
+            isFetching && !isPopulated ?
+              <LoadingIndicator /> :
+              null
+          }
+
+          {
+            !isFetching && error ?
+              <Alert kind={kinds.DANGER}>{translate('RootFoldersLoadError')}</Alert> :
+              null
+          }
+
+          {
+            !error && isPopulated &&
+              <div>
+                <div className={styles.header}>
+                  {translate('LibraryImportSeriesHeader')}
+                </div>
+
+                <div className={styles.tips}>
+                  {translate('LibraryImportTips')}
+                  <ul>
+                    <li className={styles.tip}>
+                      <InlineMarkdown data={translate('LibraryImportTipsQualityInEpisodeFilename')} />
+                    </li>
+                    <li className={styles.tip}>
+                      <InlineMarkdown data={translate('LibraryImportTipsSeriesUseRootFolder', { goodFolderExample, badFolderExample })} />
+                    </li>
+                    <li className={styles.tip}>
+                      {translate('LibraryImportTipsDontUseDownloadsFolder')}
+                    </li>
+                  </ul>
+                </div>
+
+                {
+                  hasRootFolders ?
+                    <div className={styles.recentFolders}>
+                      <FieldSet legend={translate('RootFolders')}>
+                        <RootFolders
+                          isFetching={isFetching}
+                          isPopulated={isPopulated}
+                          error={error}
+                          items={items}
+                        />
+                      </FieldSet>
+                    </div> :
+                    null
+                }
+
+                {
+                  !isSaving && saveError ?
+                    <Alert
+                      className={styles.addErrorAlert}
+                      kind={kinds.DANGER}
+                    >
+                      {translate('AddRootFolderError')}
+
+                      <ul>
+                        {
+                          Array.isArray(saveError.responseJSON) ?
+                            saveError.responseJSON.map((e, index) => {
+                              return (
+                                <li key={index}>
+                                  {e.errorMessage}
+                                </li>
+                              );
+                            }) :
+                            <li>
+                              {
+                                JSON.stringify(saveError.responseJSON)
+                              }
+                            </li>
+                        }
+                      </ul>
+                    </Alert> :
+                    null
+                }
+
+                <div className={hasRootFolders ? undefined : styles.startImport}>
+                  <Button
+                    kind={kinds.PRIMARY}
+                    size={sizes.LARGE}
+                    onPress={this.onAddNewRootFolderPress}
+                  >
+                    <Icon
+                      className={styles.importButtonIcon}
+                      name={icons.DRIVE}
+                    />
+                    {
+                      hasRootFolders ?
+                        translate('ChooseAnotherFolder') :
+                        translate('StartImport')
+                    }
+                  </Button>
+                </div>
+
+                <FileBrowserModal
+                  isOpen={this.state.isAddNewRootFolderModalOpen}
+                  name="rootFolderPath"
+                  value=""
+                  onChange={this.onNewRootFolderSelect}
+                  onModalClose={this.onAddRootFolderModalClose}
+                />
+              </div>
+          }
+        </PageContentBody>
+      </PageContent>
+    );
+  }
+}
+
+ImportSeriesSelectFolder.propTypes = {
+  isWindows: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  saveError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onNewRootFolderSelect: PropTypes.func.isRequired
+};
+
+export default ImportSeriesSelectFolder;

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.tsx

@@ -1,164 +0,0 @@
-import React, { useCallback, useEffect, useState } 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 FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import usePrevious from 'Helpers/Hooks/usePrevious';
-import { icons, kinds, sizes } from 'Helpers/Props';
-import RootFolders from 'RootFolder/RootFolders';
-import {
-  addRootFolder,
-  fetchRootFolders,
-} from 'Store/Actions/rootFolderActions';
-import useIsWindows from 'System/useIsWindows';
-import { InputChanged } from 'typings/inputs';
-import translate from 'Utilities/String/translate';
-import styles from './ImportSeriesSelectFolder.css';
-
-function ImportSeriesSelectFolder() {
-  const dispatch = useDispatch();
-  const { isFetching, isPopulated, isSaving, error, saveError, items } =
-    useSelector((state: AppState) => state.rootFolders);
-
-  const isWindows = useIsWindows();
-
-  const [isAddNewRootFolderModalOpen, setIsAddNewRootFolderModalOpen] =
-    useState(false);
-
-  const wasSaving = usePrevious(isSaving);
-
-  const hasRootFolders = items.length > 0;
-  const goodFolderExample = isWindows ? 'C:\\tv shows' : '/tv shows';
-  const badFolderExample = isWindows
-    ? 'C:\\tv shows\\the simpsons'
-    : '/tv shows/the simpsons';
-
-  const handleAddNewRootFolderPress = useCallback(() => {
-    setIsAddNewRootFolderModalOpen(true);
-  }, []);
-
-  const handleAddRootFolderModalClose = useCallback(() => {
-    setIsAddNewRootFolderModalOpen(false);
-  }, []);
-
-  const handleNewRootFolderSelect = useCallback(
-    ({ value }: InputChanged<string>) => {
-      dispatch(addRootFolder({ path: value }));
-    },
-    [dispatch]
-  );
-
-  useEffect(() => {
-    dispatch(fetchRootFolders());
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (!isSaving && wasSaving && !saveError) {
-      items.reduce((acc, item) => {
-        if (item.id > acc) {
-          return item.id;
-        }
-
-        return acc;
-      }, 0);
-    }
-  }, [isSaving, wasSaving, saveError, items]);
-
-  return (
-    <PageContent title={translate('ImportSeries')}>
-      <PageContentBody>
-        {isFetching && !isPopulated ? <LoadingIndicator /> : null}
-
-        {!isFetching && error ? (
-          <Alert kind={kinds.DANGER}>{translate('RootFoldersLoadError')}</Alert>
-        ) : null}
-
-        {!error && isPopulated && (
-          <div>
-            <div className={styles.header}>
-              {translate('LibraryImportSeriesHeader')}
-            </div>
-
-            <div className={styles.tips}>
-              {translate('LibraryImportTips')}
-              <ul>
-                <li className={styles.tip}>
-                  <InlineMarkdown
-                    data={translate(
-                      'LibraryImportTipsQualityInEpisodeFilename'
-                    )}
-                  />
-                </li>
-                <li className={styles.tip}>
-                  <InlineMarkdown
-                    data={translate('LibraryImportTipsSeriesUseRootFolder', {
-                      goodFolderExample,
-                      badFolderExample,
-                    })}
-                  />
-                </li>
-                <li className={styles.tip}>
-                  {translate('LibraryImportTipsDontUseDownloadsFolder')}
-                </li>
-              </ul>
-            </div>
-
-            {hasRootFolders ? (
-              <div className={styles.recentFolders}>
-                <FieldSet legend={translate('RootFolders')}>
-                  <RootFolders />
-                </FieldSet>
-              </div>
-            ) : null}
-
-            {!isSaving && saveError ? (
-              <Alert className={styles.addErrorAlert} kind={kinds.DANGER}>
-                {translate('AddRootFolderError')}
-
-                <ul>
-                  {Array.isArray(saveError.responseJSON) ? (
-                    saveError.responseJSON.map((e, index) => {
-                      return <li key={index}>{e.errorMessage}</li>;
-                    })
-                  ) : (
-                    <li>{JSON.stringify(saveError.responseJSON)}</li>
-                  )}
-                </ul>
-              </Alert>
-            ) : null}
-
-            <div className={hasRootFolders ? undefined : styles.startImport}>
-              <Button
-                kind={kinds.PRIMARY}
-                size={sizes.LARGE}
-                onPress={handleAddNewRootFolderPress}
-              >
-                <Icon className={styles.importButtonIcon} name={icons.DRIVE} />
-                {hasRootFolders
-                  ? translate('ChooseAnotherFolder')
-                  : translate('StartImport')}
-              </Button>
-            </div>
-
-            <FileBrowserModal
-              isOpen={isAddNewRootFolderModalOpen}
-              name="rootFolderPath"
-              value=""
-              onChange={handleNewRootFolderSelect}
-              onModalClose={handleAddRootFolderModalClose}
-            />
-          </div>
-        )}
-      </PageContentBody>
-    </PageContent>
-  );
-}
-
-export default ImportSeriesSelectFolder;

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolderConnector.js

@@ -0,0 +1,85 @@
+import { push } from 'connected-react-router';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { addRootFolder, fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import ImportSeriesSelectFolder from './ImportSeriesSelectFolder';
+
+function createMapStateToProps() {
+  return createSelector(
+    createRootFoldersSelector(),
+    createSystemStatusSelector(),
+    (rootFolders, systemStatus) => {
+      return {
+        ...rootFolders,
+        isWindows: systemStatus.isWindows
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchRootFolders,
+  addRootFolder,
+  push
+};
+
+class ImportSeriesSelectFolderConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchRootFolders();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      isSaving,
+      saveError
+    } = this.props;
+
+    if (prevProps.isSaving && !isSaving && !saveError) {
+      const newRootFolders = _.differenceBy(items, prevProps.items, (item) => item.id);
+
+      if (newRootFolders.length === 1) {
+        this.props.push(`${window.Sonarr.urlBase}/add/import/${newRootFolders[0].id}`);
+      }
+    }
+  }
+
+  //
+  // Listeners
+
+  onNewRootFolderSelect = (path) => {
+    this.props.addRootFolder({ path });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportSeriesSelectFolder
+        {...this.props}
+        onNewRootFolderSelect={this.onNewRootFolderSelect}
+      />
+    );
+  }
+}
+
+ImportSeriesSelectFolderConnector.propTypes = {
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchRootFolders: PropTypes.func.isRequired,
+  addRootFolder: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesSelectFolderConnector);

frontend/src/AddSeries/addSeriesOptionsStore.ts

@@ -1,31 +0,0 @@
-import { createOptionsStore } from 'Helpers/Hooks/useOptionsStore';
-import { SeriesMonitor, SeriesType } from 'Series/Series';
-
-export interface AddSeriesOptions {
-  rootFolderPath: string;
-  monitor: SeriesMonitor;
-  qualityProfileId: number;
-  seriesType: SeriesType;
-  seasonFolder: boolean;
-  searchForMissingEpisodes: boolean;
-  searchForCutoffUnmetEpisodes: boolean;
-  tags: number[];
-}
-
-const { useOptions, useOption, setOption } =
-  createOptionsStore<AddSeriesOptions>('add_series_options', () => {
-    return {
-      rootFolderPath: '',
-      monitor: 'all',
-      qualityProfileId: 0,
-      seriesType: 'standard',
-      seasonFolder: true,
-      searchForMissingEpisodes: false,
-      searchForCutoffUnmetEpisodes: false,
-      tags: [],
-    };
-  });
-
-export const useAddSeriesOptions = useOptions;
-export const useAddSeriesOption = useOption;
-export const setAddSeriesOption = setOption;

frontend/src/App/App.tsx

@@ -1,10 +1,9 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
-import Page from 'Components/Page/Page';
+import PageConnector from 'Components/Page/PageConnector';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
@@ -13,21 +12,17 @@ interface AppProps {
   history: ConnectedRouterProps['history'];
 }
 
-const queryClient = new QueryClient();
-
 function App({ store, history }: AppProps) {
   return (
     <DocumentTitle title={window.Sonarr.instanceName}>
-      <QueryClientProvider client={queryClient}>
-        <Provider store={store}>
-          <ConnectedRouter history={history}>
-            <ApplyTheme />
-            <Page>
-              <AppRoutes />
-            </Page>
-          </ConnectedRouter>
-        </Provider>
-      </QueryClientProvider>
+      <Provider store={store}>
+        <ConnectedRouter history={history}>
+          <ApplyTheme />
+          <PageConnector>
+            <AppRoutes />
+          </PageConnector>
+        </ConnectedRouter>
+      </Provider>
     </DocumentTitle>
   );
 }