Fixed: (RadarrImport) Treat redirects as HTTP errors

.devcontainer/Radarr.code-workspace

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

.devcontainer/devcontainer.json

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

.editorconfig

@@ -270,7 +270,7 @@ dotnet_diagnostic.CA5397.severity = suggestion
 
 dotnet_diagnostic.SYSLIB0006.severity = none
 
-[*.{js,html,hbs,less,css,ts,tsx}]
+[*.{js,html,js,hbs,less,css}]
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,5 +1,5 @@
 name: Bug Report
-description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Discord first'
+description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Reddit or Discord first'
 labels: ['Type: Bug', 'Status: Needs Triage']
 body:
 - type: checkboxes
@@ -65,18 +65,18 @@ body:
     required: true
 - type: textarea
   attributes:
-    label: Trace Logs? **Not Optional**
+    label: Trace Logs?
     description: |
       Trace Logs (https://wiki.servarr.com/radarr/troubleshooting#logging-and-log-files) 
-      ***Generally speaking, all bug reports MUST have trace logs provided.***
+      ***Generally speaking, all bug reports must have trace logs provided.***
       Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
       Additionally, any additional info? Screenshots? References? Anything that will give us more context about the issue you are encountering!
   validations:
     required: true
 - type: checkboxes
   attributes:
-    label: Trace Logs have been provided as applicable. Reports will be closed if the required logs are not provided.
-    description: Trace logs are **generally required** and are not optional for all bug reports and contain `trace`. Info logs are invalid for bug reports and do not contain `debug` nor `trace`
+    label: Trace Logs have been provided as applicable. Reports may be closed if the required logs are not provided.
+    description: Trace logs are generally required for all bug reports
     options:
-    - label: I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain `trace` - that are relevant and show this issue.
+    - label: I have followed the steps in the wiki link above and provided the required trace logs that are relevant and show this issue.
       required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -3,3 +3,6 @@ contact_links:
   - name: Support via Discord
     url: https://radarr.video/discord
     about: Chat with users and devs on support and setup related topics.
+  - name: Support via Reddit
+    url: https://reddit.com/r/radarr
+    about: Discuss and search thru support topics.

.github/dependabot.yml

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

.github/label-actions.yml

@@ -1,16 +0,0 @@
-# Configuration for Label Actions - https://github.com/dessant/label-actions
-
-'Type: Support':
-  comment: >
-    :wave: @{issue-author}, we use the issue tracker exclusively
-    for bug reports and feature requests. However, this issue appears
-    to be a support request. Please hop over onto our [Discord](https://radarr.video/discord).
-  close: true
-  close-reason: 'not planned'
-
-'Status: Logs Needed':
-  comment: >
-    :wave: @{issue-author}, In order to help you further we'll need to see logs. 
-    You'll need to enable trace logging and replicate the problem that you encountered. 
-    Guidance on how to enable trace logging can be found in 
-    our [troubleshooting guide](https://wiki.servarr.com/radarr/troubleshooting#logging-and-log-files).

.github/workflows/label-actions.yml

@@ -1,17 +0,0 @@
-name: 'Label Actions'
-
-on:
-  issues:
-    types: [labeled, unlabeled]
-
-permissions:
-  contents: read
-  issues: write
-
-jobs:
-  action:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: dessant/label-actions@v3
-        with:
-          process-only: 'issues'

.github/workflows/support.yml

@@ -0,0 +1,36 @@
+name: 'Support requests'
+
+on:
+  issues:
+    types: [labeled, unlabeled, reopened]
+
+permissions: {}
+jobs:
+  support:
+    permissions:
+      issues: write # to modify issues
+
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/support-requests@v3
+        with:
+          github-token: ${{ github.token }}
+          support-label: 'Type: Support'
+          issue-comment: >
+            :wave: @{issue-author}, we use the issue tracker exclusively
+            for bug reports and feature requests. However, this issue appears
+            to be a support request. Please hop over onto our [Discord](https://radarr.video/discord) 
+            or [Subreddit](https://reddit.com/r/radarr)
+          close-issue: true
+          lock-issue: false
+      - uses: dessant/support-requests@v3
+        with:
+          github-token: ${{ github.token }}
+          support-label: 'Status: Logs Needed'
+          issue-comment: >
+            :wave: @{issue-author}, In order to help you further we'll need to see logs. 
+            You'll need to enable trace logging and replicate the problem that you encountered. 
+            Guidance on how to enable trace logging can be found in 
+            our [troubleshooting guide](https://wiki.servarr.com/radarr/troubleshooting#logging-and-log-files).
+          close-issue: false
+          lock-issue: false

.gitignore

@@ -118,7 +118,6 @@ src/UI/.idea/*
 node_modules/
 _output*
 _artifacts
-_temp*
 _rawPackage/
 _dotTrace*
 _tests/
@@ -127,7 +126,6 @@ coverage*.xml
 coverage*.json
 setup/Output/
 *.~is
-.mono
 
 # VS outout folders
 bin

.vscode/extensions.json

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

.vscode/launch.json

@@ -1,26 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      // Use IntelliSense to find out which attributes exist for C# debugging
-      // Use hover for the description of the existing attributes
-      // For further information visit https://github.com/dotnet/vscode-csharp/blob/main/debugger-launchjson.md
-      "name": "Run Radarr",
-      "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/Radarr",
-      "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/tasks.json

@@ -1,44 +0,0 @@
-{
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "build dotnet",
-      "command": "dotnet",
-      "type": "process",
-      "args": [
-        "msbuild",
-        "-restore",
-        "${workspaceFolder}/src/Radarr.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/Radarr.sln",
-        "-property:GenerateFullPaths=true",
-        "-consoleloggerparameters:NoSummary;ForceNoAlign"
-      ],
-      "problemMatcher": "$msCompile"
-    },
-    {
-      "label": "watch",
-      "command": "dotnet",
-      "type": "process",
-      "args": [
-        "watch",
-        "run",
-        "--project",
-        "${workspaceFolder}/src/Radarr.sln"
-      ],
-      "problemMatcher": "$msCompile"
-    }
-  ]
-}

Logo/dottrace.svg

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

Logo/jetbrains.svg

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

Logo/resharper.svg

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

Logo/rider.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
+  <defs>
+    <linearGradient id="linear-gradient" x1="70.22612" y1="27.79912" x2="-5.13024" y2="63.12242" gradientTransform="matrix(1, 0, 0, -1, 0, 71.27997)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#c90f5e"/>
+      <stop offset="0.22111" stop-color="#c90f5e"/>
+      <stop offset="0.2356" stop-color="#c90f5e"/>
+      <stop offset="0.35559" stop-color="#ca135c"/>
+      <stop offset="0.46633" stop-color="#ce1e57"/>
+      <stop offset="0.5735" stop-color="#d4314e"/>
+      <stop offset="0.67844" stop-color="#dc4b41"/>
+      <stop offset="0.78179" stop-color="#e66d31"/>
+      <stop offset="0.88253" stop-color="#f3961d"/>
+      <stop offset="0.94241" stop-color="#fcb20f"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="24.65904" y1="61.99608" x2="46.04762" y2="2.93445" gradientTransform="matrix(1, 0, 0, -1, 0, 71.27997)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.04188" stop-color="#077cfb"/>
+      <stop offset="0.44503" stop-color="#c90f5e"/>
+      <stop offset="0.95812" stop-color="#077cfb"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="17.39552" y1="63.34592" x2="33.19389" y2="7.20092" gradientTransform="matrix(1, 0, 0, -1, 0, 71.27997)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.27749" stop-color="#c90f5e"/>
+      <stop offset="0.97382" stop-color="#fcb20f"/>
+    </linearGradient>
+  </defs>
+  <title>rider</title>
+  <g>
+    <polygon points="70 27.237 63.391 23.75 20.926 0 3.827 17.921 21.619 41.068 60.537 44.397 70 27.237" fill="url(#linear-gradient)"/>
+    <polygon points="50.423 16.132 44.271 1.107 27.643 17.471 11.768 50.194 49.411 70 70 57.98 50.423 16.132" fill="url(#linear-gradient-2)"/>
+    <polygon points="20.926 0 0 14.095 7.779 62.172 27.848 69.889 53.78 48.823 20.926 0" fill="url(#linear-gradient-3)"/>
+  </g>
+  <g>
+    <rect x="13.30219" y="13.19311" width="43.61371" height="43.61371"/>
+    <g>
+      <path d="M17.22741,18.86293h8.39564a7.38416,7.38416,0,0,1,5.34268,1.85358,5.86989,5.86989,0,0,1,1.52648,4.1433h0A5.74339,5.74339,0,0,1,28.567,30.5296l4.47041,6.54206H28.34891L24.42368,31.1838h-3.162v5.88785H17.22741V18.86293h0ZM25.296,27.69471c1.96262,0,3.053-1.09034,3.053-2.61682h0c0-1.74455-1.19938-2.61682-3.162-2.61682H21.15265v5.23365H25.296Z" fill="#fff"/>
+      <path d="M36.09034,18.86293H43.2866c5.77882,0,9.70405,3.92523,9.70405,9.15888h0c0,5.12461-3.92523,9.15888-9.70405,9.15888H36.09034V18.86293Zm4.03427,3.59813V33.47352h3.162a5.23727,5.23727,0,0,0,5.56075-5.45171h0a5.26493,5.26493,0,0,0-5.56075-5.56075h-3.162Z" fill="#fff"/>
+    </g>
+    <rect x="17.22741" y="48.62925" width="16.35514" height="2.72586" fill="#fff"/>
+  </g>
+</svg>

Logo/webstorm.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve">
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.0676" y1="1.4599" x2="43.1829" y2="66.675">
+			<stop  offset="0.2849" style="stop-color:#00CDD7"/>
+			<stop  offset="0.9409" style="stop-color:#2086D7"/>
+		</linearGradient>
+		<polygon style="fill:url(#SVGID_1_);" points="9.4,63.3 0,7.3 17.5,0.1 28.6,6.7 38.8,1.2 60.1,9.4 48.1,70 		"/>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="30.7199" y1="9.7343" x2="61.365" y2="54.6713">
+			<stop  offset="0.1398" style="stop-color:#FFF045"/>
+			<stop  offset="0.3656" style="stop-color:#00CDD7"/>
+		</linearGradient>
+		<polygon style="fill:url(#SVGID_2_);" points="70,23.7 61,1.4 44.6,0 19.3,24.3 26.1,55.6 38.8,64.6 70,46 62.3,31.7 		"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="61.0819" y1="15.2899" x2="65.1065" y2="29.5436">
+			<stop  offset="0.2849" style="stop-color:#00CDD7"/>
+			<stop  offset="0.9409" style="stop-color:#2086D7"/>
+		</linearGradient>
+		<polygon style="fill:url(#SVGID_3_);" points="56,20.4 62.3,31.7 70,23.7 64.4,9.8 		"/>
+	</g>
+	<g>
+		<g>
+			<rect x="13.4" y="13.4" style="fill:#000000;" width="43.2" height="43.2"/>
+			<rect x="17.5" y="48.5" style="fill:#FFFFFF;" width="16.2" height="2.7"/>
+			<path style="fill:#FFFFFF;" d="M38.7,34.3l2.3-2.8c1.6,1.3,3.3,2.2,5.3,2.2c1.6,0,2.5-0.6,2.5-1.7v-0.1c0-1-0.6-1.5-3.6-2.3
+				c-3.6-0.9-5.8-1.9-5.8-5.5v-0.1c0-3.3,2.6-5.4,6.2-5.4c2.6,0,4.8,0.8,6.6,2.3l-2,3c-1.6-1.1-3.1-1.8-4.6-1.8
+				c-1.5,0-2.3,0.7-2.3,1.6v0.1c0,1.2,0.8,1.6,3.8,2.4c3.6,1,5.6,2.3,5.6,5.4v0.1c0,3.6-2.7,5.6-6.5,5.6
+				C43.5,37.2,40.8,36.2,38.7,34.3"/>
+		</g>
+		<polygon style="fill:#FFFFFF;" points="35.2,19 32.5,29.4 29.5,19 26.5,19 23.4,29.4 20.7,19 16.6,19 21.7,36.9 25,36.9 28,26.5 
+			30.9,36.9 34.3,36.9 39.4,19 		"/>
+	</g>
+</g>
+</svg>

README.md

@@ -1,21 +1,21 @@
 # Radarr
 
 [![Build Status](https://dev.azure.com/Radarr/Radarr/_apis/build/status/Radarr.Radarr?branchName=develop)](https://dev.azure.com/Radarr/Radarr/_build/latest?definitionId=1&branchName=develop)
-[![Translation status](https://translate.servarr.com/widget/servarr/radarr/svg-badge.svg)](https://translate.servarr.com/engage/servarr/?utm_source=widget)
-[![Docker Pulls](https://img.shields.io/docker/pulls/linuxserver/radarr.svg)](https://wiki.servarr.com/radarr/installation/docker)
+[![Translated](https://translate.servarr.com/widgets/servarr/-/radarr/svg-badge.svg)](https://translate.servarr.com/engage/radarr/?utm_source=widget)
+[![Docker Pulls](https://img.shields.io/docker/pulls/linuxserver/radarr.svg)](https://wiki.servarr.com/radarr/installation#docker)
 ![Github Downloads](https://img.shields.io/github/downloads/Radarr/Radarr/total.svg)
 [![Backers on Open Collective](https://opencollective.com/Radarr/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/Radarr/sponsors/badge.svg)](#sponsors)
 [![Mega Sponsors on Open Collective](https://opencollective.com/Radarr/megasponsors/badge.svg)](#mega-sponsors)
 
 Radarr is a movie collection manager for Usenet and BitTorrent users. It can monitor multiple RSS feeds for new movies and will interface with clients and indexers to grab, sort, and rename them. It can also be configured to automatically upgrade the quality of existing files in the library when a better quality format becomes available.
-Note that only one type of a given movie is supported. If you want both a 4k version and 1080p version of a given movie you will need multiple instances.
+Note that only one type of a given movie is supported. If you want both an 4k version and 1080p version of a given movie you will need multiple instances.
 
 ## Major Features Include
 
 * Adding new movies with lots of information, such as trailers, ratings, etc.
 * Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
-* Can watch for better quality of the movies you have and do an automatic upgrade. _eg. from DVD to Blu-Ray_
+* Can watch for better quality of the movies you have and do an automatic upgrade. *e.g. from DVD to Blu-Ray*
 * Automatic failed download handling will try another release if one fails
 * Manual search so you can pick any release or to see why a release was not downloaded automatically
 * Full integration with SABnzbd and NZBGet
@@ -35,6 +35,7 @@ Note that only one type of a given movie is supported. If you want both a 4k ver
 
 [![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/radarr)
 [![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60)](https://radarr.video/discord)
+[![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60)](https://www.reddit.com/r/Radarr)
 
 Note: GitHub Issues are for Bugs and Feature Requests Only
 
@@ -68,12 +69,12 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
 
 ## JetBrains
 
-Thank you to [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png" alt="JetBrains" width="96">](http://www.jetbrains.com/) for providing us with free licenses to their great tools.
+Thank you to [<img src="/Logo/jetbrains.svg" alt="JetBrains" width="32"> JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools.
 
-* [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/ReSharper_icon.png" alt="ReSharper" width="32"> ReSharper](http://www.jetbrains.com/resharper/)
-* [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/WebStorm_icon.png" alt="WebStorm" width="32"> WebStorm](http://www.jetbrains.com/webstorm/)
-* [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/Rider_icon.png" alt="Rider" width="32"> Rider](http://www.jetbrains.com/rider/)
-* [<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/dotTrace_icon.png" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)
+* [<img src="/Logo/resharper.svg" alt="ReSharper" width="32"> ReSharper](http://www.jetbrains.com/resharper/)
+* [<img src="/Logo/webstorm.svg" alt="WebStorm" width="32"> WebStorm](http://www.jetbrains.com/webstorm/)
+* [<img src="/Logo/rider.svg" alt="Rider" width="32"> Rider](http://www.jetbrains.com/rider/)
+* [<img src="/Logo/dottrace.svg" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)
 
 ## DigitalOcean
 
@@ -87,4 +88,4 @@ This project is also supported by DigitalOcean
 ### License
 
 * [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-* Copyright 2010-2025
+* Copyright 2010-2022

azure-pipelines.yml

@@ -9,28 +9,24 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '5.22.1'
+  majorVersion: '4.6.0'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.427'
-  nodeVersion: '20.X'
-  innoVersion: '6.2.2'
+  dotnetVersion: '6.0.408'
+  nodeVersion: '16.X'
+  innoVersion: '6.2.0'
   windowsImage: 'windows-2022'
-  linuxImage: 'ubuntu-22.04'
-  macImage: 'macOS-13'
+  linuxImage: 'ubuntu-20.04'
+  macImage: 'macOS-11'
 
 trigger:
   branches:
     include:
     - develop
     - master
-  paths:
-    exclude:
-      - .github
-      - src/Radarr.Api.*/openapi.json
 
 pr:
   branches:
@@ -38,7 +34,6 @@ pr:
     - develop
   paths:
     exclude:
-    - .github
     - src/NzbDrone.Core/Localization/Core
     - src/Radarr.Api.*/openapi.json
 
@@ -166,10 +161,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: UseNode@1
+      - task: NodeTool@0
         displayName: Set Node.js version
         inputs:
-          version: $(nodeVersion)
+          versionSpec: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -368,7 +363,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="Radarr@${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p radarr -p radarr-ui -p radarr-update "${RELEASENAME}"
           sentry-cli releases -p radarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"
@@ -541,8 +536,8 @@ stages:
           testRunTitle: '$(testName) Unit Tests'
           failTaskOnFailedTests: true
           
-    - job: Unit_LinuxCore_Postgres14
-      displayName: Unit Native LinuxCore with Postgres14 Database
+    - job: Unit_LinuxCore_Postgres
+      displayName: Unit Native LinuxCore with Postgres Database
       dependsOn: Prepare
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       variables:
@@ -594,63 +589,7 @@ stages:
         inputs:
           testResultsFormat: 'NUnit'
           testResultsFiles: '**/TestResult.xml'
-          testRunTitle: 'LinuxCore Postgres14 Unit Tests'
-          failTaskOnFailedTests: true
-
-    - job: Unit_LinuxCore_Postgres15
-      displayName: Unit Native LinuxCore with Postgres15 Database
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
-      variables:
-        pattern: 'Radarr.*.linux-core-x64.tar.gz'
-        artifactName: linux-x64-tests
-        Radarr__Postgres__Host: 'localhost'
-        Radarr__Postgres__Port: '5432'
-        Radarr__Postgres__User: 'radarr'
-        Radarr__Postgres__Password: 'radarr'
-  
-      pool:
-        vmImage: ${{ variables.linuxImage }}
-
-      timeoutInMinutes: 10
-        
-      steps:
-      - task: UseDotNet@2
-        displayName: 'Install .net core'
-        inputs:
-          version: $(dotnetVersion)
-      - checkout: none
-      - task: DownloadPipelineArtifact@2
-        displayName: Download Test Artifact
-        inputs:
-          buildType: 'current'
-          artifactName: $(artifactName)
-          targetPath: $(testsFolder)
-      - bash: |
-          chmod a+x _tests/ffprobe
-        displayName: Make ffprobe Executable
-      - bash: find ${TESTSFOLDER} -name "Radarr.Test.Dummy" -exec chmod a+x {} \;
-        displayName: Make Test Dummy Executable
-        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
-      - bash: |
-          docker run -d --name=postgres15 \
-          -e POSTGRES_PASSWORD=radarr \
-          -e POSTGRES_USER=radarr \
-          -p 5432:5432/tcp \
-          -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
-          postgres:15
-        displayName: Start postgres
-      - bash: |
-          chmod a+x ${TESTSFOLDER}/test.sh
-          ls -lR ${TESTSFOLDER}
-          ${TESTSFOLDER}/test.sh Linux Unit Test
-        displayName: Run Tests
-      - task: PublishTestResults@2
-        displayName: Publish Test Results
-        inputs:
-          testResultsFormat: 'NUnit'
-          testResultsFiles: '**/TestResult.xml'
-          testRunTitle: 'LinuxCore Postgres15 Unit Tests'
+          testRunTitle: 'LinuxCore Postgres Unit Tests'
           failTaskOnFailedTests: true
 
   - stage: Integration
@@ -736,8 +675,8 @@ stages:
           failTaskOnFailedTests: true
         displayName: Publish Test Results
 
-    - job: Integration_LinuxCore_Postgres14
-      displayName: Integration Native LinuxCore with Postgres14 Database
+    - job: Integration_LinuxCore_Postgres
+      displayName: Integration Native LinuxCore with Postgres Database
       dependsOn: Prepare
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       variables:
@@ -794,70 +733,7 @@ stages:
           inputs:
             testResultsFormat: 'NUnit'
             testResultsFiles: '**/TestResult.xml'
-            testRunTitle: 'Integration LinuxCore Postgres14 Database Integration Tests'
-            failTaskOnFailedTests: true
-          displayName: Publish Test Results
-
-
-    - job: Integration_LinuxCore_Postgres15
-      displayName: Integration Native LinuxCore with Postgres Database
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
-      variables:
-        pattern: 'Radarr.*.linux-core-x64.tar.gz'
-        Radarr__Postgres__Host: 'localhost'
-        Radarr__Postgres__Port: '5432'
-        Radarr__Postgres__User: 'radarr'
-        Radarr__Postgres__Password: 'radarr'
-
-      pool:
-        vmImage: ${{ variables.linuxImage }}
-
-      steps:
-        - task: UseDotNet@2
-          displayName: 'Install .net core'
-          inputs:
-            version: $(dotnetVersion)
-        - checkout: none
-        - task: DownloadPipelineArtifact@2
-          displayName: Download Test Artifact
-          inputs:
-            buildType: 'current'
-            artifactName: 'linux-x64-tests'
-            targetPath: $(testsFolder)
-        - task: DownloadPipelineArtifact@2
-          displayName: Download Build Artifact
-          inputs:
-            buildType: 'current'
-            artifactName: Packages
-            itemPattern: '**/$(pattern)'
-            targetPath: $(Build.ArtifactStagingDirectory)
-        - task: ExtractFiles@1
-          inputs:
-            archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
-            destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
-          displayName: Extract Package
-        - bash: |
-            mkdir -p ./bin/
-            cp -r -v ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin/Radarr/. ./bin/
-          displayName: Move Package Contents
-        - bash: |
-            docker run -d --name=postgres15 \
-            -e POSTGRES_PASSWORD=radarr \
-            -e POSTGRES_USER=radarr \
-            -p 5432:5432/tcp \
-            -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
-            postgres:15
-          displayName: Start postgres
-        - bash: |
-            chmod a+x ${TESTSFOLDER}/test.sh
-            ${TESTSFOLDER}/test.sh Linux Integration Test
-          displayName: Run Integration Tests
-        - task: PublishTestResults@2
-          inputs:
-            testResultsFormat: 'NUnit'
-            testResultsFiles: '**/TestResult.xml'
-            testRunTitle: 'Integration LinuxCore Postgres15 Database Integration Tests'
+            testRunTitle: 'Integration LinuxCore Postgres Database Integration Tests'
             failTaskOnFailedTests: true
           displayName: Publish Test Results
 
@@ -1089,10 +965,10 @@ stages:
       pool:
         vmImage: $(imageName)
       steps:
-      - task: UseNode@1
+      - task: NodeTool@0
         displayName: Set Node.js version
         inputs:
-          version: $(nodeVersion)
+          versionSpec: $(nodeVersion)
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -1116,20 +992,20 @@ stages:
         vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self # Need history for Sonar analysis
-      - task: SonarCloudPrepare@3
+      - task: SonarCloudPrepare@1
         env:
           SONAR_SCANNER_OPTS: ''
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'radarr'
-          scannerMode: 'cli'
+          scannerMode: 'CLI'
           configMode: 'manual'
           cliProjectKey: 'Radarr_Radarr.UI'
           cliProjectName: 'RadarrUI'
           cliProjectVersion: '$(radarrVersion)'
           cliSources: './frontend'
-      - task: SonarCloudAnalyze@3
-
+      - task: SonarCloudAnalyze@1
+      
     - job: Api_Docs
       displayName: API Docs
       dependsOn: Prepare
@@ -1205,12 +1081,12 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@3
+      - task: SonarCloudPrepare@1
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
           organization: 'radarr'
-          scannerMode: 'dotnet'
+          scannerMode: 'MSBuild'
           projectKey: 'Radarr_Radarr'
           projectName: 'Radarr'
           projectVersion: '$(radarrVersion)'
@@ -1223,21 +1099,25 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@3
+      - task: SonarCloudAnalyze@1
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@5.3.11
+      - task: reportgenerator@4
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
-          publishCodeCoverageResults: true
+      - task: PublishCodeCoverageResults@1
+        displayName: Publish Coverage Report
+        inputs:
+          codeCoverageTool: 'cobertura'
+          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
+          reportDirectory: './CoverageResults/combined/'
 
   - stage: Report_Out
     dependsOn:
     - Analyze
-    - Installer
     - Unit_Test
     - Integration
     - Automation

build.sh

@@ -254,7 +254,7 @@ InstallInno()
     ProgressStart "Installing portable Inno Setup"
     
     rm -rf _inno
-    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.2}.exe"
+    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.0}.exe"
     mkdir _inno
     ./innosetup.exe //portable=1 //silent //currentuser //dir=.\\_inno
     rm innosetup.exe
@@ -392,21 +392,22 @@ then
     fi
 fi
 
-if [[ "$LINT" = "YES" || "$FRONTEND" = "YES" ]];
+if [ "$FRONTEND" = "YES" ];
 then
     YarnInstall
+    RunWebpack
 fi
 
 if [ "$LINT" = "YES" ];
 then
+    if [ -z "$FRONTEND" ];
+    then
+        YarnInstall
+    fi
+    
     LintUI
 fi
 
-if [ "$FRONTEND" = "YES" ];
-then
-    RunWebpack
-fi
-
 if [ "$PACKAGES" = "YES" ];
 then
     UpdateVersionNumber

docs.sh

@@ -1,18 +1,13 @@
-#!/bin/bash
-set -e
-
-FRAMEWORK="net6.0"
 PLATFORM=$1
-ARCHITECTURE="${2:-x64}"
 
 if [ "$PLATFORM" = "Windows" ]; then
-  RUNTIME="win-$ARCHITECTURE"
+  RUNTIME="win-x64"
 elif [ "$PLATFORM" = "Linux" ]; then
-  RUNTIME="linux-$ARCHITECTURE"
+  RUNTIME="linux-x64"
 elif [ "$PLATFORM" = "Mac" ]; then
-  RUNTIME="osx-$ARCHITECTURE"
+  RUNTIME="osx-x64"
 else
-  echo "Platform must be provided as first argument: Windows, Linux or Mac"
+  echo "Platform must be provided as first arguement: Windows, Linux or Mac"
   exit 1
 fi
 
@@ -26,21 +21,15 @@ slnFile=src/Radarr.sln
 
 platform=Posix
 
-if [ "$PLATFORM" = "Windows" ]; then
-  application=Radarr.Console.dll
-else
-  application=Radarr.dll
-fi
-
 dotnet clean $slnFile -c Debug
 dotnet clean $slnFile -c Release
 
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/$FRAMEWORK/$RUNTIME/$application" v3 &
+dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/radarr.console.dll" v3 &
 
 sleep 45
 

frontend/.eslintrc.js

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

frontend/.vscode/settings.json

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

frontend/babel.config.js

@@ -2,18 +2,16 @@ 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 }],
-    ['@babel/plugin-transform-nullish-coalescing-operator', { loose }],
+    ['@babel/plugin-proposal-optional-chaining', { loose }],
+    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose }],
 
     // Stage 2
