.devcontainer/Sonarr.code-workspace

@@ -1,13 +0,0 @@
-// This file is used to open the backend and frontend in the same workspace, which is necessary as
-// the frontend has vscode settings that are distinct from the backend
-{
-  "folders": [
-    {
-      "path": ".."
-    },
-    {
-      "path": "../frontend"
-    }
-  ],
-  "settings": {}
-}

.devcontainer/devcontainer.json

@@ -1,19 +0,0 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
-{
-  "name": "Sonarr",
-  "image": "mcr.microsoft.com/devcontainers/dotnet:1-6.0",
-  "features": {
-    "ghcr.io/devcontainers/features/node:1": {
-      "nodeGypDependencies": true,
-      "version": "16",
-      "nvmVersion": "latest"
-    }
-  },
-  "forwardPorts": [8989],
-  "customizations": {
-    "vscode": {
-      "extensions": ["esbenp.prettier-vscode"]
-    }
-  }
-}

.github/actions/test/action.yml

@@ -27,7 +27,7 @@ runs:
   using: 'composite'
   steps:
     - name: Setup .NET
-      uses: actions/setup-dotnet@v4
+      uses: actions/setup-dotnet@v3
 
     - name: Setup Postgres
       if: ${{ inputs.use_postgres }}
@@ -77,7 +77,7 @@ runs:
 
     - name: Run tests
       shell: bash
-      run: dotnet test ./_tests/Sonarr.*.Test.dll --filter "${{ inputs.filter }}" --logger "trx;LogFileName=${{ env.RESULTS_NAME }}.trx" --logger "GitHubActions;summary.includePassedTests=true;summary.includeSkippedTests=true"
+      run: dotnet test ./_tests/Sonarr.*.Test.dll --filter "${{ inputs.filter }}" --logger "trx;LogFileName=${{ env.RESULTS_NAME }}.trx"
 
     - name: Upload Test Results
       if: ${{ !cancelled() }}
@@ -85,3 +85,12 @@ runs:
       with:
         name: results-${{ env.RESULTS_NAME }}
         path: TestResults/*.trx
+
+    - name: Publish Test Results
+      uses: phoenix-actions/test-reporting@v12
+      with:
+        name: Test Results
+        output-to: step-summary
+        path: '*.trx'
+        reporter: dotnet-trx
+        working-directory: TestResults

.github/dependabot.yml

@@ -1,12 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for more information:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-# https://containers.dev/guide/dependabot
-
-version: 2
-updates:
- - package-ecosystem: "devcontainers"
-   directory: "/"
-   schedule:
-     interval: weekly

.github/labeler.yml

@@ -1,23 +1,17 @@
 'connection':
-  - changed-files:
-    - any-glob-to-any-file: src/NzbDrone.Core/Notifications/**/*
+  - src/NzbDrone.Core/Notifications/**/*
 
 'db-migration':
-  - changed-files:
-    - any-glob-to-any-file: src/NzbDrone.Core/Datastore/Migration/*
+  - src/NzbDrone.Core/Datastore/Migration/*
 
 'download-client':
-  - changed-files:
-    - any-glob-to-any-file: src/NzbDrone.Core/Download/Clients/**/*
+  - src/NzbDrone.Core/Download/Clients/**/*
 
 'indexer':
-  - changed-files:
-    - any-glob-to-any-file: src/NzbDrone.Core/Indexers/**/*
+  - src/NzbDrone.Core/Indexers/**/*
 
 'parsing':
-  - changed-files:
-    - any-glob-to-any-file: src/NzbDrone.Core/Parser/**/*
+  - src/NzbDrone.Core/Parser/**/*
 
 'ui-only':
-  - changed-files:
-    - any-glob-to-all-files: frontend/**/*
+  - all: ['frontend/**/*']

.github/workflows/api_docs.yml

@@ -26,10 +26,10 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
 
       - name: Setup dotnet
-        uses: actions/setup-dotnet@v4
+        uses: actions/setup-dotnet@v3
         id: setup-dotnet
 
       - name: Create openapi.json

.github/workflows/build.yml

@@ -5,14 +5,9 @@ on:
     branches:
       - develop
       - main
-    paths-ignore:
-      - "src/Sonarr.Api.*/openapi.json"
   pull_request:
     branches:
       - develop
-    paths-ignore:
-      - "src/NzbDrone.Core/Localization/Core/**"
-      - "src/Sonarr.Api.*/openapi.json"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -20,9 +15,9 @@ concurrency:
 
 env:
   FRAMEWORK: net6.0
-  RAW_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+  BRANCH: ${{ github.head_ref || github.ref_name }}
   SONARR_MAJOR_VERSION: 4
-  VERSION: 4.0.14
+  VERSION: 4.0.0
 
 jobs:
   backend:
@@ -32,105 +27,103 @@ jobs:
       major_version: ${{ steps.variables.outputs.major_version }}
       version: ${{ steps.variables.outputs.version }}
     steps:
-      - name: Check out
-        uses: actions/checkout@v4
+    - name: Check out
+      uses: actions/checkout@v3
 
-      - name: Setup .NET
-        uses: actions/setup-dotnet@v4
+    - name: Setup .NET
+      uses: actions/setup-dotnet@v3
 
-      - 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)
+    - 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 "SDK_PATH=${{ env.DOTNET_ROOT }}/sdk/${DOTNET_VERSION}" >> "$GITHUB_ENV"
+        echo "SONARR_VERSION=$SONARR_VERSION" >> "$GITHUB_ENV"
+        echo "framework=${{ env.FRAMEWORK }}" >> "$GITHUB_OUTPUT"
+        echo "major_version=${{ env.SONARR_MAJOR_VERSION }}" >> "$GITHUB_OUTPUT"
+        echo "version=$SONARR_VERSION" >> "$GITHUB_OUTPUT"
 
-          echo "framework=${{ env.FRAMEWORK }}" >> "$GITHUB_OUTPUT"
-          echo "major_version=${{ env.SONARR_MAJOR_VERSION }}" >> "$GITHUB_OUTPUT"
-          echo "version=$SONARR_VERSION" >> "$GITHUB_OUTPUT"
+    - name: Enable Extra Platforms In SDK
+      shell: bash
+      run: ./build.sh --enable-extra-platforms-in-sdk
 
-      - name: Enable Extra Platforms In SDK
-        shell: bash
-        run: ./build.sh --enable-extra-platforms-in-sdk
+    - name: Build Backend
+      shell: bash
+      run: ./build.sh --backend --enable-extra-platforms --packages
 
-      - name: Build Backend
-        shell: bash
-        run: ./build.sh --backend --enable-extra-platforms --packages
+    # Test Artifacts
 
-      # Test Artifacts
+    - name: Publish win-x64 Test Artifact
+      uses: ./.github/actions/publish-test-artifact
+      with:
+        framework: ${{ env.FRAMEWORK }}
+        runtime: win-x64
 
-      - name: Publish win-x64 Test Artifact
-        uses: ./.github/actions/publish-test-artifact
-        with:
-          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 linux-x64 Test Artifact
-        uses: ./.github/actions/publish-test-artifact
-        with:
-          framework: ${{ env.FRAMEWORK }}
-          runtime: linux-x64
+    - name: Publish osx-x64 Test Artifact
+      uses: ./.github/actions/publish-test-artifact
+      with:
+        framework: ${{ env.FRAMEWORK }}
+        runtime: osx-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-*/**/*
+    # 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@v4
+    - name: Check out
+      uses: actions/checkout@v3
 
-      - name: Volta
-        uses: volta-cli/action@v4
+    - name: Volta
+      uses: volta-cli/action@v4
 
-      - name: Yarn Install
-        run: yarn install
+    - name: Yarn Intsall
+      run: yarn install
 
-      - name: Lint
-        run: yarn lint
+    - name: Lint
+      run: yarn lint
 
-      - name: Stylelint
-        run: yarn stylelint -f github
+    - name: Stylelint
+      run: yarn stylelint
 
-      - name: Build
-        run: yarn build --env production
+    - name: Build
+      run: yarn build --env production
 
-      - name: Publish UI Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: build_ui
-          path: _output/UI/**/*
+    - name: Publish UI Artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: build_ui
+        path: _output/UI/**/*
 
   unit_test:
     needs: backend
@@ -143,44 +136,43 @@ jobs:
             artifact: tests-linux-x64
             filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
           - os: macos-latest
-            artifact: tests-osx-arm64
+            artifact: tests-osx-x64
             filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
           - os: windows-latest
             artifact: tests-win-x64
             filter: TestCategory!=ManualTest&TestCategory!=LINUX&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Check out
-        uses: actions/checkout@v4
+    - name: Check out
+      uses: actions/checkout@v3
 
-      - name: Test
-        uses: ./.github/actions/test
-        with:
-          os: ${{ matrix.os }}
-          artifact: ${{ matrix.artifact }}
-          pattern: Sonarr.*.Test.dll
-          filter: ${{ matrix.filter }}
+    - name: Test
+      uses: ./.github/actions/test
+      with:
+        os: ${{ matrix.os }}
+        artifact: ${{ matrix.artifact }}
+        pattern: Sonarr.*.Test.dll
+        filter: ${{ matrix.filter }}
 
   unit_test_postgres:
     needs: backend
     runs-on: ubuntu-latest
     steps:
-      - name: Check out
-        uses: actions/checkout@v4
+    - name: Check out
+      uses: actions/checkout@v3
 
-      - name: Test
-        uses: ./.github/actions/test
-        with:
-          os: ubuntu-latest
-          artifact: tests-linux-x64
-          pattern: Sonarr.*.Test.dll
-          filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
-          use_postgres: true
+    - name: Test
+      uses: ./.github/actions/test
+      with:
+        os: ubuntu-latest
+        artifact: tests-linux-x64
+        pattern: Sonarr.*.Test.dll
+        filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
+        use_postgres: true
 
   integration_test:
     needs: backend
     strategy:
-      fail-fast: false
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
         include:
@@ -190,10 +182,10 @@ jobs:
             binary_artifact: build_linux
             binary_path: linux-x64/${{ needs.backend.outputs.framework }}/Sonarr
           - os: macos-latest
-            artifact: tests-osx-arm64
+            artifact: tests-osx-x64
             filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory=IntegrationTest
             binary_artifact: build_macos
-            binary_path: osx-arm64/${{ needs.backend.outputs.framework }}/Sonarr
+            binary_path: osx-x64/${{ needs.backend.outputs.framework }}/Sonarr
           - os: windows-latest
             artifact: tests-win-x64
             filter: TestCategory!=ManualTest&TestCategory!=LINUX&TestCategory=IntegrationTest
@@ -201,23 +193,23 @@ jobs:
             binary_path: win-x64/${{ needs.backend.outputs.framework }}/Sonarr
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Check out
-        uses: actions/checkout@v4
+    - name: Check out
+      uses: actions/checkout@v3
 
-      - name: Test
-        uses: ./.github/actions/test
-        with:
-          os: ${{ matrix.os }}
-          artifact: ${{ matrix.artifact }}
-          pattern: Sonarr.*.Test.dll
-          filter: ${{ matrix.filter }}
-          integration_tests: true
-          binary_artifact: ${{ matrix.binary_artifact }}
-          binary_path: ${{ matrix.binary_path }}
+    - name: Test
+      uses: ./.github/actions/test
+      with:
+        os: ${{ matrix.os }}
+        artifact: ${{ matrix.artifact }}
+        pattern: Sonarr.*.Test.dll
+        filter: ${{ matrix.filter }}
+        integration_tests: true
+        binary_artifact: ${{ matrix.binary_artifact }}
+        binary_path: ${{ matrix.binary_path }}
 
   deploy:
     if: ${{ github.ref_name == 'develop' || github.ref_name == 'main' }}
-    needs: [backend, frontend, unit_test, unit_test_postgres, integration_test]
+    needs: [backend, unit_test, unit_test_postgres, integration_test]
     secrets: inherit
     uses: ./.github/workflows/deploy.yml
     with:
@@ -225,33 +217,3 @@ jobs:
       branch: ${{ github.ref_name }}
       major_version: ${{ needs.backend.outputs.major_version }}
       version: ${{ needs.backend.outputs.version }}
-
-  notify:
-    name: Discord Notification
-    needs:
-      [
-        backend,
-        frontend,
-        unit_test,
-        unit_test_postgres,
-        integration_test,
-        deploy,
-      ]
-    if: ${{ !cancelled() && (github.ref_name == 'develop' || github.ref_name == 'main') }}
-    env:
-      STATUS: ${{ contains(needs.*.result, 'failure') && 'failure' || 'success' }}
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Notify
-        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 }}: ${{ env.STATUS == 'success' && 'Success' || 'Failure' }}"
-          embed-url: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
-          embed-description: |
-            **Branch** ${{ github.ref }}
-            **Build** ${{ needs.backend.outputs.version }}
-          embed-color: ${{ env.STATUS == 'success' && '3066993' || '15158332' }}

.github/workflows/conflict_labeler.yml

@@ -1,26 +0,0 @@
-name: Merge Conflict Labeler
-
-on:
-  push:
-    branches:
-      - develop
-  pull_request_target:
-    branches:
-      - develop
-    types: [synchronize]
-
-jobs:
-  label:
-    name: Labeling
-    runs-on: ubuntu-latest
-    if: ${{ github.repository == 'Sonarr/Sonarr' }}
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      - name: Apply label
-        uses: eps1lon/actions-label-merge-conflict@v3
-        with:
-          dirtyLabel: 'merge-conflict'
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          

.github/workflows/deploy.yml

@@ -41,7 +41,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
     - name: Check out
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
 
     - name: Package
       uses: ./.github/actions/package
@@ -60,7 +60,7 @@ jobs:
       contents: write
     steps:
     - name: Check out
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
 
     - name: Download release artifacts
       uses: actions/download-artifact@v4
@@ -69,38 +69,12 @@ jobs:
         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: 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 }}
+        generateReleaseNotes: true
         name: ${{ inputs.version }}
         prerelease: ${{ inputs.branch != 'main' }}
         skipIfReleaseExists: true

.github/workflows/labeler.yml

@@ -8,6 +8,5 @@ jobs:
       contents: read
       pull-requests: write
     runs-on: ubuntu-latest
-    if: github.repository == 'Sonarr/Sonarr'
     steps:
-      - uses: actions/labeler@v5
+      - uses: actions/labeler@v4

.github/workflows/lock.yml

@@ -8,15 +8,14 @@ on:
 jobs:
   lock:
     runs-on: ubuntu-latest
-    if: github.repository == 'Sonarr/Sonarr'
     steps:
-      - uses: dessant/lock-threads@v5
+      - uses: dessant/lock-threads@v2
         with:
           github-token: ${{ github.token }}
-          issue-inactive-days: '90'
-          exclude-issue-created-before: ''
-          exclude-any-issue-labels: 'one-day-maybe'
-          add-issue-labels: ''
-          issue-comment: ''
+          issue-lock-inactive-days: '90'
+          issue-exclude-created-before: ''
+          issue-exclude-labels: 'one-day-maybe'
+          issue-lock-labels: ''
+          issue-lock-comment: ''
           issue-lock-reason: 'resolved'
           process-only: ''

.github/workflows/publish-test-results.yml

@@ -0,0 +1,41 @@
+name: Publish Test Results
+
+on:
+  workflow_run:
+    workflows: ['Build']
+    types:
+      - completed
+
+permissions:
+  contents: read
+  actions: read
+  checks: write
+
+jobs:
+  report:
+    if: ${{ github.event.workflow_run.conclusion != 'skipped' && github.event.workflow_run.conclusion != 'cancelled' }}
+    runs-on: ubuntu-latest
+    steps:
+    - name: Check out
+      uses: actions/checkout@v3
+
+    - name: Download Test Reports
+      uses: actions/download-artifact@v4
+      with:
+        path: test-results
+        pattern: results-*
+        merge-multiple: true
+        repository: ${{ github.event.repository.owner.login }}/${{ github.event.repository.name }}
+        run-id:  ${{ github.event.workflow_run.id }}
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Publish Test Results
+      uses: phoenix-actions/test-reporting@v12
+      with:
+        list-suites: failed
+        list-tests: failed
+        name: Test Results
+        only-summary: true
+        path: '*.trx'
+        reporter: dotnet-trx
+        working-directory: test-results

.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'

.gitignore

@@ -127,7 +127,6 @@ coverage*.xml
 coverage*.json
 setup/Output/
 *.~is
-.mono
 
 #VS outout folders
 bin
@@ -162,6 +161,3 @@ src/.idea/
 
 # API doc generation
 .config/
-
-# Ignore Jetbrains IntelliJ Workspace Directories
-.idea/

.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "esbenp.prettier-vscode",
-    "ms-dotnettools.csdevkit",
-    "ms-vscode-remote.remote-containers"
-  ]
-}

.vscode/launch.json

@@ -1,26 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      // Use IntelliSense to find out which attributes exist for C# debugging
-      // Use hover for the description of the existing attributes
-      // For further information visit https://github.com/dotnet/vscode-csharp/blob/main/debugger-launchjson.md
-      "name": "Run Sonarr",
-      "type": "coreclr",
-      "request": "launch",
-      "preLaunchTask": "build dotnet",
-      // If you have changed target frameworks, make sure to update the program path.
-      "program": "${workspaceFolder}/_output/net6.0/Sonarr",
-      "args": [],
-      "cwd": "${workspaceFolder}",
-      // For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console
-      "console": "integratedTerminal",
-      "stopAtEntry": false
-    },
-    {
-      "name": ".NET Core Attach",
-      "type": "coreclr",
-      "request": "attach"
-    }
-  ]
-}

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "typescript.tsdk": "node_modules\\typescript\\lib"
-}

.vscode/tasks.json

@@ -1,44 +0,0 @@
-{
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "build dotnet",
-      "command": "dotnet",
-      "type": "process",
-      "args": [
-        "msbuild",
-        "-restore",
-        "${workspaceFolder}/src/Sonarr.sln",
-        "-p:GenerateFullPaths=true",
-        "-p:Configuration=Debug",
-        "-p:Platform=Posix",
-        "-consoleloggerparameters:NoSummary;ForceNoAlign"
-      ],
-      "problemMatcher": "$msCompile"
-    },
-    {
-      "label": "publish",
-      "command": "dotnet",
-      "type": "process",
-      "args": [
-        "publish",
-        "${workspaceFolder}/src/Sonarr.sln",
-        "-property:GenerateFullPaths=true",
-        "-consoleloggerparameters:NoSummary;ForceNoAlign"
-      ],
-      "problemMatcher": "$msCompile"
-    },
-    {
-      "label": "watch",
-      "command": "dotnet",
-      "type": "process",
-      "args": [
-        "watch",
-        "run",
-        "--project",
-        "${workspaceFolder}/src/Sonarr.sln"
-      ],
-      "problemMatcher": "$msCompile"
-    }
-  ]
-}

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)
@@ -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-2024
+- [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)	
+- Copyright 2010-2023

distribution/debian/install.sh

@@ -59,7 +59,7 @@ 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"
+echo "${app^} will run as the user [$app_uid] and group [$app_guid]. By continuing, you've confirmed that that user and group will have READ and WRITE access to your Media Library and Download Client Completed Download directories"
 read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
 
 # Create User / Group as needed
@@ -114,7 +114,7 @@ case "$ARCH" in
 esac
 echo ""
 echo "Removing previous tarballs"
-# -f to Force so we fail if it doesn't exist
+# -f to Force so we fail if it doesnt exist
 rm -f "${app^}".*.tar.gz
 echo ""
 echo "Downloading..."

docs.sh

@@ -25,23 +25,17 @@ slnFile=src/Sonarr.sln
 
 platform=Posix
 
-if [ "$PLATFORM" = "Windows" ]; then
-  application=Sonarr.Console.dll
-else
-  application=Sonarr.dll
-fi
-
 dotnet clean $slnFile -c Debug
 dotnet clean $slnFile -c Release
 
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v3 &
+dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/Sonarr.dll" v3 &
 
-sleep 45
+sleep 30
 
 kill %1
 

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
 
@@ -358,20 +359,11 @@ module.exports = {
       ],
 
       rules: Object.assign(typescriptEslintRecommended.rules, {
-        '@typescript-eslint/no-unused-vars': [
-          'error',
-          {
-            args: 'after-used',
-            argsIgnorePattern: '^_',
-            caughtErrorsIgnorePattern: '^_',
-            destructuredArrayIgnorePattern: '^_',
-            varsIgnorePattern: '^_',
-            ignoreRestSiblings: true
-
-          }
-        ],
-        '@typescript-eslint/explicit-function-return-type': 'off',
         'no-shadow': 'off',
+        // These should be enabled after cleaning things up
+        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        'react/prop-types': 'off',
         'prettier/prettier': 'error',
         'simple-import-sort/imports': [
           'error',
@@ -384,41 +376,7 @@ module.exports = {
               ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
             ]
           }
-        ],
-
-        // React Hooks
-        'react-hooks/rules-of-hooks': 'error',
-        'react-hooks/exhaustive-deps': 'error',
-
-        // React
-        'react/function-component-definition': 'error',
-        'react/hook-use-state': 'error',
-        'react/jsx-boolean-value': ['error', 'always'],
-        'react/jsx-curly-brace-presence': [
-          'error',
-          { props: 'never', children: 'never' }
-        ],
-        'react/jsx-fragments': 'error',
-        'react/jsx-handler-names': [
-          'error',
-          {
-            eventHandlerPrefix: 'on',
-            eventHandlerPropPrefix: 'on'
-          }
-        ],
-        'react/jsx-no-bind': ['error', { ignoreRefs: true }],
-        'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
-        'react/jsx-pascal-case': ['error', { allowAllCaps: true }],
-        'react/jsx-sort-props': [
-          'error',
-          {
-            callbacksLast: true,
-            noSortAlphabetically: true,
-            reservedFirst: true
-          }
-        ],
-        'react/prop-types': 'off',
-        'react/self-closing-comp': 'error'
+        ]
       })
     },
     {

frontend/.vscode/settings.json

@@ -9,7 +9,7 @@
 
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
+    "source.fixAll": true
   },
 
   "typescript.preferences.quoteStyle": "single",

frontend/babel.config.js

@@ -2,8 +2,6 @@ const loose = true;
 
 module.exports = {
   plugins: [
-    '@babel/plugin-transform-logical-assignment-operators',
-
     // Stage 1
     '@babel/plugin-proposal-export-default-from',
     ['@babel/plugin-transform-optional-chaining', { loose }],

frontend/build/webpack.config.js

@@ -26,7 +26,6 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
-    target: 'web',
 
     stats: {
       children: false
@@ -52,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,
@@ -67,7 +67,7 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
+      filename: '[name]-[contenthash].js',
       sourceMapFilename: '[file].map'
     },
 
@@ -92,7 +92,7 @@ module.exports = (env) => {
 
       new MiniCssExtractPlugin({
         filename: 'Content/styles.css',
-        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
+        chunkFilename: 'Content/[id]-[chunkhash].css'
       }),
 
       new HtmlWebpackPlugin({
@@ -134,12 +134,6 @@ module.exports = (env) => {
               {
                 source: 'frontend/src/Content/robots.txt',
                 destination: path.join(distFolder, 'Content/robots.txt')
-              },
-
-              // manifest.json and browserconfig.xml
-              {
-                source: 'frontend/src/Content/*.(json|xml)',
-                destination: path.join(distFolder, 'Content')
               }
             ]
           }
@@ -187,7 +181,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: '3.39'
+                      corejs: 3
                     }
                   ]
                 ]
@@ -208,7 +202,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
+                  localIdentName: '[name]/[local]/[hash:base64:5]'
                 }
               }
             },

frontend/postcss.config.js

