Fixed nlog deprecated calls

Closes #7059

.devcontainer/Sonarr.code-workspace

@@ -0,0 +1,13 @@
+// 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

@@ -0,0 +1,19 @@
+// 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"]
+    }
+  }
+}

.editorconfig

@@ -203,6 +203,7 @@ dotnet_diagnostic.CA1819.severity = suggestion
 dotnet_diagnostic.CA1822.severity = suggestion
 dotnet_diagnostic.CA1823.severity = suggestion
 dotnet_diagnostic.CA1824.severity = suggestion
+dotnet_diagnostic.CA1825.severity = suggestion
 dotnet_diagnostic.CA2000.severity = suggestion
 dotnet_diagnostic.CA2002.severity = suggestion
 dotnet_diagnostic.CA2007.severity = suggestion

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,5 +1,5 @@
 name: Bug Report
-description: 'Support Requests will be closed immediately, if you are not 100% certain this is a bug please go to our Reddit, Discord, Forums, or IRC first. Sonarr v2 is EOL & unsupported.'
+description: 'Only bug reports for v4 will be accepted, older versions are no longer receiving bug fixes and support issues will be closed immediately.'
 labels: ['needs-triage']
 body:
 - type: checkboxes
@@ -37,8 +37,8 @@ body:
     label: Environment
     description: |
       examples:
-        - **OS**: Ubuntu 20.04
+        - **OS**: Ubuntu 22.04
-        - **Sonarr**: Sonarr 3.0.6.1265
+        - **Sonarr**: Sonarr 4.0.0.766
         - **Docker Install**: Yes
         - **Using Reverse Proxy**: No
         - **Browser**: Firefox 90 (If UI related)

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,14 +1,15 @@
-#### Database Migration
-YES | NO
-
 #### Description
 A few sentences describing the overall goals of the pull request's commits.
 
-#### Todos
+<!-- Remove any of the following sections if they are not used -->
-- [ ] Tests
+
-- [ ] Wiki Updates
+#### Screenshots for UI Changes
+
+
+#### Database Migration
+YES - ###
 
 
 #### Issues Fixed or Closed by this PR
+* Closes #
 
-* 

.github/actions/archive/action.yml

@@ -0,0 +1,29 @@
+name: Archive
+description: Archive binaries for deployment
+
+inputs:
+  os:
+    description: 'OS that the packaging is running on'
+    required: true
+  artifact:
+    description: 'Binary artifact'
+    required: true
+  archive_type:
+    description: 'File type to use for the final package'
+    required: true
+  branch:
+    description: 'Git branch used for this build'
+    required: true
+  major_version:
+    description: 'Sonarr major version'
+    required: true
+  version:
+    description: 'Sonarr version'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Archive Artifact
+      uses: thedoctor0/zip-release@0.7.5
+      

.github/actions/package/action.yml

@@ -0,0 +1,78 @@
+name: Package
+description: Packages binaries for deployment
+
+inputs:
+  platform:
+    description: 'Binary platform'
+    required: true
+  framework: 
+    description: '.net framework'
+    required: true
+  artifact:
+    description: 'Binary artifact'
+    required: true
+  branch:
+    description: 'Git branch used for this build'
+    required: true
+  major_version:
+    description: 'Sonarr major version'
+    required: true
+  version:
+    description: 'Sonarr version'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Download Artifact
+      uses: actions/download-artifact@v4
+      with:
+        name: ${{ inputs.artifact }}
+        path: _output
+        
+    - name: Download UI Artifact
+      uses: actions/download-artifact@v4
+      with:
+        name: build_ui
+        path: _output/UI
+
+    - name: Configure Environment Variables
+      shell: bash
+      run: |
+        echo "FRAMEWORK=${{ inputs.framework }}" >> "$GITHUB_ENV"
+        echo "BRANCH=${{ inputs.branch }}" >> "$GITHUB_ENV"
+        echo "SONARR_MAJOR_VERSION=${{ inputs.major_version }}" >> "$GITHUB_ENV"
+        echo "SONARR_VERSION=${{ inputs.version }}" >> "$GITHUB_ENV"
+
+    - name: Create Packages
+      shell: bash
+      run: $GITHUB_ACTION_PATH/package.sh
+
+    - name: Create Windows Installer (x64)
+      if: ${{ inputs.platform == 'windows' }}
+      working-directory: distribution/windows/setup
+      shell: cmd
+      run: |
+        SET RUNTIME=win-x64
+
+        build.bat
+
+    - name: Create Windows Installer (x86)
+      if: ${{ inputs.platform == 'windows' }}
+      working-directory: distribution/windows/setup
+      shell: cmd
+      run: |
+        SET RUNTIME=win-x86
+
+        build.bat
+
+    - name: Upload Artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: release_${{ inputs.platform }}
+        compression-level: 0
+        if-no-files-found: error
+        path: |
+          _artifacts/*.exe
+          _artifacts/*.tar.gz
+          _artifacts/*.zip

.github/actions/package/package.sh

@@ -0,0 +1,67 @@
+#!/bin/bash
+
+outputFolder=_output
+artifactsFolder=_artifacts
+uiFolder="$outputFolder/UI"
+framework="${FRAMEWORK:=net6.0}"
+
+rm -rf $artifactsFolder
+mkdir $artifactsFolder
+
+for runtime in _output/*
+do
+  name="${runtime##*/}"
+  folderName="$runtime/$framework"
+  sonarrFolder="$folderName/Sonarr"
+  archiveName="Sonarr.$BRANCH.$SONARR_VERSION.$name"
+
+  if [[ "$name" == 'UI' ]]; then
+    continue
+  fi
+    
+  echo "Creating package for $name"
+
+  echo "Copying UI"
+  cp -r $uiFolder $sonarrFolder
+  
+  echo "Setting permissions"
+  find $sonarrFolder -name "ffprobe" -exec chmod a+x {} \;
+  find $sonarrFolder -name "Sonarr" -exec chmod a+x {} \;
+  find $sonarrFolder -name "Sonarr.Update" -exec chmod a+x {} \;
+  
+  if [[ "$name" == *"osx"* ]]; then
+    echo "Creating macOS package"
+      
+    packageName="$name-app"
+    packageFolder="$outputFolder/$packageName"
+      
+    rm -rf $packageFolder
+    mkdir $packageFolder
+      
+    cp -r distribution/macOS/Sonarr.app $packageFolder
+    mkdir -p $packageFolder/Sonarr.app/Contents/MacOS
+      
+    echo "Copying Binaries"
+    cp -r $sonarrFolder/* $packageFolder/Sonarr.app/Contents/MacOS
+      
+    echo "Removing Update Folder"
+    rm -r $packageFolder/Sonarr.app/Contents/MacOS/Sonarr.Update
+              
+    echo "Packaging macOS app Artifact"
+    (cd $packageFolder; zip -rq "../../$artifactsFolder/$archiveName-app.zip" ./Sonarr.app)
+  fi
+
+  echo "Packaging Artifact"
+  if [[ "$name" == *"linux"* ]] || [[ "$name" == *"osx"* ]] || [[ "$name" == *"freebsd"* ]]; then
+    tar -zcf "./$artifactsFolder/$archiveName.tar.gz" -C $folderName Sonarr
+	fi
+    
+  if [[ "$name" == *"win"* ]]; then
+    if [ "$RUNNER_OS" = "Windows" ]
+      then
+        (cd $folderName; 7z a -tzip "../../../$artifactsFolder/$archiveName.zip" ./Sonarr)
+      else
+      (cd $folderName; zip -rq "../../../$artifactsFolder/$archiveName.zip" ./Sonarr)
+    fi
+	fi
+done

.github/actions/publish-test-artifact/action.yml

@@ -0,0 +1,18 @@
+name: Publish Test Artifact
+description: Publishes a test artifact
+
+inputs:
+  framework:
+    description: '.net framework'
+    required: true
+  runtime:
+    description: '.net runtime'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/upload-artifact@v4
+      with:
+        name: tests-${{ inputs.runtime }}
+        path: _tests/${{ inputs.framework }}/${{ inputs.runtime }}/publish/**/*

.github/actions/test/action.yml