-    '@babel/plugin-transform-export-namespace-from',
+    '@babel/plugin-proposal-export-namespace-from',
 
     // Stage 3
-    ['@babel/plugin-transform-class-properties', { loose }],
+    ['@babel/plugin-proposal-class-properties', { loose }],
     '@babel/plugin-syntax-dynamic-import'
   ],
   env: {

frontend/build/webpack.config.js

@@ -26,7 +26,6 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
-    target: 'web',
 
     stats: {
       children: false
@@ -37,7 +36,7 @@ module.exports = (env) => {
     },
 
     entry: {
-      index: 'index.ts'
+      index: 'index.js'
     },
 
     resolve: {
@@ -67,23 +66,23 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
+      filename: '[name].js',
       sourceMapFilename: '[file].map'
     },
 
     optimization: {
       moduleIds: 'deterministic',
-      chunkIds: isProduction ? 'deterministic' : 'named'
+      chunkIds: 'named',
+      splitChunks: {
+        chunks: 'initial',
+        name: 'vendors'
+      }
     },
 
     performance: {
       hints: false
     },
 
-    experiments: {
-      topLevelAwait: true
-    },
-
     plugins: [
       new webpack.DefinePlugin({
         __DEV__: !isProduction,
@@ -91,15 +90,13 @@ module.exports = (env) => {
       }),
 
       new MiniCssExtractPlugin({
-        filename: 'Content/styles.css',
-        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
+        filename: 'Content/styles.css'
       }),
 
       new HtmlWebpackPlugin({
         template: 'frontend/src/index.ejs',
         filename: 'index.html',
-        publicPath: '/',
-        inject: false
+        publicPath: '/'
       }),
 
       new FileManagerPlugin({
@@ -134,12 +131,6 @@ module.exports = (env) => {
               {
                 source: 'frontend/src/Content/robots.txt',
                 destination: path.join(distFolder, 'Content/robots.txt')
-              },
-
-              // manifest.json and browserconfig.xml
-              {
-                source: 'frontend/src/Content/*.(json|xml)',
-                destination: path.join(distFolder, 'Content')
               }
             ]
           }
@@ -187,7 +178,7 @@ module.exports = (env) => {
                       loose: true,
                       debug: false,
                       useBuiltIns: 'entry',
-                      corejs: '3.39'
+                      corejs: 3
                     }
                   ]
                 ]
@@ -208,7 +199,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
+                  localIdentName: '[name]/[local]/[hash:base64:5]'
                 }
               }
             },