@@ -16,7 +16,6 @@ const mixinsFiles = [
 
 module.exports = {
   plugins: [
-    'autoprefixer',
     ['postcss-mixins', {
       mixinsFiles
     }],

frontend/src/Activity/Blocklist/Blocklist.js

@@ -0,0 +1,261 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+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 { align, icons, kinds } from 'Helpers/Props';
+import getRemovedItems from 'Utilities/Object/getRemovedItems';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import BlocklistRowConnector from './BlocklistRowConnector';
+
+class Blocklist extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isConfirmRemoveModalOpen: false,
+      isConfirmClearModalOpen: false,
+      items: props.items
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items
+    } = this.props;
+
+    if (hasDifferentItems(prevProps.items, items)) {
+      this.setState((state) => {
+        return {
+          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
+          items
+        };
+      });
+
+      return;
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState);
+  };
+
+  //
+  // Listeners
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  };
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  };
+
+  onRemoveSelectedPress = () => {
+    this.setState({ isConfirmRemoveModalOpen: true });
+  };
+
+  onRemoveSelectedConfirmed = () => {
+    this.props.onRemoveSelected(this.getSelectedIds());
+    this.setState({ isConfirmRemoveModalOpen: false });
+  };
+
+  onConfirmRemoveModalClose = () => {
+    this.setState({ isConfirmRemoveModalOpen: false });
+  };
+
+  onClearBlocklistPress = () => {
+    this.setState({ isConfirmClearModalOpen: true });
+  };
+
+  onClearBlocklistConfirmed = () => {
+    this.props.onClearBlocklistPress();
+    this.setState({ isConfirmClearModalOpen: false });
+  };
+
+  onConfirmClearModalClose = () => {
+    this.setState({ isConfirmClearModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      totalRecords,
+      isRemoving,
+      isClearingBlocklistExecuting,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen,
+      isConfirmClearModalOpen
+    } = this.state;
+
+    const selectedIds = this.getSelectedIds();
+
+    return (
+      <PageContent title={translate('Blocklist')}>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label={translate('RemoveSelected')}
+              iconName={icons.REMOVE}
+              isDisabled={!selectedIds.length}
+              isSpinning={isRemoving}
+              onPress={this.onRemoveSelectedPress}
+            />
+
+            <PageToolbarButton
+              label={translate('Clear')}
+              iconName={icons.CLEAR}
+              isDisabled={!items.length}
+              isSpinning={isClearingBlocklistExecuting}
+              onPress={this.onClearBlocklistPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label={translate('Options')}
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBody>
+          {
+            isFetching && !isPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <Alert kind={kinds.DANGER}>
+                {translate('BlocklistLoadError')}
+              </Alert>
+          }
+
+          {
+            isPopulated && !error && !items.length &&
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistoryBlocklist')}
+              </Alert>
+          }
+
+          {
+            isPopulated && !error && !!items.length &&
+              <div>
+                <Table
+                  selectAll={true}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  columns={columns}
+                  {...otherProps}
+                  onSelectAllChange={this.onSelectAllChange}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <BlocklistRowConnector
+                            key={item.id}
+                            isSelected={selectedState[item.id] || false}
+                            columns={columns}
+                            {...item}
+                            onSelectedChange={this.onSelectedChange}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isFetching}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBody>
+
+        <ConfirmModal
+          isOpen={isConfirmRemoveModalOpen}
+          kind={kinds.DANGER}
+          title={translate('RemoveSelected')}
+          message={translate('RemoveSelectedBlocklistMessageText')}
+          confirmLabel={translate('RemoveSelected')}
+          onConfirm={this.onRemoveSelectedConfirmed}
+          onCancel={this.onConfirmRemoveModalClose}
+        />
+
+        <ConfirmModal
+          isOpen={isConfirmClearModalOpen}
+          kind={kinds.DANGER}
+          title={translate('ClearBlocklist')}
+          message={translate('ClearBlocklistMessageText')}
+          confirmLabel={translate('Clear')}
+          onConfirm={this.onClearBlocklistConfirmed}
+          onCancel={this.onConfirmClearModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Blocklist.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isRemoving: PropTypes.bool.isRequired,
+  isClearingBlocklistExecuting: PropTypes.bool.isRequired,
+  onRemoveSelected: PropTypes.func.isRequired,
+  onClearBlocklistPress: PropTypes.func.isRequired
+};
+
+export default Blocklist;

frontend/src/Activity/Blocklist/Blocklist.tsx

@@ -1,329 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-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';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import ConfirmModal from 'Components/Modal/ConfirmModal';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-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';
-import { CheckInputChanged } from 'typings/inputs';
-import { SelectStateInputProps } from 'typings/props';
-import { TableOptionsChangePayload } from 'typings/Table';
-import {
-  registerPagePopulator,
-  unregisterPagePopulator,
-} from 'Utilities/pagePopulator';
-import translate from 'Utilities/String/translate';
-import getSelectedIds from 'Utilities/Table/getSelectedIds';
-import BlocklistFilterModal from './BlocklistFilterModal';
-import BlocklistRow from './BlocklistRow';
-
-function Blocklist() {
-  const requestCurrentPage = useCurrentPage();
-
-  const {
-    isFetching,
-    isPopulated,
-    error,
-    items,
-    columns,
-    selectedFilterKey,
-    filters,
-    sortKey,
-    sortDirection,
-    page,
-    pageSize,
-    totalPages,
-    totalRecords,
-    isRemoving,
-  } = useSelector((state: AppState) => state.blocklist);
-
-  const customFilters = useSelector(createCustomFiltersSelector('blocklist'));
-  const isClearingBlocklistExecuting = useSelector(
-    createCommandExecutingSelector(commandNames.CLEAR_BLOCKLIST)
-  );
-  const dispatch = useDispatch();
-
-  const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
-    useState(false);
-  const [isConfirmClearModalOpen, setIsConfirmClearModalOpen] = useState(false);
-
-  const [selectState, setSelectState] = useSelectState();
-  const { allSelected, allUnselected, selectedState } = selectState;
-
-  const selectedIds = useMemo(() => {
-    return getSelectedIds(selectedState);
-  }, [selectedState]);
-
-  const wasClearingBlocklistExecuting = usePrevious(
-    isClearingBlocklistExecuting
-  );
-
-  const handleSelectAllChange = useCallback(
-    ({ value }: CheckInputChanged) => {
-      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
-    },
-    [items, setSelectState]
-  );
-
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
-      setSelectState({
-        type: 'toggleSelected',
-        items,
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [items, setSelectState]
-  );
-
-  const handleRemoveSelectedPress = useCallback(() => {
-    setIsConfirmRemoveModalOpen(true);
-  }, [setIsConfirmRemoveModalOpen]);
-
-  const handleRemoveSelectedConfirmed = useCallback(() => {
-    dispatch(removeBlocklistItems({ ids: selectedIds }));
-    setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, setIsConfirmRemoveModalOpen, dispatch]);
-
-  const handleConfirmRemoveModalClose = useCallback(() => {
-    setIsConfirmRemoveModalOpen(false);
-  }, [setIsConfirmRemoveModalOpen]);
-
-  const handleClearBlocklistPress = useCallback(() => {
-    setIsConfirmClearModalOpen(true);
-  }, [setIsConfirmClearModalOpen]);
-
-  const handleClearBlocklistConfirmed = useCallback(() => {
-    dispatch(executeCommand({ name: commandNames.CLEAR_BLOCKLIST }));
-    setIsConfirmClearModalOpen(false);
-  }, [setIsConfirmClearModalOpen, dispatch]);
-
-  const handleConfirmClearModalClose = useCallback(() => {
-    setIsConfirmClearModalOpen(false);
-  }, [setIsConfirmClearModalOpen]);
-
-  const {
-    handleFirstPagePress,
-    handlePreviousPagePress,
-    handleNextPagePress,
-    handleLastPagePress,
-    handlePageSelect,
-  } = usePaging({
-    page,
-    totalPages,
-    gotoPage: gotoBlocklistPage,
-  });
-
-  const handleFilterSelect = useCallback(
-    (selectedFilterKey: string) => {
-      dispatch(setBlocklistFilter({ selectedFilterKey }));
-    },
-    [dispatch]
-  );
-
-  const handleSortPress = useCallback(
-    (sortKey: string) => {
-      dispatch(setBlocklistSort({ sortKey }));
-    },
-    [dispatch]
-  );
-
-  const handleTableOptionChange = useCallback(
-    (payload: TableOptionsChangePayload) => {
-      dispatch(setBlocklistTableOption(payload));
-
-      if (payload.pageSize) {
-        dispatch(gotoBlocklistPage({ page: 1 }));
-      }
-    },
-    [dispatch]
-  );
-
-  useEffect(() => {
-    if (requestCurrentPage) {
-      dispatch(fetchBlocklist());
-    } else {
-      dispatch(gotoBlocklistPage({ page: 1 }));
-    }
-
-    return () => {
-      dispatch(clearBlocklist());
-    };
-  }, [requestCurrentPage, dispatch]);
-
-  useEffect(() => {
-    const repopulate = () => {
-      dispatch(fetchBlocklist());
-    };
-
-    registerPagePopulator(repopulate);
-
-    return () => {
-      unregisterPagePopulator(repopulate);
-    };
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (wasClearingBlocklistExecuting && !isClearingBlocklistExecuting) {
-      dispatch(gotoBlocklistPage({ page: 1 }));
-    }
-  }, [isClearingBlocklistExecuting, wasClearingBlocklistExecuting, dispatch]);
-
-  return (
-    <SelectProvider items={items}>
-      <PageContent title={translate('Blocklist')}>
-        <PageToolbar>
-          <PageToolbarSection>
-            <PageToolbarButton
-              label={translate('RemoveSelected')}
-              iconName={icons.REMOVE}
-              isDisabled={!selectedIds.length}
-              isSpinning={isRemoving}
-              onPress={handleRemoveSelectedPress}
-            />
-
-            <PageToolbarButton
-              label={translate('Clear')}
-              iconName={icons.CLEAR}
-              isDisabled={!items.length}
-              isSpinning={isClearingBlocklistExecuting}
-              onPress={handleClearBlocklistPress}
-            />
-          </PageToolbarSection>
-
-          <PageToolbarSection alignContent={align.RIGHT}>
-            <TableOptionsModalWrapper
-              columns={columns}
-              pageSize={pageSize}
-              onTableOptionChange={handleTableOptionChange}
-            >
-              <PageToolbarButton
-                label={translate('Options')}
-                iconName={icons.TABLE}
-              />
-            </TableOptionsModalWrapper>
-
-            <FilterMenu
-              alignMenu={align.RIGHT}
-              selectedFilterKey={selectedFilterKey}
-              filters={filters}
-              customFilters={customFilters}
-              filterModalConnectorComponent={BlocklistFilterModal}
-              onFilterSelect={handleFilterSelect}
-            />
-          </PageToolbarSection>
-        </PageToolbar>
-
-        <PageContentBody>
-          {isFetching && !isPopulated ? <LoadingIndicator /> : null}
-
-          {!isFetching && !!error ? (
-            <Alert kind={kinds.DANGER}>{translate('BlocklistLoadError')}</Alert>
-          ) : null}
-
-          {isPopulated && !error && !items.length ? (
-            <Alert kind={kinds.INFO}>
-              {selectedFilterKey === 'all'
-                ? translate('NoBlocklistItems')
-                : translate('BlocklistFilterHasNoItems')}
-            </Alert>
-          ) : null}
-
-          {isPopulated && !error && !!items.length ? (
-            <div>
-              <Table
-                selectAll={true}
-                allSelected={allSelected}
-                allUnselected={allUnselected}
-                columns={columns}
-                pageSize={pageSize}
-                sortKey={sortKey}
-                sortDirection={sortDirection}
-                onTableOptionChange={handleTableOptionChange}
-                onSelectAllChange={handleSelectAllChange}
-                onSortPress={handleSortPress}
-              >
-                <TableBody>
-                  {items.map((item) => {
-                    return (
-                      <BlocklistRow
-                        key={item.id}
-                        isSelected={selectedState[item.id] || false}
-                        columns={columns}
-                        {...item}
-                        onSelectedChange={handleSelectedChange}
-                      />
-                    );
-                  })}
-                </TableBody>
-              </Table>
-              <TablePager
-                page={page}
-                totalPages={totalPages}
-                totalRecords={totalRecords}
-                isFetching={isFetching}
-                onFirstPagePress={handleFirstPagePress}
-                onPreviousPagePress={handlePreviousPagePress}
-                onNextPagePress={handleNextPagePress}
-                onLastPagePress={handleLastPagePress}
-                onPageSelect={handlePageSelect}
-              />
-            </div>
-          ) : null}
-        </PageContentBody>
-
-        <ConfirmModal
-          isOpen={isConfirmRemoveModalOpen}
-          kind={kinds.DANGER}
-          title={translate('RemoveSelected')}
-          message={translate('RemoveSelectedBlocklistMessageText')}
-          confirmLabel={translate('RemoveSelected')}
-          onConfirm={handleRemoveSelectedConfirmed}
-          onCancel={handleConfirmRemoveModalClose}
-        />
-
-        <ConfirmModal
-          isOpen={isConfirmClearModalOpen}
-          kind={kinds.DANGER}
-          title={translate('ClearBlocklist')}
-          message={translate('ClearBlocklistMessageText')}
-          confirmLabel={translate('Clear')}
-          onConfirm={handleClearBlocklistConfirmed}
-          onCancel={handleConfirmClearModalClose}
-        />
-      </PageContent>
-    </SelectProvider>
-  );
-}
-
-export default Blocklist;

frontend/src/Activity/Blocklist/BlocklistConnector.js

@@ -0,0 +1,152 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withCurrentPage from 'Components/withCurrentPage';
+import * as blocklistActions from 'Store/Actions/blocklistActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import Blocklist from './Blocklist';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.blocklist,
+    createCommandExecutingSelector(commandNames.CLEAR_BLOCKLIST),
+    (blocklist, isClearingBlocklistExecuting) => {
+      return {
+        isClearingBlocklistExecuting,
+        ...blocklist
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...blocklistActions,
+  executeCommand
+};
+
+class BlocklistConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchBlocklist,
+      gotoBlocklistFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchBlocklist();
+    } else {
+      gotoBlocklistFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.isClearingBlocklistExecuting && !this.props.isClearingBlocklistExecuting) {
+      this.props.gotoBlocklistFirstPage();
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.clearBlocklist();
+    unregisterPagePopulator(this.repopulate);
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchBlocklist();
+  };
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoBlocklistFirstPage();
+  };
+
+  onPreviousPagePress = () => {
+    this.props.gotoBlocklistPreviousPage();
+  };
+
+  onNextPagePress = () => {
+    this.props.gotoBlocklistNextPage();
+  };
+
+  onLastPagePress = () => {
+    this.props.gotoBlocklistLastPage();
+  };
+
+  onPageSelect = (page) => {
+    this.props.gotoBlocklistPage({ page });
+  };
+
+  onRemoveSelected = (ids) => {
+    this.props.removeBlocklistItems({ ids });
+  };
+
+  onSortPress = (sortKey) => {
+    this.props.setBlocklistSort({ sortKey });
+  };
+
+  onClearBlocklistPress = () => {
+    this.props.executeCommand({ name: commandNames.CLEAR_BLOCKLIST });
+  };
+
+  onTableOptionChange = (payload) => {
+    this.props.setBlocklistTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoBlocklistFirstPage();
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Blocklist
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onRemoveSelected={this.onRemoveSelected}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
+        onClearBlocklistPress={this.onClearBlocklistPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+BlocklistConnector.propTypes = {
+  useCurrentPage: PropTypes.bool.isRequired,
+  isClearingBlocklistExecuting: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchBlocklist: PropTypes.func.isRequired,
+  gotoBlocklistFirstPage: PropTypes.func.isRequired,
+  gotoBlocklistPreviousPage: PropTypes.func.isRequired,
+  gotoBlocklistNextPage: PropTypes.func.isRequired,
+  gotoBlocklistLastPage: PropTypes.func.isRequired,
+  gotoBlocklistPage: PropTypes.func.isRequired,
+  removeBlocklistItems: PropTypes.func.isRequired,
+  setBlocklistSort: PropTypes.func.isRequired,
+  setBlocklistTableOption: PropTypes.func.isRequired,
+  clearBlocklist: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(BlocklistConnector)
+);

frontend/src/Activity/Blocklist/BlocklistDetailsModal.js

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+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 translate from 'Utilities/String/translate';
+
+class BlocklistDetailsModal extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      sourceTitle,
+      protocol,
+      indexer,
+      message,
+      onModalClose
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+      >
+        <ModalContent
+          onModalClose={onModalClose}
+        >
+          <ModalHeader>
+            Details
+          </ModalHeader>
+
+          <ModalBody>
+            <DescriptionList>
+              <DescriptionListItem
+                title={translate('Name')}
+                data={sourceTitle}
+              />
+
+              <DescriptionListItem
+                title={translate('Protocol')}
+                data={protocol}
+              />
+
+              {
+                !!message &&
+                  <DescriptionListItem
+                    title={translate('Indexer')}
+                    data={indexer}
+                  />
+              }
+
+              {
+                !!message &&
+                  <DescriptionListItem
+                    title={translate('Message')}
+                    data={message}
+                  />
+              }
+            </DescriptionList>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={onModalClose}>
+              {translate('Close')}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+BlocklistDetailsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default BlocklistDetailsModal;

frontend/src/Activity/Blocklist/BlocklistDetailsModal.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-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 DownloadProtocol from 'DownloadClient/DownloadProtocol';
-import translate from 'Utilities/String/translate';
-
-interface BlocklistDetailsModalProps {
-  isOpen: boolean;
-  sourceTitle: string;
-  protocol: DownloadProtocol;
-  indexer?: string;
-  message?: string;
-  onModalClose: () => void;
-}
-
-function BlocklistDetailsModal(props: BlocklistDetailsModalProps) {
-  const { isOpen, sourceTitle, protocol, indexer, message, onModalClose } =
-    props;
-
-  return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose}>
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>Details</ModalHeader>
-
-        <ModalBody>
-          <DescriptionList>
-            <DescriptionListItem title={translate('Name')} data={sourceTitle} />
-
-            <DescriptionListItem
-              title={translate('Protocol')}
-              data={protocol}
-            />
-
-            {message ? (
-              <DescriptionListItem
-                title={translate('Indexer')}
-                data={indexer}
-              />
-            ) : null}
-
-            {message ? (
-              <DescriptionListItem
-                title={translate('Message')}
-                data={message}
-              />
-            ) : null}
-          </DescriptionList>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button onPress={onModalClose}>{translate('Close')}</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-export default BlocklistDetailsModal;

frontend/src/Activity/Blocklist/BlocklistFilterModal.tsx

@@ -1,54 +0,0 @@
-import React, { useCallback } from 'react';
-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';
-
-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 sectionItems = useSelector(createBlocklistSelector());
-  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
-  const customFilterType = 'blocklist';
-
-  const dispatch = useDispatch();
-
-  const dispatchSetFilter = useCallback(
-    (payload: unknown) => {
-      dispatch(setBlocklistFilter(payload));
-    },
-    [dispatch]
-  );
-
-  return (
-    <FilterModal
-      // TODO: Don't spread all the props
-      {...props}
-      sectionItems={sectionItems}
-      filterBuilderProps={filterBuilderProps}
-      customFilterType={customFilterType}
-      dispatchSetFilter={dispatchSetFilter}
-    />
-  );
-}

frontend/src/Activity/Blocklist/BlocklistRow.js

@@ -0,0 +1,212 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import TableRow from 'Components/Table/TableRow';
+import EpisodeFormats from 'Episode/EpisodeFormats';
+import EpisodeLanguages from 'Episode/EpisodeLanguages';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import { icons, kinds } from 'Helpers/Props';
+import SeriesTitleLink from 'Series/SeriesTitleLink';
+import translate from 'Utilities/String/translate';
+import BlocklistDetailsModal from './BlocklistDetailsModal';
+import styles from './BlocklistRow.css';
+
+class BlocklistRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  };
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      series,
+      sourceTitle,
+      languages,
+      quality,
+      customFormats,
+      date,
+      protocol,
+      indexer,
+      message,
+      isSelected,
+      columns,
+      onSelectedChange,
+      onRemovePress
+    } = this.props;
+
+    return (
+      <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'series.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <SeriesTitleLink
+                    titleSlug={series.titleSlug}
+                    title={series.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.languages}
+                >
+                  <EpisodeLanguages
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.quality}
+                >
+                  <EpisodeQuality
+                    quality={quality}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'date') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={date}
+                />
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+
+                  <IconButton
+                    title={translate('RemoveFromBlocklist')}
+                    name={icons.REMOVE}
+                    kind={kinds.DANGER}
+                    onPress={onRemovePress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <BlocklistDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          sourceTitle={sourceTitle}
+          protocol={protocol}
+          indexer={indexer}
+          message={message}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+BlocklistRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  series: PropTypes.object.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
+  date: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onRemovePress: PropTypes.func.isRequired
+};
+
+export default BlocklistRow;

frontend/src/Activity/Blocklist/BlocklistRow.tsx

@@ -1,163 +0,0 @@
-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';
-import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
-import Column from 'Components/Table/Column';
-import TableRow from 'Components/Table/TableRow';
-import EpisodeFormats from 'Episode/EpisodeFormats';
-import EpisodeLanguages from 'Episode/EpisodeLanguages';
-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 styles from './BlocklistRow.css';
-
-interface BlocklistRowProps extends Blocklist {
-  isSelected: boolean;
-  columns: Column[];
-  onSelectedChange: (options: SelectStateInputProps) => void;
-}
-
-function BlocklistRow(props: BlocklistRowProps) {
-  const {
-    id,
-    seriesId,
-    sourceTitle,
-    languages,
-    quality,
-    customFormats,
-    date,
-    protocol,
-    indexer,
-    message,
-    isSelected,
-    columns,
-    onSelectedChange,
-  } = props;
-
-  const series = useSeries(seriesId);
-  const dispatch = useDispatch();
-  const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
-
-  const handleDetailsPress = useCallback(() => {
-    setIsDetailsModalOpen(true);
-  }, [setIsDetailsModalOpen]);
-
-  const handleDetailsModalClose = useCallback(() => {
-    setIsDetailsModalOpen(false);
-  }, [setIsDetailsModalOpen]);
-
-  const handleRemovePress = useCallback(() => {
-    dispatch(removeBlocklistItem({ id }));
-  }, [id, dispatch]);
-
-  if (!series) {
-    return null;
-  }
-
-  return (
-    <TableRow>
-      <TableSelectCell
-        id={id}
-        isSelected={isSelected}
-        onSelectedChange={onSelectedChange}
-      />
-
-      {columns.map((column) => {
-        const { name, isVisible } = column;
-
-        if (!isVisible) {
-          return null;
-        }
-
-        if (name === 'series.sortTitle') {
-          return (
-            <TableRowCell key={name}>
-              <SeriesTitleLink
-                titleSlug={series.titleSlug}
-                title={series.title}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'sourceTitle') {
-          return <TableRowCell key={name}>{sourceTitle}</TableRowCell>;
-        }
-
-        if (name === 'languages') {
-          return (
-            <TableRowCell key={name} className={styles.languages}>
-              <EpisodeLanguages languages={languages} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'quality') {
-          return (
-            <TableRowCell key={name} className={styles.quality}>
-              <EpisodeQuality quality={quality} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormats') {
-          return (
-            <TableRowCell key={name}>
-              <EpisodeFormats formats={customFormats} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'date') {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore ts(2739)
-          return <RelativeDateCell key={name} date={date} />;
-        }
-
-        if (name === 'indexer') {
-          return (
-            <TableRowCell key={name} className={styles.indexer}>
-              {indexer}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'actions') {
-          return (
-            <TableRowCell key={name} className={styles.actions}>
-              <IconButton name={icons.INFO} onPress={handleDetailsPress} />
-
-              <IconButton
-                title={translate('RemoveFromBlocklist')}
-                name={icons.REMOVE}
-                kind={kinds.DANGER}
-                onPress={handleRemovePress}
-              />
-            </TableRowCell>
-          );
-        }
-
-        return null;
-      })}
-
-      <BlocklistDetailsModal
-        isOpen={isDetailsModalOpen}
-        sourceTitle={sourceTitle}
-        protocol={protocol}
-        indexer={indexer}
-        message={message}
-        onModalClose={handleDetailsModalClose}
-      />
-    </TableRow>
-  );
-}
-
-export default BlocklistRow;

frontend/src/Activity/Blocklist/BlocklistRowConnector.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { removeBlocklistItem } from 'Store/Actions/blocklistActions';
+import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import BlocklistRow from './BlocklistRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSeriesSelector(),
+    (series) => {
+      return {
+        series
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onRemovePress() {
+      dispatch(removeBlocklistItem({ id: props.id }));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(BlocklistRow);

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

@@ -0,0 +1,354 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
+import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
+import Link from 'Components/Link/Link';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
+import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
+import translate from 'Utilities/String/translate';
+import styles from './HistoryDetails.css';
+
+function HistoryDetails(props) {
+  const {
+    eventType,
+    sourceTitle,
+    data,
+    downloadId,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  if (eventType === 'grabbed') {
+    const {
+      indexer,
+      releaseGroup,
+      seriesMatchType,
+      customFormatScore,
+      nzbInfoUrl,
+      downloadClient,
+      downloadClientName,
+      age,
+      ageHours,
+      ageMinutes,
+      publishedDate
+    } = data;
+
+    const downloadClientNameInfo = downloadClientName ?? downloadClient;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title={translate('Name')}
+          data={sourceTitle}
+        />
+
+        {
+          indexer ?
+            <DescriptionListItem
+              title={translate('Indexer')}
+              data={indexer}
+            /> :
+            null
+        }
+
+        {
+          releaseGroup ?
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('ReleaseGroup')}
+              data={releaseGroup}
+            /> :
+            null
+        }
+
+        {
+          customFormatScore && customFormatScore !== '0' ?
+            <DescriptionListItem
+              title={translate('CustomFormatScore')}
+              data={formatCustomFormatScore(customFormatScore)}
+            /> :
+            null
+        }
+
+        {
+          seriesMatchType ?
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('SeriesMatchType')}
+              data={seriesMatchType}
+            /> :
+            null
+        }
+
+        {
+          nzbInfoUrl ?
+            <span>
+              <DescriptionListItemTitle>
+                {translate('InfoUrl')}
+              </DescriptionListItemTitle>
+
+              <DescriptionListItemDescription>
+                <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
+              </DescriptionListItemDescription>
+            </span> :
+            null
+        }
+
+        {
+          downloadClientNameInfo ?
+            <DescriptionListItem
+              title={translate('DownloadClient')}
+              data={downloadClientNameInfo}
+            /> :
+            null
+        }
+
+        {
+          downloadId ?
+            <DescriptionListItem
+              title={translate('GrabId')}
+              data={downloadId}
+            /> :
+            null
+        }
+
+        {
+          age || ageHours || ageMinutes ?
+            <DescriptionListItem
+              title={translate('AgeWhenGrabbed')}
+              data={formatAge(age, ageHours, ageMinutes)}
+            /> :
+            null
+        }
+
+        {
+          publishedDate ?
+            <DescriptionListItem
+              title={translate('PublishedDate')}
+              data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
+            /> :
+            null
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadFailed') {
+    const {
+      message
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title={translate('Name')}
+          data={sourceTitle}
+        />
+
+        {
+          downloadId ?
+            <DescriptionListItem
+              title={translate('GrabId')}
+              data={downloadId}
+            /> :
+            null
+        }
+
+        {
+          message ?
+            <DescriptionListItem
+              title={translate('Message')}
+              data={message}
+            /> :
+            null
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadFolderImported') {
+    const {
+      customFormatScore,
+      droppedPath,
+      importedPath
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title={translate('Name')}
+          data={sourceTitle}
+        />
+
+        {
+          droppedPath ?
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('Source')}
+              data={droppedPath}
+            /> :
+            null
+        }
+
+        {
+          importedPath ?
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('ImportedTo')}
+              data={importedPath}
+            /> :
+            null
+        }
+
+        {
+          customFormatScore && customFormatScore !== '0' ?
+            <DescriptionListItem
+              title={translate('CustomFormatScore')}
+              data={formatCustomFormatScore(customFormatScore)}
+            /> :
+            null
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'episodeFileDeleted') {
+    const {
+      reason,
+      customFormatScore
+    } = data;
+
+    let reasonMessage = '';
+
+    switch (reason) {
+      case 'Manual':
+        reasonMessage = translate('DeletedReasonManual');
+        break;
+      case 'MissingFromDisk':
+        reasonMessage = translate('DeletedReasonEpisodeMissingFromDisk');
+        break;
+      case 'Upgrade':
+        reasonMessage = translate('DeletedReasonUpgrade');
+        break;
+      default:
+        reasonMessage = '';
+    }
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          title={translate('Name')}
+          data={sourceTitle}
+        />
+
+        <DescriptionListItem
+          title={translate('Reason')}
+          data={reasonMessage}
+        />
+
+        {
+          customFormatScore && customFormatScore !== '0' ?
+            <DescriptionListItem
+              title={translate('CustomFormatScore')}
+              data={formatCustomFormatScore(customFormatScore)}
+            /> :
+            null
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'episodeFileRenamed') {
+    const {
+      sourcePath,
+      sourceRelativePath,
+      path,
+      relativePath
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          title={translate('SourcePath')}
+          data={sourcePath}
+        />
+
+        <DescriptionListItem
+          title={translate('SourceRelativePath')}
+          data={sourceRelativePath}
+        />
+
+        <DescriptionListItem
+          title={translate('DestinationPath')}
+          data={path}
+        />
+
+        <DescriptionListItem
+          title={translate('DestinationRelativePath')}
+          data={relativePath}
+        />
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadIgnored') {
+    const {
+      message
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title={translate('Name')}
+          data={sourceTitle}
+        />
+
+        {
+          downloadId ?
+            <DescriptionListItem
+              title={translate('GrabId')}
+              data={downloadId}
+            /> :
+            null
+        }
+
+        {
+          message ?
+            <DescriptionListItem
+              title={translate('Message')}
+              data={message}
+            /> :
+            null
+        }
+      </DescriptionList>
+    );
+  }
+
+  return (
+    <DescriptionList>
+      <DescriptionListItem
+        descriptionClassName={styles.description}
+        title={translate('Name')}
+        data={sourceTitle}
+      />
+    </DescriptionList>
+  );
+}
+
+HistoryDetails.propTypes = {
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  downloadId: PropTypes.string,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default HistoryDetails;

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

@@ -1,321 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
-import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
-import Link from 'Components/Link/Link';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import {
-  DownloadFailedHistory,
-  DownloadFolderImportedHistory,
-  DownloadIgnoredHistory,
-  EpisodeFileDeletedHistory,
-  EpisodeFileRenamedHistory,
-  GrabbedHistoryData,
-  HistoryData,
-  HistoryEventType,
-} from 'typings/History';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatAge from 'Utilities/Number/formatAge';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
-import translate from 'Utilities/String/translate';
-import styles from './HistoryDetails.css';
-
-interface HistoryDetailsProps {
-  eventType: HistoryEventType;
-  sourceTitle: string;
-  data: HistoryData;
-  downloadId?: string;
-}
-
-function HistoryDetails(props: HistoryDetailsProps) {
-  const { eventType, sourceTitle, data, downloadId } = props;
-
-  const { shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
-
-  if (eventType === 'grabbed') {
-    const {
-      indexer,
-      releaseGroup,
-      seriesMatchType,
-      releaseSource,
-      customFormatScore,
-      nzbInfoUrl,
-      downloadClient,
-      downloadClientName,
-      age,
-      ageHours,
-      ageMinutes,
-      publishedDate,
-    } = 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
-          descriptionClassName={styles.description}
-          title={translate('Name')}
-          data={sourceTitle}
-        />
-
-        {indexer ? (
-          <DescriptionListItem title={translate('Indexer')} data={indexer} />
-        ) : null}
-
-        {releaseGroup ? (
-          <DescriptionListItem
-            descriptionClassName={styles.description}
-            title={translate('ReleaseGroup')}
-            data={releaseGroup}
-          />
-        ) : null}
-
-        {customFormatScore && customFormatScore !== '0' ? (
-          <DescriptionListItem
-            title={translate('CustomFormatScore')}
-            data={formatCustomFormatScore(parseInt(customFormatScore))}
-          />
-        ) : null}
-
-        {seriesMatchType ? (
-          <DescriptionListItem
-            descriptionClassName={styles.description}
-            title={translate('SeriesMatchType')}
-            data={seriesMatchType}
-          />
-        ) : null}
-
-        {releaseSource ? (
-          <DescriptionListItem
-            descriptionClassName={styles.description}
-            title={translate('ReleaseSource')}
-            data={releaseSourceMessage}
-          />
-        ) : null}
-
-        {nzbInfoUrl ? (
-          <span>
-            <DescriptionListItemTitle>
-              {translate('InfoUrl')}
-            </DescriptionListItemTitle>
-
-            <DescriptionListItemDescription>
-              <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
-            </DescriptionListItemDescription>
-          </span>
-        ) : null}
-
-        {downloadClientNameInfo ? (
-          <DescriptionListItem
-            title={translate('DownloadClient')}
-            data={downloadClientNameInfo}
-          />
-        ) : null}
-
-        {downloadId ? (
-          <DescriptionListItem title={translate('GrabId')} data={downloadId} />
-        ) : null}
-
-        {age || ageHours || ageMinutes ? (
-          <DescriptionListItem
-            title={translate('AgeWhenGrabbed')}
-            data={formatAge(age, ageHours, ageMinutes)}
-          />
-        ) : null}
-
-        {publishedDate ? (
-          <DescriptionListItem
-            title={translate('PublishedDate')}
-            data={formatDateTime(publishedDate, shortDateFormat, timeFormat, {
-              includeSeconds: true,
-            })}
-          />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'downloadFailed') {
-    const { message } = data as DownloadFailedHistory;
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem
-          descriptionClassName={styles.description}
-          title={translate('Name')}
-          data={sourceTitle}
-        />
-
-        {downloadId ? (
-          <DescriptionListItem title={translate('GrabId')} data={downloadId} />
-        ) : null}
-
-        {message ? (
-          <DescriptionListItem title={translate('Message')} data={message} />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'downloadFolderImported') {
-    const { customFormatScore, droppedPath, importedPath } =
-      data as DownloadFolderImportedHistory;
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem
-          descriptionClassName={styles.description}
-          title={translate('Name')}
-          data={sourceTitle}
-        />
-
-        {droppedPath ? (
-          <DescriptionListItem
-            descriptionClassName={styles.description}
-            title={translate('Source')}
-            data={droppedPath}
-          />
-        ) : null}
-
-        {importedPath ? (
-          <DescriptionListItem
-            descriptionClassName={styles.description}
-            title={translate('ImportedTo')}
-            data={importedPath}
-          />
-        ) : null}
-
-        {customFormatScore && customFormatScore !== '0' ? (
-          <DescriptionListItem
-            title={translate('CustomFormatScore')}
-            data={formatCustomFormatScore(parseInt(customFormatScore))}
-          />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'episodeFileDeleted') {
-    const { reason, customFormatScore } = data as EpisodeFileDeletedHistory;
-
-    let reasonMessage = '';
-
-    switch (reason) {
-      case 'Manual':
-        reasonMessage = translate('DeletedReasonManual');
-        break;
-      case 'MissingFromDisk':
-        reasonMessage = translate('DeletedReasonEpisodeMissingFromDisk');
-        break;
-      case 'Upgrade':
-        reasonMessage = translate('DeletedReasonUpgrade');
-        break;
-      default:
-        reasonMessage = '';
-    }
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem title={translate('Name')} data={sourceTitle} />
-
-        <DescriptionListItem title={translate('Reason')} data={reasonMessage} />
-
-        {customFormatScore && customFormatScore !== '0' ? (
-          <DescriptionListItem
-            title={translate('CustomFormatScore')}
-            data={formatCustomFormatScore(parseInt(customFormatScore))}
-          />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'episodeFileRenamed') {
-    const { sourcePath, sourceRelativePath, path, relativePath } =
-      data as EpisodeFileRenamedHistory;
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem
-          title={translate('SourcePath')}
-          data={sourcePath}
-        />
-
-        <DescriptionListItem
-          title={translate('SourceRelativePath')}
-          data={sourceRelativePath}
-        />
-
-        <DescriptionListItem title={translate('DestinationPath')} data={path} />
-
-        <DescriptionListItem
-          title={translate('DestinationRelativePath')}
-          data={relativePath}
-        />
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'downloadIgnored') {
-    const { message } = data as DownloadIgnoredHistory;
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem
-          descriptionClassName={styles.description}
-          title={translate('Name')}
-          data={sourceTitle}
-        />
-
-        {downloadId ? (
-          <DescriptionListItem title={translate('GrabId')} data={downloadId} />
-        ) : null}
-
-        {message ? (
-          <DescriptionListItem title={translate('Message')} data={message} />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  return (
-    <DescriptionList>
-      <DescriptionListItem
-        descriptionClassName={styles.description}
-        title={translate('Name')}
-        data={sourceTitle}
-      />
-    </DescriptionList>
-  );
-}
-
-export default HistoryDetails;

frontend/src/Activity/History/Details/HistoryDetailsConnector.js

@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import HistoryDetails from './HistoryDetails';
+
+function createMapStateToProps() {
+  return createSelector(
+    createUISettingsSelector(),
+    (uiSettings) => {
+      return _.pick(uiSettings, [
+        'shortDateFormat',
+        'timeFormat'
+      ]);
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(HistoryDetails);

frontend/src/Activity/History/Details/HistoryDetailsModal.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
@@ -7,12 +8,11 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
-import { HistoryData, HistoryEventType } from 'typings/History';
 import translate from 'Utilities/String/translate';
 import HistoryDetails from './HistoryDetails';
 import styles from './HistoryDetailsModal.css';
 
-function getHeaderTitle(eventType: HistoryEventType) {
+function getHeaderTitle(eventType) {
   switch (eventType) {
     case 'grabbed':
       return translate('Grabbed');
@@ -31,33 +31,29 @@ function getHeaderTitle(eventType: HistoryEventType) {
   }
 }
 
-interface HistoryDetailsModalProps {
-  isOpen: boolean;
-  eventType: HistoryEventType;
-  sourceTitle: string;
-  data: HistoryData;
-  downloadId?: string;
-  isMarkingAsFailed: boolean;
-  onMarkAsFailedPress: () => void;
-  onModalClose: () => void;
-}
-
-function HistoryDetailsModal(props: HistoryDetailsModalProps) {
+function HistoryDetailsModal(props) {
   const {
     isOpen,
     eventType,
     sourceTitle,
     data,
     downloadId,
-    isMarkingAsFailed = false,
+    isMarkingAsFailed,
+    shortDateFormat,
+    timeFormat,
     onMarkAsFailedPress,
-    onModalClose,
+    onModalClose
   } = props;
 
   return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
       <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>{getHeaderTitle(eventType)}</ModalHeader>
+        <ModalHeader>
+          {getHeaderTitle(eventType)}
+        </ModalHeader>
 
         <ModalBody>
           <HistoryDetails
@@ -65,26 +61,50 @@ function HistoryDetailsModal(props: HistoryDetailsModalProps) {
             sourceTitle={sourceTitle}
             data={data}
             downloadId={downloadId}
+            shortDateFormat={shortDateFormat}
+            timeFormat={timeFormat}
           />
         </ModalBody>
 
         <ModalFooter>
-          {eventType === 'grabbed' && (
-            <SpinnerButton
-              className={styles.markAsFailedButton}
-              kind={kinds.DANGER}
-              isSpinning={isMarkingAsFailed}
-              onPress={onMarkAsFailedPress}
-            >
-              {translate('MarkAsFailed')}
-            </SpinnerButton>
-          )}
+          {
+            eventType === 'grabbed' &&
+              <SpinnerButton
+                className={styles.markAsFailedButton}
+                kind={kinds.DANGER}
+                isSpinning={isMarkingAsFailed}
+                onPress={onMarkAsFailedPress}
+              >
+                {translate('MarkAsFailed')}
+              </SpinnerButton>
+          }
 
-          <Button onPress={onModalClose}>{translate('Close')}</Button>
+          <Button
+            onPress={onModalClose}
+          >
+            {translate('Close')}
+          </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
   );
 }
 
+HistoryDetailsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  downloadId: PropTypes.string,
+  isMarkingAsFailed: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+HistoryDetailsModal.defaultProps = {
+  isMarkingAsFailed: false
+};
+
 export default HistoryDetailsModal;

frontend/src/Activity/History/History.js

@@ -0,0 +1,180 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+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 { align, icons, kinds } from 'Helpers/Props';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
+import HistoryFilterModal from './HistoryFilterModal';
+import HistoryRowConnector from './HistoryRowConnector';
+
+class History extends Component {
+
+  //
+  // Lifecycle
+
+  shouldComponentUpdate(nextProps) {
+    // Don't update when fetching has completed if items have changed,
+    // before episodes start fetching or when episodes start fetching.
+
+    if (
+      (
+        this.props.isFetching &&
+        nextProps.isPopulated &&
+        hasDifferentItems(this.props.items, nextProps.items)
+      ) ||
+      (!this.props.isEpisodesFetching && nextProps.isEpisodesFetching)
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
+      totalRecords,
+      isEpisodesFetching,
+      isEpisodesPopulated,
+      episodesError,
+      onFilterSelect,
+      onFirstPagePress,
+      ...otherProps
+    } = this.props;
+
+    const isFetchingAny = isFetching || isEpisodesFetching;
+    const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length);
+    const hasError = error || episodesError;
+
+    return (
+      <PageContent title={translate('History')}>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label={translate('Refresh')}
+              iconName={icons.REFRESH}
+              isSpinning={isFetching}
+              onPress={onFirstPagePress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label={translate('Options')}
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              filterModalConnectorComponent={HistoryFilterModal}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBody>
+          {
+            isFetchingAny && !isAllPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetchingAny && hasError &&
+              <Alert kind={kinds.DANGER}>
+                {translate('HistoryLoadError')}
+              </Alert>
+          }
+
+          {
+            // If history isPopulated and it's empty show no history found and don't
+            // wait for the episodes to populate because they are never coming.
+
+            isPopulated && !hasError && !items.length &&
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistoryFound')}
+              </Alert>
+          }
+
+          {
+            isAllPopulated && !hasError && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  {...otherProps}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <HistoryRowConnector
+                            key={item.id}
+                            columns={columns}
+                            {...item}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isFetchingAny}
+                  onFirstPagePress={onFirstPagePress}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBody>
+      </PageContent>
+    );
+  }
+}
+
+History.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isEpisodesFetching: PropTypes.bool.isRequired,
+  isEpisodesPopulated: PropTypes.bool.isRequired,
+  episodesError: PropTypes.object,
+  onFilterSelect: PropTypes.func.isRequired,
+  onFirstPagePress: PropTypes.func.isRequired
+};
+
+export default History;

frontend/src/Activity/History/History.tsx

@@ -1,231 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import Alert from 'Components/Alert';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-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 { align, icons, kinds } from 'Helpers/Props';
-import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
-import { clearEpisodeFiles } from 'Store/Actions/episodeFileActions';
-import {
-  clearHistory,
-  fetchHistory,
-  gotoHistoryPage,
-  setHistoryFilter,
-  setHistorySort,
-  setHistoryTableOption,
-} from 'Store/Actions/historyActions';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import HistoryItem from 'typings/History';
-import { TableOptionsChangePayload } from 'typings/Table';
-import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
-import {
-  registerPagePopulator,
-  unregisterPagePopulator,
-} from 'Utilities/pagePopulator';
-import translate from 'Utilities/String/translate';
-import HistoryFilterModal from './HistoryFilterModal';
-import HistoryRow from './HistoryRow';
-
-function History() {
-  const requestCurrentPage = useCurrentPage();
-
-  const {
-    isFetching,
-    isPopulated,
-    error,
-    items,
-    columns,
-    selectedFilterKey,
-    filters,
-    sortKey,
-    sortDirection,
-    page,
-    pageSize,
-    totalPages,
-    totalRecords,
-  } = useSelector((state: AppState) => state.history);
-
-  const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
-    useSelector(createEpisodesFetchingSelector());
-  const customFilters = useSelector(createCustomFiltersSelector('history'));
-  const dispatch = useDispatch();
-
-  const isFetchingAny = isFetching || isEpisodesFetching;
-  const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length);
-  const hasError = error || episodesError;
-
-  const {
-    handleFirstPagePress,
-    handlePreviousPagePress,
-    handleNextPagePress,
-    handleLastPagePress,
-    handlePageSelect,
-  } = usePaging({
-    page,
-    totalPages,
-    gotoPage: gotoHistoryPage,
-  });
-
-  const handleFilterSelect = useCallback(
-    (selectedFilterKey: string) => {
-      dispatch(setHistoryFilter({ selectedFilterKey }));
-    },
-    [dispatch]
-  );
-
-  const handleSortPress = useCallback(
-    (sortKey: string) => {
-      dispatch(setHistorySort({ sortKey }));
-    },
-    [dispatch]
-  );
-
-  const handleTableOptionChange = useCallback(
-    (payload: TableOptionsChangePayload) => {
-      dispatch(setHistoryTableOption(payload));
-
-      if (payload.pageSize) {
-        dispatch(gotoHistoryPage({ page: 1 }));
-      }
-    },
-    [dispatch]
-  );
-
-  useEffect(() => {
-    if (requestCurrentPage) {
-      dispatch(fetchHistory());
-    } else {
-      dispatch(gotoHistoryPage({ page: 1 }));
-    }
-
-    return () => {
-      dispatch(clearHistory());
-      dispatch(clearEpisodes());
-      dispatch(clearEpisodeFiles());
-    };
-  }, [requestCurrentPage, dispatch]);
-
-  useEffect(() => {
-    const episodeIds = selectUniqueIds<HistoryItem, number>(items, 'episodeId');
-
-    if (episodeIds.length) {
-      dispatch(fetchEpisodes({ episodeIds }));
-    } else {
-      dispatch(clearEpisodes());
-    }
-  }, [items, dispatch]);
-
-  useEffect(() => {
-    const repopulate = () => {
-      dispatch(fetchHistory());
-    };
-
-    registerPagePopulator(repopulate);
-
-    return () => {
-      unregisterPagePopulator(repopulate);
-    };
-  }, [dispatch]);
-
-  return (
-    <PageContent title={translate('History')}>
-      <PageToolbar>
-        <PageToolbarSection>
-          <PageToolbarButton
-            label={translate('Refresh')}
-            iconName={icons.REFRESH}
-            isSpinning={isFetching}
-            onPress={handleFirstPagePress}
-          />
-        </PageToolbarSection>
-
-        <PageToolbarSection alignContent={align.RIGHT}>
-          <TableOptionsModalWrapper
-            columns={columns}
-            pageSize={pageSize}
-            onTableOptionChange={handleTableOptionChange}
-          >
-            <PageToolbarButton
-              label={translate('Options')}
-              iconName={icons.TABLE}
-            />
-          </TableOptionsModalWrapper>
-
-          <FilterMenu
-            alignMenu={align.RIGHT}
-            selectedFilterKey={selectedFilterKey}
-            filters={filters}
-            customFilters={customFilters}
-            filterModalConnectorComponent={HistoryFilterModal}
-            onFilterSelect={handleFilterSelect}
-          />
-        </PageToolbarSection>
-      </PageToolbar>
-
-      <PageContentBody>
-        {isFetchingAny && !isAllPopulated ? <LoadingIndicator /> : null}
-
-        {!isFetchingAny && hasError ? (
-          <Alert kind={kinds.DANGER}>{translate('HistoryLoadError')}</Alert>
-        ) : null}
-
-        {
-          // If history isPopulated and it's empty show no history found and don't
-          // wait for the episodes to populate because they are never coming.
-
-          isPopulated && !hasError && !items.length ? (
-            <Alert kind={kinds.INFO}>{translate('NoHistoryFound')}</Alert>
-          ) : null
-        }
-
-        {isAllPopulated && !hasError && items.length ? (
-          <div>
-            <Table
-              columns={columns}
-              pageSize={pageSize}
-              sortKey={sortKey}
-              sortDirection={sortDirection}
-              onTableOptionChange={handleTableOptionChange}
-              onSortPress={handleSortPress}
-            >
-              <TableBody>
-                {items.map((item) => {
-                  return (
-                    <HistoryRow key={item.id} columns={columns} {...item} />
-                  );
-                })}
-              </TableBody>
-            </Table>
-
-            <TablePager
-              page={page}
-              totalPages={totalPages}
-              totalRecords={totalRecords}
-              isFetching={isFetching}
-              onFirstPagePress={handleFirstPagePress}
-              onPreviousPagePress={handlePreviousPagePress}
-              onNextPagePress={handleNextPagePress}
-              onLastPagePress={handleLastPagePress}
-              onPageSelect={handlePageSelect}
-            />
-          </div>
-        ) : null}
-      </PageContentBody>
-    </PageContent>
-  );
-}
-
-export default History;

frontend/src/Activity/History/HistoryConnector.js

@@ -0,0 +1,165 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import withCurrentPage from 'Components/withCurrentPage';
+import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
+import { clearEpisodeFiles } from 'Store/Actions/episodeFileActions';
+import * as historyActions from 'Store/Actions/historyActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import History from './History';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.history,
+    (state) => state.episodes,
+    createCustomFiltersSelector('history'),
+    (history, episodes, customFilters) => {
+      return {
+        isEpisodesFetching: episodes.isFetching,
+        isEpisodesPopulated: episodes.isPopulated,
+        episodesError: episodes.error,
+        customFilters,
+        ...history
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...historyActions,
+  fetchEpisodes,
+  clearEpisodes,
+  clearEpisodeFiles
+};
+
+class HistoryConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchHistory,
+      gotoHistoryFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchHistory();
+    } else {
+      gotoHistoryFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (hasDifferentItems(prevProps.items, this.props.items)) {
+      const episodeIds = selectUniqueIds(this.props.items, 'episodeId');
+
+      if (episodeIds.length) {
+        this.props.fetchEpisodes({ episodeIds });
+      } else {
+        this.props.clearEpisodes();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearHistory();
+    this.props.clearEpisodes();
+    this.props.clearEpisodeFiles();
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchHistory();
+  };
+
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoHistoryFirstPage();
+  };
+
+  onPreviousPagePress = () => {
+    this.props.gotoHistoryPreviousPage();
+  };
+
+  onNextPagePress = () => {
+    this.props.gotoHistoryNextPage();
+  };
+
+  onLastPagePress = () => {
+    this.props.gotoHistoryLastPage();
+  };
+
+  onPageSelect = (page) => {
+    this.props.gotoHistoryPage({ page });
+  };
+
+  onSortPress = (sortKey) => {
+    this.props.setHistorySort({ sortKey });
+  };
+
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setHistoryFilter({ selectedFilterKey });
+  };
+
+  onTableOptionChange = (payload) => {
+    this.props.setHistoryTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoHistoryFirstPage();
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <History
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onFilterSelect={this.onFilterSelect}
+        onTableOptionChange={this.onTableOptionChange}
+        {...this.props}
+      />
+    );
+  }
+}
+
+HistoryConnector.propTypes = {
+  useCurrentPage: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchHistory: PropTypes.func.isRequired,
+  gotoHistoryFirstPage: PropTypes.func.isRequired,
+  gotoHistoryPreviousPage: PropTypes.func.isRequired,
+  gotoHistoryNextPage: PropTypes.func.isRequired,
+  gotoHistoryLastPage: PropTypes.func.isRequired,
+  gotoHistoryPage: PropTypes.func.isRequired,
+  setHistorySort: PropTypes.func.isRequired,
+  setHistoryFilter: PropTypes.func.isRequired,
+  setHistoryTableOption: PropTypes.func.isRequired,
+  clearHistory: PropTypes.func.isRequired,
+  fetchEpisodes: PropTypes.func.isRequired,
+  clearEpisodes: PropTypes.func.isRequired,
+  clearEpisodeFiles: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(HistoryConnector)
+);

frontend/src/Activity/History/HistoryEventTypeCell.js

@@ -1,17 +1,12 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons, kinds } from 'Helpers/Props';
-import {
-  EpisodeFileDeletedHistory,
-  GrabbedHistoryData,
-  HistoryData,
-  HistoryEventType,
-} from 'typings/History';
 import translate from 'Utilities/String/translate';
 import styles from './HistoryEventTypeCell.css';
 
-function getIconName(eventType: HistoryEventType, data: HistoryData) {
+function getIconName(eventType, data) {
   switch (eventType) {
     case 'grabbed':
       return icons.DOWNLOADING;
@@ -22,9 +17,7 @@ function getIconName(eventType: HistoryEventType, data: HistoryData) {
     case 'downloadFailed':
       return icons.DOWNLOADING;
     case 'episodeFileDeleted':
-      return (data as EpisodeFileDeletedHistory).reason === 'MissingFromDisk'
-        ? icons.FILE_MISSING
-        : icons.DELETE;
+      return data.reason === 'MissingFromDisk' ? icons.FILE_MISSING : icons.DELETE;
     case 'episodeFileRenamed':
       return icons.ORGANIZE;
     case 'downloadIgnored':
@@ -34,7 +27,7 @@ function getIconName(eventType: HistoryEventType, data: HistoryData) {
   }
 }
 
-function getIconKind(eventType: HistoryEventType) {
+function getIconKind(eventType) {
   switch (eventType) {
     case 'downloadFailed':
       return kinds.DANGER;
@@ -43,13 +36,10 @@ function getIconKind(eventType: HistoryEventType) {
   }
 }
 
-function getTooltip(eventType: HistoryEventType, data: HistoryData) {
+function getTooltip(eventType, data) {
   switch (eventType) {
     case 'grabbed':
-      return translate('EpisodeGrabbedTooltip', {
-        indexer: (data as GrabbedHistoryData).indexer,
-        downloadClient: (data as GrabbedHistoryData).downloadClient,
-      });
+      return translate('EpisodeGrabbedTooltip', { indexer: data.indexer, downloadClient: data.downloadClient });
     case 'seriesFolderImported':
       return translate('SeriesFolderImportedTooltip');
     case 'downloadFolderImported':
@@ -57,9 +47,7 @@ function getTooltip(eventType: HistoryEventType, data: HistoryData) {
     case 'downloadFailed':
       return translate('DownloadFailedEpisodeTooltip');
     case 'episodeFileDeleted':
-      return (data as EpisodeFileDeletedHistory).reason === 'MissingFromDisk'
-        ? translate('EpisodeFileMissingTooltip')
-        : translate('EpisodeFileDeletedTooltip');
+      return data.reason === 'MissingFromDisk' ? translate('EpisodeFileMissingTooltip') : translate('EpisodeFileDeletedTooltip');
     case 'episodeFileRenamed':
       return translate('EpisodeFileRenamedTooltip');
     case 'downloadIgnored':
@@ -69,21 +57,31 @@ function getTooltip(eventType: HistoryEventType, data: HistoryData) {
   }
 }
 
-interface HistoryEventTypeCellProps {
-  eventType: HistoryEventType;
-  data: HistoryData;
-}
-
-function HistoryEventTypeCell({ eventType, data }: HistoryEventTypeCellProps) {
+function HistoryEventTypeCell({ eventType, data }) {
   const iconName = getIconName(eventType, data);
   const iconKind = getIconKind(eventType);
   const tooltip = getTooltip(eventType, data);
 
   return (
-    <TableRowCell className={styles.cell} title={tooltip}>
-      <Icon name={iconName} kind={iconKind} />
+    <TableRowCell
+      className={styles.cell}
+      title={tooltip}
+    >
+      <Icon
+        name={iconName}
+        kind={iconKind}
+      />
     </TableRowCell>
   );
 }
 
+HistoryEventTypeCell.propTypes = {
+  eventType: PropTypes.string.isRequired,
+  data: PropTypes.object
+};
+
+HistoryEventTypeCell.defaultProps = {
+  data: {}
+};
+
 export default HistoryEventTypeCell;

frontend/src/Activity/History/HistoryRow.js

@@ -0,0 +1,312 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import IconButton from 'Components/Link/IconButton';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRow from 'Components/Table/TableRow';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import episodeEntities from 'Episode/episodeEntities';
+import EpisodeFormats from 'Episode/EpisodeFormats';
+import EpisodeLanguages from 'Episode/EpisodeLanguages';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
+import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
+import { icons, tooltipPositions } from 'Helpers/Props';
+import SeriesTitleLink from 'Series/SeriesTitleLink';
+import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
+import HistoryDetailsModal from './Details/HistoryDetailsModal';
+import HistoryEventTypeCell from './HistoryEventTypeCell';
+import styles from './HistoryRow.css';
+
+class HistoryRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.isMarkingAsFailed &&
+      !this.props.isMarkingAsFailed &&
+      !this.props.markAsFailedError
+    ) {
+      this.setState({ isDetailsModalOpen: false });
+    }
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  };
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      episodeId,
+      series,
+      episode,
+      languages,
+      quality,
+      customFormats,
+      customFormatScore,
+      qualityCutoffNotMet,
+      eventType,
+      sourceTitle,
+      date,
+      data,
+      downloadId,
+      isMarkingAsFailed,
+      columns,
+      shortDateFormat,
+      timeFormat,
+      onMarkAsFailedPress
+    } = this.props;
+
+    if (!episode) {
+      return null;
+    }
+
+    return (
+      <TableRow>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'eventType') {
+              return (
+                <HistoryEventTypeCell
+                  key={name}
+                  eventType={eventType}
+                  data={data}
+                />
+              );
+            }
+
+            if (name === 'series.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <SeriesTitleLink
+                    titleSlug={series.titleSlug}
+                    title={series.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episode') {
+              return (
+                <TableRowCell key={name}>
+                  <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}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episodes.title') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeTitleLink
+                    episodeId={episodeId}
+                    episodeEntity={episodeEntities.EPISODES}
+                    seriesId={series.id}
+                    episodeTitle={episode.title}
+                    showOpenSeriesButton={true}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeLanguages languages={languages} />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeQuality
+                    quality={quality}
+                    isCutoffMet={qualityCutoffNotMet}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'date') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={date}
+                />
+              );
+            }
+
+            if (name === 'downloadClient') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.downloadClient}
+                >
+                  {data.downloadClient}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {data.indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatCustomFormatScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<EpisodeFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'releaseGroup') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.releaseGroup}
+                >
+                  {data.releaseGroup}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell
+                  key={name}
+                >
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'details') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.details}
+                >
+                  <div className={styles.actionContents}>
+                    <IconButton
+                      name={icons.INFO}
+                      onPress={this.onDetailsPress}
+                    />
+                  </div>
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <HistoryDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          eventType={eventType}
+          sourceTitle={sourceTitle}
+          data={data}
+          downloadId={downloadId}
+          isMarkingAsFailed={isMarkingAsFailed}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          onMarkAsFailedPress={onMarkAsFailedPress}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+HistoryRow.propTypes = {
+  episodeId: PropTypes.number,
+  series: PropTypes.object.isRequired,
+  episode: PropTypes.object,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
+  qualityCutoffNotMet: PropTypes.bool.isRequired,
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  downloadId: PropTypes.string,
+  isMarkingAsFailed: PropTypes.bool,
+  markAsFailedError: PropTypes.object,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired
+};
+
+HistoryRow.defaultProps = {
+  customFormats: []
+};
+
+export default HistoryRow;

frontend/src/Activity/History/HistoryRow.tsx

@@ -1,270 +0,0 @@
-import React, { useCallback, useEffect, 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';
-import Column from 'Components/Table/Column';
-import TableRow from 'Components/Table/TableRow';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import episodeEntities from 'Episode/episodeEntities';
-import EpisodeFormats from 'Episode/EpisodeFormats';
-import EpisodeLanguages from 'Episode/EpisodeLanguages';
-import EpisodeQuality from 'Episode/EpisodeQuality';
-import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
-import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
-import useEpisode from 'Episode/useEpisode';
-import usePrevious from 'Helpers/Hooks/usePrevious';
-import { icons, tooltipPositions } from 'Helpers/Props';
-import Language from 'Language/Language';
-import { QualityModel } from 'Quality/Quality';
-import SeriesTitleLink from 'Series/SeriesTitleLink';
-import useSeries from 'Series/useSeries';
-import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
-import CustomFormat from 'typings/CustomFormat';
-import { HistoryData, HistoryEventType } from 'typings/History';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
-import HistoryDetailsModal from './Details/HistoryDetailsModal';
-import HistoryEventTypeCell from './HistoryEventTypeCell';
-import styles from './HistoryRow.css';
-
-interface HistoryRowProps {
-  id: number;
-  episodeId: number;
-  seriesId: number;
-  languages: Language[];
-  quality: QualityModel;
-  customFormats?: CustomFormat[];
-  customFormatScore: number;
-  qualityCutoffNotMet: boolean;
-  eventType: HistoryEventType;
-  sourceTitle: string;
-  date: string;
-  data: HistoryData;
-  downloadId?: string;
-  isMarkingAsFailed?: boolean;
-  markAsFailedError?: object;
-  columns: Column[];
-}
-
-function HistoryRow(props: HistoryRowProps) {
-  const {
-    id,
-    episodeId,
-    seriesId,
-    languages,
-    quality,
-    customFormats = [],
-    customFormatScore,
-    qualityCutoffNotMet,
-    eventType,
-    sourceTitle,
-    date,
-    data,
-    downloadId,
-    isMarkingAsFailed = false,
-    markAsFailedError,
-    columns,
-  } = props;
-
-  const wasMarkingAsFailed = usePrevious(isMarkingAsFailed);
-  const dispatch = useDispatch();
-  const series = useSeries(seriesId);
-  const episode = useEpisode(episodeId, 'episodes');
-
-  const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
-
-  const handleDetailsPress = useCallback(() => {
-    setIsDetailsModalOpen(true);
-  }, [setIsDetailsModalOpen]);
-
-  const handleDetailsModalClose = useCallback(() => {
-    setIsDetailsModalOpen(false);
-  }, [setIsDetailsModalOpen]);
-
-  const handleMarkAsFailedPress = useCallback(() => {
-    dispatch(markAsFailed({ id }));
-  }, [id, dispatch]);
-
-  useEffect(() => {
-    if (wasMarkingAsFailed && !isMarkingAsFailed && !markAsFailedError) {
-      setIsDetailsModalOpen(false);
-      dispatch(fetchHistory());
-    }
-  }, [
-    wasMarkingAsFailed,
-    isMarkingAsFailed,
-    markAsFailedError,
-    setIsDetailsModalOpen,
-    dispatch,
-  ]);
-
-  if (!series || !episode) {
-    return null;
-  }
-
-  return (
-    <TableRow>
-      {columns.map((column) => {
-        const { name, isVisible } = column;
-
-        if (!isVisible) {
-          return null;
-        }
-
-        if (name === 'eventType') {
-          return (
-            <HistoryEventTypeCell
-              key={name}
-              eventType={eventType}
-              data={data}
-            />
-          );
-        }
-
-        if (name === 'series.sortTitle') {
-          return (
-            <TableRowCell key={name}>
-              <SeriesTitleLink
-                titleSlug={series.titleSlug}
-                title={series.title}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'episode') {
-          return (
-            <TableRowCell key={name}>
-              <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}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'episodes.title') {
-          return (
-            <TableRowCell key={name}>
-              <EpisodeTitleLink
-                episodeId={episodeId}
-                episodeEntity={episodeEntities.EPISODES}
-                seriesId={series.id}
-                episodeTitle={episode.title}
-                showOpenSeriesButton={true}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'languages') {
-          return (
-            <TableRowCell key={name}>
-              <EpisodeLanguages languages={languages} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'quality') {
-          return (
-            <TableRowCell key={name}>
-              <EpisodeQuality
-                quality={quality}
-                isCutoffNotMet={qualityCutoffNotMet}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormats') {
-          return (
-            <TableRowCell key={name}>
-              <EpisodeFormats formats={customFormats} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'date') {
-          return <RelativeDateCell key={name} date={date} />;
-        }
-
-        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 ?? ''}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'indexer') {
-          return (
-            <TableRowCell key={name} className={styles.indexer}>
-              {'indexer' in data ? data.indexer : ''}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormatScore') {
-          return (
-            <TableRowCell key={name} className={styles.customFormatScore}>
-              <Tooltip
-                anchor={formatCustomFormatScore(
-                  customFormatScore,
-                  customFormats.length
-                )}
-                tooltip={<EpisodeFormats formats={customFormats} />}
-                position={tooltipPositions.BOTTOM}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'releaseGroup') {
-          return (
-            <TableRowCell key={name} className={styles.releaseGroup}>
-              {'releaseGroup' in data ? data.releaseGroup : ''}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'sourceTitle') {
-          return <TableRowCell key={name}>{sourceTitle}</TableRowCell>;
-        }
-
-        if (name === 'details') {
-          return (
-            <TableRowCell key={name} className={styles.details}>
-              <IconButton name={icons.INFO} onPress={handleDetailsPress} />
-            </TableRowCell>
-          );
-        }
-
-        return null;
-      })}
-
-      <HistoryDetailsModal
-        isOpen={isDetailsModalOpen}
-        eventType={eventType}
-        sourceTitle={sourceTitle}
-        data={data}
-        downloadId={downloadId}
-        isMarkingAsFailed={isMarkingAsFailed}
-        onMarkAsFailedPress={handleMarkAsFailedPress}
-        onModalClose={handleDetailsModalClose}
-      />
-    </TableRow>
-  );
-}
-
-export default HistoryRow;

frontend/src/Activity/History/HistoryRowConnector.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
+import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
+import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import HistoryRow from './HistoryRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSeriesSelector(),
+    createEpisodeSelector(),
+    createUISettingsSelector(),
+    (series, episode, uiSettings) => {
+      return {
+        series,
+        episode,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchHistory,
+  markAsFailed
+};
+
+class HistoryRowConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.isMarkingAsFailed &&
+      !this.props.isMarkingAsFailed &&
+      !this.props.markAsFailedError
+    ) {
+      this.props.fetchHistory();
+    }
+  }
+
+  //
+  // Listeners
+
+  onMarkAsFailedPress = () => {
+    this.props.markAsFailed({ id: this.props.id });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <HistoryRow
+        {...this.props}
+        onMarkAsFailedPress={this.onMarkAsFailedPress}
+      />
+    );
+  }
+
+}
+
+HistoryRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  isMarkingAsFailed: PropTypes.bool,
+  markAsFailedError: PropTypes.object,
+  fetchHistory: PropTypes.func.isRequired,
+  markAsFailed: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(HistoryRowConnector);

frontend/src/Activity/Queue/ProtocolLabel.css

@@ -11,7 +11,3 @@
   border-color: var(--usenetColor);
   background-color: var(--usenetColor);
 }
-
-.unknown {
-  composes: label from '~Components/Label.css';
-}

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

@@ -2,7 +2,6 @@
 // Please do not change this file!
 interface CssExports {
   'torrent': string;
-  'unknown': string;
   'usenet': string;
 }
 export const cssExports: CssExports;

frontend/src/Activity/Queue/ProtocolLabel.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+import styles from './ProtocolLabel.css';
+
+function ProtocolLabel({ protocol }) {
+  const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
+
+  return (
+    <Label className={styles[protocol]}>
+      {protocolName}
+    </Label>
+  );
+}
+
+ProtocolLabel.propTypes = {
+  protocol: PropTypes.string.isRequired
+};
+
+export default ProtocolLabel;

frontend/src/Activity/Queue/ProtocolLabel.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import Label from 'Components/Label';
-import DownloadProtocol from 'DownloadClient/DownloadProtocol';
-import styles from './ProtocolLabel.css';
-
-interface ProtocolLabelProps {
-  protocol: DownloadProtocol;
-}
-
-function ProtocolLabel({ protocol }: ProtocolLabelProps) {
-  const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
-
-  return <Label className={styles[protocol]}>{protocolName}</Label>;
-}
-
-export default ProtocolLabel;

frontend/src/Activity/Queue/Queue.js

@@ -0,0 +1,364 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+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 { align, icons, kinds } from 'Helpers/Props';
+import getRemovedItems from 'Utilities/Object/getRemovedItems';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import QueueFilterModal from './QueueFilterModal';
+import QueueOptionsConnector from './QueueOptionsConnector';
+import QueueRowConnector from './QueueRowConnector';
+import RemoveQueueItemsModal from './RemoveQueueItemsModal';
+
+class Queue extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._shouldBlockRefresh = false;
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isPendingSelected: false,
+      isConfirmRemoveModalOpen: false,
+      items: props.items
+    };
+  }
+
+  shouldComponentUpdate() {
+    if (this._shouldBlockRefresh) {
+      return false;
+    }
+
+    return true;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      isEpisodesFetching
+    } = this.props;
+
+    if (
+      (!isEpisodesFetching && prevProps.isEpisodesFetching) ||
+      (hasDifferentItems(prevProps.items, items) && !items.some((e) => e.episodeId))
+    ) {
+      this.setState((state) => {
+        return {
+          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
+          items
+        };
+      });
+
+      return;
+    }
+
+    const nextState = {};
+
+    if (prevProps.items !== items) {
+      nextState.items = items;
+    }
+
+    const selectedIds = this.getSelectedIds();
+    const isPendingSelected = _.some(this.props.items, (item) => {
+      return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
+    });
+
+    if (isPendingSelected !== this.state.isPendingSelected) {
+      nextState.isPendingSelected = isPendingSelected;
+    }
+
+    if (!_.isEmpty(nextState)) {
+      this.setState(nextState);
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState);
+  };
+
+  //
+  // Listeners
+
+  onQueueRowModalOpenOrClose = (isOpen) => {
+    this._shouldBlockRefresh = isOpen;
+  };
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  };
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  };
+
+  onGrabSelectedPress = () => {
+    this.props.onGrabSelectedPress(this.getSelectedIds());
+  };
+
+  onRemoveSelectedPress = () => {
+    this.setState({ isConfirmRemoveModalOpen: true }, () => {
+      this._shouldBlockRefresh = true;
+    });
+  };
+
+  onRemoveSelectedConfirmed = (payload) => {
+    this._shouldBlockRefresh = false;
+    this.props.onRemoveSelectedPress({ ids: this.getSelectedIds(), ...payload });
+    this.setState({ isConfirmRemoveModalOpen: false });
+  };
+
+  onConfirmRemoveModalClose = () => {
+    this._shouldBlockRefresh = false;
+    this.setState({ isConfirmRemoveModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      isEpisodesFetching,
+      isEpisodesPopulated,
+      episodesError,
+      columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
+      count,
+      totalRecords,
+      isGrabbing,
+      isRemoving,
+      isRefreshMonitoredDownloadsExecuting,
+      onRefreshPress,
+      onFilterSelect,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen,
+      isPendingSelected,
+      items
+    } = this.state;
+
+    const isRefreshing = isFetching || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting;
+    const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length || items.every((e) => !e.episodeId));
+    const hasError = error || episodesError;
+    const selectedIds = this.getSelectedIds();
+    const selectedCount = selectedIds.length;
+    const disableSelectedActions = selectedCount === 0;
+
+    return (
+      <PageContent title={translate('Queue')}>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Refresh"
+              iconName={icons.REFRESH}
+              isSpinning={isRefreshing}
+              onPress={onRefreshPress}
+            />
+
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label={translate('GrabSelected')}
+              iconName={icons.DOWNLOAD}
+              isDisabled={disableSelectedActions || !isPendingSelected}
+              isSpinning={isGrabbing}
+              onPress={this.onGrabSelectedPress}
+            />
+
+            <PageToolbarButton
+              label={translate('RemoveSelected')}
+              iconName={icons.REMOVE}
+              isDisabled={disableSelectedActions}
+              isSpinning={isRemoving}
+              onPress={this.onRemoveSelectedPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+          >
+            <TableOptionsModalWrapper
+              columns={columns}
+              {...otherProps}
+              optionsComponent={QueueOptionsConnector}
+            >
+              <PageToolbarButton
+                label={translate('Options')}
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              filterModalConnectorComponent={QueueFilterModal}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBody>
+          {
+            isRefreshing && !isAllPopulated ?
+              <LoadingIndicator /> :
+              null
+          }
+
+          {
+            !isRefreshing && hasError ?
+              <Alert kind={kinds.DANGER}>
+                {translate('QueueLoadError')}
+              </Alert> :
+              null
+          }
+
+          {
+            isAllPopulated && !hasError && !items.length ?
+              <Alert kind={kinds.INFO}>
+                {
+                  selectedFilterKey !== 'all' && count > 0 ?
+                    translate('QueueFilterHasNoItems') :
+                    translate('QueueIsEmpty')
+                }
+              </Alert> :
+              null
+          }
+
+          {
+            isAllPopulated && !hasError && !!items.length ?
+              <div>
+                <Table
+                  columns={columns}
+                  selectAll={true}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  {...otherProps}
+                  optionsComponent={QueueOptionsConnector}
+                  onSelectAllChange={this.onSelectAllChange}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <QueueRowConnector
+                            key={item.id}
+                            episodeId={item.episodeId}
+                            isSelected={selectedState[item.id]}
+                            columns={columns}
+                            {...item}
+                            onSelectedChange={this.onSelectedChange}
+                            onQueueRowModalOpenOrClose={this.onQueueRowModalOpenOrClose}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isRefreshing}
+                  {...otherProps}
+                />
+              </div> :
+              null
+          }
+        </PageContentBody>
+
+        <RemoveQueueItemsModal
+          isOpen={isConfirmRemoveModalOpen}
+          selectedCount={selectedCount}
+          canIgnore={isConfirmRemoveModalOpen && (
+            selectedIds.every((id) => {
+              const item = items.find((i) => i.id === id);
+
+              return !!(item && item.seriesId && item.episodeId);
+            })
+          )}
+          allPending={isConfirmRemoveModalOpen && (
+            selectedIds.every((id) => {
+              const item = items.find((i) => i.id === id);
+
+              if (!item) {
+                return false;
+              }
+
+              return item.status === 'delay' || item.status === 'downloadClientUnavailable';
+            })
+          )}
+          onRemovePress={this.onRemoveSelectedConfirmed}
+          onModalClose={this.onConfirmRemoveModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Queue.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isEpisodesFetching: PropTypes.bool.isRequired,
+  isEpisodesPopulated: PropTypes.bool.isRequired,
+  episodesError: PropTypes.object,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  count: PropTypes.number.isRequired,
+  totalRecords: PropTypes.number,
+  isGrabbing: PropTypes.bool.isRequired,
+  isRemoving: PropTypes.bool.isRequired,
+  isRefreshMonitoredDownloadsExecuting: PropTypes.bool.isRequired,
+  onRefreshPress: PropTypes.func.isRequired,
+  onGrabSelectedPress: PropTypes.func.isRequired,
+  onRemoveSelectedPress: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
+};
+
+Queue.defaultProps = {
+  count: 0
+};
+
+export default Queue;

frontend/src/Activity/Queue/Queue.tsx

@@ -1,415 +0,0 @@
-import React, {
-  ReactElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  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';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-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 {
-  registerPagePopulator,
-  unregisterPagePopulator,
-} from 'Utilities/pagePopulator';
-import translate from 'Utilities/String/translate';
-import getSelectedIds from 'Utilities/Table/getSelectedIds';
-import QueueFilterModal from './QueueFilterModal';
-import QueueOptions from './QueueOptions';
-import QueueRow from './QueueRow';
-import RemoveQueueItemModal, { RemovePressProps } from './RemoveQueueItemModal';
-import createQueueStatusSelector from './Status/createQueueStatusSelector';
-
-function Queue() {
-  const requestCurrentPage = useCurrentPage();
-  const dispatch = useDispatch();
-
-  const {
-    isFetching,
-    isPopulated,
-    error,
-    items,
-    columns,
-    selectedFilterKey,
-    filters,
-    sortKey,
-    sortDirection,
-    page,
-    pageSize,
-    totalPages,
-    totalRecords,
-    isGrabbing,
-    isRemoving,
-  } = useSelector((state: AppState) => state.queue.paged);
-
-  const { count } = useSelector(createQueueStatusSelector());
-  const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
-    useSelector(createEpisodesFetchingSelector());
-  const customFilters = useSelector(createCustomFiltersSelector('queue'));
-
-  const isRefreshMonitoredDownloadsExecuting = useSelector(
-    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS)
-  );
-
-  const shouldBlockRefresh = useRef(false);
-  const currentQueue = useRef<ReactElement | null>(null);
-
-  const [selectState, setSelectState] = useSelectState();
-  const { allSelected, allUnselected, selectedState } = selectState;
-
-  const selectedIds = useMemo(() => {
-    return getSelectedIds(selectedState);
-  }, [selectedState]);
-
-  const isPendingSelected = useMemo(() => {
-    return items.some((item) => {
-      return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
-    });
-  }, [items, selectedIds]);
-
-  const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
-    useState(false);
-
-  const isRefreshing =
-    isFetching || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting;
-  const isAllPopulated =
-    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 });
-    },
-    [items, setSelectState]
-  );
-
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
-      setSelectState({
-        type: 'toggleSelected',
-        items,
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [items, setSelectState]
-  );
-
-  const handleRefreshPress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: commandNames.REFRESH_MONITORED_DOWNLOADS,
-      })
-    );
-  }, [dispatch]);
-
-  const handleQueueRowModalOpenOrClose = useCallback((isOpen: boolean) => {
-    shouldBlockRefresh.current = isOpen;
-  }, []);
-
-  const handleGrabSelectedPress = useCallback(() => {
-    dispatch(grabQueueItems({ ids: selectedIds }));
-  }, [selectedIds, dispatch]);
-
-  const handleRemoveSelectedPress = useCallback(() => {
-    shouldBlockRefresh.current = true;
-    setIsConfirmRemoveModalOpen(true);
-  }, [setIsConfirmRemoveModalOpen]);
-
-  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) => {
-      dispatch(setQueueFilter({ selectedFilterKey }));
-    },
-    [dispatch]
-  );
-
-  const handleSortPress = useCallback(
-    (sortKey: string) => {
-      dispatch(setQueueSort({ sortKey }));
-    },
-    [dispatch]
-  );
-
-  const handleTableOptionChange = useCallback(
-    (payload: TableOptionsChangePayload) => {
-      dispatch(setQueueTableOption(payload));
-
-      if (payload.pageSize) {
-        dispatch(gotoQueuePage({ page: 1 }));
-      }
-    },
-    [dispatch]
-  );
-
-  useEffect(() => {
-    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());
-    }
-  }, [items, dispatch]);
-
-  useEffect(() => {
-    const repopulate = () => {
-      dispatch(fetchQueue());
-    };
-
-    registerPagePopulator(repopulate);
-
-    return () => {
-      unregisterPagePopulator(repopulate);
-    };
-  }, [dispatch]);
-
-  if (!shouldBlockRefresh.current) {
-    currentQueue.current = (
-      <PageContentBody>
-        {isRefreshing && !isAllPopulated ? <LoadingIndicator /> : null}
-
-        {!isRefreshing && hasError ? (
-          <Alert kind={kinds.DANGER}>{translate('QueueLoadError')}</Alert>
-        ) : null}
-
-        {isAllPopulated && !hasError && !items.length ? (
-          <Alert kind={kinds.INFO}>
-            {selectedFilterKey !== 'all' && count > 0
-              ? translate('QueueFilterHasNoItems')
-              : translate('QueueIsEmpty')}
-          </Alert>
-        ) : null}
-
-        {isAllPopulated && !hasError && !!items.length ? (
-          <div>
-            <Table
-              selectAll={true}
-              allSelected={allSelected}
-              allUnselected={allUnselected}
-              columns={columns}
-              pageSize={pageSize}
-              sortKey={sortKey}
-              sortDirection={sortDirection}
-              optionsComponent={QueueOptions}
-              onTableOptionChange={handleTableOptionChange}
-              onSelectAllChange={handleSelectAllChange}
-              onSortPress={handleSortPress}
-            >
-              <TableBody>
-                {items.map((item) => {
-                  return (
-                    <QueueRow
-                      key={item.id}
-                      episodeId={item.episodeId}
-                      isSelected={selectedState[item.id]}
-                      columns={columns}
-                      {...item}
-                      onSelectedChange={handleSelectedChange}
-                      onQueueRowModalOpenOrClose={
-                        handleQueueRowModalOpenOrClose
-                      }
-                    />
-                  );
-                })}
-              </TableBody>
-            </Table>
-
-            <TablePager
-              page={page}
-              totalPages={totalPages}
-              totalRecords={totalRecords}
-              isFetching={isFetching}
-              onFirstPagePress={handleFirstPagePress}
-              onPreviousPagePress={handlePreviousPagePress}
-              onNextPagePress={handleNextPagePress}
-              onLastPagePress={handleLastPagePress}
-              onPageSelect={handlePageSelect}
-            />
-          </div>
-        ) : null}
-      </PageContentBody>
-    );
-  }
-
-  return (
-    <PageContent title={translate('Queue')}>
-      <PageToolbar>
-        <PageToolbarSection>
-          <PageToolbarButton
-            label="Refresh"
-            iconName={icons.REFRESH}
-            isSpinning={isRefreshing}
-            onPress={handleRefreshPress}
-          />
-
-          <PageToolbarSeparator />
-
-          <PageToolbarButton
-            label={translate('GrabSelected')}
-            iconName={icons.DOWNLOAD}
-            isDisabled={disableSelectedActions || !isPendingSelected}
-            isSpinning={isGrabbing}
-            onPress={handleGrabSelectedPress}
-          />
-
-          <PageToolbarButton
-            label={translate('RemoveSelected')}
-            iconName={icons.REMOVE}
-            isDisabled={disableSelectedActions}
-            isSpinning={isRemoving}
-            onPress={handleRemoveSelectedPress}
-          />
-        </PageToolbarSection>
-
-        <PageToolbarSection alignContent={align.RIGHT}>
-          <TableOptionsModalWrapper
-            columns={columns}
-            pageSize={pageSize}
-            maxPageSize={200}
-            optionsComponent={QueueOptions}
-            onTableOptionChange={handleTableOptionChange}
-          >
-            <PageToolbarButton
-              label={translate('Options')}
-              iconName={icons.TABLE}
-            />
-          </TableOptionsModalWrapper>
-
-          <FilterMenu
-            alignMenu={align.RIGHT}
-            selectedFilterKey={selectedFilterKey}
-            filters={filters}
-            customFilters={customFilters}
-            filterModalConnectorComponent={QueueFilterModal}
-            onFilterSelect={handleFilterSelect}
-          />
-        </PageToolbarSection>
-      </PageToolbar>
-
-      {currentQueue.current}
-
-      <RemoveQueueItemModal
-        isOpen={isConfirmRemoveModalOpen}
-        selectedCount={selectedCount}
-        canChangeCategory={
-          isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
-            const item = items.find((i) => i.id === id);
-
-            return !!(item && item.downloadClientHasPostImportCategory);
-          })
-        }
-        canIgnore={
-          isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
-            const item = items.find((i) => i.id === id);
-
-            return !!(item && item.seriesId && item.episodeId);
-          })
-        }
-        isPending={
-          isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
-            const item = items.find((i) => i.id === id);
-
-            if (!item) {
-              return false;
-            }
-
-            return (
-              item.status === 'delay' ||
-              item.status === 'downloadClientUnavailable'
-            );
-          })
-        }
-        onRemovePress={handleRemoveSelectedConfirmed}
-        onModalClose={handleConfirmRemoveModalClose}
-      />
-    </PageContent>
-  );
-}
-
-export default Queue;

frontend/src/Activity/Queue/QueueConnector.js

@@ -0,0 +1,203 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withCurrentPage from 'Components/withCurrentPage';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
+import * as queueActions from 'Store/Actions/queueActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import Queue from './Queue';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.episodes,
+    (state) => state.queue.options,
+    (state) => state.queue.paged,
+    (state) => state.queue.status.item,
+    createCustomFiltersSelector('queue'),
+    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS),
+    (episodes, options, queue, status, customFilters, isRefreshMonitoredDownloadsExecuting) => {
+      return {
+        count: options.includeUnknownSeriesItems ? status.totalCount : status.count,
+        isEpisodesFetching: episodes.isFetching,
+        isEpisodesPopulated: episodes.isPopulated,
+        episodesError: episodes.error,
+        customFilters,
+        isRefreshMonitoredDownloadsExecuting,
+        ...options,
+        ...queue
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...queueActions,
+  fetchEpisodes,
+  clearEpisodes,
+  executeCommand
+};
+
+class QueueConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchQueue,
+      fetchQueueStatus,
+      gotoQueueFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchQueue();
+    } else {
+      gotoQueueFirstPage();
+    }
+
+    fetchQueueStatus();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (hasDifferentItems(prevProps.items, this.props.items)) {
+      const episodeIds = selectUniqueIds(this.props.items, 'episodeId');
+
+      if (episodeIds.length) {
+        this.props.fetchEpisodes({ episodeIds });
+      } else {
+        this.props.clearEpisodes();
+      }
+    }
+
+    if (
+      this.props.includeUnknownSeriesItems !==
+      prevProps.includeUnknownSeriesItems
+    ) {
+      this.repopulate();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearQueue();
+    this.props.clearEpisodes();
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchQueue();
+  };
+
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoQueueFirstPage();
+  };
+
+  onPreviousPagePress = () => {
+    this.props.gotoQueuePreviousPage();
+  };
+
+  onNextPagePress = () => {
+    this.props.gotoQueueNextPage();
+  };
+
+  onLastPagePress = () => {
+    this.props.gotoQueueLastPage();
+  };
+
+  onPageSelect = (page) => {
+    this.props.gotoQueuePage({ page });
+  };
+
+  onSortPress = (sortKey) => {
+    this.props.setQueueSort({ sortKey });
+  };
+
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setQueueFilter({ selectedFilterKey });
+  };
+
+  onTableOptionChange = (payload) => {
+    this.props.setQueueTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoQueueFirstPage();
+    }
+  };
+
+  onRefreshPress = () => {
+    this.props.executeCommand({
+      name: commandNames.REFRESH_MONITORED_DOWNLOADS
+    });
+  };
+
+  onGrabSelectedPress = (ids) => {
+    this.props.grabQueueItems({ ids });
+  };
+
+  onRemoveSelectedPress = (payload) => {
+    this.props.removeQueueItems(payload);
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Queue
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onFilterSelect={this.onFilterSelect}
+        onTableOptionChange={this.onTableOptionChange}
+        onRefreshPress={this.onRefreshPress}
+        onGrabSelectedPress={this.onGrabSelectedPress}
+        onRemoveSelectedPress={this.onRemoveSelectedPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueConnector.propTypes = {
+  includeUnknownSeriesItems: PropTypes.bool.isRequired,
+  useCurrentPage: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchQueue: PropTypes.func.isRequired,
+  fetchQueueStatus: PropTypes.func.isRequired,
+  gotoQueueFirstPage: PropTypes.func.isRequired,
+  gotoQueuePreviousPage: PropTypes.func.isRequired,
+  gotoQueueNextPage: PropTypes.func.isRequired,
+  gotoQueueLastPage: PropTypes.func.isRequired,
+  gotoQueuePage: PropTypes.func.isRequired,
+  setQueueSort: PropTypes.func.isRequired,
+  setQueueFilter: PropTypes.func.isRequired,
+  setQueueTableOption: PropTypes.func.isRequired,
+  clearQueue: PropTypes.func.isRequired,
+  grabQueueItems: PropTypes.func.isRequired,
+  removeQueueItems: PropTypes.func.isRequired,
+  fetchEpisodes: PropTypes.func.isRequired,
+  clearEpisodes: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(QueueConnector)
+);

frontend/src/Activity/Queue/QueueDetails.js

@@ -1,49 +1,36 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, tooltipPositions } from 'Helpers/Props';
-import {
-  QueueTrackedDownloadState,
-  QueueTrackedDownloadStatus,
-  StatusMessage,
-} from 'typings/Queue';
 import translate from 'Utilities/String/translate';
 import QueueStatus from './QueueStatus';
 import styles from './QueueDetails.css';
 
-interface QueueDetailsProps {
-  title: string;
-  size: number;
-  sizeleft: number;
-  estimatedCompletionTime?: string;
-  status: string;
-  trackedDownloadState?: QueueTrackedDownloadState;
-  trackedDownloadStatus?: QueueTrackedDownloadStatus;
-  statusMessages?: StatusMessage[];
-  errorMessage?: string;
-  progressBar: React.ReactNode;
-}
-
-function QueueDetails(props: QueueDetailsProps) {
+function QueueDetails(props) {
   const {
     title,
     size,
     sizeleft,
     status,
-    trackedDownloadState = 'downloading',
-    trackedDownloadStatus = 'ok',
+    trackedDownloadState,
+    trackedDownloadStatus,
     statusMessages,
     errorMessage,
-    progressBar,
+    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';
   const hasError = trackedDownloadStatus === 'error';
 
-  if ((isDownloading || isPaused) && !hasWarning && !hasError) {
+  if (
+    (isDownloading || isPaused) &&
+    !hasWarning &&
+    !hasError
+  ) {
     const state = isPaused ? translate('Paused') : translate('Downloading');
 
     if (progress < 5) {
@@ -58,9 +45,11 @@ function QueueDetails(props: QueueDetailsProps) {
     return (
       <Popover
         className={styles.progressBarContainer}
-        anchor={progressBar!}
+        anchor={progressBar}
         title={`${state} - ${progress.toFixed(1)}%`}
-        body={<div>{title}</div>}
+        body={
+          <div>{title}</div>
+        }
         position={tooltipPositions.LEFT}
       />
     );
@@ -79,4 +68,22 @@ function QueueDetails(props: QueueDetailsProps) {
   );
 }
 
+QueueDetails.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  estimatedCompletionTime: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string,
+  progressBar: PropTypes.node.isRequired
+};
+
+QueueDetails.defaultProps = {
+  trackedDownloadStatus: 'ok',
+  trackedDownloadState: 'downloading'
+};
+
 export default QueueDetails;

frontend/src/Activity/Queue/QueueOptions.js

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React, { Component, Fragment } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+class QueueOptions extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      includeUnknownSeriesItems: props.includeUnknownSeriesItems
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      includeUnknownSeriesItems
+    } = this.props;
+
+    if (includeUnknownSeriesItems !== prevProps.includeUnknownSeriesItems) {
+      this.setState({
+        includeUnknownSeriesItems
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onOptionChange = ({ name, value }) => {
+    this.setState({
+      [name]: value
+    }, () => {
+      this.props.onOptionChange({
+        [name]: value
+      });
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      includeUnknownSeriesItems
+    } = this.state;
+
+    return (
+      <Fragment>
+        <FormGroup>
+          <FormLabel>{translate('ShowUnknownSeriesItems')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.CHECK}
+            name="includeUnknownSeriesItems"
+            value={includeUnknownSeriesItems}
+            helpText={translate('ShowUnknownSeriesItemsHelpText')}
+            onChange={this.onOptionChange}
+          />
+        </FormGroup>
+      </Fragment>
+    );
+  }
+}
+
+QueueOptions.propTypes = {
+  includeUnknownSeriesItems: PropTypes.bool.isRequired,
+  onOptionChange: PropTypes.func.isRequired
+};
+
+export default QueueOptions;

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -1,48 +0,0 @@
-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 { inputTypes } from 'Helpers/Props';
-import { gotoQueuePage, setQueueOption } from 'Store/Actions/queueActions';
-import { CheckInputChanged } from 'typings/inputs';
-import translate from 'Utilities/String/translate';
-
-function QueueOptions() {
-  const dispatch = useDispatch();
-  const { includeUnknownSeriesItems } = useSelector(
-    (state: AppState) => state.queue.options
-  );
-
-  const handleOptionChange = useCallback(
-    ({ name, value }: CheckInputChanged) => {
-      dispatch(
-        setQueueOption({
-          [name]: value,
-        })
-      );
-
-      if (name === 'includeUnknownSeriesItems') {
-        dispatch(gotoQueuePage({ page: 1 }));
-      }
-    },
-    [dispatch]
-  );
-
-  return (
-    <FormGroup>
-      <FormLabel>{translate('ShowUnknownSeriesItems')}</FormLabel>
-
-      <FormInputGroup
-        type={inputTypes.CHECK}
-        name="includeUnknownSeriesItems"
-        value={includeUnknownSeriesItems}
-        helpText={translate('ShowUnknownSeriesItemsHelpText')}
-        onChange={handleOptionChange}
-      />
-    </FormGroup>
-  );
-}
-
-export default QueueOptions;

frontend/src/Activity/Queue/QueueOptionsConnector.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setQueueOption } from 'Store/Actions/queueActions';
+import QueueOptions from './QueueOptions';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.queue.options,
+    (options) => {
+      return options;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  onOptionChange: setQueueOption
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueOptions);

frontend/src/Activity/Queue/QueueRow.css

@@ -26,5 +26,4 @@
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
-  text-align: right;
 }

frontend/src/Activity/Queue/QueueRow.js

@@ -0,0 +1,478 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import ProgressBar from 'Components/ProgressBar';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import TableRow from 'Components/Table/TableRow';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import EpisodeFormats from 'Episode/EpisodeFormats';
+import EpisodeLanguages from 'Episode/EpisodeLanguages';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
+import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import SeriesTitleLink from 'Series/SeriesTitleLink';
+import formatBytes from 'Utilities/Number/formatBytes';
+import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
+import translate from 'Utilities/String/translate';
+import QueueStatusCell from './QueueStatusCell';
+import RemoveQueueItemModal from './RemoveQueueItemModal';
+import TimeleftCell from './TimeleftCell';
+import styles from './QueueRow.css';
+
+class QueueRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isRemoveQueueItemModalOpen: false,
+      isInteractiveImportModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onRemoveQueueItemPress = () => {
+    this.setState({ isRemoveQueueItemModalOpen: true });
+  };
+
+  onRemoveQueueItemModalConfirmed = (blocklist, skipRedownload) => {
+    const {
+      onRemoveQueueItemPress,
+      onQueueRowModalOpenOrClose
+    } = this.props;
+
+    onQueueRowModalOpenOrClose(false);
+    onRemoveQueueItemPress(blocklist, skipRedownload);
+
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  };
+
+  onRemoveQueueItemModalClose = () => {
+    this.props.onQueueRowModalOpenOrClose(false);
+
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  };
+
+  onInteractiveImportPress = () => {
+    this.props.onQueueRowModalOpenOrClose(true);
+
+    this.setState({ isInteractiveImportModalOpen: true });
+  };
+
+  onInteractiveImportModalClose = () => {
+    this.props.onQueueRowModalOpenOrClose(false);
+
+    this.setState({ isInteractiveImportModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      downloadId,
+      title,
+      status,
+      trackedDownloadStatus,
+      trackedDownloadState,
+      statusMessages,
+      errorMessage,
+      series,
+      episode,
+      languages,
+      quality,
+      customFormats,
+      customFormatScore,
+      protocol,
+      indexer,
+      outputPath,
+      downloadClient,
+      estimatedCompletionTime,
+      added,
+      timeleft,
+      size,
+      sizeleft,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat,
+      isGrabbing,
+      grabError,
+      isRemoving,
+      isSelected,
+      columns,
+      onSelectedChange,
+      onGrabPress
+    } = this.props;
+
+    const {
+      isRemoveQueueItemModalOpen,
+      isInteractiveImportModalOpen
+    } = this.state;
+
+    const progress = 100 - (sizeleft / size * 100);
+    const showInteractiveImport = status === 'completed' && trackedDownloadStatus === 'warning';
+    const isPending = status === 'delay' || status === 'downloadClientUnavailable';
+
+    return (
+      <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'status') {
+              return (
+                <QueueStatusCell
+                  key={name}
+                  sourceTitle={title}
+                  status={status}
+                  trackedDownloadStatus={trackedDownloadStatus}
+                  trackedDownloadState={trackedDownloadState}
+                  statusMessages={statusMessages}
+                  errorMessage={errorMessage}
+                />
+              );
+            }
+
+            if (name === 'series.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    series ?
+                      <SeriesTitleLink
+                        titleSlug={series.titleSlug}
+                        title={series.title}
+                      /> :
+                      title
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episode') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    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>
+              );
+            }
+
+            if (name === 'episodes.title') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    episode ?
+                      <EpisodeTitleLink
+                        episodeId={episode.id}
+                        seriesId={series.id}
+                        episodeFileId={episode.episodeFileId}
+                        episodeTitle={episode.title}
+                        showOpenSeriesButton={true}
+                      /> :
+                      '-'
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episodes.airDateUtc') {
+              if (episode) {
+                return (
+                  <RelativeDateCellConnector
+                    key={name}
+                    date={episode.airDateUtc}
+                  />
+                );
+              }
+
+              return (
+                <TableRowCell key={name}>
+                  -
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeLanguages
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    quality ?
+                      <EpisodeQuality
+                        quality={quality}
+                      /> :
+                      null
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatCustomFormatScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<EpisodeFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'protocol') {
+              return (
+                <TableRowCell key={name}>
+                  <ProtocolLabel
+                    protocol={protocol}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell key={name}>
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'downloadClient') {
+              return (
+                <TableRowCell key={name}>
+                  {downloadClient}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'title') {
+              return (
+                <TableRowCell key={name}>
+                  {title}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'size') {
+              return (
+                <TableRowCell key={name}>{formatBytes(size)}</TableRowCell>
+              );
+            }
+
+            if (name === 'outputPath') {
+              return (
+                <TableRowCell key={name}>
+                  {outputPath}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'estimatedCompletionTime') {
+              return (
+                <TimeleftCell
+                  key={name}
+                  status={status}
+                  estimatedCompletionTime={estimatedCompletionTime}
+                  timeleft={timeleft}
+                  size={size}
+                  sizeleft={sizeleft}
+                  showRelativeDates={showRelativeDates}
+                  shortDateFormat={shortDateFormat}
+                  timeFormat={timeFormat}
+                />
+              );
+            }
+
+            if (name === 'progress') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.progress}
+                >
+                  {
+                    !!progress &&
+                      <ProgressBar
+                        progress={progress}
+                        title={`${progress.toFixed(1)}%`}
+                      />
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'added') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={added}
+                />
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  {
+                    showInteractiveImport &&
+                      <IconButton
+                        name={icons.INTERACTIVE}
+                        onPress={this.onInteractiveImportPress}
+                      />
+                  }
+
+                  {
+                    isPending &&
+                      <SpinnerIconButton
+                        name={icons.DOWNLOAD}
+                        kind={grabError ? kinds.DANGER : kinds.DEFAULT}
+                        isSpinning={isGrabbing}
+                        onPress={onGrabPress}
+                      />
+                  }
+
+                  <SpinnerIconButton
+                    title={translate('RemoveFromQueue')}
+                    name={icons.REMOVE}
+                    isSpinning={isRemoving}
+                    onPress={this.onRemoveQueueItemPress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <InteractiveImportModal
+          isOpen={isInteractiveImportModalOpen}
+          downloadId={downloadId}
+          title={title}
+          onModalClose={this.onInteractiveImportModalClose}
+        />
+
+        <RemoveQueueItemModal
+          isOpen={isRemoveQueueItemModalOpen}
+          sourceTitle={title}
+          canIgnore={!!series}
+          isPending={isPending}
+          onRemovePress={this.onRemoveQueueItemModalConfirmed}
+          onModalClose={this.onRemoveQueueItemModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+QueueRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  downloadId: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string,
+  trackedDownloadState: PropTypes.string,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string,
+  series: PropTypes.object,
+  episode: PropTypes.object,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  outputPath: PropTypes.string,
+  downloadClient: PropTypes.string,
+  estimatedCompletionTime: PropTypes.string,
+  added: PropTypes.string,
+  timeleft: PropTypes.string,
+  size: PropTypes.number,
+  sizeleft: PropTypes.number,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  isGrabbing: PropTypes.bool.isRequired,
+  grabError: PropTypes.object,
+  isRemoving: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onGrabPress: PropTypes.func.isRequired,
+  onRemoveQueueItemPress: PropTypes.func.isRequired,
+  onQueueRowModalOpenOrClose: PropTypes.func.isRequired
+};
+
+QueueRow.defaultProps = {
+  customFormats: [],
+  isGrabbing: false,
+  isRemoving: false
+};
+
+export default QueueRow;

frontend/src/Activity/Queue/QueueRow.tsx

@@ -1,411 +0,0 @@
-import React, { useCallback, useState } from 'react';
-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';
-import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
-import Column from 'Components/Table/Column';
-import TableRow from 'Components/Table/TableRow';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import DownloadProtocol from 'DownloadClient/DownloadProtocol';
-import EpisodeFormats from 'Episode/EpisodeFormats';
-import EpisodeLanguages from 'Episode/EpisodeLanguages';
-import EpisodeQuality from 'Episode/EpisodeQuality';
-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';
-import {
-  QueueTrackedDownloadState,
-  QueueTrackedDownloadStatus,
-  StatusMessage,
-} from 'typings/Queue';
-import formatBytes from 'Utilities/Number/formatBytes';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
-import translate from 'Utilities/String/translate';
-import QueueStatusCell from './QueueStatusCell';
-import RemoveQueueItemModal, { RemovePressProps } from './RemoveQueueItemModal';
-import TimeleftCell from './TimeleftCell';
-import styles from './QueueRow.css';
-
-interface QueueRowProps {
-  id: number;
-  seriesId?: number;
-  episodeId?: number;
-  downloadId?: string;
-  title: string;
-  status: string;
-  trackedDownloadStatus?: QueueTrackedDownloadStatus;
-  trackedDownloadState?: QueueTrackedDownloadState;
-  statusMessages?: StatusMessage[];
-  errorMessage?: string;
-  languages: Language[];
-  quality: QualityModel;
-  customFormats?: CustomFormat[];
-  customFormatScore: number;
-  protocol: DownloadProtocol;
-  indexer?: string;
-  outputPath?: string;
-  downloadClient?: string;
-  downloadClientHasPostImportCategory?: boolean;
-  estimatedCompletionTime?: string;
-  added?: string;
-  timeleft?: string;
-  size: number;
-  sizeleft: number;
-  isGrabbing?: boolean;
-  grabError?: Error;
-  isRemoving?: boolean;
-  isSelected?: boolean;
-  columns: Column[];
-  onSelectedChange: (options: SelectStateInputProps) => void;
-  onQueueRowModalOpenOrClose: (isOpen: boolean) => void;
-}
-
-function QueueRow(props: QueueRowProps) {
-  const {
-    id,
-    seriesId,
-    episodeId,
-    downloadId,
-    title,
-    status,
-    trackedDownloadStatus,
-    trackedDownloadState,
-    statusMessages,
-    errorMessage,
-    languages,
-    quality,
-    customFormats = [],
-    customFormatScore,
-    protocol,
-    indexer,
-    outputPath,
-    downloadClient,
-    downloadClientHasPostImportCategory,
-    estimatedCompletionTime,
-    added,
-    timeleft,
-    size,
-    sizeleft,
-    isGrabbing = false,
-    grabError,
-    isRemoving = false,
-    isSelected,
-    columns,
-    onSelectedChange,
-    onQueueRowModalOpenOrClose,
-  } = props;
-
-  const dispatch = useDispatch();
-  const series = useSeries(seriesId);
-  const episode = useEpisode(episodeId, 'episodes');
-  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
-
-  const [isRemoveQueueItemModalOpen, setIsRemoveQueueItemModalOpen] =
-    useState(false);
-
-  const [isInteractiveImportModalOpen, setIsInteractiveImportModalOpen] =
-    useState(false);
-
-  const handleGrabPress = useCallback(() => {
-    dispatch(grabQueueItem({ id }));
-  }, [id, dispatch]);
-
-  const handleInteractiveImportPress = useCallback(() => {
-    onQueueRowModalOpenOrClose(true);
-    setIsInteractiveImportModalOpen(true);
-  }, [setIsInteractiveImportModalOpen, onQueueRowModalOpenOrClose]);
-
-  const handleInteractiveImportModalClose = useCallback(() => {
-    onQueueRowModalOpenOrClose(false);
-    setIsInteractiveImportModalOpen(false);
-  }, [setIsInteractiveImportModalOpen, onQueueRowModalOpenOrClose]);
-
-  const handleRemoveQueueItemPress = useCallback(() => {
-    onQueueRowModalOpenOrClose(true);
-    setIsRemoveQueueItemModalOpen(true);
-  }, [setIsRemoveQueueItemModalOpen, 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 showInteractiveImport =
-    status === 'completed' && trackedDownloadStatus === 'warning';
-  const isPending =
-    status === 'delay' || status === 'downloadClientUnavailable';
-
-  return (
-    <TableRow>
-      <TableSelectCell
-        id={id}
-        isSelected={isSelected}
-        onSelectedChange={onSelectedChange}
-      />
-
-      {columns.map((column) => {
-        const { name, isVisible } = column;
-
-        if (!isVisible) {
-          return null;
-        }
-
-        if (name === 'status') {
-          return (
-            <QueueStatusCell
-              key={name}
-              sourceTitle={title}
-              status={status}
-              trackedDownloadStatus={trackedDownloadStatus}
-              trackedDownloadState={trackedDownloadState}
-              statusMessages={statusMessages}
-              errorMessage={errorMessage}
-            />
-          );
-        }
-
-        if (name === 'series.sortTitle') {
-          return (
-            <TableRowCell key={name}>
-              {series ? (
-                <SeriesTitleLink
-                  titleSlug={series.titleSlug}
-                  title={series.title}
-                />
-              ) : (
-                title
-              )}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'episode') {
-          return (
-            <TableRowCell key={name}>
-              {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>
-          );
-        }
-
-        if (name === 'episodes.title') {
-          return (
-            <TableRowCell key={name}>
-              {series && episode ? (
-                <EpisodeTitleLink
-                  episodeId={episode.id}
-                  seriesId={series.id}
-                  episodeTitle={episode.title}
-                  episodeEntity="episodes"
-                  showOpenSeriesButton={true}
-                />
-              ) : (
-                '-'
-              )}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'episodes.airDateUtc') {
-          if (episode) {
-            return <RelativeDateCell key={name} date={episode.airDateUtc} />;
-          }
-
-          return <TableRowCell key={name}>-</TableRowCell>;
-        }
-
-        if (name === 'languages') {
-          return (
-            <TableRowCell key={name}>
-              <EpisodeLanguages languages={languages} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'quality') {
-          return (
-            <TableRowCell key={name}>
-              {quality ? <EpisodeQuality quality={quality} /> : null}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormats') {
-          return (
-            <TableRowCell key={name}>
-              <EpisodeFormats formats={customFormats} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormatScore') {
-          return (
-            <TableRowCell key={name} className={styles.customFormatScore}>
-              <Tooltip
-                anchor={formatCustomFormatScore(
-                  customFormatScore,
-                  customFormats.length
-                )}
-                tooltip={<EpisodeFormats formats={customFormats} />}
-                position={tooltipPositions.BOTTOM}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'protocol') {
-          return (
-            <TableRowCell key={name}>
-              <ProtocolLabel protocol={protocol} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'indexer') {
-          return <TableRowCell key={name}>{indexer}</TableRowCell>;
-        }
-
-        if (name === 'downloadClient') {
-          return <TableRowCell key={name}>{downloadClient}</TableRowCell>;
-        }
-
-        if (name === 'title') {
-          return <TableRowCell key={name}>{title}</TableRowCell>;
-        }
-
-        if (name === 'size') {
-          return <TableRowCell key={name}>{formatBytes(size)}</TableRowCell>;
-        }
-
-        if (name === 'outputPath') {
-          return <TableRowCell key={name}>{outputPath}</TableRowCell>;
-        }
-
-        if (name === 'estimatedCompletionTime') {
-          return (
-            <TimeleftCell
-              key={name}
-              status={status}
-              estimatedCompletionTime={estimatedCompletionTime}
-              timeleft={timeleft}
-              size={size}
-              sizeleft={sizeleft}
-              showRelativeDates={showRelativeDates}
-              shortDateFormat={shortDateFormat}
-              timeFormat={timeFormat}
-            />
-          );
-        }
-
-        if (name === 'progress') {
-          return (
-            <TableRowCell key={name} className={styles.progress}>
-              {!!progress && (
-                <ProgressBar
-                  progress={progress}
-                  title={`${progress.toFixed(1)}%`}
-                />
-              )}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'added') {
-          return <RelativeDateCell key={name} date={added} />;
-        }
-
-        if (name === 'actions') {
-          return (
-            <TableRowCell key={name} className={styles.actions}>
-              {showInteractiveImport ? (
-                <IconButton
-                  name={icons.INTERACTIVE}
-                  onPress={handleInteractiveImportPress}
-                />
-              ) : null}
-
-              {isPending ? (
-                <SpinnerIconButton
-                  name={icons.DOWNLOAD}
-                  kind={grabError ? kinds.DANGER : kinds.DEFAULT}
-                  isSpinning={isGrabbing}
-                  onPress={handleGrabPress}
-                />
-              ) : null}
-
-              <SpinnerIconButton
-                title={translate('RemoveFromQueue')}
-                name={icons.REMOVE}
-                isSpinning={isRemoving}
-                onPress={handleRemoveQueueItemPress}
-              />
-            </TableRowCell>
-          );
-        }
-
-        return null;
-      })}
-
-      <InteractiveImportModal
-        isOpen={isInteractiveImportModalOpen}
-        downloadId={downloadId}
-        modalTitle={title}
-        onModalClose={handleInteractiveImportModalClose}
-      />
-
-      <RemoveQueueItemModal
-        isOpen={isRemoveQueueItemModalOpen}
-        sourceTitle={title}
-        canChangeCategory={!!downloadClientHasPostImportCategory}
-        canIgnore={!!series}
-        isPending={isPending}
-        onRemovePress={handleRemoveQueueItemModalConfirmed}
-        onModalClose={handleRemoveQueueItemModalClose}
-      />
-    </TableRow>
-  );
-}
-
-export default QueueRow;

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { grabQueueItem, removeQueueItem } from 'Store/Actions/queueActions';
+import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
+import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import QueueRow from './QueueRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSeriesSelector(),
+    createEpisodeSelector(),
+    createUISettingsSelector(),
+    (series, episode, uiSettings) => {
+      const result = {
+        showRelativeDates: uiSettings.showRelativeDates,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+
+      result.series = series;
+      result.episode = episode;
+
+      return result;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  grabQueueItem,
+  removeQueueItem
+};
+
+class QueueRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onGrabPress = () => {
+    this.props.grabQueueItem({ id: this.props.id });
+  };
+
+  onRemoveQueueItemPress = (payload) => {
+    this.props.removeQueueItem({ id: this.props.id, ...payload });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <QueueRow
+        {...this.props}
+        onGrabPress={this.onGrabPress}
+        onRemoveQueueItemPress={this.onRemoveQueueItemPress}
+      />
+    );
+  }
+}
+
+QueueRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  episode: PropTypes.object,
+  grabQueueItem: PropTypes.func.isRequired,
+  removeQueueItem: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueRowConnector);

frontend/src/Activity/Queue/QueueStatus.js

@@ -1,59 +1,51 @@
+import PropTypes from 'prop-types';
 import React from 'react';
-import Icon, { IconProps } from 'Components/Icon';
+import Icon from 'Components/Icon';
 import Popover from 'Components/Tooltip/Popover';
-import { icons, kinds } from 'Helpers/Props';
-import { TooltipPosition } from 'Helpers/Props/tooltipPositions';
-import {
-  QueueTrackedDownloadState,
-  QueueTrackedDownloadStatus,
-  StatusMessage,
-} from 'typings/Queue';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './QueueStatus.css';
 
-function getDetailedPopoverBody(statusMessages: StatusMessage[]) {
+function getDetailedPopoverBody(statusMessages) {
   return (
     <div>
-      {statusMessages.map(({ title, messages }) => {
-        return (
-          <div
-            key={title}
-            className={messages.length ? undefined : styles.noMessages}
-          >
-            {title}
-            <ul>
-              {messages.map((message) => {
-                return <li key={message}>{message}</li>;
-              })}
-            </ul>
-          </div>
-        );
-      })}
+      {
+        statusMessages.map(({ title, messages }) => {
+          return (
+            <div
+              key={title}
+              className={messages.length ? undefined: styles.noMessages}
+            >
+              {title}
+              <ul>
+                {
+                  messages.map((message) => {
+                    return (
+                      <li key={message}>
+                        {message}
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            </div>
+          );
+        })
+      }
     </div>
   );
 }
 
-interface QueueStatusProps {
-  sourceTitle: string;
-  status: string;
-  trackedDownloadStatus?: QueueTrackedDownloadStatus;
-  trackedDownloadState?: QueueTrackedDownloadState;
-  statusMessages?: StatusMessage[];
-  errorMessage?: string;
-  position: TooltipPosition;
-  canFlip?: boolean;
-}
-
-function QueueStatus(props: QueueStatusProps) {
+function QueueStatus(props) {
   const {
     sourceTitle,
     status,
-    trackedDownloadStatus = 'ok',
-    trackedDownloadState = 'downloading',
-    statusMessages = [],
+    trackedDownloadStatus,
+    trackedDownloadState,
+    statusMessages,
     errorMessage,
     position,
-    canFlip = false,
+    canFlip
   } = props;
 
   const hasWarning = trackedDownloadStatus === 'warning';
@@ -61,7 +53,7 @@ function QueueStatus(props: QueueStatusProps) {
 
   // status === 'downloading'
   let iconName = icons.DOWNLOADING;
-  let iconKind: IconProps['kind'] = kinds.DEFAULT;
+  let iconKind = kinds.DEFAULT;
   let title = translate('Downloading');
 
   if (status === 'paused') {
@@ -78,11 +70,6 @@ function QueueStatus(props: QueueStatusProps) {
     iconName = icons.DOWNLOADED;
     title = translate('Downloaded');
 
-    if (trackedDownloadState === 'importBlocked') {
-      title += ` - ${translate('UnableToImportAutomatically')}`;
-      iconKind = kinds.WARNING;
-    }
-
     if (trackedDownloadState === 'importPending') {
       title += ` - ${translate('WaitingToImport')}`;
       iconKind = kinds.PURPLE;
@@ -123,8 +110,7 @@ function QueueStatus(props: QueueStatusProps) {
   if (status === 'warning') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.WARNING;
-    const warningMessage =
-      errorMessage || translate('CheckDownloadClientForDetails');
+    const warningMessage = errorMessage || translate('CheckDownloadClientForDetails');
     title = translate('DownloadWarning', { warningMessage });
   }
 
@@ -142,17 +128,35 @@ function QueueStatus(props: QueueStatusProps) {
 
   return (
     <Popover
-      anchor={<Icon name={iconName} kind={iconKind} />}
-      title={title}
-      body={
-        hasWarning || hasError
-          ? getDetailedPopoverBody(statusMessages)
-          : sourceTitle
+      anchor={
+        <Icon
+          name={iconName}
+          kind={iconKind}
+        />
       }
+      title={title}
+      body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle}
       position={position}
       canFlip={canFlip}
     />
   );
 }
 
+QueueStatus.propTypes = {
+  sourceTitle: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string,
+  position: PropTypes.oneOf(tooltipPositions.all).isRequired,
+  canFlip: PropTypes.bool.isRequired
+};
+
+QueueStatus.defaultProps = {
+  trackedDownloadStatus: 'ok',
+  trackedDownloadState: 'downloading',
+  canFlip: false
+};
+
 export default QueueStatus;

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import { tooltipPositions } from 'Helpers/Props';
+import QueueStatus from './QueueStatus';
+import styles from './QueueStatusCell.css';
+
+function QueueStatusCell(props) {
+  const {
+    sourceTitle,
+    status,
+    trackedDownloadStatus,
+    trackedDownloadState,
+    statusMessages,
+    errorMessage
+  } = props;
+
+  return (
+    <TableRowCell className={styles.status}>
+      <QueueStatus
+        sourceTitle={sourceTitle}
+        status={status}
+        trackedDownloadStatus={trackedDownloadStatus}
+        trackedDownloadState={trackedDownloadState}
+        statusMessages={statusMessages}
+        errorMessage={errorMessage}
+        position={tooltipPositions.RIGHT}
+      />
+    </TableRowCell>
+  );
+}
+
+QueueStatusCell.propTypes = {
+  sourceTitle: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string
+};
+
+QueueStatusCell.defaultProps = {
+  trackedDownloadStatus: 'ok',
+  trackedDownloadState: 'downloading'
+};
+
+export default QueueStatusCell;

frontend/src/Activity/Queue/QueueStatusCell.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import {
-  QueueTrackedDownloadState,
-  QueueTrackedDownloadStatus,
-  StatusMessage,
-} from 'typings/Queue';
-import QueueStatus from './QueueStatus';
-import styles from './QueueStatusCell.css';
-
-interface QueueStatusCellProps {
-  sourceTitle: string;
-  status: string;
-  trackedDownloadStatus?: QueueTrackedDownloadStatus;
-  trackedDownloadState?: QueueTrackedDownloadState;
-  statusMessages?: StatusMessage[];
-  errorMessage?: string;
-}
-
-function QueueStatusCell(props: QueueStatusCellProps) {
-  const {
-    sourceTitle,
-    status,
-    trackedDownloadStatus = 'ok',
-    trackedDownloadState = 'downloading',
-    statusMessages,
-    errorMessage,
-  } = props;
-
-  return (
-    <TableRowCell className={styles.status}>
-      <QueueStatus
-        sourceTitle={sourceTitle}
-        status={status}
-        trackedDownloadStatus={trackedDownloadStatus}
-        trackedDownloadState={trackedDownloadState}
-        statusMessages={statusMessages}
-        errorMessage={errorMessage}
-        position="right"
-      />
-    </TableRowCell>
-  );
-}
-
-export default QueueStatusCell;

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -0,0 +1,171 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+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 { inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+class RemoveQueueItemModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      remove: true,
+      blocklist: false,
+      skipRedownload: false
+    };
+  }
+
+  //
+  // Control
+
+  resetState = function() {
+    this.setState({
+      remove: true,
+      blocklist: false,
+      skipRedownload: false
+    });
+  };
+
+  //
+  // Listeners
+
+  onRemoveChange = ({ value }) => {
+    this.setState({ remove: value });
+  };
+
+  onBlocklistChange = ({ value }) => {
+    this.setState({ blocklist: value });
+  };
+
+  onSkipRedownloadChange = ({ value }) => {
+    this.setState({ skipRedownload: value });
+  };
+
+  onRemoveConfirmed = () => {
+    const state = this.state;
+
+    this.resetState();
+    this.props.onRemovePress(state);
+  };
+
+  onModalClose = () => {
+    this.resetState();
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      sourceTitle,
+      canIgnore,
+      isPending
+    } = this.props;
+
+    const { remove, blocklist, skipRedownload } = this.state;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            {translate('RemoveQueueItem', { sourceTitle })}
+          </ModalHeader>
+
+          <ModalBody>
+            <div>
+              {translate('RemoveQueueItemConfirmation', { sourceTitle })}
+            </div>
+
+            {
+              isPending ?
+                null :
+                <FormGroup>
+                  <FormLabel>{translate('RemoveFromDownloadClient')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="remove"
+                    value={remove}
+                    helpTextWarning={translate('RemoveFromDownloadClientHelpTextWarning')}
+                    isDisabled={!canIgnore}
+                    onChange={this.onRemoveChange}
+                  />
+                </FormGroup>
+            }
+
+            <FormGroup>
+              <FormLabel>{translate('BlocklistRelease')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="blocklist"
+                value={blocklist}
+                helpText={translate('BlocklistReleaseSearchEpisodeAgainHelpText')}
+                onChange={this.onBlocklistChange}
+              />
+            </FormGroup>
+
+            {
+              blocklist ?
+                <FormGroup>
+                  <FormLabel>{translate('SkipRedownload')}</FormLabel>
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="skipRedownload"
+                    value={skipRedownload}
+                    helpText={translate('SkipRedownloadHelpText')}
+                    onChange={this.onSkipRedownloadChange}
+                  />
+                </FormGroup> :
+                null
+            }
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              {translate('Close')}
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveConfirmed}
+            >
+              {translate('Remove')}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  canIgnore: PropTypes.bool.isRequired,
+  isPending: PropTypes.bool.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemModal;

frontend/src/Activity/Queue/RemoveQueueItemModal.tsx

@@ -1,231 +0,0 @@
-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 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 { inputTypes, kinds, sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './RemoveQueueItemModal.css';
-
-export interface RemovePressProps {
-  remove: boolean;
-  changeCategory: boolean;
-  blocklist: boolean;
-  skipRedownload: boolean;
-}
-
-interface RemoveQueueItemModalProps {
-  isOpen: boolean;
-  sourceTitle?: string;
-  canChangeCategory: boolean;
-  canIgnore: boolean;
-  isPending: boolean;
-  selectedCount?: number;
-  onRemovePress(props: RemovePressProps): void;
-  onModalClose: () => void;
-}
-
-type RemovalMethod = 'removeFromClient' | 'changeCategory' | 'ignore';
-type BlocklistMethod =
-  | 'doNotBlocklist'
-  | 'blocklistAndSearch'
-  | 'blocklistOnly';
-
-function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
-  const {
-    isOpen,
-    sourceTitle = '',
-    canIgnore,
-    canChangeCategory,
-    isPending,
-    selectedCount,
-    onRemovePress,
-    onModalClose,
-  } = props;
-
-  const multipleSelected = selectedCount && selectedCount > 1;
-
-  const [removalMethod, setRemovalMethod] =
-    useState<RemovalMethod>('removeFromClient');
-  const [blocklistMethod, setBlocklistMethod] =
-    useState<BlocklistMethod>('doNotBlocklist');
-
-  const { title, message } = useMemo(() => {
-    if (!selectedCount) {
-      return {
-        title: translate('RemoveQueueItem', { sourceTitle }),
-        message: translate('RemoveQueueItemConfirmation', { sourceTitle }),
-      };
-    }
-
-    if (selectedCount === 1) {
-      return {
-        title: translate('RemoveSelectedItem'),
-        message: translate('RemoveSelectedItemQueueMessageText'),
-      };
-    }
-
-    return {
-      title: translate('RemoveSelectedItems'),
-      message: translate('RemoveSelectedItemsQueueMessageText', {
-        selectedCount,
-      }),
-    };
-  }, [sourceTitle, selectedCount]);
-
-  const removalMethodOptions = useMemo(() => {
-    return [
-      {
-        key: 'removeFromClient',
-        value: translate('RemoveFromDownloadClient'),
-        hint: multipleSelected
-          ? translate('RemoveMultipleFromDownloadClientHint')
-          : translate('RemoveFromDownloadClientHint'),
-      },
-      {
-        key: 'changeCategory',
-        value: translate('ChangeCategory'),
-        isDisabled: !canChangeCategory,
-        hint: multipleSelected
-          ? translate('ChangeCategoryMultipleHint')
-          : translate('ChangeCategoryHint'),
-      },
-      {
-        key: 'ignore',
-        value: multipleSelected
-          ? translate('IgnoreDownloads')
-          : translate('IgnoreDownload'),
-        isDisabled: !canIgnore,
-        hint: multipleSelected
-          ? translate('IgnoreDownloadsHint')
-          : translate('IgnoreDownloadHint'),
-      },
-    ];
-  }, [canChangeCategory, canIgnore, multipleSelected]);
-
-  const blocklistMethodOptions = useMemo(() => {
-    return [
-      {
-        key: 'doNotBlocklist',
-        value: translate('DoNotBlocklist'),
-        hint: translate('DoNotBlocklistHint'),
-      },
-      {
-        key: 'blocklistAndSearch',
-        value: translate('BlocklistAndSearch'),
-        isDisabled: isPending,
-        hint: multipleSelected
-          ? translate('BlocklistAndSearchMultipleHint')
-          : translate('BlocklistAndSearchHint'),
-      },
-      {
-        key: 'blocklistOnly',
-        value: translate('BlocklistOnly'),
-        hint: multipleSelected
-          ? translate('BlocklistMultipleOnlyHint')
-          : translate('BlocklistOnlyHint'),
-      },
-    ];
-  }, [isPending, multipleSelected]);
-
-  const handleRemovalMethodChange = useCallback(
-    ({ value }: { value: RemovalMethod }) => {
-      setRemovalMethod(value);
-    },
-    [setRemovalMethod]
-  );
-
-  const handleBlocklistMethodChange = useCallback(
-    ({ value }: { value: BlocklistMethod }) => {
-      setBlocklistMethod(value);
-    },
-    [setBlocklistMethod]
-  );
-
-  const handleConfirmRemove = useCallback(() => {
-    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();
-  }, [setRemovalMethod, setBlocklistMethod, onModalClose]);
-
-  return (
-    <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={handleModalClose}>
-      <ModalContent onModalClose={handleModalClose}>
-        <ModalHeader>{title}</ModalHeader>
-
-        <ModalBody>
-          <div className={styles.message}>{message}</div>
-
-          {isPending ? null : (
-            <FormGroup>
-              <FormLabel>{translate('RemoveQueueItemRemovalMethod')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.SELECT}
-                name="removalMethod"
-                value={removalMethod}
-                values={removalMethodOptions}
-                isDisabled={!canChangeCategory && !canIgnore}
-                helpTextWarning={translate(
-                  'RemoveQueueItemRemovalMethodHelpTextWarning'
-                )}
-                onChange={handleRemovalMethodChange}
-              />
-            </FormGroup>
-          )}
-
-          <FormGroup>
-            <FormLabel>
-              {multipleSelected
-                ? translate('BlocklistReleases')
-                : translate('BlocklistRelease')}
-            </FormLabel>
-
-            <FormInputGroup
-              type={inputTypes.SELECT}
-              name="blocklistMethod"
-              value={blocklistMethod}
-              values={blocklistMethodOptions}
-              helpText={translate('BlocklistReleaseHelpText')}
-              onChange={handleBlocklistMethodChange}
-            />
-          </FormGroup>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button onPress={handleModalClose}>{translate('Close')}</Button>
-
-          <Button kind={kinds.DANGER} onPress={handleConfirmRemove}>
-            {translate('Remove')}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-export default RemoveQueueItemModal;

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -0,0 +1,174 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+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 { inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './RemoveQueueItemsModal.css';
+
+class RemoveQueueItemsModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      remove: true,
+      blocklist: false,
+      skipRedownload: false
+    };
+  }
+
+  //
+  // Control
+
+  resetState = function() {
+    this.setState({
+      remove: true,
+      blocklist: false,
+      skipRedownload: false
+    });
+  };
+
+  //
+  // Listeners
+
+  onRemoveChange = ({ value }) => {
+    this.setState({ remove: value });
+  };
+
+  onBlocklistChange = ({ value }) => {
+    this.setState({ blocklist: value });
+  };
+
+  onSkipRedownloadChange = ({ value }) => {
+    this.setState({ skipRedownload: value });
+  };
+
+  onRemoveConfirmed = () => {
+    const state = this.state;
+
+    this.resetState();
+    this.props.onRemovePress(state);
+  };
+
+  onModalClose = () => {
+    this.resetState();
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      selectedCount,
+      canIgnore,
+      allPending
+    } = this.props;
+
+    const { remove, blocklist, skipRedownload } = this.state;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            {selectedCount > 1 ? translate('RemoveSelectedItems') : translate('RemoveSelectedItem')}
+          </ModalHeader>
+
+          <ModalBody>
+            <div className={styles.message}>
+              {selectedCount > 1 ? translate('RemoveSelectedItemsQueueMessageText', { selectedCount }) : translate('RemoveSelectedItemQueueMessageText')}
+            </div>
+
+            {
+              allPending ?
+                null :
+                <FormGroup>
+                  <FormLabel>{translate('RemoveFromDownloadClient')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="remove"
+                    value={remove}
+                    helpTextWarning={translate('RemoveFromDownloadClientHelpTextWarning')}
+                    isDisabled={!canIgnore}
+                    onChange={this.onRemoveChange}
+                  />
+                </FormGroup>
+            }
+
+            <FormGroup>
+              <FormLabel>
+                {selectedCount > 1 ? translate('BlocklistReleases') : translate('BlocklistRelease')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="blocklist"
+                value={blocklist}
+                helpText={translate('BlocklistReleaseSearchEpisodeAgainHelpText')}
+                onChange={this.onBlocklistChange}
+              />
+            </FormGroup>
+
+            {
+              blocklist ?
+                <FormGroup>
+                  <FormLabel>{translate('SkipRedownload')}</FormLabel>
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="skipRedownload"
+                    value={skipRedownload}
+                    helpText={translate('SkipRedownloadHelpText')}
+                    onChange={this.onSkipRedownloadChange}
+                  />
+                </FormGroup> :
+                null
+            }
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              {translate('Close')}
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveConfirmed}
+            >
+              {translate('Remove')}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  selectedCount: PropTypes.number.isRequired,
+  canIgnore: PropTypes.bool.isRequired,
+  allPending: PropTypes.bool.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemsModal;

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

@@ -1,37 +0,0 @@
-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 usePrevious from 'Helpers/Hooks/usePrevious';
-import { fetchQueueStatus } from 'Store/Actions/queueActions';
-import createQueueStatusSelector from './createQueueStatusSelector';
-
-function QueueStatus() {
-  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} />
-  );
-}
-
-export default QueueStatus;

frontend/src/Activity/Queue/Status/QueueStatusConnector.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
+import { fetchQueueStatus } from 'Store/Actions/queueActions';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app,
+    (state) => state.queue.status,
+    (state) => state.queue.options.includeUnknownSeriesItems,
+    (app, status, includeUnknownSeriesItems) => {
+      const {
+        errors,
+        warnings,
+        unknownErrors,
+        unknownWarnings,
+        count,
+        totalCount
+      } = status.item;
+
+      return {
+        isConnected: app.isConnected,
+        isReconnecting: app.isReconnecting,
+        isPopulated: status.isPopulated,
+        ...status.item,
+        count: includeUnknownSeriesItems ? totalCount : count,
+        errors: includeUnknownSeriesItems ? errors || unknownErrors : errors,
+        warnings: includeUnknownSeriesItems ? warnings || unknownWarnings : warnings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchQueueStatus
+};
+
+class QueueStatusConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    if (!this.props.isPopulated) {
+      this.props.fetchQueueStatus();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isConnected && prevProps.isReconnecting) {
+      this.props.fetchQueueStatus();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <PageSidebarStatus
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueStatusConnector.propTypes = {
+  isConnected: PropTypes.bool.isRequired,
+  isReconnecting: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  fetchQueueStatus: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueStatusConnector);

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

@@ -1,32 +0,0 @@
-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/TimeleftCell.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -10,18 +11,7 @@ import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
 import styles from './TimeleftCell.css';
 
-interface TimeleftCellProps {
-  estimatedCompletionTime?: string;
-  timeleft?: string;
-  status: string;
-  size: number;
-  sizeleft: number;
-  showRelativeDates: boolean;
-  shortDateFormat: string;
-  timeFormat: string;
-}
-
-function TimeleftCell(props: TimeleftCellProps) {
+function TimeleftCell(props) {
   const {
     estimatedCompletionTime,
     timeleft,
@@ -30,18 +20,12 @@ function TimeleftCell(props: TimeleftCellProps) {
     sizeleft,
     showRelativeDates,
     shortDateFormat,
-    timeFormat,
+    timeFormat
   } = props;
 
   if (status === 'delay') {
-    const date = getRelativeDate({
-      date: estimatedCompletionTime,
-      shortDateFormat,
-      showRelativeDates,
-    });
-    const time = formatTime(estimatedCompletionTime, timeFormat, {
-      includeMinuteZero: true,
-    });
+    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
       <TableRowCell className={styles.timeleft}>
@@ -56,14 +40,8 @@ function TimeleftCell(props: TimeleftCellProps) {
   }
 
   if (status === 'downloadClientUnavailable') {
-    const date = getRelativeDate({
-      date: estimatedCompletionTime,
-      shortDateFormat,
-      showRelativeDates,
-    });
-    const time = formatTime(estimatedCompletionTime, timeFormat, {
-      includeMinuteZero: true,
-    });
+    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
       <TableRowCell className={styles.timeleft}>
@@ -78,7 +56,11 @@ function TimeleftCell(props: TimeleftCellProps) {
   }
 
   if (!timeleft || status === 'completed' || status === 'failed') {
-    return <TableRowCell className={styles.timeleft}>-</TableRowCell>;
+    return (
+      <TableRowCell className={styles.timeleft}>
+        -
+      </TableRowCell>
+    );
   }
 
   const totalSize = formatBytes(size);
@@ -94,4 +76,15 @@ function TimeleftCell(props: TimeleftCellProps) {
   );
 }
 
+TimeleftCell.propTypes = {
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
 export default TimeleftCell;

frontend/src/AddSeries/AddNewSeries/AddNewSeries.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Alert from 'Components/Alert';
 import TextInput from 'Components/Form/TextInput';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
@@ -130,8 +129,7 @@ class AddNewSeries extends Component {
                 <div className={styles.helpText}>
                   {translate('AddNewSeriesError')}
                 </div>
-
-                <Alert kind={kinds.DANGER}>{getErrorMessage(error)}</Alert>
+                <div>{getErrorMessage(error)}</div>
               </div> : null
           }
 

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css

@@ -69,16 +69,6 @@
   height: 55px;
 }
 
-.originalLanguageName,
-.network,
-.genres {
-  margin-left: 8px;
-}
-
-.genres {
-  pointer-events: all;
-}
-
 .tvdbLink {
   composes: link from '~Components/Link/Link.css';
 

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

@@ -3,10 +3,7 @@
 interface CssExports {
   'alreadyExistsIcon': string;
   'content': string;
-  'genres': string;
   'icons': string;
-  'network': string;
-  'originalLanguageName': string;
   'overlay': string;
   'overview': string;
   'poster': string;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -6,7 +6,6 @@ import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
 import MetadataAttribution from 'Components/MetadataAttribution';
 import { icons, kinds, sizes } from 'Helpers/Props';
-import SeriesGenres from 'Series/SeriesGenres';
 import SeriesPoster from 'Series/SeriesPoster';
 import translate from 'Utilities/String/translate';
 import AddNewSeriesModal from './AddNewSeriesModal';
@@ -56,8 +55,6 @@ class AddNewSeriesSearchResult extends Component {
       titleSlug,
       year,
       network,
-      originalLanguage,
-      genres,
       status,
       overview,
       statistics,
@@ -148,49 +145,14 @@ class AddNewSeriesSearchResult extends Component {
               <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} />
+                    {network}
                   </Label> :
                   null
               }
@@ -256,8 +218,6 @@ AddNewSeriesSearchResult.propTypes = {
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   network: PropTypes.string,
-  originalLanguage: PropTypes.object,
-  genres: PropTypes.arrayOf(PropTypes.string),
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,
   statistics: PropTypes.object.isRequired,
@@ -269,8 +229,4 @@ AddNewSeriesSearchResult.propTypes = {
   isSmallScreen: PropTypes.bool.isRequired
 };
 
-AddNewSeriesSearchResult.defaultProps = {
-  genres: []
-};
-
 export default AddNewSeriesSearchResult;

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/App/App.js

@@ -0,0 +1,31 @@
+import { ConnectedRouter } from 'connected-react-router';
+import PropTypes from 'prop-types';
+import React from 'react';
+import DocumentTitle from 'react-document-title';
+import { Provider } from 'react-redux';
+import PageConnector from 'Components/Page/PageConnector';
+import ApplyTheme from './ApplyTheme';
+import AppRoutes from './AppRoutes';
+
+function App({ store, history }) {
+  return (
+    <DocumentTitle title={window.Sonarr.instanceName}>
+      <Provider store={store}>
+        <ConnectedRouter history={history}>
+          <ApplyTheme>
+            <PageConnector>
+              <AppRoutes app={App} />
+            </PageConnector>
+          </ApplyTheme>
+        </ConnectedRouter>
+      </Provider>
+    </DocumentTitle>
+  );
+}
+
+App.propTypes = {
+  store: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
+};
+
+export default App;

frontend/src/App/App.tsx

@@ -1,35 +0,0 @@
-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 PageConnector from 'Components/Page/PageConnector';
-import ApplyTheme from './ApplyTheme';
-import AppRoutes from './AppRoutes';
-
-interface AppProps {
-  store: Store;
-  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 />
-            <PageConnector>
-              <AppRoutes />
-            </PageConnector>
-          </ConnectedRouter>
-        </Provider>
-      </QueryClientProvider>
-    </DocumentTitle>
-  );
-}
-
-export default App;

frontend/src/App/AppRoutes.js

@@ -0,0 +1,280 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import BlocklistConnector from 'Activity/Blocklist/BlocklistConnector';
+import HistoryConnector from 'Activity/History/HistoryConnector';
+import QueueConnector from 'Activity/Queue/QueueConnector';
+import AddNewSeriesConnector from 'AddSeries/AddNewSeries/AddNewSeriesConnector';
+import ImportSeries from 'AddSeries/ImportSeries/ImportSeries';
+import CalendarPageConnector from 'Calendar/CalendarPageConnector';
+import NotFound from 'Components/NotFound';
+import Switch from 'Components/Router/Switch';
+import SeriesDetailsPageConnector from 'Series/Details/SeriesDetailsPageConnector';
+import SeriesIndex from 'Series/Index/SeriesIndex';
+import CustomFormatSettingsPage from 'Settings/CustomFormats/CustomFormatSettingsPage';
+import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
+import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
+import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
+import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
+import MetadataSettings from 'Settings/Metadata/MetadataSettings';
+import MetadataSourceSettings from 'Settings/MetadataSource/MetadataSourceSettings';
+import NotificationSettings from 'Settings/Notifications/NotificationSettings';
+import Profiles from 'Settings/Profiles/Profiles';
+import QualityConnector from 'Settings/Quality/QualityConnector';
+import Settings from 'Settings/Settings';
+import TagSettings from 'Settings/Tags/TagSettings';
+import UISettingsConnector from 'Settings/UI/UISettingsConnector';
+import BackupsConnector from 'System/Backup/BackupsConnector';
+import LogsTableConnector from 'System/Events/LogsTableConnector';
+import Logs from 'System/Logs/Logs';
+import Status from 'System/Status/Status';
+import Tasks from 'System/Tasks/Tasks';
+import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
+import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
+import MissingConnector from 'Wanted/Missing/MissingConnector';
+
+function AppRoutes(props) {
+  const {
+    app
+  } = props;
+
+  return (
+    <Switch>
+      {/*
+        Series
+      */}
+
+      <Route
+        exact={true}
+        path="/"
+        component={SeriesIndex}
+      />
+
+      {
+        window.Sonarr.urlBase &&
+          <Route
+            exact={true}
+            path="/"
+            addUrlBase={false}
+            render={() => {
+              return (
+                <Redirect
+                  to={getPathWithUrlBase('/')}
+                  component={app}
+                />
+              );
+            }}
+          />
+      }
+
+      <Route
+        path="/add/new"
+        component={AddNewSeriesConnector}
+      />
+
+      <Route
+        path="/add/import"
+        component={ImportSeries}
+      />
+
+      <Route
+        path="/serieseditor"
+        exact={true}
+        render={() => {
+          return (
+            <Redirect
+              to={getPathWithUrlBase('/')}
+              component={app}
+            />
+          );
+        }}
+      />
+
+      <Route
+        path="/seasonpass"
+        exact={true}
+        render={() => {
+          return (
+            <Redirect
+              to={getPathWithUrlBase('/')}
+              component={app}
+            />
+          );
+        }}
+      />
+
+      <Route
+        path="/series/:titleSlug"
+        component={SeriesDetailsPageConnector}
+      />
+
+      {/*
+        Calendar
+      */}
+
+      <Route
+        path="/calendar"
+        component={CalendarPageConnector}
+      />
+
+      {/*
+        Activity
+      */}
+
+      <Route
+        path="/activity/history"
+        component={HistoryConnector}
+      />
+
+      <Route
+        path="/activity/queue"
+        component={QueueConnector}
+      />
+
+      <Route
+        path="/activity/blocklist"
+        component={BlocklistConnector}
+      />
+
+      {/*
+        Wanted
+      */}
+
+      <Route
+        path="/wanted/missing"
+        component={MissingConnector}
+      />
+
+      <Route
+        path="/wanted/cutoffunmet"
+        component={CutoffUnmetConnector}
+      />
+
+      {/*
+        Settings
+      */}
+
+      <Route
+        exact={true}
+        path="/settings"
+        component={Settings}
+      />
+
+      <Route
+        path="/settings/mediamanagement"
+        component={MediaManagementConnector}
+      />
+
+      <Route
+        path="/settings/profiles"
+        component={Profiles}
+      />
+
+      <Route
+        path="/settings/quality"
+        component={QualityConnector}
+      />
+
+      <Route
+        path="/settings/customformats"
+        component={CustomFormatSettingsPage}
+      />
+
+      <Route
+        path="/settings/indexers"
+        component={IndexerSettingsConnector}
+      />
+
+      <Route
+        path="/settings/downloadclients"
+        component={DownloadClientSettingsConnector}
+      />
+
+      <Route
+        path="/settings/importlists"
+        component={ImportListSettingsConnector}
+      />
+
+      <Route
+        path="/settings/connect"
+        component={NotificationSettings}
+      />
+
+      <Route
+        path="/settings/metadata"
+        component={MetadataSettings}
+      />
+
+      <Route
+        path="/settings/metadatasource"
+        component={MetadataSourceSettings}
+      />
+
+      <Route
+        path="/settings/tags"
+        component={TagSettings}
+      />
+
+      <Route
+        path="/settings/general"
+        component={GeneralSettingsConnector}
+      />
+
+      <Route
+        path="/settings/ui"
+        component={UISettingsConnector}
+      />
+
+      {/*
+        System
+      */}
+
+      <Route
+        path="/system/status"
+        component={Status}
+      />
+
+      <Route
+        path="/system/tasks"
+        component={Tasks}
+      />
+
+      <Route
+        path="/system/backup"
+        component={BackupsConnector}
+      />
+
+      <Route
+        path="/system/updates"
+        component={UpdatesConnector}
+      />
+
+      <Route
+        path="/system/events"
+        component={LogsTableConnector}
+      />
+
+      <Route
+        path="/system/logs/files"
+        component={Logs}
+      />
+
+      {/*
+        Not Found
+      */}
+
+      <Route
+        path="*"
+        component={NotFound}
+      />
+    </Switch>
+  );
+}
+
+AppRoutes.propTypes = {
+  app: PropTypes.func.isRequired
+};
+
+export default AppRoutes;

frontend/src/App/AppRoutes.tsx

@@ -1,167 +0,0 @@
-import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
-import Blocklist from 'Activity/Blocklist/Blocklist';
-import History from 'Activity/History/History';
-import Queue from 'Activity/Queue/Queue';
-import AddNewSeriesConnector from 'AddSeries/AddNewSeries/AddNewSeriesConnector';
-import ImportSeries from 'AddSeries/ImportSeries/ImportSeries';
-import CalendarPage from 'Calendar/CalendarPage';
-import NotFound from 'Components/NotFound';
-import Switch from 'Components/Router/Switch';
-import SeriesDetailsPageConnector from 'Series/Details/SeriesDetailsPageConnector';
-import SeriesIndex from 'Series/Index/SeriesIndex';
-import CustomFormatSettingsPage from 'Settings/CustomFormats/CustomFormatSettingsPage';
-import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
-import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
-import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
-import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
-import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
-import MetadataSettings from 'Settings/Metadata/MetadataSettings';
-import MetadataSourceSettings from 'Settings/MetadataSource/MetadataSourceSettings';
-import NotificationSettings from 'Settings/Notifications/NotificationSettings';
-import Profiles from 'Settings/Profiles/Profiles';
-import QualityConnector from 'Settings/Quality/QualityConnector';
-import Settings from 'Settings/Settings';
-import TagSettings from 'Settings/Tags/TagSettings';
-import UISettingsConnector from 'Settings/UI/UISettingsConnector';
-import BackupsConnector from 'System/Backup/BackupsConnector';
-import LogsTableConnector from 'System/Events/LogsTableConnector';
-import Logs from 'System/Logs/Logs';
-import Status from 'System/Status/Status';
-import Tasks from 'System/Tasks/Tasks';
-import Updates from 'System/Updates/Updates';
-import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
-import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
-import MissingConnector from 'Wanted/Missing/MissingConnector';
-
-function RedirectWithUrlBase() {
-  return <Redirect to={getPathWithUrlBase('/')} />;
-}
-
-function AppRoutes() {
-  return (
-    <Switch>
-      {/*
-        Series
-      */}
-
-      <Route exact={true} path="/" component={SeriesIndex} />
-
-      {window.Sonarr.urlBase && (
-        <Route
-          exact={true}
-          path="/"
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          addUrlBase={false}
-          render={RedirectWithUrlBase}
-        />
-      )}
-
-      <Route path="/add/new" component={AddNewSeriesConnector} />
-
-      <Route path="/add/import" component={ImportSeries} />
-
-      <Route path="/serieseditor" exact={true} render={RedirectWithUrlBase} />
-
-      <Route path="/seasonpass" exact={true} render={RedirectWithUrlBase} />
-
-      <Route path="/series/:titleSlug" component={SeriesDetailsPageConnector} />
-
-      {/*
-        Calendar
-      */}
-
-      <Route path="/calendar" component={CalendarPage} />
-
-      {/*
-        Activity
-      */}
-
-      <Route path="/activity/history" component={History} />
-
-      <Route path="/activity/queue" component={Queue} />
-
-      <Route path="/activity/blocklist" component={Blocklist} />
-
-      {/*
-        Wanted
-      */}
-
-      <Route path="/wanted/missing" component={MissingConnector} />
-
-      <Route path="/wanted/cutoffunmet" component={CutoffUnmetConnector} />
-
-      {/*
-        Settings
-      */}
-
-      <Route exact={true} path="/settings" component={Settings} />
-
-      <Route
-        path="/settings/mediamanagement"
-        component={MediaManagementConnector}
-      />
-
-      <Route path="/settings/profiles" component={Profiles} />
-
-      <Route path="/settings/quality" component={QualityConnector} />
-
-      <Route
-        path="/settings/customformats"
-        component={CustomFormatSettingsPage}
-      />
-
-      <Route path="/settings/indexers" component={IndexerSettingsConnector} />
-
-      <Route
-        path="/settings/downloadclients"
-        component={DownloadClientSettingsConnector}
-      />
-
-      <Route
-        path="/settings/importlists"
-        component={ImportListSettingsConnector}
-      />
-
-      <Route path="/settings/connect" component={NotificationSettings} />
-
-      <Route path="/settings/metadata" component={MetadataSettings} />
-
-      <Route
-        path="/settings/metadatasource"
-        component={MetadataSourceSettings}
-      />
-
-      <Route path="/settings/tags" component={TagSettings} />
-
-      <Route path="/settings/general" component={GeneralSettingsConnector} />
-
-      <Route path="/settings/ui" component={UISettingsConnector} />
-
-      {/*
-        System
-      */}
-
-      <Route path="/system/status" component={Status} />
-
-      <Route path="/system/tasks" component={Tasks} />
-
-      <Route path="/system/backup" component={BackupsConnector} />
-
-      <Route path="/system/updates" component={Updates} />
-
-      <Route path="/system/events" component={LogsTableConnector} />
-
-      <Route path="/system/logs/files" component={Logs} />
-
-      {/*
-        Not Found
-      */}
-
-      <Route path="*" component={NotFound} />
-    </Switch>
-  );
-}
-
-export default AppRoutes;

frontend/src/App/AppUpdatedModal.js

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

frontend/src/App/AppUpdatedModal.tsx

@@ -1,28 +0,0 @@
-import React, { useCallback } from 'react';
-import Modal from 'Components/Modal/Modal';
-import AppUpdatedModalContent from './AppUpdatedModalContent';
-
-interface AppUpdatedModalProps {
-  isOpen: boolean;
-  onModalClose: (...args: unknown[]) => unknown;
-}
-
-function AppUpdatedModal(props: AppUpdatedModalProps) {
-  const { isOpen, onModalClose } = props;
-
-  const handleModalClose = useCallback(() => {
-    location.reload();
-  }, []);
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      closeOnBackgroundClick={false}
-      onModalClose={onModalClose}
-    >
-      <AppUpdatedModalContent onModalClose={handleModalClose} />
-    </Modal>
-  );
-}
-
-export default AppUpdatedModal;

frontend/src/App/AppUpdatedModalConnector.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import AppUpdatedModal from './AppUpdatedModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onModalClose() {
+      location.reload();
+    }
+  };
+}
+
+export default connect(null, createMapDispatchToProps)(AppUpdatedModal);

frontend/src/App/AppUpdatedModalContent.js

@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { kinds } from 'Helpers/Props';
+import UpdateChanges from 'System/Updates/UpdateChanges';
+import translate from 'Utilities/String/translate';
+import styles from './AppUpdatedModalContent.css';
+
+function mergeUpdates(items, version, prevVersion) {
+  let installedIndex = items.findIndex((u) => u.version === version);
+  let installedPreviouslyIndex = items.findIndex((u) => u.version === prevVersion);
+
+  if (installedIndex === -1) {
+    installedIndex = 0;
+  }
+
+  if (installedPreviouslyIndex === -1) {
+    installedPreviouslyIndex = items.length;
+  } else if (installedPreviouslyIndex === installedIndex && items.length) {
+    installedPreviouslyIndex += 1;
+  }
+
+  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
+
+  if (!appliedUpdates.length) {
+    return null;
+  }
+
+  const appliedChanges = { new: [], fixed: [] };
+  appliedUpdates.forEach((u) => {
+    if (u.changes) {
+      appliedChanges.new.push(... u.changes.new);
+      appliedChanges.fixed.push(... u.changes.fixed);
+    }
+  });
+
+  const mergedUpdate = Object.assign({}, appliedUpdates[0], { changes: appliedChanges });
+
+  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
+    mergedUpdate.changes = null;
+  }
+
+  return mergedUpdate;
+}
+
+function AppUpdatedModalContent(props) {
+  const {
+    version,
+    prevVersion,
+    isPopulated,
+    error,
+    items,
+    onSeeChangesPress,
+    onModalClose
+  } = props;
+
+  const update = mergeUpdates(items, version, prevVersion);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {translate('AppUpdated')}
+      </ModalHeader>
+
+      <ModalBody>
+        <div>
+          <InlineMarkdown data={translate('AppUpdatedVersion', { version })} blockClassName={styles.version} />
+        </div>
+
+        {
+          isPopulated && !error && !!update &&
+            <div>
+              {
+                !update.changes &&
+                  <div className={styles.maintenance}>{translate('MaintenanceRelease')}</div>
+              }
+
+              {
+                !!update.changes &&
+                  <div>
+                    <div className={styles.changes}>
+                      {translate('WhatsNew')}
+                    </div>
+
+                    <UpdateChanges
+                      title={translate('New')}
+                      changes={update.changes.new}
+                    />
+
+                    <UpdateChanges
+                      title={translate('Fixed')}
+                      changes={update.changes.fixed}
+                    />
+                  </div>
+              }
+            </div>
+        }
+
+        {
+          !isPopulated && !error &&
+            <LoadingIndicator />
+        }
+      </ModalBody>
+
+      <ModalFooter>
+        <Button
+          onPress={onSeeChangesPress}
+        >
+          {translate('RecentChanges')}
+        </Button>
+
+        <Button
+          kind={kinds.PRIMARY}
+          onPress={onModalClose}
+        >
+          {translate('Reload')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+AppUpdatedModalContent.propTypes = {
+  version: PropTypes.string.isRequired,
+  prevVersion: PropTypes.string,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSeeChangesPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContent.tsx

@@ -1,145 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import usePrevious from 'Helpers/Hooks/usePrevious';
-import { kinds } from 'Helpers/Props';
-import { fetchUpdates } from 'Store/Actions/systemActions';
-import UpdateChanges from 'System/Updates/UpdateChanges';
-import Update from 'typings/Update';
-import translate from 'Utilities/String/translate';
-import AppState from './State/AppState';
-import styles from './AppUpdatedModalContent.css';
-
-function mergeUpdates(items: Update[], version: string, prevVersion?: string) {
-  let installedIndex = items.findIndex((u) => u.version === version);
-  let installedPreviouslyIndex = items.findIndex(
-    (u) => u.version === prevVersion
-  );
-
-  if (installedIndex === -1) {
-    installedIndex = 0;
-  }
-
-  if (installedPreviouslyIndex === -1) {
-    installedPreviouslyIndex = items.length;
-  } else if (installedPreviouslyIndex === installedIndex && items.length) {
-    installedPreviouslyIndex += 1;
-  }
-
-  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
-
-  if (!appliedUpdates.length) {
-    return null;
-  }
-
-  const appliedChanges: Update['changes'] = { new: [], fixed: [] };
-
-  appliedUpdates.forEach((u: Update) => {
-    if (u.changes) {
-      appliedChanges.new.push(...u.changes.new);
-      appliedChanges.fixed.push(...u.changes.fixed);
-    }
-  });
-
-  const mergedUpdate: Update = Object.assign({}, appliedUpdates[0], {
-    changes: appliedChanges,
-  });
-
-  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
-    mergedUpdate.changes = null;
-  }
-
-  return mergedUpdate;
-}
-
-interface AppUpdatedModalContentProps {
-  onModalClose: () => void;
-}
-
-function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
-  const dispatch = useDispatch();
-  const { version, prevVersion } = useSelector((state: AppState) => state.app);
-  const { isPopulated, error, items } = useSelector(
-    (state: AppState) => state.system.updates
-  );
-  const previousVersion = usePrevious(version);
-
-  const { onModalClose } = props;
-
-  const update = mergeUpdates(items, version, prevVersion);
-
-  const handleSeeChangesPress = useCallback(() => {
-    window.location.href = `${window.Sonarr.urlBase}/system/updates`;
-  }, []);
-
-  useEffect(() => {
-    dispatch(fetchUpdates());
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (version !== previousVersion) {
-      dispatch(fetchUpdates());
-    }
-  }, [version, previousVersion, dispatch]);
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>{translate('AppUpdated')}</ModalHeader>
-
-      <ModalBody>
-        <div>
-          <InlineMarkdown
-            data={translate('AppUpdatedVersion', { version })}
-            blockClassName={styles.version}
-          />
-        </div>
-
-        {isPopulated && !error && !!update ? (
-          <div>
-            {update.changes ? (
-              <div className={styles.maintenance}>
-                {translate('MaintenanceRelease')}
-              </div>
-            ) : null}
-
-            {update.changes ? (
-              <div>
-                <div className={styles.changes}>{translate('WhatsNew')}</div>
-
-                <UpdateChanges
-                  title={translate('New')}
-                  changes={update.changes.new}
-                />
-
-                <UpdateChanges
-                  title={translate('Fixed')}
-                  changes={update.changes.fixed}
-                />
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-
-        {!isPopulated && !error ? <LoadingIndicator /> : null}
-      </ModalBody>
-
-      <ModalFooter>
-        <Button onPress={handleSeeChangesPress}>
-          {translate('RecentChanges')}
-        </Button>
-
-        <Button kind={kinds.PRIMARY} onPress={onModalClose}>
-          {translate('Reload')}
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContentConnector.js

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchUpdates } from 'Store/Actions/systemActions';
+import AppUpdatedModalContent from './AppUpdatedModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app.version,
+    (state) => state.app.prevVersion,
+    (state) => state.system.updates,
+    (version, prevVersion, updates) => {
+      const {
+        isPopulated,
+        error,
+        items
+      } = updates;
+
+      return {
+        version,
+        prevVersion,
+        isPopulated,
+        error,
+        items
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    dispatchFetchUpdates() {
+      dispatch(fetchUpdates());
+    },
+
+    onSeeChangesPress() {
+      window.location = `${window.Sonarr.urlBase}/system/updates`;
+    }
+  };
+}
+
+class AppUpdatedModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.dispatchFetchUpdates();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.version !== this.props.version) {
+      this.props.dispatchFetchUpdates();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      dispatchFetchUpdates,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <AppUpdatedModalContent {...otherProps} />
+    );
+  }
+}
+
+AppUpdatedModalContentConnector.propTypes = {
+  version: PropTypes.string.isRequired,
+  dispatchFetchUpdates: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(AppUpdatedModalContentConnector);

frontend/src/App/ApplyTheme.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React, { Fragment, useCallback, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import themes from 'Styles/Themes';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.ui.item.theme || window.Sonarr.theme,
+    (
+      theme
+    ) => {
+      return {
+        theme
+      };
+    }
+  );
+}
+
+function ApplyTheme({ theme, children }) {
+  // Update the CSS Variables
+
+  const updateCSSVariables = useCallback(() => {
+    const arrayOfVariableKeys = Object.keys(themes[theme]);
+    const arrayOfVariableValues = Object.values(themes[theme]);
+
+    // Loop through each array key and set the CSS Variables
+    arrayOfVariableKeys.forEach((cssVariableKey, index) => {
+      // Based on our snippet from MDN
+      document.documentElement.style.setProperty(
+        `--${cssVariableKey}`,
+        arrayOfVariableValues[index]
+      );
+    });
+  }, [theme]);
+
+  // On Component Mount and Component Update
+  useEffect(() => {
+    updateCSSVariables(theme);
+  }, [updateCSSVariables, theme]);
+
+  return <Fragment>{children}</Fragment>;
+}
+
+ApplyTheme.propTypes = {
+  theme: PropTypes.string.isRequired,
+  children: PropTypes.object.isRequired
+};
+
+export default connect(createMapStateToProps)(ApplyTheme);

frontend/src/App/ApplyTheme.tsx

@@ -1,33 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import themes from 'Styles/Themes';
-import AppState from './State/AppState';
-
-function createThemeSelector() {
-  return createSelector(
-    (state: AppState) => state.settings.ui.item.theme || window.Sonarr.theme,
-    (theme) => {
-      return theme;
-    }
-  );
-}
-
-function ApplyTheme() {
-  const theme = useSelector(createThemeSelector());
-
-  const updateCSSVariables = useCallback(() => {
-    Object.entries(themes[theme]).forEach(([key, value]) => {
-      document.documentElement.style.setProperty(`--${key}`, value);
-    });
-  }, [theme]);
-
-  // On Component Mount and Component Update
-  useEffect(() => {
-    updateCSSVariables();
-  }, [updateCSSVariables, theme]);
-
-  return null;
-}
-
-export default ApplyTheme;

frontend/src/App/ConnectionLostModal.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -9,31 +10,36 @@ import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './ConnectionLostModal.css';
 
-interface ConnectionLostModalProps {
-  isOpen: boolean;
-}
-
-function ConnectionLostModal(props: ConnectionLostModalProps) {
-  const { isOpen } = props;
-
-  const handleModalClose = useCallback(() => {
-    location.reload();
-  }, []);
+function ConnectionLostModal(props) {
+  const {
+    isOpen,
+    onModalClose
+  } = props;
 
   return (
-    <Modal isOpen={isOpen} onModalClose={handleModalClose}>
-      <ModalContent onModalClose={handleModalClose}>
-        <ModalHeader>{translate('ConnectionLost')}</ModalHeader>
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {translate('ConnectionLost')}
+        </ModalHeader>
 
         <ModalBody>
-          <div>{translate('ConnectionLostToBackend')}</div>
+          <div>
+            {translate('ConnectionLostToBackend')}
+          </div>
 
           <div className={styles.automatic}>
             {translate('ConnectionLostReconnect')}
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button kind={kinds.PRIMARY} onPress={handleModalClose}>
+          <Button
+            kind={kinds.PRIMARY}
+            onPress={onModalClose}
+          >
             {translate('Reload')}
           </Button>
         </ModalFooter>
@@ -42,4 +48,9 @@ function ConnectionLostModal(props: ConnectionLostModalProps) {
   );
 }
 
+ConnectionLostModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
 export default ConnectionLostModal;

frontend/src/App/ConnectionLostModalConnector.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import ConnectionLostModal from './ConnectionLostModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onModalClose() {
+      location.reload();
+    }
+  };
+}
+
+export default connect(undefined, createMapDispatchToProps)(ConnectionLostModal);

frontend/src/App/State/AppSectionState.ts

@@ -1,16 +1,10 @@
-import Column from 'Components/Table/Column';
-import { SortDirection } from 'Helpers/Props/sortDirections';
-import { ValidationFailure } from 'typings/pending';
-import { FilterBuilderProp, PropertyFilter } from './AppState';
+import SortDirection from 'Helpers/Props/SortDirection';
+import { FilterBuilderProp } from './AppState';
 
 export interface Error {
-  status?: number;
-  responseJSON:
-    | {
-        message: string | undefined;
-      }
-    | ValidationFailure[]
-    | undefined;
+  responseJSON: {
+    message: string;
+  };
 }
 
 export interface AppSectionDeleteState {
@@ -24,18 +18,10 @@ export interface AppSectionSaveState {
 }
 
 export interface PagedAppSectionState {
-  page: number;
   pageSize: number;
-  totalPages: number;
-  totalRecords?: number;
-}
-export interface TableAppSectionState {
-  columns: Column[];
 }
 
 export interface AppSectionFilterState<T> {
-  selectedFilterKey: string;
-  filters: PropertyFilter[];
   filterBuilderProps: FilterBuilderProp<T>[];
 }
 
@@ -48,31 +34,13 @@ export interface AppSectionSchemaState<T> {
   };
 }
 
-export interface AppSectionItemSchemaState<T> {
-  isSchemaFetching: boolean;
-  isSchemaPopulated: boolean;
-  schemaError: Error;
-  schema: T;
-}
-
 export interface AppSectionItemState<T> {
   isFetching: boolean;
   isPopulated: boolean;
   error: Error;
-  pendingChanges: Partial<T>;
   item: T;
 }
 
-export interface AppSectionProviderState<T>
-  extends AppSectionDeleteState,
-    AppSectionSaveState {
-  isFetching: boolean;
-  isPopulated: boolean;
-  error: Error;
-  items: T[];
-  pendingChanges: Partial<T>;
-}
-
 interface AppSectionState<T> {
   isFetching: boolean;
   isPopulated: boolean;

frontend/src/App/State/AppState.ts

@@ -1,23 +1,16 @@
-import BlocklistAppState from './BlocklistAppState';
+import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
 import CalendarAppState from './CalendarAppState';
-import CaptchaAppState from './CaptchaAppState';
 import CommandAppState from './CommandAppState';
 import EpisodeFilesAppState from './EpisodeFilesAppState';
 import EpisodesAppState from './EpisodesAppState';
 import HistoryAppState from './HistoryAppState';
-import InteractiveImportAppState from './InteractiveImportAppState';
-import OAuthAppState from './OAuthAppState';
 import ParseAppState from './ParseAppState';
-import PathsAppState from './PathsAppState';
-import ProviderOptionsAppState from './ProviderOptionsAppState';
 import QueueAppState from './QueueAppState';
-import ReleasesAppState from './ReleasesAppState';
 import RootFolderAppState from './RootFolderAppState';
 import SeriesAppState, { SeriesIndexAppState } from './SeriesAppState';
 import SettingsAppState from './SettingsAppState';
 import SystemAppState from './SystemAppState';
 import TagsAppState from './TagsAppState';
-import WantedAppState from './WantedAppState';
 
 interface FilterBuilderPropOption {
   id: string;
@@ -41,25 +34,19 @@ export interface PropertyFilter {
 export interface Filter {
   key: string;
   label: string;
-  filters: PropertyFilter[];
+  filers: PropertyFilter[];
 }
 
 export interface CustomFilter {
   id: number;
   type: string;
   label: string;
-  filters: PropertyFilter[];
+  filers: PropertyFilter[];
 }
 
 export interface AppSectionState {
-  isConnected: boolean;
-  isReconnecting: boolean;
-  isSidebarVisible: boolean;
-  version: string;
-  prevVersion?: string;
   dimensions: {
     isSmallScreen: boolean;
-    isLargeScreen: boolean;
     width: number;
     height: number;
   };
@@ -67,29 +54,20 @@ export interface AppSectionState {
 
 interface AppState {
   app: AppSectionState;
-  blocklist: BlocklistAppState;
   calendar: CalendarAppState;
-  captcha: CaptchaAppState;
   commands: CommandAppState;
   episodeFiles: EpisodeFilesAppState;
-  episodeHistory: HistoryAppState;
-  episodes: EpisodesAppState;
   episodesSelection: EpisodesAppState;
   history: HistoryAppState;
   interactiveImport: InteractiveImportAppState;
-  oAuth: OAuthAppState;
   parse: ParseAppState;
-  paths: PathsAppState;
-  providerOptions: ProviderOptionsAppState;
   queue: QueueAppState;
-  releases: ReleasesAppState;
   rootFolders: RootFolderAppState;
   series: SeriesAppState;
   seriesIndex: SeriesIndexAppState;
   settings: SettingsAppState;
   system: SystemAppState;
   tags: TagsAppState;
-  wanted: WantedAppState;
 }
 
 export default AppState;

frontend/src/App/State/BlocklistAppState.ts

@@ -1,16 +0,0 @@
-import Blocklist from 'typings/Blocklist';
-import AppSectionState, {
-  AppSectionFilterState,
-  PagedAppSectionState,
-  TableAppSectionState,
-} from './AppSectionState';
-
-interface BlocklistAppState
-  extends AppSectionState<Blocklist>,
-    AppSectionFilterState<Blocklist>,
-    PagedAppSectionState,
-    TableAppSectionState {
-  isRemoving: boolean;
-}
-
-export default BlocklistAppState;