@@ -0,0 +1,87 @@
+name: Test
+description: Runs unit/integration tests
+
+inputs:
+  use_postgres:
+    description: 'Whether postgres should be used for the database'
+  os:
+    description: 'OS that the tests are running on'
+    required: true
+  artifact:
+    description: 'Test binary artifact'
+    required: true
+  pattern:
+    description: 'Pattern for DLLs'
+    required: true
+  filter:
+    description: 'Filter for tests'
+    required: true
+  integration_tests:
+    description: 'True if running integration tests'
+  binary_artifact:
+    description: 'Binary artifact for integration tests'
+  binary_path:
+    description: 'Path witin binary artifact for integration tests'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup .NET
+      uses: actions/setup-dotnet@v4
+
+    - name: Setup Postgres
+      if: ${{ inputs.use_postgres }}
+      uses: ikalnytskyi/action-setup-postgres@v4
+
+    - name: Setup Test Variables
+      shell: bash
+      run: |
+        echo "RESULTS_NAME=${{ inputs.integration_tests && 'integation-' || 'unit-' }}${{ inputs.artifact }}${{ inputs.use_postgres && '-postgres' }}" >> "$GITHUB_ENV"
+
+    - name: Setup Postgres Environment Variables
+      if: ${{ inputs.use_postgres }}
+      shell: bash
+      run: |
+        echo "Sonarr__Postgres__Host=localhost" >> "$GITHUB_ENV"
+        echo "Sonarr__Postgres__Port=5432" >> "$GITHUB_ENV"
+        echo "Sonarr__Postgres__User=postgres" >> "$GITHUB_ENV"
+        echo "Sonarr__Postgres__Password=postgres" >> "$GITHUB_ENV"
+
+    - name: Download Artifact
+      uses: actions/download-artifact@v4
+      with:
+        name: ${{ inputs.artifact }}
+        path: _tests
+
+    - name: Download Binary Artifact
+      if: ${{ inputs.integration_tests }}
+      uses: actions/download-artifact@v4
+      with:
+        name: ${{ inputs.binary_artifact }}
+        path: _output
+
+    - name: Set up binary artifact
+      if: ${{ inputs.binary_path != '' }}
+      shell: bash
+      run: mv ./_output/${{inputs.binary_path}} _tests/bin
+
+    - name: Make executable
+      if: startsWith(inputs.os, 'windows') != true
+      shell: bash
+      run: chmod +x ./_tests/Sonarr.Test.Dummy && chmod +x ./_tests/ffprobe
+
+    - name: Make Sonarr binary executable
+      if: ${{ inputs.integration_tests && !startsWith(inputs.os, 'windows') }}
+      shell: bash
+      run: chmod +x ./_tests/bin/Sonarr
+
+    - 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"
+
+    - name: Upload Test Results
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: results-${{ env.RESULTS_NAME }}
+        path: TestResults/*.trx

.github/dependabot.yml

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

.github/release.yml

@@ -0,0 +1,9 @@
+ changelog:
+  exclude:
+    authors:
+      - Weblate
+      - SonarrBot
+  categories:
+    - title: Changes
+      labels:
+        - '*'

.github/workflows/api_docs.yml

@@ -26,17 +26,11 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup dotnet
-        uses: actions/setup-dotnet@v3
+        uses: actions/setup-dotnet@v4
         id: setup-dotnet
-        with:
-          dotnet-version: '6.0.x'
-
-      - name: Create temporary global.json
-        run: |
-          echo '{"sdk":{"version": "${{ steps.setup-dotnet.outputs.dotnet-version }}" } }' > ./global.json
 
       - name: Create openapi.json
         run: ./docs.sh Linux

.github/workflows/build.yml

@@ -0,0 +1,257 @@
+name: Build
+
+on:
+  push:
+    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 }}
+  cancel-in-progress: true
+
+env:
+  FRAMEWORK: net6.0
+  RAW_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+  SONARR_MAJOR_VERSION: 4
+  VERSION: 4.0.8
+
+jobs:
+  backend:
+    runs-on: windows-latest
+    outputs:
+      framework: ${{ steps.variables.outputs.framework }}
+      major_version: ${{ steps.variables.outputs.major_version }}
+      version: ${{ steps.variables.outputs.version }}
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
+
+      - name: Setup Environment Variables
+        id: variables
+        shell: bash
+        run: |
+          # Add 800 to the build number because GitHub won't let us pick an arbitrary starting point
+          SONARR_VERSION="${{ env.VERSION }}.$((${{ github.run_number }}+800))"
+          DOTNET_VERSION=$(jq -r '.sdk.version' global.json)
+
+          echo "SDK_PATH=${{ env.DOTNET_ROOT }}/sdk/${DOTNET_VERSION}" >> "$GITHUB_ENV"
+          echo "SONARR_VERSION=$SONARR_VERSION" >> "$GITHUB_ENV"
+          echo "BRANCH=${RAW_BRANCH_NAME//\//-}" >> "$GITHUB_ENV"
+
+          echo "framework=${{ env.FRAMEWORK }}" >> "$GITHUB_OUTPUT"
+          echo "major_version=${{ env.SONARR_MAJOR_VERSION }}" >> "$GITHUB_OUTPUT"
+          echo "version=$SONARR_VERSION" >> "$GITHUB_OUTPUT"
+
+      - 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
+
+      # Test Artifacts
+
+      - 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 osx-arm64 Test Artifact
+        uses: ./.github/actions/publish-test-artifact
+        with:
+          framework: ${{ env.FRAMEWORK }}
+          runtime: osx-arm64
+
+      # Build Artifacts (grouped by OS)
+
+      - name: Publish FreeBSD Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_freebsd
+          path: _artifacts/freebsd-*/**/*
+      - name: Publish Linux Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_linux
+          path: _artifacts/linux-*/**/*
+      - name: Publish macOS Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_macos
+          path: _artifacts/osx-*/**/*
+      - name: Publish Windows Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_windows
+          path: _artifacts/win-*/**/*
+
+  frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - name: Volta
+        uses: volta-cli/action@v4
+
+      - name: Yarn Install
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Stylelint
+        run: yarn stylelint -f github
+
+      - name: Build
+        run: yarn build --env production
+
+      - name: Publish UI Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: build_ui
+          path: _output/UI/**/*
+
+  unit_test:
+    needs: backend
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+        include:
+          - os: ubuntu-latest
+            artifact: tests-linux-x64
+            filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
+          - os: macos-latest
+            artifact: tests-osx-arm64
+            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: 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: 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:
+          - os: ubuntu-latest
+            artifact: tests-linux-x64
+            filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory=IntegrationTest
+            binary_artifact: build_linux
+            binary_path: linux-x64/${{ needs.backend.outputs.framework }}/Sonarr
+          - os: macos-latest
+            artifact: tests-osx-arm64
+            filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory=IntegrationTest
+            binary_artifact: build_macos
+            binary_path: osx-arm64/${{ needs.backend.outputs.framework }}/Sonarr
+          - os: windows-latest
+            artifact: tests-win-x64
+            filter: TestCategory!=ManualTest&TestCategory!=LINUX&TestCategory=IntegrationTest
+            binary_artifact: build_windows
+            binary_path: win-x64/${{ needs.backend.outputs.framework }}/Sonarr
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - 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]
+    secrets: inherit
+    uses: ./.github/workflows/deploy.yml
+    with:
+      framework: ${{ needs.backend.outputs.framework }}
+      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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,160 @@
+name: Deploy
+
+on:
+  workflow_call:
+    inputs:
+      framework: 
+        description: '.net framework'
+        type: string
+        required: true
+      branch:
+        description: 'Git branch used for this build'
+        type: string
+        required: true
+      major_version:
+        description: 'Sonarr major version'
+        type: string
+        required: true
+      version:
+        description: 'Sonarr version'
+        type: string
+        required: true
+    secrets:
+      SERVICES_API_KEY:
+        required: true
+
+jobs:
+  package:
+    strategy:
+      matrix:
+        platform: [freebsd, linux, macos, windows]
+        include:
+          - platform: freebsd
+            os: ubuntu-latest
+          - platform: linux
+            os: ubuntu-latest
+          - platform: macos
+            os: ubuntu-latest
+          - platform: windows
+            os: windows-latest
+
+    runs-on: ${{ matrix.os }}
+    steps:
+    - name: Check out
+      uses: actions/checkout@v4
+
+    - name: Package
+      uses: ./.github/actions/package
+      with:
+        framework: ${{ inputs.framework }}
+        platform: ${{ matrix.platform }}
+        artifact: build_${{ matrix.platform }}
+        branch: ${{ inputs.branch }}
+        major_version: ${{ inputs.major_version }}
+        version: ${{ inputs.version }}
+
+  release:
+    needs: package
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+    - name: Check out
+      uses: actions/checkout@v4
+
+    - name: Download release artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: _artifacts
+        pattern: release_*
+        merge-multiple: true
+
+    - name: 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 }}
+        name: ${{ inputs.version }}
+        prerelease: ${{ inputs.branch != 'main' }}
+        skipIfReleaseExists: true
+        tag: v${{ inputs.version }}
+
+    - name: Publish to Services
+      shell: bash
+      working-directory: _artifacts
+      run: |
+        branch=${{ inputs.branch }}
+        version=${{ inputs.version }}
+        lastCommit=${{ github.sha }}
+        
+        hashes="["
+        
+        addHash() {
+          path=$1
+          os=$2
+          arch=$3
+          type=$4
+        
+          local hash=$(sha256sum *.$version.$path | awk '{ print $1; }')
+          echo "{ \""Os\"": \""$os\"", \""Arch\"": \""$arch\"", \""Type\"": \""$type\"", \""Hash\"": \""$hash\"" }"
+        }
+        
+        hashes="$hashes $(addHash "linux-arm.tar.gz" "linux" "arm" "archive")"
+        hashes="$hashes, $(addHash "linux-arm64.tar.gz" "linux" "arm64" "archive")"
+        hashes="$hashes, $(addHash "linux-x64.tar.gz" "linux" "x64" "archive")"
+        # hashes="$hashes, $(addHash "linux-x86.tar.gz" "linux" "x86" "archive")"
+        
+        # hashes="$hashes, $(addHash "linux-musl-arm.tar.gz" "linuxmusl" "arm" "archive")"
+        hashes="$hashes, $(addHash "linux-musl-arm64.tar.gz" "linuxmusl" "arm64" "archive")"
+        hashes="$hashes, $(addHash "linux-musl-x64.tar.gz" "linuxmusl" "x64" "archive")"
+        
+        hashes="$hashes, $(addHash "osx-arm64.tar.gz" "osx" "arm64" "archive")"
+        hashes="$hashes, $(addHash "osx-x64.tar.gz" "osx" "x64" "archive")"
+        
+        hashes="$hashes, $(addHash "osx-arm64-app.zip" "osx" "arm64" "installer")"
+        hashes="$hashes, $(addHash "osx-x64-app.zip" "osx" "x64" "installer")"
+        
+        hashes="$hashes, $(addHash "win-x64.zip" "windows" "x64" "archive")"
+        hashes="$hashes, $(addHash "win-x86.zip" "windows" "x86" "archive")"
+        
+        hashes="$hashes, $(addHash "win-x64-installer.exe" "windows" "x64" "installer")"
+        hashes="$hashes, $(addHash "win-x86-installer.exe" "windows" "x86" "installer")"
+        
+        hashes="$hashes, $(addHash "freebsd-x64.tar.gz" "freebsd" "x64" "archive")"
+        
+        hashes="$hashes ]"
+        
+        json="{\""branch\"":\""$branch\"", \""version\"":\""$version\"", \""lastCommit\"":\""$lastCommit\"", \""hashes\"":$hashes, \""gitHubRelease\"":true}"
+        url="https://services.sonarr.tv/v1/update"
+        
+        echo "Publishing update $version ($branch) to: $url"
+        echo "$json"
+        
+        curl -H "Content-Type: application/json" -H "X-Api-Key: ${{ secrets.SERVICES_API_KEY }}" -X POST -d "$json" --fail-with-body $url