@@ -242,7 +233,6 @@ module.exports = (env) => {
             {
               loader: 'url-loader',
               options: {
-                limit: 10240,
                 mimetype: 'application/font-woff',
                 emitFile: false,
                 name: 'Content/Fonts/[name].[ext]'

frontend/postcss.config.js

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

frontend/src/Activity/Blocklist/Blocklist.js

@@ -0,0 +1,235 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+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,
+      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 });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      totalRecords,
+      isRemoving,
+      isClearingBlocklistExecuting,
+      onClearBlocklistPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen
+    } = 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}
+              isSpinning={isClearingBlocklistExecuting}
+              onPress={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 &&
+              <div>
+                {translate('UnableToLoadBlocklist')}
+              </div>
+          }
+
+          {
+            isPopulated && !error && !items.length &&
+              <div>
+                {translate('NoHistory')}
+              </div>
+          }
+
+          {
+            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('AreYouSureYouWantToRemoveTheSelectedItemsFromBlocklist')}
+          confirmLabel={translate('RemoveSelected')}
+          onConfirm={this.onRemoveSelectedConfirmed}
+          onCancel={this.onConfirmRemoveModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Blocklist.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isRemoving: PropTypes.bool.isRequired,
+  isClearingBlocklistExecuting: PropTypes.bool.isRequired,
+  onRemoveSelected: PropTypes.func.isRequired,
+  onClearBlocklistPress: PropTypes.func.isRequired
+};
+
+export default Blocklist;

frontend/src/Activity/Blocklist/Blocklist.tsx

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

frontend/src/Activity/Blocklist/BlocklistConnector.js

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

frontend/src/Activity/Blocklist/BlocklistDetailsModal.js

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

frontend/src/Activity/Blocklist/BlocklistDetailsModal.tsx

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

frontend/src/Activity/Blocklist/BlocklistFilterModal.tsx

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

frontend/src/Activity/Blocklist/BlocklistRow.css

@@ -1,4 +1,4 @@
-.languages,
+.language,
 .quality {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Activity/Blocklist/BlocklistRow.css.d.ts

@@ -3,7 +3,7 @@
 interface CssExports {
   'actions': string;
   'indexer': string;
-  'languages': string;
+  'language': string;
   'quality': string;
 }
 export const cssExports: CssExports;

frontend/src/Activity/Blocklist/BlocklistRow.js

@@ -0,0 +1,213 @@
+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 { icons, kinds } from 'Helpers/Props';
+import MovieFormats from 'Movie/MovieFormats';
+import MovieLanguage from 'Movie/MovieLanguage';
+import MovieQuality from 'Movie/MovieQuality';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+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,
+      movie,
+      sourceTitle,
+      quality,
+      customFormats,
+      languages,
+      date,
+      protocol,
+      indexer,
+      message,
+      isSelected,
+      columns,
+      onSelectedChange,
+      onRemovePress
+    } = this.props;
+
+    if (!movie) {
+      return null;
+    }
+
+    return (
+      <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'movies.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={movie.titleSlug}
+                    title={movie.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieLanguage
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.quality}
+                >
+                  <MovieQuality
+                    quality={quality}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    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,
+  movie: PropTypes.object.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  date: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onRemovePress: PropTypes.func.isRequired
+};
+
+export default BlocklistRow;

frontend/src/Activity/Blocklist/BlocklistRow.tsx

