Convert Queue to TypeScript

(cherry picked from commit 76650af9fdc7ef06d13ce252986d21574903d293)

Closes #10231

frontend/src/App/AppRoutes.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import Blocklist from 'Activity/Blocklist/Blocklist';
 import HistoryConnector from 'Activity/History/HistoryConnector';
-import QueueConnector from 'Activity/Queue/QueueConnector';
+import Queue from 'Activity/Queue/Queue';
 import AddNewMovieConnector from 'AddMovie/AddNewMovie/AddNewMovieConnector';
 import ImportMovies from 'AddMovie/ImportMovie/ImportMovies';
 import CalendarPageConnector from 'Calendar/CalendarPageConnector';
@@ -115,7 +115,7 @@ function AppRoutes(props) {
 
       <Route
         path="/activity/queue"
-        component={QueueConnector}
+        component={Queue}
       />
 
       <Route

frontend/src/App/State/AppState.ts

@@ -46,6 +46,9 @@ export interface CustomFilter {
 }
 
 export interface AppSectionState {
+  isConnected: boolean;
+  isReconnecting: boolean;
+  version: string;
   dimensions: {
     isSmallScreen: boolean;
     width: number;

frontend/src/App/State/QueueAppState.ts

@@ -3,15 +3,29 @@ import AppSectionState, {
   AppSectionFilterState,
   AppSectionItemState,
   Error,
+  PagedAppSectionState,
+  TableAppSectionState,
 } from './AppSectionState';
 
+export interface QueueStatus {
+  totalCount: number;
+  count: number;
+  unknownCount: number;
+  errors: boolean;
+  warnings: boolean;
+  unknownErrors: boolean;
+  unknownWarnings: boolean;
+}
+
 export interface QueueDetailsAppState extends AppSectionState<Queue> {
   params: unknown;
 }
 
 export interface QueuePagedAppState
   extends AppSectionState<Queue>,
-    AppSectionFilterState<Queue> {
+    AppSectionFilterState<Queue>,
+    PagedAppSectionState,
+    TableAppSectionState {
   isGrabbing: boolean;
   grabError: Error;
   isRemoving: boolean;
@@ -19,9 +33,12 @@ export interface QueuePagedAppState
 }
 
 interface QueueAppState {
-  status: AppSectionItemState<Queue>;
+  status: AppSectionItemState<QueueStatus>;
   details: QueueDetailsAppState;
   paged: QueuePagedAppState;
+  options: {
+    includeUnknownMovieItems: boolean;
+  };
 }
 
 export default QueueAppState;