.github/workflows/labeler.yml

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

.github/workflows/lock.yml

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

.gitignore

@@ -127,6 +127,7 @@ coverage*.xml
 coverage*.json
 setup/Output/
 *.~is
+.mono
 
 #VS outout folders
 bin

.vscode/extensions.json

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

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  "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

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

.vscode/tasks.json

@@ -0,0 +1,44 @@
+{
+  "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"
+    }
+  ]
+}

build.sh

@@ -4,19 +4,18 @@ set -e
 outputFolder='_output'
 testPackageFolder='_tests'
 artifactsFolder="_artifacts";
+framework="${FRAMEWORK:=net6.0}"
 
 ProgressStart()
 {
-    echo "##teamcity[blockOpened name='$1']"
+    echo "::group::$1"
-    echo "##teamcity[progressStart '$1']"
     echo "Start '$1'"
 }
 
 ProgressEnd()
 {
     echo "Finish '$1'"
-    echo "##teamcity[progressFinish '$1']"
+    echo "::endgroup::"
-    echo "##teamcity[blockClosed name='$1']"
 }
 
 UpdateVersionNumber()
@@ -140,7 +139,7 @@ PackageLinux()
 
     echo "Adding Sonarr.Mono to UpdatePackage"
     cp $folder/Sonarr.Mono.* $folder/Sonarr.Update
-    if [ "$framework" = "net6.0" ]; then
+    if [ "$framework" = "$framework" ]; then
         cp $folder/Mono.Posix.NETStandard.* $folder/Sonarr.Update
         cp $folder/libMonoPosixHelper.* $folder/Sonarr.Update
     fi
@@ -168,7 +167,7 @@ PackageMacOS()
 
     echo "Adding Sonarr.Mono to UpdatePackage"
     cp $folder/Sonarr.Mono.* $folder/Sonarr.Update
-    if [ "$framework" = "net6.0" ]; then
+    if [ "$framework" = "$framework" ]; then
         cp $folder/Mono.Posix.NETStandard.* $folder/Sonarr.Update
         cp $folder/libMonoPosixHelper.* $folder/Sonarr.Update
     fi
@@ -400,20 +399,20 @@ then
 
     if [[ -z "$RID" || -z "$FRAMEWORK" ]];
     then
-        PackageTests "net6.0" "win-x64"
+        PackageTests "$framework" "win-x64"
-        PackageTests "net6.0" "win-x86"
+        PackageTests "$framework" "win-x86"
-        PackageTests "net6.0" "linux-x64"
+        PackageTests "$framework" "linux-x64"
-        PackageTests "net6.0" "linux-musl-x64"
+        PackageTests "$framework" "linux-musl-x64"
-        PackageTests "net6.0" "osx-x64"
+        PackageTests "$framework" "osx-x64"
         if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
         then
-            PackageTests "net6.0" "freebsd-x64"
+            PackageTests "$framework" "freebsd-x64"
         fi
     else
         PackageTests "$FRAMEWORK" "$RID"
     fi
 
-    UploadTestArtifacts "net6.0"
+    UploadTestArtifacts "$framework"
 fi
 
 if [ "$FRONTEND" = "YES" ];
@@ -435,22 +434,22 @@ then
 
     if [[ -z "$RID" || -z "$FRAMEWORK" ]];
     then
-        Package "net6.0" "win-x64"
+        Package "$framework" "win-x64"
-        Package "net6.0" "win-x86"
+        Package "$framework" "win-x86"
-        Package "net6.0" "linux-x64"
+        Package "$framework" "linux-x64"
-        Package "net6.0" "linux-musl-x64"
+        Package "$framework" "linux-musl-x64"
-        Package "net6.0" "linux-arm64"
+        Package "$framework" "linux-arm64"
-        Package "net6.0" "linux-musl-arm64"
+        Package "$framework" "linux-musl-arm64"
-        Package "net6.0" "linux-arm"
+        Package "$framework" "linux-arm"
-        Package "net6.0" "osx-x64"
+        Package "$framework" "osx-x64"
-        Package "net6.0" "osx-arm64"
+        Package "$framework" "osx-arm64"
         if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
         then
-            Package "net6.0" "freebsd-x64"
+            Package "$framework" "freebsd-x64"
         fi
     else
         Package "$FRAMEWORK" "$RID"
     fi
 
-    UploadArtifacts "net6.0"
+    UploadArtifacts "$framework"
 fi

distribution/debian.sh