@@ -1,160 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import IconButton from 'Components/Link/IconButton';
-import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
-import Column from 'Components/Table/Column';
-import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
-import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguages from 'Movie/MovieLanguages';
-import MovieQuality from 'Movie/MovieQuality';
-import MovieTitleLink from 'Movie/MovieTitleLink';
-import useMovie from 'Movie/useMovie';
-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,
-    movieId,
-    sourceTitle,
-    languages,
-    quality,
-    customFormats,
-    date,
-    protocol,
-    indexer,
-    message,
-    isSelected,
-    columns,
-    onSelectedChange,
-  } = props;
-
-  const movie = useMovie(movieId);
-  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 (!movie) {
-    return null;
-  }
-
-  return (
-    <TableRow>
-      <TableSelectCell
-        id={id}
-        isSelected={isSelected}
-        onSelectedChange={onSelectedChange}
-      />
-
-      {columns.map((column) => {
-        const { name, isVisible } = column;
-
-        if (!isVisible) {
-          return null;
-        }
-
-        if (name === 'movieMetadata.sortTitle') {
-          return (
-            <TableRowCell key={name}>
-              <MovieTitleLink titleSlug={movie.titleSlug} title={movie.title} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'sourceTitle') {
-          return <TableRowCell key={name}>{sourceTitle}</TableRowCell>;
-        }
-
-        if (name === 'languages') {
-          return (
-            <TableRowCell key={name} className={styles.languages}>
-              <MovieLanguages languages={languages} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'quality') {
-          return (
-            <TableRowCell key={name} className={styles.quality}>
-              <MovieQuality quality={quality} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormats') {
-          return (
-            <TableRowCell key={name}>
-              <MovieFormats formats={customFormats} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'date') {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore ts(2739)
-          return <RelativeDateCell key={name} date={date} />;
-        }
-
-        if (name === 'indexer') {
-          return (
-            <TableRowCell key={name} className={styles.indexer}>
-              {indexer}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'actions') {
-          return (
-            <TableRowCell key={name} className={styles.actions}>
-              <IconButton name={icons.INFO} onPress={handleDetailsPress} />
-
-              <IconButton
-                title={translate('RemoveFromBlocklist')}
-                name={icons.REMOVE}
-                kind={kinds.DANGER}
-                onPress={handleRemovePress}
-              />
-            </TableRowCell>
-          );
-        }
-
-        return null;
-      })}
-
-      <BlocklistDetailsModal
-        isOpen={isDetailsModalOpen}
-        sourceTitle={sourceTitle}
-        protocol={protocol}
-        indexer={indexer}
-        message={message}
-        onModalClose={handleDetailsModalClose}
-      />
-    </TableRow>
-  );
-}
-
-export default BlocklistRow;

frontend/src/Activity/Blocklist/BlocklistRowConnector.js

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

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

@@ -0,0 +1,294 @@
+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 translate from 'Utilities/String/translate';
+import styles from './HistoryDetails.css';
+
+function HistoryDetails(props) {
+  const {
+    eventType,
+    sourceTitle,
+    data,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  if (eventType === 'grabbed') {
+    const {
+      indexer,
+      releaseGroup,
+      nzbInfoUrl,
+      downloadClient,
+      downloadClientName,
+      downloadId,
+      movieMatchType,
+      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}
+            />
+        }
+
+        {
+          !!releaseGroup &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('ReleaseGroup')}
+              data={releaseGroup}
+            />
+        }
+
+        {
+          !!nzbInfoUrl &&
+            <span>
+              <DescriptionListItemTitle>
+                Info URL
+              </DescriptionListItemTitle>
+
+              <DescriptionListItemDescription>
+                <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
+              </DescriptionListItemDescription>
+            </span>
+        }
+
+        {
+          movieMatchType ?
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('MovieMatchType')}
+              data={movieMatchType}
+            /> :
+            null
+        }
+
+        {
+          downloadClientNameInfo ?
+            <DescriptionListItem
+              title={translate('DownloadClient')}
+              data={downloadClientNameInfo}
+            /> :
+            null
+        }
+
+        {
+          !!downloadId &&
+            <DescriptionListItem
+              title={translate('GrabID')}
+              data={downloadId}
+            />
+        }
+
+        {
+          !!indexer &&
+            <DescriptionListItem
+              title={translate('AgeWhenGrabbed')}
+              data={formatAge(age, ageHours, ageMinutes)}
+            />
+        }
+
+        {
+          !!publishedDate &&
+            <DescriptionListItem
+              title={translate('PublishedDate')}
+              data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadFailed') {
+    const {
+      message
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title={translate('Name')}
+          data={sourceTitle}
+        />
+
+        {
+          !!message &&
+            <DescriptionListItem
+              title={translate('Message')}
+              data={message}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadFolderImported') {
+    const {
+      droppedPath,
+      importedPath
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title={translate('Name')}
+          data={sourceTitle}
+        />
+
+        {
+          !!droppedPath &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('Source')}
+              data={droppedPath}
+            />
+        }
+
+        {
+          !!importedPath &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title={translate('ImportedTo')}
+              data={importedPath}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'movieFileDeleted') {
+    const {
+      reason
+    } = data;
+
+    let reasonMessage = '';
+
+    switch (reason) {
+      case 'Manual':
+        reasonMessage = translate('FileWasDeletedByViaUI');
+        break;
+      case 'MissingFromDisk':
+        reasonMessage = translate('MissingFromDisk');
+        break;
+      case 'Upgrade':
+        reasonMessage = translate('FileWasDeletedByUpgrade');
+        break;
+      default:
+        reasonMessage = '';
+    }
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          title={translate('Name')}
+          data={sourceTitle}
+        />
+
+        <DescriptionListItem
+          title={translate('Reason')}
+          data={reasonMessage}
+        />
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'movieFileRenamed') {
+    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}
+        />
+
+        {
+          !!message &&
+            <DescriptionListItem
+              title={translate('Message')}
+              data={message}
+            />
+        }
+      </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,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default HistoryDetails;

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

@@ -1,348 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
-import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
-import Link from 'Components/Link/Link';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import {
-  DownloadFailedHistory,
-  DownloadFolderImportedHistory,
-  DownloadIgnoredHistory,
-  GrabbedHistoryData,
-  HistoryData,
-  HistoryEventType,
-  MovieFileDeletedHistory,
-  MovieFileRenamedHistory,
-} from 'typings/History';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatAge from 'Utilities/Number/formatAge';
-import formatBytes from 'Utilities/Number/formatBytes';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
-import translate from 'Utilities/String/translate';
-import styles from './HistoryDetails.css';
-
-interface HistoryDetailsProps {
-  eventType: HistoryEventType;
-  sourceTitle: string;
-  data: HistoryData;
-  downloadId?: string;
-}
-
-function HistoryDetails(props: HistoryDetailsProps) {
-  const { eventType, sourceTitle, data, downloadId } = props;
-
-  const { shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
-
-  if (eventType === 'grabbed') {
-    const {
-      indexer,
-      releaseGroup,
-      movieMatchType,
-      releaseSource,
-      customFormatScore,
-      nzbInfoUrl,
-      downloadClient,
-      downloadClientName,
-      age,
-      ageHours,
-      ageMinutes,
-      publishedDate,
-      size,
-    } = data as GrabbedHistoryData;
-
-    const downloadClientNameInfo = downloadClientName ?? downloadClient;
-
-    let releaseSourceMessage = '';
-
-    switch (releaseSource) {
-      case 'Unknown':
-        releaseSourceMessage = translate('Unknown');
-        break;
-      case 'Rss':
-        releaseSourceMessage = translate('Rss');
-        break;
-      case 'Search':
-        releaseSourceMessage = translate('Search');
-        break;
-      case 'UserInvokedSearch':
-        releaseSourceMessage = translate('UserInvokedSearch');
-        break;
-      case 'InteractiveSearch':
-        releaseSourceMessage = translate('InteractiveSearch');
-        break;
-      case 'ReleasePush':
-        releaseSourceMessage = translate('ReleasePush');
-        break;
-      default:
-        releaseSourceMessage = '';
-    }
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem
-          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}
-
-        {movieMatchType ? (
-          <DescriptionListItem
-            descriptionClassName={styles.description}
-            title={translate('MovieMatchType')}
-            data={movieMatchType}
-          />
-        ) : null}
-
-        {releaseSource ? (
-          <DescriptionListItem
-            descriptionClassName={styles.description}
-            title={translate('ReleaseSource')}
-            data={releaseSourceMessage}
-          />
-        ) : null}
-
-        {nzbInfoUrl ? (
-          <span>
-            <DescriptionListItemTitle>
-              {translate('InfoUrl')}
-            </DescriptionListItemTitle>
-
-            <DescriptionListItemDescription>
-              <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
-            </DescriptionListItemDescription>
-          </span>
-        ) : null}
-
-        {downloadClientNameInfo ? (
-          <DescriptionListItem
-            title={translate('DownloadClient')}
-            data={downloadClientNameInfo}
-          />
-        ) : null}
-
-        {downloadId ? (
-          <DescriptionListItem title={translate('GrabId')} data={downloadId} />
-        ) : null}
-
-        {age || ageHours || ageMinutes ? (
-          <DescriptionListItem
-            title={translate('AgeWhenGrabbed')}
-            data={formatAge(age, ageHours, ageMinutes)}
-          />
-        ) : null}
-
-        {publishedDate ? (
-          <DescriptionListItem
-            title={translate('PublishedDate')}
-            data={formatDateTime(publishedDate, shortDateFormat, timeFormat, {
-              includeSeconds: true,
-            })}
-          />
-        ) : null}
-
-        {size ? (
-          <DescriptionListItem
-            title={translate('Size')}
-            data={formatBytes(size)}
-          />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'downloadFailed') {
-    const { message, indexer } = data as DownloadFailedHistory;
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem
-          descriptionClassName={styles.description}
-          title={translate('Name')}
-          data={sourceTitle}
-        />
-
-        {downloadId ? (
-          <DescriptionListItem title={translate('GrabId')} data={downloadId} />
-        ) : null}
-
-        {indexer ? (
-          <DescriptionListItem title={translate('Indexer')} data={indexer} />
-        ) : null}
-
-        {message ? (
-          <DescriptionListItem title={translate('Message')} data={message} />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'downloadFolderImported') {
-    const { customFormatScore, droppedPath, importedPath, size } =
-      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}
-
-        {size ? (
-          <DescriptionListItem
-            title={translate('FileSize')}
-            data={formatBytes(size)}
-          />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'movieFileDeleted') {
-    const { reason, customFormatScore, size } = data as MovieFileDeletedHistory;
-
-    let reasonMessage = '';
-
-    switch (reason) {
-      case 'Manual':
-        reasonMessage = translate('DeletedReasonManual');
-        break;
-      case 'MissingFromDisk':
-        reasonMessage = translate('DeletedReasonMovieMissingFromDisk');
-        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}
-
-        {size ? (
-          <DescriptionListItem
-            title={translate('FileSize')}
-            data={formatBytes(size)}
-          />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'movieFileRenamed') {
-    const { sourcePath, sourceRelativePath, path, relativePath } =
-      data as MovieFileRenamedHistory;
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem
-          title={translate('SourcePath')}
-          data={sourcePath}
-        />
-
-        <DescriptionListItem
-          title={translate('SourceRelativePath')}
-          data={sourceRelativePath}
-        />
-
-        <DescriptionListItem title={translate('DestinationPath')} data={path} />
-
-        <DescriptionListItem
-          title={translate('DestinationRelativePath')}
-          data={relativePath}
-        />
-      </DescriptionList>
-    );
-  }
-
-  if (eventType === 'downloadIgnored') {
-    const { message } = data as DownloadIgnoredHistory;
-
-    return (
-      <DescriptionList>
-        <DescriptionListItem
-          descriptionClassName={styles.description}
-          title={translate('Name')}
-          data={sourceTitle}
-        />
-
-        {downloadId ? (
-          <DescriptionListItem title={translate('GrabId')} data={downloadId} />
-        ) : null}
-
-        {message ? (
-          <DescriptionListItem title={translate('Message')} data={message} />
-        ) : null}
-      </DescriptionList>
-    );
-  }
-
-  return (
-    <DescriptionList>
-      <DescriptionListItem
-        descriptionClassName={styles.description}
-        title={translate('Name')}
-        data={sourceTitle}
-      />
-    </DescriptionList>
-  );
-}
-
-export default HistoryDetails;

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

@@ -0,0 +1,18 @@
+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 {
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(HistoryDetails);

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

@@ -0,0 +1,107 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+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 { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import HistoryDetails from './HistoryDetails';
+import styles from './HistoryDetailsModal.css';
+
+function getHeaderTitle(eventType) {
+  switch (eventType) {
+    case 'grabbed':
+      return 'Grabbed';
+    case 'downloadFailed':
+      return 'Download Failed';
+    case 'downloadFolderImported':
+      return 'Movie Imported';
+    case 'movieFileDeleted':
+      return 'Movie File Deleted';
+    case 'movieFileRenamed':
+      return 'Movie File Renamed';
+    case 'downloadIgnored':
+      return 'Download Ignored';
+    default:
+      return 'Unknown';
+  }
+}
+
+function HistoryDetailsModal(props) {
+  const {
+    isOpen,
+    eventType,
+    sourceTitle,
+    data,
+    isMarkingAsFailed,
+    shortDateFormat,
+    timeFormat,
+    onMarkAsFailedPress,
+    onModalClose
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {getHeaderTitle(eventType)}
+        </ModalHeader>
+
+        <ModalBody>
+          <HistoryDetails
+            eventType={eventType}
+            sourceTitle={sourceTitle}
+            data={data}
+            shortDateFormat={shortDateFormat}
+            timeFormat={timeFormat}
+          />
+        </ModalBody>
+
+        <ModalFooter>
+          {
+            eventType === 'grabbed' &&
+              <SpinnerButton
+                className={styles.markAsFailedButton}
+                kind={kinds.DANGER}
+                isSpinning={isMarkingAsFailed}
+                onPress={onMarkAsFailedPress}
+              >
+                Mark as Failed
+              </SpinnerButton>
+          }
+
+          <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,
+  isMarkingAsFailed: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+HistoryDetailsModal.defaultProps = {
+  isMarkingAsFailed: false
+};
+
+export default HistoryDetailsModal;

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

@@ -1,90 +0,0 @@
-import React from 'react';
-import Button from 'Components/Link/Button';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-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 { kinds } from 'Helpers/Props';
-import { HistoryData, HistoryEventType } from 'typings/History';
-import translate from 'Utilities/String/translate';
-import HistoryDetails from './HistoryDetails';
-import styles from './HistoryDetailsModal.css';
-
-function getHeaderTitle(eventType: HistoryEventType) {
-  switch (eventType) {
-    case 'grabbed':
-      return translate('Grabbed');
-    case 'downloadFailed':
-      return translate('DownloadFailed');
-    case 'downloadFolderImported':
-      return translate('MovieImported');
-    case 'movieFileDeleted':
-      return translate('MovieFileDeleted');
-    case 'movieFileRenamed':
-      return translate('MovieFileRenamed');
-    case 'downloadIgnored':
-      return translate('DownloadIgnored');
-    default:
-      return translate('Unknown');
-  }
-}
-
-interface HistoryDetailsModalProps {
-  isOpen: boolean;
-  eventType: HistoryEventType;
-  sourceTitle: string;
-  data: HistoryData;
-  downloadId?: string;
-  isMarkingAsFailed?: boolean;
-  onMarkAsFailedPress: () => void;
-  onModalClose: () => void;
-}
-
-function HistoryDetailsModal(props: HistoryDetailsModalProps) {
-  const {
-    isOpen,
-    eventType,
-    sourceTitle,
-    data,
-    downloadId,
-    isMarkingAsFailed = false,
-    onMarkAsFailedPress,
-    onModalClose,
-  } = props;
-
-  return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose}>
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>{getHeaderTitle(eventType)}</ModalHeader>
-
-        <ModalBody>
-          <HistoryDetails
-            eventType={eventType}
-            sourceTitle={sourceTitle}
-            data={data}
-            downloadId={downloadId}
-          />
-        </ModalBody>
-
-        <ModalFooter>
-          {eventType === 'grabbed' && (
-            <SpinnerButton
-              className={styles.markAsFailedButton}
-              kind={kinds.DANGER}
-              isSpinning={isMarkingAsFailed}
-              onPress={onMarkAsFailedPress}
-            >
-              {translate('MarkAsFailed')}
-            </SpinnerButton>
-          )}
-
-          <Button onPress={onModalClose}>{translate('Close')}</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-export default HistoryDetailsModal;

frontend/src/Activity/History/History.js

@@ -0,0 +1,153 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+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 } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import HistoryRowConnector from './HistoryRowConnector';
+
+class History extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      isMoviesFetching,
+      isMoviesPopulated,
+      moviesError,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      totalRecords,
+      onFilterSelect,
+      onFirstPagePress,
+      ...otherProps
+    } = this.props;
+
+    const isFetchingAny = isFetching || isMoviesFetching;
+    const isAllPopulated = isPopulated && (isMoviesPopulated || !items.length);
+    const hasError = error || moviesError;
+
+    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={[]}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBody>
+          {
+            isFetchingAny && !isAllPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetchingAny && hasError &&
+              <div>
+                {translate('UnableToLoadHistory')}
+              </div>
+          }
+
+          {
+            // 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 &&
+              <div>
+                {translate('NoHistory')}
+              </div>
+          }
+
+          {
+            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={isFetching}
+                  onFirstPagePress={onFirstPagePress}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBody>
+      </PageContent>
+    );
+  }
+}
+
+History.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isMoviesFetching: PropTypes.bool.isRequired,
+  isMoviesPopulated: PropTypes.bool.isRequired,
+  moviesError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.string.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  onFilterSelect: PropTypes.func.isRequired,
+  onFirstPagePress: PropTypes.func.isRequired
+};
+
+export default History;

frontend/src/Activity/History/History.tsx

@@ -1,216 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import Alert from 'Components/Alert';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import TablePager from 'Components/Table/TablePager';
-import usePaging from 'Components/Table/usePaging';
-import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
-import { align, icons, kinds } from 'Helpers/Props';
-import createMoviesFetchingSelector from 'Movie/createMoviesFetchingSelector';
-import {
-  clearHistory,
-  fetchHistory,
-  gotoHistoryPage,
-  setHistoryFilter,
-  setHistorySort,
-  setHistoryTableOption,
-} from 'Store/Actions/historyActions';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import { TableOptionsChangePayload } from 'typings/Table';
-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 { isMoviesFetching, isMoviesPopulated, moviesError } = useSelector(
-    createMoviesFetchingSelector()
-  );
-  const customFilters = useSelector(createCustomFiltersSelector('history'));
-  const dispatch = useDispatch();
-
-  const isFetchingAny = isFetching || isMoviesFetching;
-  const isAllPopulated = isPopulated && (isMoviesPopulated || !items.length);
-  const hasError = error || moviesError;
-
-  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());
-    };
-  }, [requestCurrentPage, 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 movies to populate because they are never coming.
-
-          isPopulated && !hasError && !items.length ? (
-            <Alert kind={kinds.INFO}>{translate('NoHistoryFound')}</Alert>
-          ) : null
-        }
-
-        {isAllPopulated && !hasError && items.length ? (
-          <div>
-            <Table
-              columns={columns}
-              pageSize={pageSize}
-              sortKey={sortKey}
-              sortDirection={sortDirection}
-              onTableOptionChange={handleTableOptionChange}
-              onSortPress={handleSortPress}
-            >
-              <TableBody>
-                {items.map((item) => {
-                  return (
-                    <HistoryRow key={item.id} columns={columns} {...item} />
-                  );
-                })}
-              </TableBody>
-            </Table>
-
-            <TablePager
-              page={page}
-              totalPages={totalPages}
-              totalRecords={totalRecords}
-              isFetching={isFetching}
-              onFirstPagePress={handleFirstPagePress}
-              onPreviousPagePress={handlePreviousPagePress}
-              onNextPagePress={handleNextPagePress}
-              onLastPagePress={handleLastPagePress}
-              onPageSelect={handlePageSelect}
-            />
-          </div>
-        ) : null}
-      </PageContentBody>
-    </PageContent>
-  );
-}
-
-export default History;

frontend/src/Activity/History/HistoryConnector.js

@@ -0,0 +1,138 @@
+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 * as historyActions from 'Store/Actions/historyActions';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import History from './History';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.history,
+    (state) => state.movies,
+    (history, movies) => {
+      return {
+        isMoviesFetching: movies.isFetching,
+        isMoviesPopulated: movies.isPopulated,
+        moviesError: movies.error,
+        ...history
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...historyActions
+};
+
+class HistoryConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchHistory,
+      gotoHistoryFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchHistory();
+    } else {
+      gotoHistoryFirstPage();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearHistory();
+  }
+
+  //
+  // 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
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(HistoryConnector)
+);

frontend/src/Activity/History/HistoryEventTypeCell.js

@@ -0,0 +1,86 @@
+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 styles from './HistoryEventTypeCell.css';
+
+function getIconName(eventType) {
+  switch (eventType) {
+    case 'grabbed':
+      return icons.DOWNLOADING;
+    case 'movieFolderImported':
+      return icons.DRIVE;
+    case 'downloadFolderImported':
+      return icons.DOWNLOADED;
+    case 'downloadFailed':
+      return icons.DOWNLOADING;
+    case 'movieFileDeleted':
+      return icons.DELETE;
+    case 'movieFileRenamed':
+      return icons.ORGANIZE;
+    case 'downloadIgnored':
+      return icons.IGNORE;
+    default:
+      return icons.UNKNOWN;
+  }
+}
+
+function getIconKind(eventType) {
+  switch (eventType) {
+    case 'downloadFailed':
+      return kinds.DANGER;
+    default:
+      return kinds.DEFAULT;
+  }
+}
+
+function getTooltip(eventType, data) {
+  switch (eventType) {
+    case 'grabbed':
+      return `Movie grabbed from ${data.indexer} and sent to ${data.downloadClient}`;
+    case 'movieFolderImported':
+      return 'Movie imported from movie folder';
+    case 'downloadFolderImported':
+      return 'Movie downloaded successfully and picked up from download client';
+    case 'downloadFailed':
+      return 'Movie download failed';
+    case 'movieFileDeleted':
+      return 'Movie file deleted';
+    case 'movieFileRenamed':
+      return 'Movie file renamed';
+    case 'downloadIgnored':
+      return 'Movie Download Ignored';
+    default:
+      return 'Unknown event';
+  }
+}
+
+function HistoryEventTypeCell({ eventType, data }) {
+  const iconName = getIconName(eventType);
+  const iconKind = getIconKind(eventType);
+  const tooltip = getTooltip(eventType, data);
+
+  return (
+    <TableRowCell
+      className={styles.cell}
+      title={tooltip}
+    >
+      <Icon
+        name={iconName}
+        kind={iconKind}
+      />
+    </TableRowCell>
+  );
+}
+
+HistoryEventTypeCell.propTypes = {
+  eventType: PropTypes.string.isRequired,
+  data: PropTypes.object
+};
+
+HistoryEventTypeCell.defaultProps = {
+  data: {}
+};
+
+export default HistoryEventTypeCell;

frontend/src/Activity/History/HistoryEventTypeCell.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import Icon from 'Components/Icon';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import { icons, kinds } from 'Helpers/Props';
-import {
-  GrabbedHistoryData,
-  HistoryData,
-  HistoryEventType,
-  MovieFileDeletedHistory,
-} from 'typings/History';
-import translate from 'Utilities/String/translate';
-import styles from './HistoryEventTypeCell.css';
-
-function getIconName(eventType: HistoryEventType, data: HistoryData) {
-  switch (eventType) {
-    case 'grabbed':
-      return icons.DOWNLOADING;
-    case 'movieFolderImported':
-      return icons.DRIVE;
-    case 'downloadFolderImported':
-      return icons.DOWNLOADED;
-    case 'downloadFailed':
-      return icons.DOWNLOADING;
-    case 'movieFileDeleted':
-      return (data as MovieFileDeletedHistory).reason === 'MissingFromDisk'
-        ? icons.FILE_MISSING
-        : icons.DELETE;
-    case 'movieFileRenamed':
-      return icons.ORGANIZE;
-    case 'downloadIgnored':
-      return icons.IGNORE;
-    default:
-      return icons.UNKNOWN;
-  }
-}
-
-function getIconKind(eventType: HistoryEventType) {
-  switch (eventType) {
-    case 'downloadFailed':
-      return kinds.DANGER;
-    default:
-      return kinds.DEFAULT;
-  }
-}
-
-function getTooltip(eventType: HistoryEventType, data: HistoryData) {
-  switch (eventType) {
-    case 'grabbed':
-      return translate('MovieGrabbedTooltip', {
-        indexer: (data as GrabbedHistoryData).indexer,
-        downloadClient: (data as GrabbedHistoryData).downloadClient,
-      });
-    case 'movieFolderImported':
-      return translate('MovieFolderImportedTooltip');
-    case 'downloadFolderImported':
-      return translate('MovieImportedTooltip');
-    case 'downloadFailed':
-      return translate('DownloadFailedMovieTooltip');
-    case 'movieFileDeleted':
-      return (data as MovieFileDeletedHistory).reason === 'MissingFromDisk'
-        ? translate('MovieFileMissingTooltip')
-        : translate('MovieFileDeletedTooltip');
-    case 'movieFileRenamed':
-      return translate('MovieFileRenamedTooltip');
-    case 'downloadIgnored':
-      return translate('DownloadIgnoredMovieTooltip');
-    default:
-      return translate('UnknownEventTooltip');
-  }
-}
-
-interface HistoryEventTypeCellProps {
-  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 className={styles.cell} title={tooltip}>
-      <Icon name={iconName} kind={iconKind} />
-    </TableRowCell>
-  );
-}
-
-export default HistoryEventTypeCell;

frontend/src/Activity/History/HistoryFilterModal.tsx

@@ -1,54 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
-import FilterModal from 'Components/Filter/FilterModal';
-import { setHistoryFilter } from 'Store/Actions/historyActions';
-
-function createHistorySelector() {
-  return createSelector(
-    (state: AppState) => state.history.items,
-    (queueItems) => {
-      return queueItems;
-    }
-  );
-}
-
-function createFilterBuilderPropsSelector() {
-  return createSelector(
-    (state: AppState) => state.history.filterBuilderProps,
-    (filterBuilderProps) => {
-      return filterBuilderProps;
-    }
-  );
-}
-
-interface HistoryFilterModalProps {
-  isOpen: boolean;
-}
-
-export default function HistoryFilterModal(props: HistoryFilterModalProps) {
-  const sectionItems = useSelector(createHistorySelector());
-  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
-  const customFilterType = 'history';
-
-  const dispatch = useDispatch();
-
-  const dispatchSetFilter = useCallback(
-    (payload: unknown) => {
-      dispatch(setHistoryFilter(payload));
-    },
-    [dispatch]
-  );
-
-  return (
-    <FilterModal
-      // TODO: Don't spread all the props
-      {...props}
-      sectionItems={sectionItems}
-      filterBuilderProps={filterBuilderProps}
-      customFilterType={customFilterType}
-      dispatchSetFilter={dispatchSetFilter}
-    />
-  );
-}

frontend/src/Activity/History/HistoryRow.js

@@ -0,0 +1,260 @@
+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 { icons } from 'Helpers/Props';
+import MovieFormats from 'Movie/MovieFormats';
+import MovieLanguage from 'Movie/MovieLanguage';
+import MovieQuality from 'Movie/MovieQuality';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+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 {
+      movie,
+      quality,
+      customFormats,
+      customFormatScore,
+      languages,
+      qualityCutoffNotMet,
+      eventType,
+      sourceTitle,
+      date,
+      data,
+      isMarkingAsFailed,
+      columns,
+      shortDateFormat,
+      timeFormat,
+      onMarkAsFailedPress
+    } = this.props;
+
+    if (!movie) {
+      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 === 'movies.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={movie.titleSlug}
+                    title={movie.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieLanguage
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieQuality
+                    quality={quality}
+                    isCutoffMet={qualityCutoffNotMet}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    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}
+                >
+                  {formatCustomFormatScore(customFormatScore)}
+                </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}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <HistoryDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          eventType={eventType}
+          sourceTitle={sourceTitle}
+          data={data}
+          isMarkingAsFailed={isMarkingAsFailed}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          onMarkAsFailedPress={onMarkAsFailedPress}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+HistoryRow.propTypes = {
+  movieId: PropTypes.number,
+  movie: PropTypes.object.isRequired,
+  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,
+  isMarkingAsFailed: PropTypes.bool,
+  markAsFailedError: PropTypes.object,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired
+};
+
+export default HistoryRow;

frontend/src/Activity/History/HistoryRow.tsx

@@ -1,229 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import IconButton from 'Components/Link/IconButton';
-import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import Column from 'Components/Table/Column';
-import TableRow from 'Components/Table/TableRow';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import usePrevious from 'Helpers/Hooks/usePrevious';
-import { icons, tooltipPositions } from 'Helpers/Props';
-import Language from 'Language/Language';
-import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguages from 'Movie/MovieLanguages';
-import MovieQuality from 'Movie/MovieQuality';
-import MovieTitleLink from 'Movie/MovieTitleLink';
-import useMovie from 'Movie/useMovie';
-import { QualityModel } from 'Quality/Quality';
-import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
-import CustomFormat from 'typings/CustomFormat';
-import { HistoryData, HistoryEventType } from 'typings/History';
-import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
-import HistoryDetailsModal from './Details/HistoryDetailsModal';
-import HistoryEventTypeCell from './HistoryEventTypeCell';
-import styles from './HistoryRow.css';
-
-interface HistoryRowProps {
-  id: number;
-  movieId: number;
-  languages: Language[];
-  quality: QualityModel;
-  customFormats?: CustomFormat[];
-  customFormatScore: number;
-  qualityCutoffNotMet: boolean;
-  eventType: HistoryEventType;
-  sourceTitle: string;
-  date: string;
-  data: HistoryData;
-  downloadId?: string;
-  isMarkingAsFailed?: boolean;
-  markAsFailedError?: object;
-  columns: Column[];
-}
-
-function HistoryRow(props: HistoryRowProps) {
-  const {
-    id,
-    movieId,
-    languages,
-    quality,
-    customFormats = [],
-    customFormatScore,
-    qualityCutoffNotMet,
-    eventType,
-    sourceTitle,
-    date,
-    data,
-    downloadId,
-    isMarkingAsFailed = false,
-    markAsFailedError,
-    columns,
-  } = props;
-
-  const wasMarkingAsFailed = usePrevious(isMarkingAsFailed);
-  const dispatch = useDispatch();
-  const movie = useMovie(movieId);
-
-  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 (!movie) {
-    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 === 'movieMetadata.sortTitle') {
-          return (
-            <TableRowCell key={name}>
-              <MovieTitleLink titleSlug={movie.titleSlug} title={movie.title} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'languages') {
-          return (
-            <TableRowCell key={name}>
-              <MovieLanguages languages={languages} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'quality') {
-          return (
-            <TableRowCell key={name}>
-              <MovieQuality
-                quality={quality}
-                isCutoffNotMet={qualityCutoffNotMet}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormats') {
-          return (
-            <TableRowCell key={name}>
-              <MovieFormats formats={customFormats} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'date') {
-          return <RelativeDateCell key={name} date={date} />;
-        }
-
-        if (name === 'downloadClient') {
-          const downloadClientName =
-            'downloadClientName' in data ? data.downloadClientName : null;
-          const downloadClient =
-            'downloadClient' in data ? data.downloadClient : null;
-
-          return (
-            <TableRowCell key={name} className={styles.downloadClient}>
-              {downloadClientName ?? downloadClient ?? ''}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'indexer') {
-          return (
-            <TableRowCell key={name} className={styles.indexer}>
-              {'indexer' in data ? data.indexer : ''}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormatScore') {
-          return (
-            <TableRowCell key={name} className={styles.customFormatScore}>
-              <Tooltip
-                anchor={formatCustomFormatScore(
-                  customFormatScore,
-                  customFormats.length
-                )}
-                tooltip={<MovieFormats formats={customFormats} />}
-                position={tooltipPositions.BOTTOM}
-              />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'releaseGroup') {
-          return (
-            <TableRowCell key={name} className={styles.releaseGroup}>
-              {'releaseGroup' in data ? data.releaseGroup : ''}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'sourceTitle') {
-          return <TableRowCell key={name}>{sourceTitle}</TableRowCell>;
-        }
-
-        if (name === 'details') {
-          return (
-            <TableRowCell key={name} className={styles.details}>
-              <IconButton name={icons.INFO} onPress={handleDetailsPress} />
-            </TableRowCell>
-          );
-        }
-
-        return null;
-      })}
-
-      <HistoryDetailsModal
-        isOpen={isDetailsModalOpen}
-        eventType={eventType}
-        sourceTitle={sourceTitle}
-        data={data}
-        downloadId={downloadId}
-        isMarkingAsFailed={isMarkingAsFailed}
-        onMarkAsFailedPress={handleMarkAsFailedPress}
-        onModalClose={handleDetailsModalClose}
-      />
-    </TableRow>
-  );
-}
-
-export default HistoryRow;

frontend/src/Activity/History/HistoryRowConnector.js

@@ -0,0 +1,73 @@
+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 createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import HistoryRow from './HistoryRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    createUISettingsSelector(),
+    (movie, uiSettings) => {
+      return {
+        movie,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchHistory,
+  markAsFailed
+};
+
+class HistoryRowConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.isMarkingAsFailed &&
+      !this.props.isMarkingAsFailed &&
+      !this.props.markAsFailedError
+    ) {
+      this.props.fetchHistory();
+    }
+  }
+
+  //
+  // Listeners
+
+  onMarkAsFailedPress = () => {
+    this.props.markAsFailed({ id: this.props.id });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <HistoryRow
+        {...this.props}
+        onMarkAsFailedPress={this.onMarkAsFailedPress}
+      />
+    );
+  }
+
+}
+
+HistoryRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  isMarkingAsFailed: PropTypes.bool,
+  markAsFailedError: PropTypes.object,
+  fetchHistory: PropTypes.func.isRequired,
+  markAsFailed: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(HistoryRowConnector);

frontend/src/Activity/Queue/ProtocolLabel.css

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

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

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

frontend/src/Activity/Queue/ProtocolLabel.js

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

frontend/src/Activity/Queue/ProtocolLabel.tsx

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

frontend/src/Activity/Queue/Queue.js

@@ -0,0 +1,336 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 } 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 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,
+      isFetching,
+      isMoviesFetching
+    } = this.props;
+
+    if (
+      (!isMoviesFetching && prevProps.isMoviesFetching) ||
+      (!isFetching && prevProps.isFetching) ||
+      (hasDifferentItems(prevProps.items, items) && !items.some((e) => e.movieId))
+    ) {
+      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,
+      isMoviesFetching,
+      isMoviesPopulated,
+      moviesError,
+      columns,
+      totalRecords,
+      isGrabbing,
+      isRemoving,
+      isRefreshMonitoredDownloadsExecuting,
+      onRefreshPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen,
+      isPendingSelected,
+      items
+    } = this.state;
+
+    const isRefreshing = isFetching || isMoviesFetching || isRefreshMonitoredDownloadsExecuting;
+    const isAllPopulated = isPopulated && (isMoviesPopulated || !items.length || items.every((e) => !e.movieId));
+    const hasError = error || moviesError;
+    const selectedIds = this.getSelectedIds();
+    const selectedCount = selectedIds.length;
+    const disableSelectedActions = selectedCount === 0;
+
+    return (
+      <PageContent title={translate('Queue')}>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label={translate('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>
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBody>
+          {
+            isRefreshing && !isAllPopulated ?
+              <LoadingIndicator /> :
+              null
+          }
+
+          {
+            !isRefreshing && hasError ?
+              <div>
+                {translate('FailedToLoadQueue')}
+              </div> :
+              null
+          }
+
+          {
+            isAllPopulated && !hasError && !items.length ?
+              <div>
+                {translate('QueueIsEmpty')}
+              </div> :
+              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}
+                            movieId={item.movieId}
+                            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.movieId);
+            })
+          )}
+          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,
+  isMoviesFetching: PropTypes.bool.isRequired,
+  isMoviesPopulated: PropTypes.bool.isRequired,
+  moviesError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).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
+};
+
+export default Queue;

frontend/src/Activity/Queue/Queue.tsx

@@ -1,400 +0,0 @@
-import React, {
-  ReactElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import * as commandNames from 'Commands/commandNames';
-import Alert from 'Components/Alert';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import TablePager from 'Components/Table/TablePager';
-import usePaging from 'Components/Table/usePaging';
-import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
-import useSelectState from 'Helpers/Hooks/useSelectState';
-import { align, icons, kinds } from 'Helpers/Props';
-import createMoviesFetchingSelector from 'Movie/createMoviesFetchingSelector';
-import { executeCommand } from 'Store/Actions/commandActions';
-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 { TableOptionsChangePayload } from 'typings/Table';
-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 { isMoviesFetching, isMoviesPopulated, moviesError } = useSelector(
-    createMoviesFetchingSelector()
-  );
-  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 || isMoviesFetching || isRefreshMonitoredDownloadsExecuting;
-  const isAllPopulated =
-    isPopulated &&
-    (isMoviesPopulated || !items.length || items.every((m) => !m.movieId));
-  const hasError = error || moviesError;
-  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 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}
-                      movieId={item.movieId}
-                      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.movieId);
-          })
-        }
-        isPending={
-          isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
-            const item = items.find((i) => i.id === id);
-
-            if (!item) {
-              return false;
-            }
-
-            return (
-              item.status === 'delay' ||
-              item.status === 'downloadClientUnavailable'
-            );
-          })
-        }
-        onRemovePress={handleRemoveSelectedConfirmed}
-        onModalClose={handleConfirmRemoveModalClose}
-      />
-    </PageContent>
-  );
-}
-
-export default Queue;