@@ -1,64 +0,0 @@
-fromdos ./debian/*
-chmod ugo-x ./debian/*
-cp -r ./debian ./debian_backup
-
-BuildVersion=${dependent_build_number:-4.10.0.999}
-BuildBranch=${dependent_build_branch:-main}
-BootstrapVersion=`echo "$BuildVersion" | cut -d. -f1,2,3`
-BootstrapUpdater="BuiltIn"
-PackageUpdater="apt"
-
-echo Version: "$BuildVersion" Branch: "$BuildBranch"
-
-rm -r ./sonarr_bin/Sonarr.Update
-chmod -R ugo-x,ugo+rwX,go-w ./sonarr_bin/*
-
-echo Updating changelog for $BuildVersion
-sed -i "s:{version}:$BuildVersion:g; s:{branch}:$BuildBranch:g;" debian/changelog
-sed -i "s:{version}:$BuildVersion:g; s:{updater}:$PackageUpdater:g" debian/preinst debian/postinst debian/postrm
-sed -i '/#BEGIN BUILTIN UPDATER/,/#END BUILTIN UPDATER/d' debian/preinst debian/postinst debian/postrm
-echo "# Do Not Edit\nPackageVersion=$BuildVersion\nPackageAuthor=[Team Sonarr](https://sonarr.tv)\nReleaseVersion=$BuildVersion\nUpdateMethod=$PackageUpdater\nBranch=$BuildBranch" > package_info
-
-echo Running debuild for $BuildVersion
-if [ -z "${TEST_OUTPUT}" ]; then
-    debuild -b
-else
-    debuild -us -uc -b
-fi
-
-# Restore debian directory to the original files
-rm -rf ./debian
-mv ./debian_backup ./debian
-
-echo Updating changelog for $BootstrapVersion
-sed -i "s:{version}:$BootstrapVersion:g; s:{branch}:$BuildBranch:g;" debian/changelog
-sed -i "s:{version}:$BuildVersion:g; s:{updater}:$BootstrapUpdater:g" debian/preinst debian/postinst debian/postrm
-sed -i '/#BEGIN BUILTIN UPDATER/d; /#END BUILTIN UPDATER/d' debian/preinst debian/postinst debian/postrm
-echo "# Do Not Edit\nPackageVersion=$BootstrapVersion\nPackageAuthor=[Team Sonarr](https://sonarr.tv)\nReleaseVersion=$BuildVersion\nUpdateMethod=$BootstrapUpdater\nBranch=$BuildBranch" > package_info
-
-echo Running debuild for $BootstrapVersion
-if [ -z "${TEST_OUTPUT}" ]; then
-    debuild -b
-else
-    debuild -us -uc -b
-fi
-
-echo Moving stuff around
-mv ../sonarr_*.deb ./
-mv ../sonarr_*.changes ./
-rm ../sonarr_*.build
-
-if [ -z "${TEST_OUTPUT}" ]; then
-    echo Signing Package
-    dpkg-sig -k 884589CE --sign builder "sonarr_${BuildVersion}_all.deb"
-    dpkg-sig -k 884589CE --sign builder "sonarr_${BootstrapVersion}_all.deb"
-
-    echo running alien
-    alien -r -v ./*.deb
-else
-    echo "Exporting packages to ${TEST_OUTPUT}"
-    dpkg -e "sonarr_${BuildVersion}_all.deb" ${TEST_OUTPUT}/sonarr-build
-    dpkg -e "sonarr_${BootstrapVersion}_all.deb" ${TEST_OUTPUT}/sonarr-release
-
-    cp *.deb ${TEST_OUTPUT}/
-fi

distribution/debian/.editorconfig

@@ -1,6 +0,0 @@
-[*]
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-indent_style = space
-indent_size = 2

distribution/debian/changelog

@@ -1,5 +0,0 @@
-sonarr ({version}) {branch}; urgency=low
-
-  * Automatic Release.
-
- -- Sonarr <hello@sonarr.tv>  Sun, 28 Jan 2018 00:00:00 -0700

distribution/debian/compat

@@ -1 +0,0 @@
-10

distribution/debian/config

@@ -1,17 +0,0 @@
-#!/bin/sh -e
-
-. /usr/share/debconf/confmodule
-
-db_beginblock
-db_input high sonarr/owning_user || true
-db_input high sonarr/owning_group || true
-db_endblock
-db_go
-
-db_beginblock
-db_input low sonarr/owning_umask || true
-db_input low sonarr/config_directory || true
-db_endblock
-db_go
-
-exit 0

distribution/debian/control

@@ -1,18 +0,0 @@
-Section: web
-Priority: optional
-Maintainer: Sonarr <hello@sonarr.tv>
-Source: sonarr
-Homepage: https://sonarr.tv
-Vcs-Git: git@github.com:Sonarr/Sonarr.git
-Vcs-Browser: https://github.com/Sonarr/Sonarr
-Build-Depends: debhelper (>= 9),
-  dh-systemd (>= 1.5)
-
-Package: sonarr
-Architecture: all
-Provides: nzbdrone
-Conflicts: nzbdrone
-Replaces: nzbdrone
-Depends: adduser, libsqlite3-0 (>= 3.7), ${cli:Depends}, ${misc:Depends}
-Suggests: sqlite3 (>= 3.7)
-Description: Internet PVR

distribution/debian/copyright

@@ -1,24 +0,0 @@
-Format: http://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
-Upstream-Name: sonarr
-Source: https://github.com/Sonarr/Sonarr
-
-Files: *
-Copyright: 2010-2016 Sonarr <hello@sonarr.tv>
-
-License: GPL-3.0+
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
- .
- This package is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- GNU General Public License for more details.
- .
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
- .
- On Debian systems, the complete text of the GNU General
- Public License version 3 can be found in "/usr/share/common-licenses/GPL-3".

distribution/debian/files

@@ -1 +0,0 @@
-sonarr_3.0.0.0_all.deb web optional

distribution/debian/install

@@ -1,2 +0,0 @@
-sonarr_bin/* usr/lib/sonarr/bin
-package_info usr/lib/sonarr

distribution/debian/install.sh

@@ -0,0 +1,182 @@
+#!/bin/bash
+### Description: Sonarr .NET Debian install
+### Originally written for Radarr by: DoctorArr - doctorarr@the-rowlands.co.uk on 2021-10-01 v1.0
+### Updates for servarr suite made by Bakerboy448, DoctorArr, brightghost, aeramor and VP-EN
+### Version v1.0.0 2023-12-29 - StevieTV - adapted from servarr script for Sonarr installs
+### Version V1.0.1 2024-01-02 - StevieTV - remove UTF8-BOM
+### Version V1.0.2 2024-01-03 - markus101 - Get user input from /dev/tty
+### Version V1.0.3 2024-01-06 - StevieTV - exit script when it is ran from install directory
+
+### Boilerplate Warning
+#THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+#EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+#MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+#NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+#LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+#OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+#WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+scriptversion="1.0.3"
+scriptdate="2024-01-06"
+
+set -euo pipefail
+
+echo "Running Sonarr Install Script - Version [$scriptversion] as of [$scriptdate]"
+
+# Am I root?, need root!
+
+if [ "$EUID" -ne 0 ]; then
+    echo "Please run as root."
+    exit
+fi
+
+app="sonarr"
+app_port="8989"
+app_prereq="curl sqlite3 wget"
+app_umask="0002"
+branch="main"
+
+# Constants
+### Update these variables as required for your specific instance
+installdir="/opt"              # {Update me if needed} Install Location
+bindir="${installdir}/${app^}" # Full Path to Install Location
+datadir="/var/lib/$app/"       # {Update me if needed} AppData directory to use
+app_bin=${app^}                # Binary Name of the app
+
+# This script should not be ran from installdir, otherwise later in the script the extracted files will be removed before they can be moved to installdir.
+if [ "$installdir" == "$(dirname -- "$( readlink -f -- "$0"; )")" ] || [ "$bindir" == "$(dirname -- "$( readlink -f -- "$0"; )")" ]; then
+    echo "You should not run this script from the intended install directory. The script will exit. Please re-run it from another directory"
+    exit
+fi
+
+# Prompt User
+read -r -p "What user should ${app^} run as? (Default: $app): " app_uid < /dev/tty
+app_uid=$(echo "$app_uid" | tr -d ' ')
+app_uid=${app_uid:-$app}
+# Prompt Group
+read -r -p "What group should ${app^} run as? (Default: media): " app_guid < /dev/tty
+app_guid=$(echo "$app_guid" | tr -d ' ')
+app_guid=${app_guid:-media}
+
+echo "This will install [${app^}] to [$bindir] and use [$datadir] for the AppData Directory"
+echo "${app^} will run as the user [$app_uid] and group [$app_guid]. By continuing, you've confirmed that the selected user and group will have READ and WRITE access to your Media Library and Download Client Completed Download directories"
+read -n 1 -r -s -p $'Press enter to continue or ctrl+c to exit...\n' < /dev/tty
+
+# Create User / Group as needed
+if [ "$app_guid" != "$app_uid" ]; then
+    if ! getent group "$app_guid" >/dev/null; then
+        groupadd "$app_guid"
+    fi
+fi
+if ! getent passwd "$app_uid" >/dev/null; then
+    adduser --system --no-create-home --ingroup "$app_guid" "$app_uid"
+    echo "Created and added User [$app_uid] to Group [$app_guid]"
+fi
+if ! getent group "$app_guid" | grep -qw "$app_uid"; then
+    echo "User [$app_uid] did not exist in Group [$app_guid]"
+    usermod -a -G "$app_guid" "$app_uid"
+    echo "Added User [$app_uid] to Group [$app_guid]"
+fi
+
+# Stop the App if running
+if service --status-all | grep -Fq "$app"; then
+    systemctl stop "$app"
+    systemctl disable "$app".service
+    echo "Stopped existing $app"
+fi
+
+# Create Appdata Directory
+
+# AppData
+mkdir -p "$datadir"
+chown -R "$app_uid":"$app_guid" "$datadir"
+chmod 775 "$datadir"
+echo "Directories created"
+# Download and install the App
+
+# prerequisite packages
+echo ""
+echo "Installing pre-requisite Packages"
+# shellcheck disable=SC2086
+apt update && apt install -y $app_prereq
+echo ""
+ARCH=$(dpkg --print-architecture)
+# get arch
+dlbase="https://services.sonarr.tv/v1/download/$branch/latest?version=4&os=linux"
+case "$ARCH" in
+"amd64") DLURL="${dlbase}&arch=x64" ;;
+"armhf") DLURL="${dlbase}&arch=arm" ;;
+"arm64") DLURL="${dlbase}&arch=arm64" ;;
+*)
+    echo "Arch not supported"
+    exit 1
+    ;;
+esac
+echo ""
+echo "Removing previous tarballs"
+# -f to Force so we fail if it doesn't exist
+rm -f "${app^}".*.tar.gz
+echo ""
+echo "Downloading..."
+wget --content-disposition "$DLURL"
+tar -xvzf "${app^}".*.tar.gz
+echo ""
+echo "Installation files downloaded and extracted"
+
+# remove existing installs
+echo "Removing existing installation"
+rm -rf "$bindir"
+echo "Installing..."
+mv "${app^}" $installdir
+chown "$app_uid":"$app_guid" -R "$bindir"
+chmod 775 "$bindir"
+rm -rf "${app^}.*.tar.gz"
+# Ensure we check for an update in case user installs older version or different branch
+touch "$datadir"/update_required
+chown "$app_uid":"$app_guid" "$datadir"/update_required
+echo "App Installed"
+# Configure Autostart
+
+# Remove any previous app .service
+echo "Removing old service file"
+rm -rf /etc/systemd/system/"$app".service
+
+# Create app .service with correct user startup
+echo "Creating service file"
+cat <<EOF | tee /etc/systemd/system/"$app".service >/dev/null
+[Unit]
+Description=${app^} Daemon
+After=syslog.target network.target
+[Service]
+User=$app_uid
+Group=$app_guid
+UMask=$app_umask
+Type=simple
+ExecStart=$bindir/$app_bin -nobrowser -data=$datadir
+TimeoutStopSec=20
+KillMode=process
+Restart=on-failure
+[Install]
+WantedBy=multi-user.target
+EOF
+
+# Start the App
+echo "Service file created. Attempting to start the app"
+systemctl -q daemon-reload
+systemctl enable --now -q "$app"
+
+# Finish Update/Installation
+host=$(hostname -I)
+ip_local=$(grep -oP '^\S*' <<<"$host")
+echo ""
+echo "Install complete"
+sleep 10
+STATUS="$(systemctl is-active "$app")"
+if [ "${STATUS}" = "active" ]; then
+    echo "Browse to http://$ip_local:$app_port for the ${app^} GUI"
+else
+    echo "${app^} failed to start"
+fi
+
+# Exit
+exit 0

distribution/debian/postinst

@@ -1,111 +0,0 @@
-#!/bin/sh
-set -e
-
-BUILD_VERSION={version}
-UPDATER={updater}
-
-. /usr/share/debconf/confmodule
-db_get sonarr/owning_user
-USER="$RET"
-db_get sonarr/owning_group
-GROUP="$RET"
-db_get sonarr/owning_umask
-UMASK="$RET"
-db_get sonarr/config_directory
-CONFDIR="$RET"
-
-# Add User and Group
-if ! getent group "$GROUP" >/dev/null; then
-  groupadd "$GROUP"
-fi
-if ! getent passwd "$USER" >/dev/null; then
-  adduser --system --no-create-home --ingroup "$GROUP" "$USER"
-fi
-
-if [ $1 = "configure" ]; then
-  # Migrate old Sonarr v3 alpha data dir from /var/opt/sonarr or user home
-  if [ -d "/var/opt/sonarr" ] && [ "$CONFDIR" != "/var/opt/sonarr" ] && [ ! -d "$CONFDIR" ]; then
-    varoptRoot="/var/opt/sonarr"
-    varoptAppData="$varoptRoot/.config/Sonarr"
-    sonarrUserHome=`getent passwd $USER | cut -d ':' -f 6`
-    sonarrAppData="$sonarrUserHome/.config/Sonarr"
-    if [ -f "$varoptRoot/sonarr.db" ]; then
-      # Handle /var/opt/sonarr/sonarr.db
-      mv "$varoptRoot" "$CONFDIR"
-    elif [ -f "$varoptAppData/sonarr.db" ]; then
-      # Handle /var/opt/sonarr/.config/Sonarr/sonarr.db
-      mv "$varoptAppData" "$CONFDIR"
-      rm -rf "$varoptRoot"
-    elif [ -f "$sonarrAppData/sonarr.db" ]; then
-      # Handle ~/.config/Sonarr/sonarr.db
-      mv "$sonarrAppData" "$CONFDIR"
-      rm -rf "$sonarrAppData"
-    else
-      mv "$varoptRoot" "$CONFDIR"
-    fi
-    chown -R $USER:$GROUP "$CONFDIR"
-    chmod -R 775 "$CONFDIR"
-  fi
-
-  # Migrate old NzbDrone data dir
-  if [ -d "/usr/lib/sonarr/nzbdrone-appdata" ] && [ ! -d "$CONFDIR" ]; then
-    NZBDRONE_DATA=`readlink /usr/lib/sonarr/nzbdrone-appdata`
-    if [ -f "$NZBDRONE_DATA/config.xml" ] && [ -f "$NZBDRONE_DATA/nzbdrone.db" ]; then
-      echo "Found NzbDrone database in $NZBDRONE_DATA, copying to $CONFDIR."
-      mkdir -p "$CONFDIR"
-      cp $NZBDRONE_DATA/config.xml $NZBDRONE_DATA/nzbdrone.db* "$CONFDIR/"
-      chown -R $USER:$GROUP "$CONFDIR"
-      chmod -R 775 "$CONFDIR"
-    else
-      echo "Missing NzbDrone database in $NZBDRONE_DATA, skipping migration."
-    fi
-    rm /usr/lib/sonarr/nzbdrone-appdata
-  fi
-fi
-
-# Create data directory
-if [ ! -d "$CONFDIR" ]; then
-  mkdir -p "$CONFDIR"
-fi
-
-# Set permissions on data directory (always do this instead only on creation in case user was changed via dpkg-reconfigure)
-chown -R $USER:$GROUP "$CONFDIR"
-
-#BEGIN BUILTIN UPDATER
-# Apply patch if present
-if [ "$UPDATER" = "BuiltIn" ] && [ -f /usr/lib/sonarr/bin_patch/release_info ]; then
-  # It shouldn't be possible to get a wrong bin_patch, but let's check anyway and throw it away if it's wrong
-  currentVersion=`cat /usr/lib/sonarr/bin_patch/release_info | grep 'ReleaseVersion=' | cut -d= -f 2`
-  currentRelease=`echo "$currentVersion" | cut -d. -f1,2,3`
-  currentBuild=`echo "$currentVersion" | cut -d. -f4`
-  targetVersion=$BUILD_VERSION
-  targetRelease=`echo "$targetVersion" | cut -d. -f1,2,3`
-  targetBuild=`echo "$targetVersion" | cut -d. -f4`
-
-  if [ "$currentRelease" = "$targetRelease" ] && [ "$currentBuild" -gt "$targetBuild" ]; then
-    echo "Applying $currentVersion from BuiltIn updater instead of downgrading to $targetVersion"
-    rm -rf /usr/lib/sonarr/bin
-    mv /usr/lib/sonarr/bin_patch /usr/lib/sonarr/bin
-  else
-    rm -rf /usr/lib/sonarr/bin_patch
-  fi
-fi
-#END BUILTIN UPDATER
-
-# Set permissions on /usr/lib/sonarr
-chown -R $USER:$GROUP /usr/lib/sonarr
-
-# Update sonarr.service file
-sed -i "s:User=\w*:User=$USER:g; s:Group=\w*:Group=$GROUP:g; s:UMask=[0-9]*:UMask=$UMASK:g; s:-data=.*$:-data=$CONFDIR:g" /lib/systemd/system/sonarr.service
-
-#BEGIN BUILTIN UPDATER
-if [ "$UPDATER" = "BuiltIn" ]; then
-  # If we upgraded, signal Sonarr to do an update check on startup instead of scheduled.
-  touch $CONFDIR/update_required
-  chown $USER:$GROUP $CONFDIR/update_required
-fi
-#END BUILTIN UPDATER
-
-#DEBHELPER#
-
-exit 0

distribution/debian/postrm

@@ -1,36 +0,0 @@
-#!/bin/sh
-set -e
-
-BUILD_VERSION={version}
-UPDATER={updater}
-
-if [ $1 = "abort-install" ]; then
-  # preinst was aborted, possibly due to NzbDrone still running.
-  # Nothing to do here
-  :
-fi
-
-# The bin directory is expected to be empty, unless the BuiltIn updater added files.
-if [ $1 = "remove" ] && [ -d /usr/lib/sonarr/bin ]; then
-  rm -rf /usr/lib/sonarr/bin
-fi
-
-#BEGIN BUILTIN UPDATER
-# Remove any existing patch if still present
-if [ $1 = "remove" ] && [ -d /usr/lib/sonarr/bin_patch ]; then
-  rm -rf /usr/lib/sonarr/bin_patch
-fi
-#END BUILTIN UPDATER
-
-# Purge the entire sonarr configuration directory.
-# TODO: Maybe move a minimal backup to tmp?
-if [ $1 = "purge" ] && [ -e /usr/share/debconf/confmodule ]; then
-  . /usr/share/debconf/confmodule
-  db_get sonarr/config_directory
-  CONFDIR="$RET"
-  if [ -d "$CONFDIR" ]; then
-    rm -rf "$CONFDIR"
-  fi
-fi
-
-#DEBHELPER#

distribution/debian/preinst

@@ -1,91 +0,0 @@
-#!/bin/sh
-set -e
-
-BUILD_VERSION={version}
-UPDATER={updater}
-
-# Deal with existing nzbdrone installs
-#
-# Existing nzbdrone packages do not have startup scripts and the process might still be running.
-# If the user manually installed nzbdrone then the process might still be running too.
-if [ $1 = "install" ]; then
-  psNzbDrone=`ps ax -o'user:20,pid,ppid,unit,args' | grep mono.*NzbDrone\\\\.exe || true`
-  if [ ! -z "$psNzbDrone" ]; then
-    # Get the user and optional systemd unit
-    psNzbDroneUser=`echo "$psNzbDrone" | tr -s ' ' | cut -d ' ' -f 1`
-    psNzbDroneUnit=`echo "$psNzbDrone" | tr -s ' ' | cut -d ' ' -f 4`
-    # Get the appdata from the cmdline or get it from the user dir
-    droneAppData=`echo "$psNzbDrone" | tr ' ' '\n' | grep -- "-data=" | cut -d= -f 2`
-    if [ "$droneAppData" = "" ]; then
-      droneUserHome=`getent passwd $psNzbDroneUser | cut -d ':' -f 6`
-      droneAppData="$droneUserHome/.config/NzbDrone"
-    fi
-
-    if [ "$psNzbDroneUnit" != "-" ] && [ -d /run/systemd/system ]; then
-      if [ "$psNzbDroneUnit" = "sonarr.service" ]; then
-        # Conflicts with our new sonarr.service so we have to remove it
-        echo "NzbDrone systemd startup detected at $psNzbDroneUnit, stopping and removing..."
-        deb-systemd-invoke stop $psNzbDroneUnit >/dev/null
-        if [ -f "/etc/systemd/system/$psNzbDroneUnit" ]; then
-          rm /etc/systemd/system/$psNzbDroneUnit
-        fi
-        if [ -f "/usr/lib/systemd/system/$psNzbDroneUnit" ]; then
-          rm /usr/lib/systemd/system/$psNzbDroneUnit
-        fi
-        deb-systemd-helper purge $psNzbDroneUnit >/dev/null
-		    deb-systemd-helper unmask $psNzbDroneUnit >/dev/null
-        systemctl --system daemon-reload >/dev/null || true
-      else
-        # Just disable it, so the user can revisit the settings later
-        echo "NzbDrone systemd startup detected at $psNzbDroneUnit, stopping and disabling..."
-        deb-systemd-invoke stop $psNzbDroneUnit >/dev/null
-        deb-systemd-invoke mask $psNzbDroneUnit >/dev/null
-      fi
-    else
-      # We don't support auto migration for other startup methods, so bail.
-      # This leaves the sonarr package in an incomplete state.
-      echo "ps: $psNzbDrone"
-      echo "Error: An existing Sonarr v2 (NzbDrone) process is running. Remove the NzbDrone auto-startup prior to installing sonarr."
-      exit 1
-    fi
-
-    # We don't have the debconf configuration yet so we can't migrate the data.
-    # Instead we symlink so postinst knows where it's at.
-    if [ -f "/usr/lib/sonarr/nzbdrone-appdata" ]; then
-      rm "/usr/lib/sonarr/nzbdrone-appdata"
-    else
-      mkdir -p "/usr/lib/sonarr"
-    fi
-    ln -s $droneAppData /usr/lib/sonarr/nzbdrone-appdata
-  fi
-fi
-
-#BEGIN BUILTIN UPDATER
-# Check for supported upgrade paths
-if [ $1 = "upgrade" ] && [ "$UPDATER" = "BuiltIn" ] && [ -f /usr/lib/sonarr/bin/release_info ]; then
-  # If we allow the Built-In updater to upgrade from 3.0.1.123 to 3.0.2.500 and now apt is catching up to 3.0.2.425
-  # then we need to deal with that 500->425 'downgrade'.
-  # We do that by preserving the binaries and using those instead for postinst.
-
-  currentVersion=`cat /usr/lib/sonarr/bin/release_info | grep 'ReleaseVersion=' | cut -d= -f 2`
-  currentRelease=`echo "$currentVersion" | cut -d. -f1,2,3`
-  currentBuild=`echo "$currentVersion" | cut -d. -f4`
-  targetVersion=$BUILD_VERSION
-  targetRelease=`echo "$targetVersion" | cut -d. -f1,2,3`
-  targetBuild=`echo "$targetVersion" | cut -d. -f4`
-
-  if [ -d /usr/lib/sonarr/bin_patch ]; then
-    rm -rf /usr/lib/sonarr/bin_patch
-  fi
-
-  # Check if the existing version is already an upgrade for the included build
-  if [ "$currentRelease" = "$targetRelease" ] && [ "$currentBuild" -gt "$targetBuild" ]; then
-    echo "Preserving $currentVersion from BuiltIn updater instead of downgrading to $targetVersion"
-    cp -r /usr/lib/sonarr/bin /usr/lib/sonarr/bin_patch
-  fi
-fi
-#END BUILTIN UPDATER
-
-#DEBHELPER#
-
-exit 0

distribution/debian/rules

@@ -1,21 +0,0 @@
-#!/usr/bin/make -f
-
-# Uncomment this to turn on verbose mode.
-#export DH_VERBOSE=1
-
-EXCLUDE_MODULEREFS = crypt32 httpapi __Internal ole32.dll
-
-%:
-	dh $@ --with=systemd --with=cli
-
-# No init script, only systemd
-override_dh_installinit:
-	true
-
-# Sonarr likes debug symbols for logging
-override_dh_clistrip:
-
-override_dh_makeclilibs:
-
-override_dh_clideps:
-	dh_clideps -d -r $(patsubst %,--exclude-moduleref=%,$(EXCLUDE_MODULEREFS))

distribution/debian/sonarr.clideps-override

@@ -1,2 +0,0 @@
-ignores msbuild
-ignores libc6

distribution/debian/sonarr.service

@@ -11,7 +11,7 @@ Group=sonarr
 UMask=002
 
 Type=simple
-ExecStart=/usr/lib/sonarr/bin/Sonarr -nobrowser -data=/var/lib/sonarr
+ExecStart=/opt/Sonarr/Sonarr -nobrowser -data=/var/lib/sonarr
 TimeoutStopSec=20
 KillMode=process
 Restart=on-failure

distribution/debian/templates

@@ -1,27 +0,0 @@
-Template: sonarr/owning_user
-Type: string
-Default: sonarr
-Description: Sonarr user:
-  Specify the user that is used to run Sonarr. The user will be created if it does not already exist.
-  The default 'sonarr' should work fine for most users. You can specify the user group next.
-
-Template: sonarr/owning_group
-Type: string
-Default: sonarr
-Description: Sonarr group:
-  Specify the group that is used to run Sonarr. The group will be created if it does not already exist.
-  If the user doesn't already exist then this group will be used as the user's primary group.
-  Any media files created by Sonarr will be writeable by this group.
-  It's advisable to keep the group the same between download client, Sonarr and media centers.
-
-Template: sonarr/owning_umask
-Type: string
-Default: 0002
-Description: Sonarr umask:
-  Specifies the umask of the files created by Sonarr. 0002 means the files will be created with 664 as permissions.
-
-Template: sonarr/config_directory
-Type: string
-Default: /var/lib/sonarr
-Description: Config directory:
-  Specify the directory where Sonarr stores the internal database and metadata. Media content will be stored elsewhere.

distribution/macOS/Sonarr.app/Contents/Info.plist

@@ -23,11 +23,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>3.0</string>
+	<string>4.0</string>
 	<key>CFBundleSignature</key>
 	<string>xmmd</string>
 	<key>CFBundleVersion</key>
-	<string>3.0</string>
+	<string>4.0</string>
 	<key>NSAppleScriptEnabled</key>
 	<string>YES</string>
 </dict>

distribution/windows/setup/build.bat

@@ -3,8 +3,5 @@
 @REM SET BRANCH=develop
 @REM SET FRAMEWORK=net6.0
 @REM SET RUNTIME=win-x64
-echo ##teamcity[progressStart 'Building setup file']
-inno\ISCC.exe sonarr.iss
-echo ##teamcity[progressFinish 'Building setup file']
 
-echo ##teamcity[publishArtifacts 'distribution\windows\setup\output\*%RUNTIME%*.exe']
+inno\ISCC.exe sonarr.iss

distribution/windows/setup/sonarr.iss

@@ -40,7 +40,7 @@ Compression=lzma2/normal
 AppContact={#ForumsURL}
 VersionInfoVersion={#MajorVersion}
 SetupLogging=yes
-OutputDir=output
+OutputDir="..\..\..\_artifacts"
 AppverName={#AppName}
 
 [Languages]
@@ -53,8 +53,8 @@ Name: "startupShortcut"; Description: "Create shortcut in Startup folder (Starts
 Name: "none"; Description: "Do not start automatically"; GroupDescription: "Start automatically"; Flags: exclusive unchecked
 
 [Files]
-Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Sonarr\Sonarr.exe"; DestDir: "{app}"; Flags: ignoreversion
+Source: "..\..\..\_output\{#Runtime}\{#Framework}\Sonarr\Sonarr.exe"; DestDir: "{app}"; Flags: ignoreversion
-Source: "..\..\..\_artifacts\{#Runtime}\{#Framework}\Sonarr\*"; Excludes: "Sonarr.Update"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
+Source: "..\..\..\_output\{#Runtime}\{#Framework}\Sonarr\*"; Excludes: "Sonarr.Update"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
 ; NOTE: Don't use "Flags: ignoreversion" on any shared system files
 
 [Icons]

docs.sh

@@ -1,6 +1,7 @@
 #!/bin/bash
 set -e
 
+FRAMEWORK="net6.0"
 PLATFORM=$1
 
 if [ "$PLATFORM" = "Windows" ]; then
@@ -24,17 +25,23 @@ 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.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/Sonarr.dll" v3 &
+dotnet tool run swagger tofile --output ./src/Sonarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v3 &
 
-sleep 30
+sleep 45
 
 kill %1
 

frontend/.eslintrc.js

@@ -359,11 +359,16 @@ module.exports = {
       ],
 
       rules: Object.assign(typescriptEslintRecommended.rules, {
-        'no-shadow': 'off',
+        '@typescript-eslint/no-unused-vars': [
-        // These should be enabled after cleaning things up
+          'error',
-        '@typescript-eslint/no-unused-vars': 'warn',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^_',
+            ignoreRestSiblings: true
+          }
+        ],
         '@typescript-eslint/explicit-function-return-type': 'off',
-        'react/prop-types': 'off',
+        'no-shadow': 'off',
         'prettier/prettier': 'error',
         'simple-import-sort/imports': [
           'error',
@@ -376,7 +381,41 @@ 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/babel.config.js

@@ -2,6 +2,8 @@ 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

@@ -67,7 +67,7 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name]-[contenthash].js',
+      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
       sourceMapFilename: '[file].map'
     },
 
@@ -92,7 +92,7 @@ module.exports = (env) => {
 
       new MiniCssExtractPlugin({
         filename: 'Content/styles.css',
-        chunkFilename: 'Content/[id]-[chunkhash].css'
+        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
       }),
 
       new HtmlWebpackPlugin({
@@ -202,7 +202,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: '[name]/[local]/[hash:base64:5]'
+                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
                 }
               }
             },

frontend/src/Activity/Blocklist/Blocklist.js

@@ -1,261 +0,0 @@
-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

@@ -0,0 +1,329 @@
+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

@@ -1,152 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -1,212 +0,0 @@
-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

@@ -0,0 +1,163 @@
+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

@@ -1,26 +0,0 @@
-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

@@ -1,354 +0,0 @@
-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

@@ -0,0 +1,289 @@
+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;
+  shortDateFormat: string;
+  timeFormat: string;
+}
+
+function HistoryDetails(props: HistoryDetailsProps) {
+  const { eventType, sourceTitle, data, downloadId } = props;
+
+  const { shortDateFormat, timeFormat } = useSelector(
+    createUISettingsSelector()
+  );
+
+  if (eventType === 'grabbed') {
+    const {
+      indexer,
+      releaseGroup,
+      seriesMatchType,
+      customFormatScore,
+      nzbInfoUrl,
+      downloadClient,
+      downloadClientName,
+      age,
+      ageHours,
+      ageMinutes,
+      publishedDate,
+    } = data as GrabbedHistoryData;
+
+    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(parseInt(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 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

@@ -1,19 +0,0 @@
-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.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
@@ -8,11 +7,12 @@ 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) {
+function getHeaderTitle(eventType: HistoryEventType) {
   switch (eventType) {
     case 'grabbed':
       return translate('Grabbed');
@@ -31,7 +31,20 @@ function getHeaderTitle(eventType) {
   }
 }
 
-function HistoryDetailsModal(props) {
+interface HistoryDetailsModalProps {
+  isOpen: boolean;
+  eventType: HistoryEventType;
+  sourceTitle: string;
+  data: HistoryData;
+  downloadId?: string;
+  isMarkingAsFailed: boolean;
+  shortDateFormat: string;
+  timeFormat: string;
+  onMarkAsFailedPress: () => void;
+  onModalClose: () => void;
+}
+
+function HistoryDetailsModal(props: HistoryDetailsModalProps) {
   const {
     isOpen,
     eventType,
@@ -42,18 +55,13 @@ function HistoryDetailsModal(props) {
     shortDateFormat,
     timeFormat,
     onMarkAsFailedPress,
-    onModalClose
+    onModalClose,
   } = props;
 
   return (
-    <Modal
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
-      isOpen={isOpen}
-      onModalClose={onModalClose}
-    >
       <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
+        <ModalHeader>{getHeaderTitle(eventType)}</ModalHeader>
-          {getHeaderTitle(eventType)}
-        </ModalHeader>
 
         <ModalBody>
           <HistoryDetails
@@ -67,44 +75,26 @@ function HistoryDetailsModal(props) {
         </ModalBody>
 
         <ModalFooter>
-          {
+          {eventType === 'grabbed' && (
-            eventType === 'grabbed' &&
+            <SpinnerButton
-              <SpinnerButton
+              className={styles.markAsFailedButton}
-                className={styles.markAsFailedButton}
+              kind={kinds.DANGER}
-                kind={kinds.DANGER}
+              isSpinning={isMarkingAsFailed}
-                isSpinning={isMarkingAsFailed}
+              onPress={onMarkAsFailedPress}
-                onPress={onMarkAsFailedPress}
+            >
-              >
+              {translate('MarkAsFailed')}
-                {translate('MarkAsFailed')}
+            </SpinnerButton>
-              </SpinnerButton>
+          )}
-          }
 
-          <Button
+          <Button onPress={onModalClose}>{translate('Close')}</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
+  isMarkingAsFailed: false,
 };
 
 export default HistoryDetailsModal;

frontend/src/Activity/History/History.js

@@ -1,180 +0,0 @@
-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

@@ -0,0 +1,231 @@
+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

@@ -1,165 +0,0 @@
-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.tsx

@@ -1,12 +1,17 @@
-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) {
+function getIconName(eventType: HistoryEventType, data: HistoryData) {
   switch (eventType) {
     case 'grabbed':
       return icons.DOWNLOADING;
@@ -17,7 +22,9 @@ function getIconName(eventType) {
     case 'downloadFailed':
       return icons.DOWNLOADING;
     case 'episodeFileDeleted':
-      return icons.DELETE;
+      return (data as EpisodeFileDeletedHistory).reason === 'MissingFromDisk'
+        ? icons.FILE_MISSING
+        : icons.DELETE;
     case 'episodeFileRenamed':
       return icons.ORGANIZE;
     case 'downloadIgnored':
@@ -27,7 +34,7 @@ function getIconName(eventType) {
   }
 }
 
-function getIconKind(eventType) {
+function getIconKind(eventType: HistoryEventType) {
   switch (eventType) {
     case 'downloadFailed':
       return kinds.DANGER;
@@ -36,10 +43,13 @@ function getIconKind(eventType) {
   }
 }
 
-function getTooltip(eventType, data) {
+function getTooltip(eventType: HistoryEventType, data: HistoryData) {
   switch (eventType) {
     case 'grabbed':
-      return translate('EpisodeGrabbedTooltip', { indexer: data.indexer, downloadClient: data.downloadClient });
+      return translate('EpisodeGrabbedTooltip', {
+        indexer: (data as GrabbedHistoryData).indexer,
+        downloadClient: (data as GrabbedHistoryData).downloadClient,
+      });
     case 'seriesFolderImported':
       return translate('SeriesFolderImportedTooltip');
     case 'downloadFolderImported':
@@ -47,7 +57,9 @@ function getTooltip(eventType, data) {
     case 'downloadFailed':
       return translate('DownloadFailedEpisodeTooltip');
     case 'episodeFileDeleted':
-      return translate('EpisodeFileDeletedTooltip');
+      return (data as EpisodeFileDeletedHistory).reason === 'MissingFromDisk'
+        ? translate('EpisodeFileMissingTooltip')
+        : translate('EpisodeFileDeletedTooltip');
     case 'episodeFileRenamed':
       return translate('EpisodeFileRenamedTooltip');
     case 'downloadIgnored':
@@ -57,31 +69,21 @@ function getTooltip(eventType, data) {
   }
 }
 
-function HistoryEventTypeCell({ eventType, data }) {
+interface HistoryEventTypeCellProps {
-  const iconName = getIconName(eventType);
+  eventType: HistoryEventType;
+  data: HistoryData;
+}
+
+function HistoryEventTypeCell({ eventType, data }: HistoryEventTypeCellProps) {
+  const iconName = getIconName(eventType, data);
   const iconKind = getIconKind(eventType);
   const tooltip = getTooltip(eventType, data);
 
   return (
-    <TableRowCell
+    <TableRowCell className={styles.cell} title={tooltip}>
-      className={styles.cell}
+      <Icon name={iconName} kind={iconKind} />
-      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

@@ -1,312 +0,0 @@
-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

@@ -0,0 +1,275 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } 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 { QualityModel } from 'Quality/Quality';
+import SeriesTitleLink from 'Series/SeriesTitleLink';
+import useSeries from 'Series/useSeries';
+import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+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: object[];
+  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,
+    markAsFailedError,
+    columns,
+  } = props;
+
+  const wasMarkingAsFailed = usePrevious(isMarkingAsFailed);
+  const dispatch = useDispatch();
+  const series = useSeries(seriesId);
+  const episode = useEpisode(episodeId, 'episodes');
+
+  const { shortDateFormat, timeFormat } = useSelector(
+    createUISettingsSelector()
+  );
+
+  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') {
+          return (
+            <TableRowCell key={name} className={styles.downloadClient}>
+              {'downloadClient' in data ? data.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}
+        shortDateFormat={shortDateFormat}
+        timeFormat={timeFormat}
+        onMarkAsFailedPress={handleMarkAsFailedPress}
+        onModalClose={handleDetailsModalClose}
+      />
+    </TableRow>
+  );
+}
+
+HistoryRow.defaultProps = {
+  customFormats: [],
+};
+
+export default HistoryRow;

frontend/src/Activity/History/HistoryRowConnector.js

@@ -1,76 +0,0 @@
-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,3 +11,7 @@
   border-color: var(--usenetColor);
   background-color: var(--usenetColor);
 }
+
+.unknown {
+  composes: label from '~Components/Label.css';
+}

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

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

frontend/src/Activity/Queue/ProtocolLabel.js

@@ -1,20 +0,0 @@
-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

@@ -0,0 +1,16 @@
+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

@@ -1,364 +0,0 @@
-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

@@ -0,0 +1,415 @@
+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

@@ -1,203 +0,0 @@
-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.tsx

@@ -1,36 +1,49 @@
-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';
 
-function QueueDetails(props) {
+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) {
   const {
     title,
     size,
     sizeleft,
     status,
-    trackedDownloadState,
+    trackedDownloadState = 'downloading',
-    trackedDownloadStatus,
+    trackedDownloadStatus = 'ok',
     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 (
+  if ((isDownloading || isPaused) && !hasWarning && !hasError) {
-    (isDownloading || isPaused) &&
-    !hasWarning &&
-    !hasError
-  ) {
     const state = isPaused ? translate('Paused') : translate('Downloading');
 
     if (progress < 5) {
@@ -45,11 +58,9 @@ function QueueDetails(props) {
     return (
       <Popover
         className={styles.progressBarContainer}
-        anchor={progressBar}
+        anchor={progressBar!}
         title={`${state} - ${progress.toFixed(1)}%`}
-        body={
+        body={<div>{title}</div>}
-          <div>{title}</div>
-        }
         position={tooltipPositions.LEFT}
       />
     );
@@ -68,22 +79,4 @@ function QueueDetails(props) {
   );
 }
 
-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

@@ -1,78 +0,0 @@
-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

@@ -0,0 +1,48 @@
+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

@@ -1,19 +0,0 @@
-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,4 +26,5 @@
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
+  text-align: right;
 }

frontend/src/Activity/Queue/QueueRow.js

@@ -1,467 +0,0 @@
-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,
-      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 === '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,
-  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

@@ -0,0 +1,411 @@
+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

@@ -1,70 +0,0 @@
-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.tsx

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

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -1,47 +0,0 @@
-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

@@ -0,0 +1,45 @@
+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

@@ -1,171 +0,0 @@
-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

@@ -0,0 +1,231 @@
+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

@@ -1,174 +0,0 @@
-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

@@ -0,0 +1,37 @@
+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

@@ -1,76 +0,0 @@
-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

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

frontend/src/Activity/Queue/TimeleftCell.tsx

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

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

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

@@ -4,6 +4,8 @@ interface CssExports {
   'alreadyExistsIcon': string;
   'content': string;
   'icons': string;
+  'network': string;
+  'originalLanguageName': string;
   'overlay': string;
   'overview': string;
   'poster': string;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -55,6 +55,7 @@ class AddNewSeriesSearchResult extends Component {
       titleSlug,
       year,
       network,
+      originalLanguage,
       status,
       overview,
       statistics,
@@ -145,14 +146,37 @@ 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}>
-                    {network}
+                    <Icon
+                      name={icons.NETWORK}
+                      size={13}
+                    />
+
+                    <span className={styles.network}>
+                      {network}
+                    </span>
                   </Label> :
                   null
               }
@@ -218,6 +242,7 @@ AddNewSeriesSearchResult.propTypes = {
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   network: PropTypes.string,
+  originalLanguage: PropTypes.object,
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,
   statistics: PropTypes.object.isRequired,

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

@@ -118,7 +118,7 @@ class ImportSeriesSelectFolder extends Component {
                       className={styles.addErrorAlert}
                       kind={kinds.DANGER}
                     >
-                      {translate('RootFolderLoadError')}
+                      {translate('AddRootFolderError')}
 
                       <ul>
                         {