frontend/src/Activity/Queue/QueueConnector.js

@@ -0,0 +1,174 @@
+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 * as queueActions from 'Store/Actions/queueActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import Queue from './Queue';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.movies,
+    (state) => state.queue.options,
+    (state) => state.queue.paged,
+    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS),
+    (movies, options, queue, isRefreshMonitoredDownloadsExecuting) => {
+      return {
+        isMoviesFetching: movies.isFetching,
+        isMoviesPopulated: movies.isPopulated,
+        moviesError: movies.error,
+        isRefreshMonitoredDownloadsExecuting,
+        ...options,
+        ...queue
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...queueActions,
+  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 (
+      this.props.includeUnknownMovieItems !==
+      prevProps.includeUnknownMovieItems
+    ) {
+      this.repopulate();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearQueue();
+  }
+
+  //
+  // 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 });
+  };
+
+  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}
+        onTableOptionChange={this.onTableOptionChange}
+        onRefreshPress={this.onRefreshPress}
+        onGrabSelectedPress={this.onGrabSelectedPress}
+        onRemoveSelectedPress={this.onRemoveSelectedPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueConnector.propTypes = {
+  includeUnknownMovieItems: 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,
+  setQueueTableOption: PropTypes.func.isRequired,
+  clearQueue: PropTypes.func.isRequired,
+  grabQueueItems: PropTypes.func.isRequired,
+  removeQueueItems: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(QueueConnector)
+);

frontend/src/Activity/Queue/QueueDetails.css

@@ -1,5 +0,0 @@
-.progressBarContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}

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

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

frontend/src/Activity/Queue/QueueDetails.js

@@ -0,0 +1,128 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Icon from 'Components/Icon';
+import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+function QueueDetails(props) {
+  const {
+    title,
+    size,
+    sizeleft,
+    estimatedCompletionTime,
+    status,
+    trackedDownloadState,
+    trackedDownloadStatus,
+    errorMessage,
+    progressBar
+  } = props;
+
+  const progress = size ? (100 - sizeleft / size * 100) : 0;
+
+  if (status === 'pending') {
+    return (
+      <Icon
+        name={icons.PENDING}
+        title={translate('ReleaseWillBeProcessedInterp', [moment(estimatedCompletionTime).fromNow()])}
+      />
+    );
+  }
+
+  if (status === 'completed') {
+    if (errorMessage) {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.DANGER}
+          title={translate('ImportFailedInterp', [errorMessage])}
+        />
+      );
+    }
+
+    if (trackedDownloadStatus === 'warning') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.WARNING}
+          title={translate('UnableToImportCheckLogs')}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importPending') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={`${translate('Downloaded')} - ${translate('WaitingToImport')}`}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importing') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={`${translate('Downloaded')} - ${translate('Importing')}`}
+        />
+      );
+    }
+  }
+
+  if (errorMessage) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title={translate('DownloadFailedInterp', [errorMessage])}
+      />
+    );
+  }
+
+  if (status === 'failed') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title={translate('DownloadFailedCheckDownloadClientForMoreDetails')}
+      />
+    );
+  }
+
+  if (status === 'warning') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.WARNING}
+        title={translate('DownloadWarningCheckDownloadClientForMoreDetails')}
+      />
+    );
+  }
+
+  if (progress < 5) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        title={translate('MovieIsDownloadingInterp', [progress.toFixed(1), title])}
+      />
+    );
+  }
+
+  return progressBar;
+}
+
+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,
+  errorMessage: PropTypes.string,
+  progressBar: PropTypes.node.isRequired
+};
+
+export default QueueDetails;

frontend/src/Activity/Queue/QueueDetails.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import Icon from 'Components/Icon';
-import Popover from 'Components/Tooltip/Popover';
-import { icons, tooltipPositions } from 'Helpers/Props';
-import {
-  QueueTrackedDownloadState,
-  QueueTrackedDownloadStatus,
-  StatusMessage,
-} from 'typings/Queue';
-import translate from 'Utilities/String/translate';
-import QueueStatus from './QueueStatus';
-import styles from './QueueDetails.css';
-
-interface QueueDetailsProps {
-  title: string;
-  size: number;
-  sizeleft: number;
-  estimatedCompletionTime?: string;
-  status: string;
-  trackedDownloadState?: QueueTrackedDownloadState;
-  trackedDownloadStatus?: QueueTrackedDownloadStatus;
-  statusMessages?: StatusMessage[];
-  errorMessage?: string;
-  progressBar: React.ReactNode;
-}
-
-function QueueDetails(props: QueueDetailsProps) {
-  const {
-    title,
-    size,
-    sizeleft,
-    status,
-    trackedDownloadState = 'downloading',
-    trackedDownloadStatus = 'ok',
-    statusMessages,
-    errorMessage,
-    progressBar,
-  } = props;
-
-  const progress = size ? 100 - (sizeleft / size) * 100 : 0;
-  const isDownloading = status === 'downloading';
-  const isPaused = status === 'paused';
-  const hasWarning = trackedDownloadStatus === 'warning';
-  const hasError = trackedDownloadStatus === 'error';
-
-  if ((isDownloading || isPaused) && !hasWarning && !hasError) {
-    const state = isPaused ? translate('Paused') : translate('Downloading');
-
-    if (progress < 5) {
-      return (
-        <Icon
-          name={icons.DOWNLOADING}
-          title={`${state} - ${progress.toFixed(1)}% ${title}`}
-        />
-      );
-    }
-
-    return (
-      <Popover
-        className={styles.progressBarContainer}
-        anchor={progressBar!}
-        title={`${state} - ${progress.toFixed(1)}%`}
-        body={<div>{title}</div>}
-        position={tooltipPositions.LEFT}
-      />
-    );
-  }
-
-  return (
-    <QueueStatus
-      sourceTitle={title}
-      status={status}
-      trackedDownloadStatus={trackedDownloadStatus}
-      trackedDownloadState={trackedDownloadState}
-      statusMessages={statusMessages}
-      errorMessage={errorMessage}
-      position={tooltipPositions.LEFT}
-    />
-  );
-}
-
-export default QueueDetails;

frontend/src/Activity/Queue/QueueFilterModal.tsx

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

frontend/src/Activity/Queue/QueueOptions.js

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

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -1,48 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import { inputTypes } from 'Helpers/Props';
-import { gotoQueuePage, setQueueOption } from 'Store/Actions/queueActions';
-import { CheckInputChanged } from 'typings/inputs';
-import translate from 'Utilities/String/translate';
-
-function QueueOptions() {
-  const dispatch = useDispatch();
-  const { includeUnknownMovieItems } = useSelector(
-    (state: AppState) => state.queue.options
-  );
-
-  const handleOptionChange = useCallback(
-    ({ name, value }: CheckInputChanged) => {
-      dispatch(
-        setQueueOption({
-          [name]: value,
-        })
-      );
-
-      if (name === 'includeUnknownMovieItems') {
-        dispatch(gotoQueuePage({ page: 1 }));
-      }
-    },
-    [dispatch]
-  );
-
-  return (
-    <FormGroup>
-      <FormLabel>{translate('ShowUnknownMovieItems')}</FormLabel>
-
-      <FormInputGroup
-        type={inputTypes.CHECK}
-        name="includeUnknownMovieItems"
-        value={includeUnknownMovieItems}
-        helpText={translate('ShowUnknownMovieItemsHelpText')}
-        onChange={handleOptionChange}
-      />
-    </FormGroup>
-  );
-}
-
-export default QueueOptions;

frontend/src/Activity/Queue/QueueOptionsConnector.js

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

frontend/src/Activity/Queue/QueueRow.css

@@ -16,15 +16,8 @@
   width: 150px;
 }
 
-.customFormatScore {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  width: 55px;
-}
-
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
-  text-align: right;
 }

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

@@ -2,7 +2,6 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
-  'customFormatScore': string;
   'progress': string;
   'protocol': string;
   'quality': string;

frontend/src/Activity/Queue/QueueRow.js

@@ -0,0 +1,397 @@
+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 { icons, kinds } from 'Helpers/Props';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import MovieFormats from 'Movie/MovieFormats';
+import MovieLanguage from 'Movie/MovieLanguage';
+import MovieQuality from 'Movie/MovieQuality';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import formatBytes from 'Utilities/Number/formatBytes';
+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) => {
+    const {
+      onRemoveQueueItemPress,
+      onQueueRowModalOpenOrClose
+    } = this.props;
+
+    onQueueRowModalOpenOrClose(false);
+    onRemoveQueueItemPress(blocklist);
+
+    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,
+      movie,
+      quality,
+      customFormats,
+      languages,
+      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 === 'movies.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    movie ?
+                      <MovieTitleLink
+                        titleSlug={movie.titleSlug}
+                        title={movie.title}
+                      /> :
+                      title
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieLanguage
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    quality ?
+                      <MovieQuality
+                        quality={quality}
+                      /> :
+                      null
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    formats={customFormats}
+                  />
+                </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 === 'size') {
+              return (
+                <TableRowCell key={name}>
+                  {formatBytes(size)}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'year') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    movie ? movie.year : ''
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'title') {
+              return (
+                <TableRowCell key={name}>
+                  {title}
+                </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={!!movie}
+          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,
+  movie: PropTypes.object,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  outputPath: PropTypes.string,
+  downloadClient: PropTypes.string,
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  size: PropTypes.number,
+  year: 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 = {
+  isGrabbing: false,
+  isRemoving: false
+};
+
+export default QueueRow;

frontend/src/Activity/Queue/QueueRow.tsx

@@ -1,361 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
-import { Error } from 'App/State/AppSectionState';
-import IconButton from 'Components/Link/IconButton';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import ProgressBar from 'Components/ProgressBar';
-import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
-import Column from 'Components/Table/Column';
-import TableRow from 'Components/Table/TableRow';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import DownloadProtocol from 'DownloadClient/DownloadProtocol';
-import { icons, kinds, tooltipPositions } from 'Helpers/Props';
-import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
-import Language from 'Language/Language';
-import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguages from 'Movie/MovieLanguages';
-import MovieQuality from 'Movie/MovieQuality';
-import MovieTitleLink from 'Movie/MovieTitleLink';
-import useMovie from 'Movie/useMovie';
-import { QualityModel } from 'Quality/Quality';
-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;
-  movieId?: 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,
-    movieId,
-    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 movie = useMovie(movieId);
-  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 = size ? 100 - (sizeleft / size) * 100 : 0;
-  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 === 'movies.sortTitle') {
-          return (
-            <TableRowCell key={name}>
-              {movie ? (
-                <MovieTitleLink
-                  titleSlug={movie.titleSlug}
-                  title={movie.title}
-                />
-              ) : (
-                title
-              )}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'year') {
-          return (
-            <TableRowCell key={name}>{movie ? movie.year : ''}</TableRowCell>
-          );
-        }
-
-        if (name === 'languages') {
-          return (
-            <TableRowCell key={name}>
-              <MovieLanguages languages={languages} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'quality') {
-          return (
-            <TableRowCell key={name}>
-              {quality ? <MovieQuality quality={quality} /> : null}
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormats') {
-          return (
-            <TableRowCell key={name}>
-              <MovieFormats formats={customFormats} />
-            </TableRowCell>
-          );
-        }
-
-        if (name === 'customFormatScore') {
-          return (
-            <TableRowCell key={name} className={styles.customFormatScore}>
-              <Tooltip
-                anchor={formatCustomFormatScore(
-                  customFormatScore,
-                  customFormats.length
-                )}
-                tooltip={<MovieFormats 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={!!movie}
-        isPending={isPending}
-        onRemovePress={handleRemoveQueueItemModalConfirmed}
-        onModalClose={handleRemoveQueueItemModalClose}
-      />
-    </TableRow>
-  );
-}
-
-export default QueueRow;

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -0,0 +1,67 @@
+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 createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import QueueRow from './QueueRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    createUISettingsSelector(),
+    (movie, uiSettings) => {
+      const result = {
+        showRelativeDates: uiSettings.showRelativeDates,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+
+      result.movie = movie;
+
+      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,
+  movie: PropTypes.object,
+  grabQueueItem: PropTypes.func.isRequired,
+  removeQueueItem: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueRowConnector);

frontend/src/Activity/Queue/QueueStatus.css

@@ -1,3 +0,0 @@
-.noMessages {
-  margin-bottom: 10px;
-}

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

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

frontend/src/Activity/Queue/QueueStatus.tsx

@@ -1,158 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from 'Components/Icon';
-import Popover from 'Components/Tooltip/Popover';
-import { icons, kinds } from 'Helpers/Props';
-import { TooltipPosition } from 'Helpers/Props/tooltipPositions';
-import {
-  QueueTrackedDownloadState,
-  QueueTrackedDownloadStatus,
-  StatusMessage,
-} from 'typings/Queue';
-import translate from 'Utilities/String/translate';
-import styles from './QueueStatus.css';
-
-function getDetailedPopoverBody(statusMessages: StatusMessage[]) {
-  return (
-    <div>
-      {statusMessages.map(({ title, messages }) => {
-        return (
-          <div
-            key={title}
-            className={messages.length ? undefined : styles.noMessages}
-          >
-            {title}
-            <ul>
-              {messages.map((message) => {
-                return <li key={message}>{message}</li>;
-              })}
-            </ul>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-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 = 'ok',
-    trackedDownloadState = 'downloading',
-    statusMessages = [],
-    errorMessage,
-    position,
-    canFlip = false,
-  } = props;
-
-  const hasWarning = trackedDownloadStatus === 'warning';
-  const hasError = trackedDownloadStatus === 'error';
-
-  // status === 'downloading'
-  let iconName = icons.DOWNLOADING;
-  let iconKind: IconProps['kind'] = kinds.DEFAULT;
-  let title = translate('Downloading');
-
-  if (status === 'paused') {
-    iconName = icons.PAUSED;
-    title = translate('Paused');
-  }
-
-  if (status === 'queued') {
-    iconName = icons.QUEUED;
-    title = translate('Queued');
-  }
-
-  if (status === 'completed') {
-    iconName = icons.DOWNLOADED;
-    title = translate('Downloaded');
-
-    if (trackedDownloadState === 'importBlocked') {
-      title += ` - ${translate('UnableToImportAutomatically')}`;
-      iconKind = kinds.WARNING;
-    }
-
-    if (trackedDownloadState === 'importPending') {
-      title += ` - ${translate('WaitingToImport')}`;
-      iconKind = kinds.PURPLE;
-    }
-
-    if (trackedDownloadState === 'importing') {
-      title += ` - ${translate('Importing')}`;
-      iconKind = kinds.PURPLE;
-    }
-
-    if (trackedDownloadState === 'failedPending') {
-      title += ` - ${translate('WaitingToProcess')}`;
-      iconKind = kinds.DANGER;
-    }
-  }
-
-  if (hasWarning) {
-    iconKind = kinds.WARNING;
-  }
-
-  if (status === 'delay') {
-    iconName = icons.PENDING;
-    title = translate('Pending');
-  }
-
-  if (status === 'downloadClientUnavailable') {
-    iconName = icons.PENDING;
-    iconKind = kinds.WARNING;
-    title = translate('PendingDownloadClientUnavailable');
-  }
-
-  if (status === 'failed') {
-    iconName = icons.DOWNLOADING;
-    iconKind = kinds.DANGER;
-    title = translate('DownloadFailed');
-  }
-
-  if (status === 'warning') {
-    iconName = icons.DOWNLOADING;
-    iconKind = kinds.WARNING;
-    const warningMessage =
-      errorMessage || translate('CheckDownloadClientForDetails');
-    title = translate('DownloadWarning', { warningMessage });
-  }
-
-  if (hasError) {
-    if (status === 'completed') {
-      iconName = icons.DOWNLOAD;
-      iconKind = kinds.DANGER;
-      title = translate('ImportFailed', { sourceTitle });
-    } else {
-      iconName = icons.DOWNLOADING;
-      iconKind = kinds.DANGER;
-      title = translate('DownloadFailed');
-    }
-  }
-
-  return (
-    <Popover
-      anchor={<Icon name={iconName} kind={iconKind} />}
-      title={title}
-      body={
-        hasWarning || hasError
-          ? getDetailedPopoverBody(statusMessages)
-          : sourceTitle
-      }
-      position={position}
-      canFlip={canFlip}
-    />
-  );
-}
-
-export default QueueStatus;

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -0,0 +1,157 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Icon from 'Components/Icon';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './QueueStatusCell.css';
+
+function getDetailedPopoverBody(statusMessages) {
+  return (
+    <div>
+      {
+        statusMessages.map(({ title, messages }) => {
+          return (
+            <div key={title}>
+              {title}
+              <ul>
+                {
+                  messages.map((message) => {
+                    return (
+                      <li key={message}>
+                        {message}
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+function QueueStatusCell(props) {
+  const {
+    sourceTitle,
+    status,
+    trackedDownloadStatus,
+    trackedDownloadState,
+    statusMessages,
+    errorMessage
+  } = props;
+
+  const hasWarning = trackedDownloadStatus === 'warning';
+  const hasError = trackedDownloadStatus === 'error';
+
+  // status === 'downloading'
+  let iconName = icons.DOWNLOADING;
+  let iconKind = kinds.DEFAULT;
+  let title = translate('Downloading');
+
+  if (status === 'paused') {
+    iconName = icons.PAUSED;
+    title = translate('Paused');
+  }
+
+  if (status === 'queued') {
+    iconName = icons.QUEUED;
+    title = translate('Queued');
+  }
+
+  if (status === 'completed') {
+    iconName = icons.DOWNLOADED;
+    title = translate('Downloaded');
+
+    if (trackedDownloadState === 'importPending') {
+      title += ` - ${translate('WaitingToImport')}`;
+      iconKind = kinds.PURPLE;
+    }
+
+    if (trackedDownloadState === 'importing') {
+      title += ` - ${translate('Importing')}`;
+      iconKind = kinds.PURPLE;
+    }
+
+    if (trackedDownloadState === 'failedPending') {
+      title += ` - ${translate('WaitingToProcess')}`;
+      iconKind = kinds.DANGER;
+    }
+  }
+
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
+  if (status === 'delay') {
+    iconName = icons.PENDING;
+    title = translate('Pending');
+  }
+
+  if (status === 'DownloadClientUnavailable') {
+    iconName = icons.PENDING;
+    iconKind = kinds.WARNING;
+    title = `${translate('Pending')} - ${translate('DownloadClientUnavailable')}`;
+  }
+
+  if (status === 'failed') {
+    iconName = icons.DOWNLOADING;
+    iconKind = kinds.DANGER;
+    title = translate('DownloadFailed');
+  }
+
+  if (status === 'warning') {
+    iconName = icons.DOWNLOADING;
+    iconKind = kinds.WARNING;
+    const warningMessage = errorMessage || translate('CheckDownloadClientForDetails');
+    title = translate('DownloadWarning', [warningMessage]);
+  }
+
+  if (hasError) {
+    if (status === 'completed') {
+      iconName = icons.DOWNLOAD;
+      iconKind = kinds.DANGER;
+      title = translate('ImportFailed', [sourceTitle]);
+    } else {
+      iconName = icons.DOWNLOADING;
+      iconKind = kinds.DANGER;
+      title = translate('DownloadFailed');
+    }
+  }
+
+  return (
+    <TableRowCell className={styles.status}>
+      <Popover
+        anchor={
+          <Icon
+            name={iconName}
+            kind={iconKind}
+          />
+        }
+        title={title}
+        body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle}
+        position={tooltipPositions.RIGHT}
+        canFlip={false}
+      />
+    </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: translate('Ok'),
+  trackedDownloadState: translate('Downloading')
+};
+
+export default QueueStatusCell;

frontend/src/Activity/Queue/QueueStatusCell.tsx

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

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -0,0 +1,150 @@
+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
+    };
+  }
+
+  //
+  // Control
+
+  resetState = function() {
+    this.setState({
+      remove: true,
+      blocklist: false
+    });
+  };
+
+  //
+  // Listeners
+
+  onRemoveChange = ({ value }) => {
+    this.setState({ remove: value });
+  };
+
+  onBlocklistChange = ({ value }) => {
+    this.setState({ blocklist: 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 } = this.state;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            {translate('Remove')} - {sourceTitle}
+          </ModalHeader>
+
+          <ModalBody>
+            <div>
+              {translate('RemoveFromQueueText', [sourceTitle])}
+            </div>
+
+            {
+              isPending ?
+                null :
+                <FormGroup>
+                  <FormLabel>{translate('RemoveFromDownloadClient')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="remove"
+                    value={remove}
+                    helpTextWarning={translate('RemoveHelpTextWarning')}
+                    isDisabled={!canIgnore}
+                    onChange={this.onRemoveChange}
+                  />
+                </FormGroup>
+            }
+
+            <FormGroup>
+              <FormLabel>{translate('BlocklistRelease')}</FormLabel>
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="blocklist"
+                value={blocklist}
+                helpText={translate('BlocklistHelpText')}
+                onChange={this.onBlocklistChange}
+              />
+            </FormGroup>
+
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              {translate('Close')}
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveConfirmed}
+            >
+              Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  canIgnore: PropTypes.bool.isRequired,
+  isPending: PropTypes.bool.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemModal;

frontend/src/Activity/Queue/RemoveQueueItemModal.tsx

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

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -0,0 +1,154 @@
+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
+    };
+  }
+
+  //
+  // Control
+
+  resetState = function() {
+    this.setState({
+      remove: true,
+      blocklist: false
+    });
+  };
+
+  //
+  // Listeners
+
+  onRemoveChange = ({ value }) => {
+    this.setState({ remove: value });
+  };
+
+  onBlocklistChange = ({ value }) => {
+    this.setState({ blocklist: 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 } = 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('AreYouSureYouWantToRemoveSelectedItemsFromQueue', selectedCount) : translate('AreYouSureYouWantToRemoveSelectedItemFromQueue')}
+            </div>
+
+            {
+              allPending ?
+                null :
+                <FormGroup>
+                  <FormLabel>{translate('RemoveFromDownloadClient')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="remove"
+                    value={remove}
+                    helpTextWarning={translate('RemoveHelpTextWarning')}
+                    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('BlocklistHelpText')}
+                onChange={this.onBlocklistChange}
+              />
+            </FormGroup>
+
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              {translate('Close')}
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveConfirmed}
+            >
+              Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  selectedCount: PropTypes.number.isRequired,
+  canIgnore: PropTypes.bool.isRequired,
+  allPending: PropTypes.bool.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemsModal;

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

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

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

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

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

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

frontend/src/Activity/Queue/TimeleftCell.js

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import formatTime from 'Utilities/Date/formatTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import styles from './TimeleftCell.css';
+
+function TimeleftCell(props) {
+  const {
+    estimatedCompletionTime,
+    timeleft,
+    status,
+    size,
+    sizeleft,
+    showRelativeDates,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  if (status === 'delay') {
+    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
+
+    return (
+      <TableRowCell
+        className={styles.timeleft}
+        title={translate('DelayingDownloadUntilInterp', [date, time])}
+      >
+        -
+      </TableRowCell>
+    );
+  }
+
+  if (status === 'downloadClientUnavailable') {
+    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
+
+    return (
+      <TableRowCell
+        className={styles.timeleft}
+        title={translate('RetryingDownloadInterp', [date, time])}
+      >
+        -
+      </TableRowCell>
+    );
+  }
+
+  if (!timeleft || status === 'completed' || status === 'failed') {
+    return (
+      <TableRowCell className={styles.timeleft}>
+        -
+      </TableRowCell>
+    );
+  }
+
+  const totalSize = formatBytes(size);
+  const remainingSize = formatBytes(sizeleft);
+
+  return (
+    <TableRowCell
+      className={styles.timeleft}
+      title={`${remainingSize} / ${totalSize}`}
+    >
+      {formatTimeSpan(timeleft)}
+    </TableRowCell>
+  );
+}
+
+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/Activity/Queue/TimeleftCell.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import Icon from 'Components/Icon';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import { icons, kinds, tooltipPositions } from 'Helpers/Props';
-import formatTime from 'Utilities/Date/formatTime';
-import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
-import formatBytes from 'Utilities/Number/formatBytes';
-import translate from 'Utilities/String/translate';
-import styles from './TimeleftCell.css';
-
-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,
-    status,
-    size,
-    sizeleft,
-    showRelativeDates,
-    shortDateFormat,
-    timeFormat,
-  } = props;
-
-  if (status === 'delay') {
-    const date = getRelativeDate({
-      date: estimatedCompletionTime,
-      shortDateFormat,
-      showRelativeDates,
-    });
-    const time = formatTime(estimatedCompletionTime, timeFormat, {
-      includeMinuteZero: true,
-    });
-
-    return (
-      <TableRowCell className={styles.timeleft}>
-        <Tooltip
-          anchor={<Icon name={icons.INFO} />}
-          tooltip={translate('DelayingDownloadUntil', { date, time })}
-          kind={kinds.INVERSE}
-          position={tooltipPositions.TOP}
-        />
-      </TableRowCell>
-    );
-  }
-
-  if (status === 'downloadClientUnavailable') {
-    const date = getRelativeDate({
-      date: estimatedCompletionTime,
-      shortDateFormat,
-      showRelativeDates,
-    });
-    const time = formatTime(estimatedCompletionTime, timeFormat, {
-      includeMinuteZero: true,
-    });
-
-    return (
-      <TableRowCell className={styles.timeleft}>
-        <Tooltip
-          anchor={<Icon name={icons.INFO} />}
-          tooltip={translate('RetryingDownloadOn', { date, time })}
-          kind={kinds.INVERSE}
-          position={tooltipPositions.TOP}
-        />
-      </TableRowCell>
-    );
-  }
-
-  if (!timeleft || status === 'completed' || status === 'failed') {
-    return <TableRowCell className={styles.timeleft}>-</TableRowCell>;
-  }
-
-  const totalSize = formatBytes(size);
-  const remainingSize = formatBytes(sizeleft);
-
-  return (
-    <TableRowCell
-      className={styles.timeleft}
-      title={`${remainingSize} / ${totalSize}`}
-    >
-      {formatTimeSpan(timeleft)}
-    </TableRowCell>
-  );
-}
-
-export default TimeleftCell;

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Alert from 'Components/Alert';
 import TextInput from 'Components/Form/TextInput';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
@@ -82,7 +81,8 @@ class AddNewMovie extends Component {
     const {
       error,
       items,
-      hasExistingMovies
+      hasExistingMovies,
+      colorImpairedMode
     } = this.props;
 
     const term = this.state.term;
@@ -130,14 +130,7 @@ class AddNewMovie extends Component {
                 <div className={styles.helpText}>
                   {translate('FailedLoadingSearchResults')}
                 </div>
-
-                <Alert kind={kinds.DANGER}>{getErrorMessage(error)}</Alert>
-
-                <div>
-                  <Link to="https://wiki.servarr.com/radarr/troubleshooting#invalid-response-received-from-tmdb">
-                    {translate('WhySearchesCouldBeFailing')}
-                  </Link>
-                </div>
+                <div>{getErrorMessage(error)}</div>
               </div> : null
           }
 
@@ -149,6 +142,7 @@ class AddNewMovie extends Component {
                     return (
                       <AddNewMovieSearchResultConnector
                         key={item.tmdbId}
+                        colorImpairedMode={colorImpairedMode}
                         {...item}
                       />
                     );
@@ -161,7 +155,7 @@ class AddNewMovie extends Component {
             !isFetching && !error && !items.length && !!term &&
               <div className={styles.message}>
                 <div className={styles.noResults}>
-                  {translate('CouldNotFindResults', { term })}
+                  {translate('CouldNotFindResults', [term])}
                 </div>
                 <div>
                   {translate('YouCanAlsoSearch')}
@@ -221,7 +215,8 @@ AddNewMovie.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   hasExistingMovies: PropTypes.bool.isRequired,
   onMovieLookupChange: PropTypes.func.isRequired,
-  onClearMovieLookup: PropTypes.func.isRequired
+  onClearMovieLookup: PropTypes.func.isRequired,
+  colorImpairedMode: PropTypes.bool.isRequired
 };
 
 export default AddNewMovie;

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -3,11 +3,10 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { clearAddMovie, lookupMovie } from 'Store/Actions/addMovieActions';
-import { clearMovieFiles, fetchMovieFiles } from 'Store/Actions/movieFileActions';
 import { clearQueueDetails, fetchQueueDetails } from 'Store/Actions/queueActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
-import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
+import { fetchImportExclusions } from 'Store/Actions/Settings/importExclusions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import parseUrl from 'Utilities/String/parseUrl';
 import AddNewMovie from './AddNewMovie';
 
@@ -16,13 +15,15 @@ function createMapStateToProps() {
     (state) => state.addMovie,
     (state) => state.movies.items.length,
     (state) => state.router.location,
-    (addMovie, existingMoviesCount, location) => {
+    createUISettingsSelector(),
+    (addMovie, existingMoviesCount, location, uiSettings) => {
       const { params } = parseUrl(location.search);
 
       return {
         ...addMovie,
         term: params.term,
-        hasExistingMovies: existingMoviesCount > 0
+        hasExistingMovies: existingMoviesCount > 0,
+        colorImpairedMode: uiSettings.enableColorImpairedMode
       };
     }
   );
@@ -32,10 +33,9 @@ const mapDispatchToProps = {
   lookupMovie,
   clearAddMovie,
   fetchRootFolders,
+  fetchImportExclusions,
   fetchQueueDetails,
-  clearQueueDetails,
-  fetchMovieFiles,
-  clearMovieFiles
+  clearQueueDetails
 };
 
 class AddNewMovieConnector extends Component {
@@ -51,23 +51,10 @@ class AddNewMovieConnector extends Component {
 
   componentDidMount() {
     this.props.fetchRootFolders();
+    this.props.fetchImportExclusions();
     this.props.fetchQueueDetails();
   }
 
-  componentDidUpdate(prevProps) {
-    const {
-      items
-    } = this.props;
-
-    if (hasDifferentItems(prevProps.items, items)) {
-      const movieIds = selectUniqueIds(items, 'internalId');
-
-      if (movieIds.length) {
-        this.props.fetchMovieFiles({ movieId: movieIds });
-      }
-    }
-  }
-
   componentWillUnmount() {
     if (this._movieLookupTimeout) {
       clearTimeout(this._movieLookupTimeout);
@@ -75,7 +62,6 @@ class AddNewMovieConnector extends Component {
 
     this.props.clearAddMovie();
     this.props.clearQueueDetails();
-    this.props.clearMovieFiles();
   }
 
   //
@@ -121,14 +107,12 @@ class AddNewMovieConnector extends Component {
 
 AddNewMovieConnector.propTypes = {
   term: PropTypes.string,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
   lookupMovie: PropTypes.func.isRequired,
   clearAddMovie: PropTypes.func.isRequired,
   fetchRootFolders: PropTypes.func.isRequired,
+  fetchImportExclusions: PropTypes.func.isRequired,
   fetchQueueDetails: PropTypes.func.isRequired,
-  clearQueueDetails: PropTypes.func.isRequired,
-  fetchMovieFiles: PropTypes.func.isRequired,
-  clearMovieFiles: PropTypes.func.isRequired
+  clearQueueDetails: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(AddNewMovieConnector);