Guard against using invalid sort keys

(cherry picked from commit 30c36fdc3baa686102ff124833c7963fc786f251)

README.md

@@ -1,7 +1,7 @@
 # Prowlarr
 
 [![Build Status](https://dev.azure.com/Prowlarr/Prowlarr/_apis/build/status/Prowlarr.Prowlarr?branchName=develop)](https://dev.azure.com/Prowlarr/Prowlarr/_build/latest?definitionId=1&branchName=develop)
-[![Translated](https://translate.servarr.com/widgets/servarr/-/prowlarr/svg-badge.svg)](https://translate.servarr.com/engage/prowlarr/?utm_source=widget)
+[![Translation status](https://translate.servarr.com/widget/servarr/prowlarr/svg-badge.svg)](https://translate.servarr.com/engage/servarr/?utm_source=widget)
 [![Docker Pulls](https://img.shields.io/docker/pulls/hotio/prowlarr.svg)](https://wiki.servarr.com/prowlarr/installation/docker)
 ![Github Downloads](https://img.shields.io/github/downloads/Prowlarr/Prowlarr/total.svg)
 [![Backers on Open Collective](https://opencollective.com/Prowlarr/backers/badge.svg)](#backers)

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '1.21.1'
+  majorVersion: '1.24.2'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'

frontend/.eslintrc.js

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

frontend/build/webpack.config.js

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

frontend/postcss.config.js

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

frontend/src/App/App.tsx

@@ -1,20 +1,25 @@
-import { ConnectedRouter } from 'connected-react-router';
-import PropTypes from 'prop-types';
+import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
+import { Store } from 'redux';
 import PageConnector from 'Components/Page/PageConnector';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
-function App({ store, history }) {
+interface AppProps {
+  store: Store;
+  history: ConnectedRouterProps['history'];
+}
+
+function App({ store, history }: AppProps) {
   return (
     <DocumentTitle title={window.Prowlarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
           <ApplyTheme />
           <PageConnector>
-            <AppRoutes app={App} />
+            <AppRoutes />
           </PageConnector>
         </ConnectedRouter>
       </Provider>
@@ -22,9 +27,4 @@ function App({ store, history }) {
   );
 }
 
-App.propTypes = {
-  store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
-};
-
 export default App;

frontend/src/App/AppRoutes.js

@@ -1,184 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
-import NotFound from 'Components/NotFound';
-import Switch from 'Components/Router/Switch';
-import HistoryConnector from 'History/HistoryConnector';
-import IndexerIndex from 'Indexer/Index/IndexerIndex';
-import IndexerStats from 'Indexer/Stats/IndexerStats';
-import SearchIndexConnector from 'Search/SearchIndexConnector';
-import ApplicationSettings from 'Settings/Applications/ApplicationSettings';
-import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
-import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
-import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
-import IndexerSettings from 'Settings/Indexers/IndexerSettings';
-import NotificationSettings from 'Settings/Notifications/NotificationSettings';
-import Settings from 'Settings/Settings';
-import TagSettings from 'Settings/Tags/TagSettings';
-import UISettingsConnector from 'Settings/UI/UISettingsConnector';
-import BackupsConnector from 'System/Backup/BackupsConnector';
-import LogsTableConnector from 'System/Events/LogsTableConnector';
-import Logs from 'System/Logs/Logs';
-import Status from 'System/Status/Status';
-import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
-import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
-
-function AppRoutes(props) {
-  const {
-    app
-  } = props;
-
-  return (
-    <Switch>
-      {/*
-        Indexers
-      */}
-
-      <Route
-        exact={true}
-        path="/"
-        component={IndexerIndex}
-      />
-
-      {
-        window.Prowlarr.urlBase &&
-          <Route
-            exact={true}
-            path="/"
-            addUrlBase={false}
-            render={() => {
-              return (
-                <Redirect
-                  to={getPathWithUrlBase('/')}
-                  component={app}
-                />
-              );
-            }}
-          />
-      }
-
-      <Route
-        path="/indexers/stats"
-        component={IndexerStats}
-      />
-
-      {/*
-        Search
-      */}
-
-      <Route
-        path="/search"
-        component={SearchIndexConnector}
-      />
-
-      {/*
-        Activity
-      */}
-
-      <Route
-        path="/history"
-        component={HistoryConnector}
-      />
-
-      {/*
-        Settings
-      */}
-
-      <Route
-        exact={true}
-        path="/settings"
-        component={Settings}
-      />
-
-      <Route
-        path="/settings/indexers"
-        component={IndexerSettings}
-      />
-
-      <Route
-        path="/settings/applications"
-        component={ApplicationSettings}
-      />
-
-      <Route
-        path="/settings/downloadclients"
-        component={DownloadClientSettingsConnector}
-      />
-
-      <Route
-        path="/settings/connect"
-        component={NotificationSettings}
-      />
-
-      <Route
-        path="/settings/tags"
-        component={TagSettings}
-      />
-
-      <Route
-        path="/settings/general"
-        component={GeneralSettingsConnector}
-      />
-
-      <Route
-        path="/settings/ui"
-        component={UISettingsConnector}
-      />
-
-      <Route
-        path="/settings/development"
-        component={DevelopmentSettingsConnector}
-      />
-
-      {/*
-        System
-      */}
-
-      <Route
-        path="/system/status"
-        component={Status}
-      />
-
-      <Route
-        path="/system/tasks"
-        component={Tasks}
-      />
-
-      <Route
-        path="/system/backup"
-        component={BackupsConnector}
-      />
-
-      <Route
-        path="/system/updates"
-        component={UpdatesConnector}
-      />
-
-      <Route
-        path="/system/events"
-        component={LogsTableConnector}
-      />
-
-      <Route
-        path="/system/logs/files"
-        component={Logs}
-      />
-
-      {/*
-        Not Found
-      */}
-
-      <Route
-        path="*"
-        component={NotFound}
-      />
-    </Switch>
-  );
-}
-
-AppRoutes.propTypes = {
-  app: PropTypes.func.isRequired
-};
-
-export default AppRoutes;

frontend/src/App/AppRoutes.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import NotFound from 'Components/NotFound';
+import Switch from 'Components/Router/Switch';
+import HistoryConnector from 'History/HistoryConnector';
+import IndexerIndex from 'Indexer/Index/IndexerIndex';
+import IndexerStats from 'Indexer/Stats/IndexerStats';
+import SearchIndexConnector from 'Search/SearchIndexConnector';
+import ApplicationSettings from 'Settings/Applications/ApplicationSettings';
+import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
+import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
+import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+import IndexerSettings from 'Settings/Indexers/IndexerSettings';
+import NotificationSettings from 'Settings/Notifications/NotificationSettings';
+import Settings from 'Settings/Settings';
+import TagSettings from 'Settings/Tags/TagSettings';
+import UISettingsConnector from 'Settings/UI/UISettingsConnector';
+import BackupsConnector from 'System/Backup/BackupsConnector';
+import LogsTableConnector from 'System/Events/LogsTableConnector';
+import Logs from 'System/Logs/Logs';
+import Status from 'System/Status/Status';
+import Tasks from 'System/Tasks/Tasks';
+import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
+
+function RedirectWithUrlBase() {
+  return <Redirect to={getPathWithUrlBase('/')} />;
+}
+
+function AppRoutes() {
+  return (
+    <Switch>
+      {/*
+        Indexers
+      */}
+
+      <Route exact={true} path="/" component={IndexerIndex} />
+
+      {window.Prowlarr.urlBase && (
+        <Route
+          exact={true}
+          path="/"
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          addUrlBase={false}
+          render={RedirectWithUrlBase}
+        />
+      )}
+
+      <Route path="/indexers/stats" component={IndexerStats} />
+
+      {/*
+        Search
+      */}
+
+      <Route path="/search" component={SearchIndexConnector} />
+
+      {/*
+        Activity
+      */}
+
+      <Route path="/history" component={HistoryConnector} />
+
+      {/*
+        Settings
+      */}
+
+      <Route exact={true} path="/settings" component={Settings} />
+
+      <Route path="/settings/indexers" component={IndexerSettings} />
+
+      <Route path="/settings/applications" component={ApplicationSettings} />
+
+      <Route
+        path="/settings/downloadclients"
+        component={DownloadClientSettingsConnector}
+      />
+
+      <Route path="/settings/connect" component={NotificationSettings} />
+
+      <Route path="/settings/tags" component={TagSettings} />
+
+      <Route path="/settings/general" component={GeneralSettingsConnector} />
+
+      <Route path="/settings/ui" component={UISettingsConnector} />
+
+      <Route
+        path="/settings/development"
+        component={DevelopmentSettingsConnector}
+      />
+
+      {/*
+        System
+      */}
+
+      <Route path="/system/status" component={Status} />
+
+      <Route path="/system/tasks" component={Tasks} />
+
+      <Route path="/system/backup" component={BackupsConnector} />
+
+      <Route path="/system/updates" component={UpdatesConnector} />
+
+      <Route path="/system/events" component={LogsTableConnector} />
+
+      <Route path="/system/logs/files" component={Logs} />
+
+      {/*
+        Not Found
+      */}
+
+      <Route path="*" component={NotFound} />
+    </Switch>
+  );
+}
+
+export default AppRoutes;

frontend/src/App/AppUpdatedModal.js

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

frontend/src/App/AppUpdatedModal.tsx

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

frontend/src/App/AppUpdatedModalConnector.js

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

frontend/src/App/AppUpdatedModalContent.js

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

frontend/src/App/AppUpdatedModalContent.tsx

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

frontend/src/App/AppUpdatedModalContentConnector.js

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

frontend/src/App/ApplyTheme.tsx

@@ -1,13 +1,9 @@
-import React, { Fragment, ReactNode, useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import themes from 'Styles/Themes';
 import AppState from './State/AppState';
 
-interface ApplyThemeProps {
-  children: ReactNode;
-}
-
 function createThemeSelector() {
   return createSelector(
     (state: AppState) => state.settings.ui.item.theme || window.Prowlarr.theme,
@@ -17,7 +13,7 @@ function createThemeSelector() {
   );
 }
 
-function ApplyTheme({ children }: ApplyThemeProps) {
+function ApplyTheme() {
   const theme = useSelector(createThemeSelector());
 
   const updateCSSVariables = useCallback(() => {
@@ -31,7 +27,7 @@ function ApplyTheme({ children }: ApplyThemeProps) {
     updateCSSVariables();
   }, [updateCSSVariables, theme]);
 
-  return <Fragment>{children}</Fragment>;
+  return null;
 }
 
 export default ApplyTheme;

frontend/src/App/ConnectionLostModal.tsx

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

frontend/src/App/ConnectionLostModalConnector.js

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

frontend/src/App/State/AppSectionState.ts

@@ -1,5 +1,6 @@
+import Column from 'Components/Table/Column';
 import SortDirection from 'Helpers/Props/SortDirection';
-import { FilterBuilderProp } from './AppState';
+import { FilterBuilderProp, PropertyFilter } from './AppState';
 
 export interface Error {
   responseJSON: {
@@ -18,10 +19,18 @@ export interface AppSectionSaveState {
 }
 
 export interface PagedAppSectionState {
+  page: number;
   pageSize: number;
+  totalPages: number;
+  totalRecords?: number;
+}
+export interface TableAppSectionState {
+  columns: Column[];
 }
 
 export interface AppSectionFilterState<T> {
+  selectedFilterKey: string;
+  filters: PropertyFilter[];
   filterBuilderProps: FilterBuilderProp<T>[];
 }
 
@@ -38,6 +47,7 @@ export interface AppSectionItemState<T> {
   isFetching: boolean;
   isPopulated: boolean;
   error: Error;
+  pendingChanges: Partial<T>;
   item: T;
 }
 

frontend/src/App/State/AppState.ts

@@ -43,6 +43,10 @@ export interface CustomFilter {
 }
 
 export interface AppSectionState {
+  isConnected: boolean;
+  isReconnecting: boolean;
+  version: string;
+  prevVersion?: string;
   dimensions: {
     isSmallScreen: boolean;
     width: number;

frontend/src/App/State/IndexerAppState.ts

@@ -31,6 +31,8 @@ interface IndexerAppState
     AppSectionDeleteState,
     AppSectionSaveState {
   itemMap: Record<number, number>;
+
+  isTestingAll: boolean;
 }
 
 export type IndexerStatusAppState = AppSectionState<IndexerStatus>;

frontend/src/App/State/SettingsAppState.ts

@@ -24,7 +24,9 @@ export interface ApplicationAppState
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
     AppSectionDeleteState,
-    AppSectionSaveState {}
+    AppSectionSaveState {
+  isTestingAll: boolean;
+}
 
 export interface IndexerCategoryAppState
   extends AppSectionState<IndexerCategory>,

frontend/src/App/State/SystemAppState.ts

@@ -1,10 +1,19 @@
+import Health from 'typings/Health';
 import SystemStatus from 'typings/SystemStatus';
-import { AppSectionItemState } from './AppSectionState';
+import Task from 'typings/Task';
+import Update from 'typings/Update';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
 
+export type HealthAppState = AppSectionState<Health>;
 export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+export type TaskAppState = AppSectionState<Task>;
+export type UpdateAppState = AppSectionState<Update>;
 
 interface SystemAppState {
+  health: HealthAppState;
   status: SystemStatusAppState;
+  tasks: TaskAppState;
+  updates: UpdateAppState;
 }
 
 export default SystemAppState;

frontend/src/Components/Chart/StackedBarChart.js

@@ -46,6 +46,10 @@ class StackedBarChart extends Component {
               size: 14,
               family: defaultFontFamily
             }
+          },
+          tooltip: {
+            mode: 'index',
+            position: 'average'
           }
         }
       },

frontend/src/Components/Error/ErrorBoundaryError.tsx

@@ -63,11 +63,7 @@ function ErrorBoundaryError(props: ErrorBoundaryErrorProps) {
           <div>{info.componentStack}</div>
         )}
 
-        {
-          <div className={styles.version}>
-            Version: {window.Prowlarr.version}
-          </div>
-        }
+        <div className={styles.version}>Version: {window.Prowlarr.version}</div>
       </details>
     </div>
   );

frontend/src/Components/Form/FormInputHelpText.js

@@ -25,7 +25,7 @@ function FormInputHelpText(props) {
       isCheckInput && styles.isCheckInput
     )}
     >
-      <div dangerouslySetInnerHTML={{ __html: text }} />
+      {text}
 
       {
         link ?

frontend/src/Components/Form/SelectInput.css

@@ -1,7 +1,14 @@
 .select {
+  @add-mixin truncate;
+
   composes: input from '~Components/Form/Input.css';
 
-  padding: 0 11px;
+  padding: 0 30px 0 11px;
+  background-image: none, linear-gradient(-135deg, transparent 50%, var(--inputBackgroundColor) 50%), linear-gradient(-225deg, transparent 50%, var(--inputBackgroundColor) 50%), linear-gradient(var(--inputBackgroundColor) 42%, var(--textColor) 42%);
+  background-position: right 30px center, right bottom, right bottom, right bottom;
+  background-size: 1px 100%, 35px 27px, 30px 35px, 30px 100%;
+  background-repeat: no-repeat;
+  appearance: none;
 }
 
 .hasError {

frontend/src/Components/Page/Header/PageHeader.js

@@ -7,7 +7,7 @@ import { icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import IndexerSearchInputConnector from './IndexerSearchInputConnector';
 import KeyboardShortcutsModal from './KeyboardShortcutsModal';
-import PageHeaderActionsMenuConnector from './PageHeaderActionsMenuConnector';
+import PageHeaderActionsMenu from './PageHeaderActionsMenu';
 import styles from './PageHeader.css';
 
 class PageHeader extends Component {
@@ -87,7 +87,8 @@ class PageHeader extends Component {
             to="https://translate.servarr.com/projects/servarr/prowlarr/"
             size={24}
           />
-          <PageHeaderActionsMenuConnector
+
+          <PageHeaderActionsMenu
             onKeyboardShortcutsPress={this.onOpenKeyboardShortcutsModal}
           />
         </div>

frontend/src/Components/Page/Header/PageHeaderActionsMenu.js

@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import Menu from 'Components/Menu/Menu';
-import MenuButton from 'Components/Menu/MenuButton';
-import MenuContent from 'Components/Menu/MenuContent';
-import MenuItem from 'Components/Menu/MenuItem';
-import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
-import { align, icons, kinds } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './PageHeaderActionsMenu.css';
-
-function PageHeaderActionsMenu(props) {
-  const {
-    formsAuth,
-    onKeyboardShortcutsPress,
-    onRestartPress,
-    onShutdownPress
-  } = props;
-
-  return (
-    <div>
-      <Menu alignMenu={align.RIGHT}>
-        <MenuButton className={styles.menuButton} aria-label="Menu Button">
-          <Icon
-            name={icons.INTERACTIVE}
-            title={translate('Menu')}
-          />
-        </MenuButton>
-
-        <MenuContent>
-          <MenuItem onPress={onKeyboardShortcutsPress}>
-            <Icon
-              className={styles.itemIcon}
-              name={icons.KEYBOARD}
-            />
-            {translate('KeyboardShortcuts')}
-          </MenuItem>
-
-          <MenuItemSeparator />
-
-          <MenuItem onPress={onRestartPress}>
-            <Icon
-              className={styles.itemIcon}
-              name={icons.RESTART}
-            />
-            {translate('Restart')}
-          </MenuItem>
-
-          <MenuItem onPress={onShutdownPress}>
-            <Icon
-              className={styles.itemIcon}
-              name={icons.SHUTDOWN}
-              kind={kinds.DANGER}
-            />
-            {translate('Shutdown')}
-          </MenuItem>
-
-          {
-            formsAuth &&
-              <div className={styles.separator} />
-          }
-
-          {
-            formsAuth &&
-              <MenuItem
-                to={`${window.Prowlarr.urlBase}/logout`}
-                noRouter={true}
-              >
-                <Icon
-                  className={styles.itemIcon}
-                  name={icons.LOGOUT}
-                />
-                Logout
-              </MenuItem>
-          }
-        </MenuContent>
-      </Menu>
-    </div>
-  );
-}
-
-PageHeaderActionsMenu.propTypes = {
-  formsAuth: PropTypes.bool.isRequired,
-  onKeyboardShortcutsPress: PropTypes.func.isRequired,
-  onRestartPress: PropTypes.func.isRequired,
-  onShutdownPress: PropTypes.func.isRequired
-};
-
-export default PageHeaderActionsMenu;

frontend/src/Components/Page/Header/PageHeaderActionsMenu.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Icon from 'Components/Icon';
+import Menu from 'Components/Menu/Menu';
+import MenuButton from 'Components/Menu/MenuButton';
+import MenuContent from 'Components/Menu/MenuContent';
+import MenuItem from 'Components/Menu/MenuItem';
+import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
+import { align, icons, kinds } from 'Helpers/Props';
+import { restart, shutdown } from 'Store/Actions/systemActions';
+import translate from 'Utilities/String/translate';
+import styles from './PageHeaderActionsMenu.css';
+
+interface PageHeaderActionsMenuProps {
+  onKeyboardShortcutsPress(): void;
+}
+
+function PageHeaderActionsMenu(props: PageHeaderActionsMenuProps) {
+  const { onKeyboardShortcutsPress } = props;
+
+  const dispatch = useDispatch();
+
+  const { authentication, isDocker } = useSelector(
+    (state: AppState) => state.system.status.item
+  );
+
+  const formsAuth = authentication === 'forms';
+
+  const handleRestartPress = useCallback(() => {
+    dispatch(restart());
+  }, [dispatch]);
+
+  const handleShutdownPress = useCallback(() => {
+    dispatch(shutdown());
+  }, [dispatch]);
+
+  return (
+    <div>
+      <Menu alignMenu={align.RIGHT}>
+        <MenuButton className={styles.menuButton} aria-label="Menu Button">
+          <Icon name={icons.INTERACTIVE} title={translate('Menu')} />
+        </MenuButton>
+
+        <MenuContent>
+          <MenuItem onPress={onKeyboardShortcutsPress}>
+            <Icon className={styles.itemIcon} name={icons.KEYBOARD} />
+            {translate('KeyboardShortcuts')}
+          </MenuItem>
+
+          {isDocker ? null : (
+            <>
+              <MenuItemSeparator />
+
+              <MenuItem onPress={handleRestartPress}>
+                <Icon className={styles.itemIcon} name={icons.RESTART} />
+                {translate('Restart')}
+              </MenuItem>
+
+              <MenuItem onPress={handleShutdownPress}>
+                <Icon
+                  className={styles.itemIcon}
+                  name={icons.SHUTDOWN}
+                  kind={kinds.DANGER}
+                />
+                {translate('Shutdown')}
+              </MenuItem>
+            </>
+          )}
+
+          {formsAuth ? (
+            <>
+              <MenuItemSeparator />
+
+              <MenuItem
+                to={`${window.Prowlarr.urlBase}/logout`}
+                noRouter={true}
+              >
+                <Icon className={styles.itemIcon} name={icons.LOGOUT} />
+                {translate('Logout')}
+              </MenuItem>
+            </>
+          ) : null}
+        </MenuContent>
+      </Menu>
+    </div>
+  );
+}
+
+export default PageHeaderActionsMenu;

frontend/src/Components/Page/Header/PageHeaderActionsMenuConnector.js

@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { restart, shutdown } from 'Store/Actions/systemActions';
-import PageHeaderActionsMenu from './PageHeaderActionsMenu';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.system.status,
-    (status) => {
-      return {
-        formsAuth: status.item.authentication === 'forms'
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  restart,
-  shutdown
-};
-
-class PageHeaderActionsMenuConnector extends Component {
-
-  //
-  // Listeners
-
-  onRestartPress = () => {
-    this.props.restart();
-  };
-
-  onShutdownPress = () => {
-    this.props.shutdown();
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <PageHeaderActionsMenu
-        {...this.props}
-        onRestartPress={this.onRestartPress}
-        onShutdownPress={this.onShutdownPress}
-      />
-    );
-  }
-}
-
-PageHeaderActionsMenuConnector.propTypes = {
-  restart: PropTypes.func.isRequired,
-  shutdown: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(PageHeaderActionsMenuConnector);

frontend/src/Components/Page/Page.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
+import AppUpdatedModal from 'App/AppUpdatedModal';
 import ColorImpairedContext from 'App/ColorImpairedContext';
-import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector';
+import ConnectionLostModal from 'App/ConnectionLostModal';
 import SignalRConnector from 'Components/SignalRConnector';
 import AuthenticationRequiredModal from 'FirstRun/AuthenticationRequiredModal';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
@@ -102,12 +102,12 @@ class Page extends Component {
             {children}
           </div>
 
-          <AppUpdatedModalConnector
+          <AppUpdatedModal
             isOpen={this.state.isUpdatedModalOpen}
             onModalClose={this.onUpdatedModalClose}
           />
 
-          <ConnectionLostModalConnector
+          <ConnectionLostModal
             isOpen={this.state.isConnectionLostModalOpen}
             onModalClose={this.onConnectionLostModalClose}
           />

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -8,7 +8,7 @@ import Scroller from 'Components/Scroller/Scroller';
 import { icons } from 'Helpers/Props';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
 import dimensions from 'Styles/Variables/dimensions';
-import HealthStatusConnector from 'System/Status/Health/HealthStatusConnector';
+import HealthStatus from 'System/Status/Health/HealthStatus';
 import translate from 'Utilities/String/translate';
 import MessagesConnector from './Messages/MessagesConnector';
 import PageSidebarItem from './PageSidebarItem';
@@ -87,7 +87,7 @@ const links = [
       {
         title: () => translate('Status'),
         to: '/system/status',
-        statusComponent: HealthStatusConnector
+        statusComponent: HealthStatus
       },
       {
         title: () => translate('Tasks'),

frontend/src/Components/Table/Column.ts

@@ -2,9 +2,11 @@ import React from 'react';
 
 type PropertyFunction<T> = () => T;
 
+// TODO: Convert to generic so `name` can be a type
 interface Column {
   name: string;
   label: string | PropertyFunction<string> | React.ReactNode;
+  className?: string;
   columnLabel?: string;
   isSortable?: boolean;
   isVisible: boolean;

frontend/src/Components/Table/usePaging.ts

@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+
+interface PagingOptions {
+  page: number;
+  totalPages: number;
+  gotoPage: ({ page }: { page: number }) => void;
+}
+
+function usePaging(options: PagingOptions) {
+  const { page, totalPages, gotoPage } = options;
+  const dispatch = useDispatch();
+
+  const handleFirstPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: 1 }));
+  }, [dispatch, gotoPage]);
+
+  const handlePreviousPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: Math.max(page - 1, 1) }));
+  }, [page, dispatch, gotoPage]);
+
+  const handleNextPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: Math.min(page + 1, totalPages) }));
+  }, [page, totalPages, dispatch, gotoPage]);
+
+  const handleLastPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: totalPages }));
+  }, [totalPages, dispatch, gotoPage]);
+
+  const handlePageSelect = useCallback(
+    (page: number) => {
+      dispatch(gotoPage({ page }));
+    },
+    [dispatch, gotoPage]
+  );
+
+  return useMemo(() => {
+    return {
+      handleFirstPagePress,
+      handlePreviousPagePress,
+      handleNextPagePress,
+      handleLastPagePress,
+      handlePageSelect,
+    };
+  }, [
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  ]);
+}
+
+export default usePaging;

frontend/src/DownloadClient/DownloadProtocol.ts

@@ -1,7 +1,3 @@
-enum DownloadProtocol {
-  Unknown = 'unknown',
-  Usenet = 'usenet',
-  Torrent = 'torrent',
-}
+type DownloadProtocol = 'usenet' | 'torrent' | 'unknown';
 
 export default DownloadProtocol;

frontend/src/Helpers/Hooks/useCurrentPage.ts

@@ -0,0 +1,9 @@
+import { useHistory } from 'react-router-dom';
+
+function useCurrentPage() {
+  const history = useHistory();
+
+  return history.action === 'POP';
+}
+
+export default useCurrentPage;

frontend/src/Helpers/Hooks/useModalOpenState.ts

@@ -3,15 +3,15 @@ import { useCallback, useState } from 'react';
 export default function useModalOpenState(
   initialState: boolean
 ): [boolean, () => void, () => void] {
-  const [isOpen, setOpen] = useState(initialState);
+  const [isOpen, setIsOpen] = useState(initialState);
 
   const setModalOpen = useCallback(() => {
-    setOpen(true);
-  }, [setOpen]);
+    setIsOpen(true);
+  }, [setIsOpen]);
 
   const setModalClosed = useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
+    setIsOpen(false);
+  }, [setIsOpen]);
 
   return [isOpen, setModalOpen, setModalClosed];
 }

frontend/src/Helpers/Props/TooltipPosition.ts

@@ -0,0 +1,3 @@
+type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+
+export default TooltipPosition;

frontend/src/Indexer/Add/AddIndexerModal.js

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import { sizes } from 'Helpers/Props';
-import AddIndexerModalContentConnector from './AddIndexerModalContentConnector';
-import styles from './AddIndexerModal.css';
-
-function AddIndexerModal({ isOpen, onModalClose, onSelectIndexer, ...otherProps }) {
-  return (
-    <Modal
-      isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
-      onModalClose={onModalClose}
-      className={styles.modal}
-    >
-      <AddIndexerModalContentConnector
-        {...otherProps}
-        onModalClose={onModalClose}
-        onSelectIndexer={onSelectIndexer}
-      />
-    </Modal>
-  );
-}
-
-AddIndexerModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSelectIndexer: PropTypes.func.isRequired
-};
-
-export default AddIndexerModal;

frontend/src/Indexer/Add/AddIndexerModal.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import { clearIndexerSchema } from 'Store/Actions/indexerActions';
+import AddIndexerModalContent from './AddIndexerModalContent';
+import styles from './AddIndexerModal.css';
+
+interface AddIndexerModalProps {
+  isOpen: boolean;
+  onSelectIndexer(): void;
+  onModalClose(): void;
+}
+
+function AddIndexerModal({
+  isOpen,
+  onSelectIndexer,
+  onModalClose,
+  ...otherProps
+}: AddIndexerModalProps) {
+  const dispatch = useDispatch();
+
+  const onModalClosePress = useCallback(() => {
+    dispatch(clearIndexerSchema());
+    onModalClose();
+  }, [dispatch, onModalClose]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      size={sizes.EXTRA_LARGE}
+      className={styles.modal}
+      onModalClose={onModalClosePress}
+    >
+      <AddIndexerModalContent
+        {...otherProps}
+        onSelectIndexer={onSelectIndexer}
+        onModalClose={onModalClosePress}
+      />
+    </Modal>
+  );
+}
+
+export default AddIndexerModal;

frontend/src/Indexer/Add/AddIndexerModalContent.css

@@ -19,12 +19,18 @@
   margin-bottom: 16px;
 }
 
-.alert {
+.notice {
   composes: alert from '~Components/Alert.css';
 
   margin-bottom: 20px;
 }
 
+.alert {
+  composes: alert from '~Components/Alert.css';
+
+  text-align: center;
+}
+
 .scroller {
   flex: 1 1 auto;
 }

frontend/src/Indexer/Add/AddIndexerModalContent.css.d.ts

@@ -10,6 +10,7 @@ interface CssExports {
   'indexers': string;
   'modalBody': string;
   'modalFooter': string;
+  'notice': string;
   'scroller': string;
 }
 export const cssExports: CssExports;

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -1,325 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Alert from 'Components/Alert';
-import EnhancedSelectInput from 'Components/Form/EnhancedSelectInput';
-import NewznabCategorySelectInputConnector from 'Components/Form/NewznabCategorySelectInputConnector';
-import TextInput from 'Components/Form/TextInput';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-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 Scroller from 'Components/Scroller/Scroller';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import { kinds, scrollDirections } from 'Helpers/Props';
-import sortByProp from 'Utilities/Array/sortByProp';
-import getErrorMessage from 'Utilities/Object/getErrorMessage';
-import translate from 'Utilities/String/translate';
-import SelectIndexerRow from './SelectIndexerRow';
-import styles from './AddIndexerModalContent.css';
-
-const columns = [
-  {
-    name: 'protocol',
-    label: () => translate('Protocol'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'sortName',
-    label: () => translate('Name'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'language',
-    label: () => translate('Language'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'description',
-    label: () => translate('Description'),
-    isSortable: false,
-    isVisible: true
-  },
-  {
-    name: 'privacy',
-    label: () => translate('Privacy'),
-    isSortable: true,
-    isVisible: true
-  },
-  {
-    name: 'categories',
-    label: () => translate('Categories'),
-    isSortable: false,
-    isVisible: true
-  }
-];
-
-const protocols = [
-  {
-    key: 'torrent',
-    value: 'torrent'
-  },
-  {
-    key: 'usenet',
-    value: 'nzb'
-  }
-];
-
-const privacyLevels = [
-  {
-    key: 'private',
-    get value() {
-      return translate('Private');
-    }
-  },
-  {
-    key: 'semiPrivate',
-    get value() {
-      return translate('SemiPrivate');
-    }
-  },
-  {
-    key: 'public',
-    get value() {
-      return translate('Public');
-    }
-  }
-];
-
-class AddIndexerModalContent extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      filter: '',
-      filterProtocols: [],
-      filterLanguages: [],
-      filterPrivacyLevels: [],
-      filterCategories: []
-    };
-  }
-
-  //
-  // Listeners
-
-  onFilterChange = ({ value }) => {
-    this.setState({ filter: value });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      indexers,
-      onIndexerSelect,
-      sortKey,
-      sortDirection,
-      isFetching,
-      isPopulated,
-      error,
-      onSortPress,
-      onModalClose
-    } = this.props;
-
-    const languages = Array.from(new Set(indexers.map(({ language }) => language)))
-      .map((language) => ({ key: language, value: language }))
-      .sort(sortByProp('value'));
-
-    const filteredIndexers = indexers.filter((indexer) => {
-      const {
-        filter,
-        filterProtocols,
-        filterLanguages,
-        filterPrivacyLevels,
-        filterCategories
-      } = this.state;
-
-      if (!indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) && !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())) {
-        return false;
-      }
-
-      if (filterProtocols.length && !filterProtocols.includes(indexer.protocol)) {
-        return false;
-      }
-
-      if (filterLanguages.length && !filterLanguages.includes(indexer.language)) {
-        return false;
-      }
-
-      if (filterPrivacyLevels.length && !filterPrivacyLevels.includes(indexer.privacy)) {
-        return false;
-      }
-
-      if (filterCategories.length) {
-        const { categories = [] } = indexer.capabilities || {};
-        const flat = ({ id, subCategories = [] }) => [id, ...subCategories.flatMap(flat)];
-        const flatCategories = categories
-          .filter((item) => item.id < 100000)
-          .flatMap(flat);
-
-        if (!filterCategories.every((item) => flatCategories.includes(item))) {
-          return false;
-        }
-      }
-
-      return true;
-    });
-
-    const errorMessage = getErrorMessage(error, translate('UnableToLoadIndexers'));
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('AddIndexer')}
-        </ModalHeader>
-
-        <ModalBody
-          className={styles.modalBody}
-          scrollDirection={scrollDirections.NONE}
-        >
-          <TextInput
-            className={styles.filterInput}
-            placeholder={translate('FilterPlaceHolder')}
-            name="filter"
-            value={this.state.filter}
-            autoFocus={true}
-            onChange={this.onFilterChange}
-          />
-
-          <div className={styles.filterRow}>
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Protocol')}</label>
-              <EnhancedSelectInput
-                name="indexerProtocols"
-                value={this.state.filterProtocols}
-                values={protocols}
-                onChange={({ value }) => this.setState({ filterProtocols: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Language')}</label>
-              <EnhancedSelectInput
-                name="indexerLanguages"
-                value={this.state.filterLanguages}
-                values={languages}
-                onChange={({ value }) => this.setState({ filterLanguages: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Privacy')}</label>
-              <EnhancedSelectInput
-                name="indexerPrivacyLevels"
-                value={this.state.filterPrivacyLevels}
-                values={privacyLevels}
-                onChange={({ value }) => this.setState({ filterPrivacyLevels: value })}
-              />
-            </div>
-
-            <div className={styles.filterContainer}>
-              <label className={styles.filterLabel}>{translate('Categories')}</label>
-              <NewznabCategorySelectInputConnector
-                name="indexerCategories"
-                value={this.state.filterCategories}
-                onChange={({ value }) => this.setState({ filterCategories: value })}
-              />
-            </div>
-          </div>
-
-          <Alert
-            kind={kinds.INFO}
-            className={styles.alert}
-          >
-            <div>
-              {translate('ProwlarrSupportsAnyIndexer')}
-            </div>
-          </Alert>
-
-          <Scroller
-            className={styles.scroller}
-            autoFocus={false}
-          >
-            {
-              isFetching ? <LoadingIndicator /> : null
-            }
-            {
-              error ? <Alert kind={kinds.DANGER}>{errorMessage}</Alert> : null
-            }
-            {
-              isPopulated && !!indexers.length ?
-                <Table
-                  columns={columns}
-                  sortKey={sortKey}
-                  sortDirection={sortDirection}
-                  onSortPress={onSortPress}
-                >
-                  <TableBody>
-                    {
-                      filteredIndexers.map((indexer) => (
-                        <SelectIndexerRow
-                          key={`${indexer.implementation}-${indexer.name}`}
-                          implementation={indexer.implementation}
-                          implementationName={indexer.implementationName}
-                          {...indexer}
-                          onIndexerSelect={onIndexerSelect}
-                        />
-                      ))
-                    }
-                  </TableBody>
-                </Table> :
-                null
-            }
-            {
-              isPopulated && !!indexers.length && !filteredIndexers.length ?
-                <Alert
-                  kind={kinds.WARNING}
-                >
-                  {translate('NoIndexersFound')}
-                </Alert> :
-                null
-            }
-          </Scroller>
-        </ModalBody>
-
-        <ModalFooter className={styles.modalFooter}>
-          <div className={styles.available}>
-            {
-              isPopulated ?
-                translate('CountIndexersAvailable', { count: filteredIndexers.length }) :
-                null
-            }
-          </div>
-
-          <div>
-            <Button onPress={onModalClose}>{translate('Close')}</Button>
-          </div>
-        </ModalFooter>
-      </ModalContent>
-    );
-  }
-}
-
-AddIndexerModalContent.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  sortKey: PropTypes.string,
-  sortDirection: PropTypes.string,
-  onSortPress: PropTypes.func.isRequired,
-  indexers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onIndexerSelect: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AddIndexerModalContent;

frontend/src/Indexer/Add/AddIndexerModalContent.tsx

@@ -0,0 +1,434 @@
+import { some } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import IndexerAppState from 'App/State/IndexerAppState';
+import Alert from 'Components/Alert';
+import EnhancedSelectInput from 'Components/Form/EnhancedSelectInput';
+import NewznabCategorySelectInputConnector from 'Components/Form/NewznabCategorySelectInputConnector';
+import TextInput from 'Components/Form/TextInput';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 Scroller from 'Components/Scroller/Scroller';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { kinds, scrollDirections } from 'Helpers/Props';
+import Indexer, { IndexerCategory } from 'Indexer/Indexer';
+import {
+  fetchIndexerSchema,
+  selectIndexerSchema,
+  setIndexerSchemaSort,
+} from 'Store/Actions/indexerActions';
+import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SortCallback } from 'typings/callbacks';
+import sortByProp from 'Utilities/Array/sortByProp';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import SelectIndexerRow from './SelectIndexerRow';
+import styles from './AddIndexerModalContent.css';
+
+const COLUMNS = [
+  {
+    name: 'protocol',
+    label: () => translate('Protocol'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'sortName',
+    label: () => translate('Name'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'language',
+    label: () => translate('Language'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'description',
+    label: () => translate('Description'),
+    isSortable: false,
+    isVisible: true,
+  },
+  {
+    name: 'privacy',
+    label: () => translate('Privacy'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'categories',
+    label: () => translate('Categories'),
+    isSortable: false,
+    isVisible: true,
+  },
+];
+
+const PROTOCOLS = [
+  {
+    key: 'torrent',
+    value: 'torrent',
+  },
+  {
+    key: 'usenet',
+    value: 'nzb',
+  },
+];
+
+const PRIVACY_LEVELS = [
+  {
+    key: 'private',
+    get value() {
+      return translate('Private');
+    },
+  },
+  {
+    key: 'semiPrivate',
+    get value() {
+      return translate('SemiPrivate');
+    },
+  },
+  {
+    key: 'public',
+    get value() {
+      return translate('Public');
+    },
+  },
+];
+
+interface IndexerSchema extends Indexer {
+  isExistingIndexer: boolean;
+}
+
+function createAddIndexersSelector() {
+  return createSelector(
+    createClientSideCollectionSelector('indexers.schema'),
+    createAllIndexersSelector(),
+    (indexers: IndexerAppState, allIndexers) => {
+      const { isFetching, isPopulated, error, items, sortDirection, sortKey } =
+        indexers;
+
+      const indexerList: IndexerSchema[] = items.map((item) => {
+        const { definitionName } = item;
+        return {
+          ...item,
+          isExistingIndexer: some(allIndexers, { definitionName }),
+        };
+      });
+
+      return {
+        isFetching,
+        isPopulated,
+        error,
+        indexers: indexerList,
+        sortKey,
+        sortDirection,
+      };
+    }
+  );
+}
+
+interface AddIndexerModalContentProps {
+  onSelectIndexer(): void;
+  onModalClose(): void;
+}
+
+function AddIndexerModalContent(props: AddIndexerModalContentProps) {
+  const { onSelectIndexer, onModalClose } = props;
+
+  const { isFetching, isPopulated, error, indexers, sortKey, sortDirection } =
+    useSelector(createAddIndexersSelector());
+  const dispatch = useDispatch();
+
+  const [filter, setFilter] = useState('');
+  const [filterProtocols, setFilterProtocols] = useState<string[]>([]);
+  const [filterLanguages, setFilterLanguages] = useState<string[]>([]);
+  const [filterPrivacyLevels, setFilterPrivacyLevels] = useState<string[]>([]);
+  const [filterCategories, setFilterCategories] = useState<number[]>([]);
+
+  useEffect(
+    () => {
+      dispatch(fetchIndexerSchema());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onFilterChange = useCallback(
+    ({ value }: { value: string }) => {
+      setFilter(value);
+    },
+    [setFilter]
+  );
+
+  const onFilterProtocolsChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterProtocols(value);
+    },
+    [setFilterProtocols]
+  );
+
+  const onFilterLanguagesChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterLanguages(value);
+    },
+    [setFilterLanguages]
+  );
+
+  const onFilterPrivacyLevelsChange = useCallback(
+    ({ value }: { value: string[] }) => {
+      setFilterPrivacyLevels(value);
+    },
+    [setFilterPrivacyLevels]
+  );
+
+  const onFilterCategoriesChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setFilterCategories(value);
+    },
+    [setFilterCategories]
+  );
+
+  const onIndexerSelect = useCallback(
+    ({
+      implementation,
+      implementationName,
+      name,
+    }: {
+      implementation: string;
+      implementationName: string;
+      name: string;
+    }) => {
+      dispatch(
+        selectIndexerSchema({
+          implementation,
+          implementationName,
+          name,
+        })
+      );
+
+      onSelectIndexer();
+    },
+    [dispatch, onSelectIndexer]
+  );
+
+  const onSortPress = useCallback<SortCallback>(
+    (sortKey, sortDirection) => {
+      dispatch(setIndexerSchemaSort({ sortKey, sortDirection }));
+    },
+    [dispatch]
+  );
+
+  const languages = useMemo(
+    () =>
+      Array.from(new Set(indexers.map(({ language }) => language)))
+        .map((language) => ({ key: language, value: language }))
+        .sort(sortByProp('value')),
+    [indexers]
+  );
+
+  const filteredIndexers = useMemo(() => {
+    const flat = ({
+      id,
+      subCategories = [],
+    }: {
+      id: number;
+      subCategories: IndexerCategory[];
+    }): number[] => [id, ...subCategories.flatMap(flat)];
+
+    return indexers.filter((indexer) => {
+      if (
+        filter.length &&
+        !indexer.name.toLowerCase().includes(filter.toLocaleLowerCase()) &&
+        !indexer.description.toLowerCase().includes(filter.toLocaleLowerCase())
+      ) {
+        return false;
+      }
+
+      if (
+        filterProtocols.length &&
+        !filterProtocols.includes(indexer.protocol)
+      ) {
+        return false;
+      }
+
+      if (
+        filterLanguages.length &&
+        !filterLanguages.includes(indexer.language)
+      ) {
+        return false;
+      }
+
+      if (
+        filterPrivacyLevels.length &&
+        !filterPrivacyLevels.includes(indexer.privacy)
+      ) {
+        return false;
+      }
+
+      if (filterCategories.length) {
+        const { categories = [] } = indexer.capabilities || {};
+
+        const flatCategories = categories
+          .filter((item) => item.id < 100000)
+          .flatMap(flat);
+
+        if (
+          !filterCategories.every((categoryId) =>
+            flatCategories.includes(categoryId)
+          )
+        ) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }, [
+    indexers,
+    filter,
+    filterProtocols,
+    filterLanguages,
+    filterPrivacyLevels,
+    filterCategories,
+  ]);
+
+  const errorMessage = getErrorMessage(
+    error,
+    translate('UnableToLoadIndexers')
+  );
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('AddIndexer')}</ModalHeader>
+
+      <ModalBody
+        className={styles.modalBody}
+        scrollDirection={scrollDirections.NONE}
+      >
+        <TextInput
+          className={styles.filterInput}
+          placeholder={translate('FilterPlaceHolder')}
+          name="filter"
+          value={filter}
+          autoFocus={true}
+          onChange={onFilterChange}
+        />
+
+        <div className={styles.filterRow}>
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Protocol')}
+            </label>
+
+            <EnhancedSelectInput
+              name="indexerProtocols"
+              value={filterProtocols}
+              values={PROTOCOLS}
+              onChange={onFilterProtocolsChange}
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Language')}
+            </label>
+
+            <EnhancedSelectInput
+              name="indexerLanguages"
+              value={filterLanguages}
+              values={languages}
+              onChange={onFilterLanguagesChange}
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>{translate('Privacy')}</label>
+            <EnhancedSelectInput
+              name="indexerPrivacyLevels"
+              value={filterPrivacyLevels}
+              values={PRIVACY_LEVELS}
+              onChange={onFilterPrivacyLevelsChange}
+            />
+          </div>
+
+          <div className={styles.filterContainer}>
+            <label className={styles.filterLabel}>
+              {translate('Categories')}
+            </label>
+
+            <NewznabCategorySelectInputConnector
+              name="indexerCategories"
+              value={filterCategories}
+              onChange={onFilterCategoriesChange}
+            />
+          </div>
+        </div>
+
+        <Alert kind={kinds.INFO} className={styles.notice}>
+          <div>{translate('ProwlarrSupportsAnyIndexer')}</div>
+        </Alert>
+
+        <Scroller className={styles.scroller} autoFocus={false}>
+          {isFetching ? <LoadingIndicator /> : null}
+
+          {error ? (
+            <Alert kind={kinds.DANGER} className={styles.alert}>
+              {errorMessage}
+            </Alert>
+          ) : null}
+
+          {isPopulated && !!indexers.length ? (
+            <Table
+              columns={COLUMNS}
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              onSortPress={onSortPress}
+            >
+              <TableBody>
+                {filteredIndexers.map((indexer) => (
+                  <SelectIndexerRow
+                    {...indexer}
+                    key={`${indexer.implementation}-${indexer.name}`}
+                    implementation={indexer.implementation}
+                    implementationName={indexer.implementationName}
+                    onIndexerSelect={onIndexerSelect}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          ) : null}
+
+          {isPopulated && !!indexers.length && !filteredIndexers.length ? (
+            <Alert kind={kinds.WARNING} className={styles.alert}>
+              {translate('NoIndexersFound')}
+            </Alert>
+          ) : null}
+        </Scroller>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.available}>
+          {isPopulated
+            ? translate('CountIndexersAvailable', {
+                count: filteredIndexers.length,
+              })
+            : null}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Close')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default AddIndexerModalContent;

frontend/src/Indexer/Add/AddIndexerModalContentConnector.js

@@ -1,94 +0,0 @@
-import { some } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchIndexerSchema, selectIndexerSchema, setIndexerSchemaSort } from 'Store/Actions/indexerActions';
-import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
-import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
-import AddIndexerModalContent from './AddIndexerModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    createClientSideCollectionSelector('indexers.schema'),
-    createAllIndexersSelector(),
-    (indexers, allIndexers) => {
-      const {
-        isFetching,
-        isPopulated,
-        error,
-        items,
-        sortDirection,
-        sortKey
-      } = indexers;
-
-      const indexerList = items.map((item) => {
-        const { definitionName } = item;
-        return {
-          ...item,
-          isExistingIndexer: some(allIndexers, { definitionName })
-        };
-      });
-
-      return {
-        isFetching,
-        isPopulated,
-        error,
-        indexers: indexerList,
-        sortKey,
-        sortDirection
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchIndexerSchema,
-  selectIndexerSchema,
-  setIndexerSchemaSort
-};
-
-class AddIndexerModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchIndexerSchema();
-  }
-
-  //
-  // Listeners
-
-  onIndexerSelect = ({ implementation, implementationName, name }) => {
-    this.props.selectIndexerSchema({ implementation, implementationName, name });
-    this.props.onSelectIndexer();
-  };
-
-  onSortPress = (sortKey, sortDirection) => {
-    this.props.setIndexerSchemaSort({ sortKey, sortDirection });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <AddIndexerModalContent
-        {...this.props}
-        onSortPress={this.onSortPress}
-        onIndexerSelect={this.onIndexerSelect}
-      />
-    );
-  }
-}
-
-AddIndexerModalContentConnector.propTypes = {
-  fetchIndexerSchema: PropTypes.func.isRequired,
-  selectIndexerSchema: PropTypes.func.isRequired,
-  setIndexerSchemaSort: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onSelectIndexer: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AddIndexerModalContentConnector);

frontend/src/Indexer/Add/SelectIndexerRow.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowButton from 'Components/Table/TableRowButton';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import { icons } from 'Helpers/Props';
 import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel';
 import PrivacyLabel from 'Indexer/Index/Table/PrivacyLabel';
@@ -12,7 +13,7 @@ import styles from './SelectIndexerRow.css';
 
 interface SelectIndexerRowProps {
   name: string;
-  protocol: string;
+  protocol: DownloadProtocol;
   privacy: IndexerPrivacy;
   language: string;
   description: string;

frontend/src/Indexer/Index/Table/CapabilitiesLabel.tsx

@@ -2,6 +2,7 @@ import { uniqBy } from 'lodash';
 import React from 'react';
 import Label from 'Components/Label';
 import { IndexerCapabilities } from 'Indexer/Indexer';
+import translate from 'Utilities/String/translate';
 
 interface CapabilitiesLabelProps {
   capabilities: IndexerCapabilities;
@@ -38,7 +39,7 @@ function CapabilitiesLabel(props: CapabilitiesLabelProps) {
         );
       })}
 
-      {filteredList.length === 0 ? <Label>{'None'}</Label> : null}
+      {filteredList.length === 0 ? <Label>{translate('None')}</Label> : null}
     </span>
   );
 }

frontend/src/Indexer/Index/Table/IndexerIndexTable.tsx

@@ -46,11 +46,7 @@ const columnsSelector = createSelector(
   (columns) => columns
 );
 
-const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
-  index,
-  style,
-  data,
-}) => {
+function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
   const { items, sortKey, columns, isSelectMode, onCloneIndexerPress } = data;
 
   if (index >= items.length) {
@@ -77,7 +73,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
       />
     </div>
   );
-};
+}
 
 function getWindowScrollTopPosition() {
   return document.documentElement.scrollTop || document.body.scrollTop || 0;

frontend/src/Indexer/Index/Table/IndexerIndexTableOptions.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -32,19 +32,17 @@ function IndexerIndexTableOptions(props: IndexerIndexTableOptionsProps) {
   );
 
   return (
-    <Fragment>
-      <FormGroup>
-        <FormLabel>{translate('ShowSearch')}</FormLabel>
+    <FormGroup>
+      <FormLabel>{translate('ShowSearch')}</FormLabel>
 
-        <FormInputGroup
-          type={inputTypes.CHECK}
-          name="showSearchAction"
-          value={showSearchAction}
-          helpText={translate('ShowSearchHelpText')}
-          onChange={onTableOptionChangeWrapper}
-        />
-      </FormGroup>
-    </Fragment>
+      <FormInputGroup
+        type={inputTypes.CHECK}
+        name="showSearchAction"
+        value={showSearchAction}
+        helpText={translate('ShowSearchHelpText')}
+        onChange={onTableOptionChangeWrapper}
+      />
+    </FormGroup>
   );
 }
 

frontend/src/Indexer/Index/Table/IndexerStatusCell.tsx

@@ -8,6 +8,30 @@ import translate from 'Utilities/String/translate';
 import DisabledIndexerInfo from './DisabledIndexerInfo';
 import styles from './IndexerStatusCell.css';
 
+function getIconKind(enabled: boolean, redirect: boolean) {
+  if (enabled) {
+    return redirect ? kinds.INFO : kinds.SUCCESS;
+  }
+
+  return kinds.DEFAULT;
+}
+
+function getIconName(enabled: boolean, redirect: boolean) {
+  if (enabled) {
+    return redirect ? icons.REDIRECT : icons.CHECK;
+  }
+
+  return icons.BLOCKLIST;
+}
+
+function getIconTooltip(enabled: boolean, redirect: boolean) {
+  if (enabled) {
+    return redirect ? translate('EnabledRedirected') : translate('Enabled');
+  }
+
+  return translate('Disabled');
+}
+
 interface IndexerStatusCellProps {
   className: string;
   enabled: boolean;
@@ -30,22 +54,14 @@ function IndexerStatusCell(props: IndexerStatusCellProps) {
     ...otherProps
   } = props;
 
-  const enableKind = redirect ? kinds.INFO : kinds.SUCCESS;
-  const enableIcon = redirect ? icons.REDIRECT : icons.CHECK;
-  const enableTitle = redirect
-    ? translate('EnabledRedirected')
-    : translate('Enabled');
-
   return (
     <Component className={className} {...otherProps}>
-      {
-        <Icon
-          className={styles.statusIcon}
-          kind={enabled ? enableKind : kinds.DEFAULT}
-          name={enabled ? enableIcon : icons.BLOCKLIST}
-          title={enabled ? enableTitle : translate('Disabled')}
-        />
-      }
+      <Icon
+        className={styles.statusIcon}
+        kind={getIconKind(enabled, redirect)}
+        name={getIconName(enabled, redirect)}
+        title={getIconTooltip(enabled, redirect)}
+      />
       {status ? (
         <Popover
           className={styles.indexerStatusTooltip}

frontend/src/Indexer/Index/Table/ProtocolLabel.css

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

frontend/src/Indexer/Index/Table/ProtocolLabel.css.d.ts

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

frontend/src/Indexer/Index/Table/ProtocolLabel.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
 import Label from 'Components/Label';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import styles from './ProtocolLabel.css';
 
 interface ProtocolLabelProps {
-  protocol: string;
+  protocol: DownloadProtocol;
 }
 
-function ProtocolLabel(props: ProtocolLabelProps) {
-  const { protocol } = props;
-
+function ProtocolLabel({ protocol }: ProtocolLabelProps) {
   const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore ts(7053)
   return <Label className={styles[protocol]}>{protocolName}</Label>;
 }
 

frontend/src/Indexer/Indexer.ts

@@ -1,4 +1,5 @@
 import ModelBase from 'App/ModelBase';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 
 export interface IndexerStatus extends ModelBase {
   disabledTill: Date;
@@ -38,6 +39,7 @@ export interface IndexerField extends ModelBase {
 
 interface Indexer extends ModelBase {
   name: string;
+  definitionName: string;
   description: string;
   encoding: string;
   language: string;
@@ -48,7 +50,7 @@ interface Indexer extends ModelBase {
   supportsSearch: boolean;
   supportsRedirect: boolean;
   supportsPagination: boolean;
-  protocol: string;
+  protocol: DownloadProtocol;
   privacy: IndexerPrivacy;
   priority: number;
   fields: IndexerField[];

frontend/src/Indexer/Info/History/IndexerHistoryRow.tsx

@@ -83,8 +83,8 @@ function IndexerHistoryRow(props: IndexerHistoryRowProps) {
       <TableRowCell className={styles.details}>
         <IconButton
           name={icons.INFO}
-          onPress={onDetailsModalPress}
           title={translate('HistoryDetails')}
+          onPress={onDetailsModalPress}
         />
       </TableRowCell>
 

frontend/src/Indexer/NoIndexer.css

@@ -1,4 +1,6 @@
 .message {
+  composes: alert from '~Components/Alert.css';
+
   margin-top: 10px;
   margin-bottom: 30px;
   text-align: center;

frontend/src/Indexer/NoIndexer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
 import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
@@ -14,11 +15,9 @@ function NoIndexer(props: NoIndexerProps) {
 
   if (totalItems > 0) {
     return (
-      <div>
-        <div className={styles.message}>
-          {translate('AllIndexersHiddenDueToFilter')}
-        </div>
-      </div>
+      <Alert kind={kinds.WARNING} className={styles.message}>
+        {translate('AllIndexersHiddenDueToFilter')}
+      </Alert>
     );
   }
 
@@ -29,7 +28,7 @@ function NoIndexer(props: NoIndexerProps) {
       </div>
 
       <div className={styles.buttonContainer}>
-        <Button onPress={onAddIndexerPress} kind={kinds.PRIMARY}>
+        <Button kind={kinds.PRIMARY} onPress={onAddIndexerPress}>
           {translate('AddNewIndexer')}
         </Button>
       </div>

frontend/src/Indexer/Stats/IndexerStats.tsx

@@ -54,18 +54,20 @@ function getAverageResponseTimeData(indexerStats: IndexerStatsIndexer[]) {
 }
 
 function getFailureRateData(indexerStats: IndexerStatsIndexer[]) {
-  const data = indexerStats.map((indexer) => ({
-    label: indexer.indexerName,
-    value:
-      (indexer.numberOfFailedQueries +
-        indexer.numberOfFailedRssQueries +
-        indexer.numberOfFailedAuthQueries +
-        indexer.numberOfFailedGrabs) /
-      (indexer.numberOfQueries +
-        indexer.numberOfRssQueries +
-        indexer.numberOfAuthQueries +
-        indexer.numberOfGrabs),
-  }));
+  const data = [...indexerStats]
+    .map((indexer) => ({
+      label: indexer.indexerName,
+      value:
+        (indexer.numberOfFailedQueries +
+          indexer.numberOfFailedRssQueries +
+          indexer.numberOfFailedAuthQueries +
+          indexer.numberOfFailedGrabs) /
+        (indexer.numberOfQueries +
+          indexer.numberOfRssQueries +
+          indexer.numberOfAuthQueries +
+          indexer.numberOfGrabs),
+    }))
+    .filter((s) => s.value > 0);
 
   data.sort((a, b) => b.value - a.value);
 
@@ -73,11 +75,20 @@ function getFailureRateData(indexerStats: IndexerStatsIndexer[]) {
 }
 
 function getTotalRequestsData(indexerStats: IndexerStatsIndexer[]) {
-  const statistics = [...indexerStats].sort((a, b) =>
-    a.numberOfQueries === b.numberOfQueries
-      ? b.numberOfRssQueries - a.numberOfRssQueries
-      : b.numberOfQueries - a.numberOfQueries
-  );
+  const statistics = [...indexerStats]
+    .filter(
+      (s) =>
+        s.numberOfQueries > 0 ||
+        s.numberOfRssQueries > 0 ||
+        s.numberOfAuthQueries > 0
+    )
+    .sort(
+      (a, b) =>
+        b.numberOfQueries +
+        b.numberOfRssQueries +
+        b.numberOfAuthQueries -
+        (a.numberOfQueries + a.numberOfRssQueries + a.numberOfAuthQueries)
+    );
 
   return {
     labels: statistics.map((indexer) => indexer.indexerName),
@@ -99,10 +110,12 @@ function getTotalRequestsData(indexerStats: IndexerStatsIndexer[]) {
 }
 
 function getNumberGrabsData(indexerStats: IndexerStatsIndexer[]) {
-  const data = indexerStats.map((indexer) => ({
-    label: indexer.indexerName,
-    value: indexer.numberOfGrabs - indexer.numberOfFailedGrabs,
-  }));
+  const data = [...indexerStats]
+    .map((indexer) => ({
+      label: indexer.indexerName,
+      value: indexer.numberOfGrabs - indexer.numberOfFailedGrabs,
+    }))
+    .filter((s) => s.value > 0);
 
   data.sort((a, b) => b.value - a.value);
 
@@ -228,9 +241,9 @@ function IndexerStats() {
             selectedFilterKey={selectedFilterKey}
             filters={filters}
             customFilters={customFilters}
-            onFilterSelect={onFilterSelect}
             filterModalConnectorComponent={IndexerStatsFilterModal}
             isDisabled={false}
+            onFilterSelect={onFilterSelect}
           />
         </PageToolbarSection>
       </PageToolbar>

frontend/src/Search/NoSearchResults.css

@@ -1,4 +1,6 @@
 .message {
+  composes: alert from '~Components/Alert.css';
+
   margin-top: 10px;
   margin-bottom: 30px;
   text-align: center;

frontend/src/Search/NoSearchResults.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import Alert from 'Components/Alert';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './NoSearchResults.css';
 
@@ -11,18 +13,16 @@ function NoSearchResults(props: NoSearchResultsProps) {
 
   if (totalItems > 0) {
     return (
-      <div>
-        <div className={styles.message}>
-          {translate('AllIndexersHiddenDueToFilter')}
-        </div>
-      </div>
+      <Alert kind={kinds.WARNING} className={styles.message}>
+        {translate('AllSearchResultsHiddenByFilter')}
+      </Alert>
     );
   }
 
   return (
-    <div>
-      <div className={styles.message}>{translate('NoSearchResultsFound')}</div>
-    </div>
+    <Alert kind={kinds.INFO} className={styles.message}>
+      {translate('NoSearchResultsFound')}
+    </Alert>
   );
 }
 

frontend/src/Search/OverrideMatch/DownloadClient/SelectDownloadClientModal.tsx

@@ -17,7 +17,7 @@ function SelectDownloadClientModal(props: SelectDownloadClientModalProps) {
     props;
 
   return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose} size={sizes.MEDIUM}>
+    <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={onModalClose}>
       <SelectDownloadClientModalContent
         protocol={protocol}
         modalTitle={modalTitle}

frontend/src/Search/SearchIndex.js

@@ -282,7 +282,7 @@ class SearchIndex extends Component {
 
     const ViewComponent = getViewComponent(isSmallScreen);
     const isLoaded = !!(!error && isPopulated && items.length && this.scrollerRef.current);
-    const hasNoIndexer = !totalItems;
+    const hasNoSearchResults = !totalItems;
 
     return (
       <PageContent title={translate('Search')}>
@@ -306,7 +306,7 @@ class SearchIndex extends Component {
             <SearchIndexSortMenu
               sortKey={sortKey}
               sortDirection={sortDirection}
-              isDisabled={hasNoIndexer}
+              isDisabled={hasNoSearchResults}
               onSortSelect={onSortSelect}
             />
 
@@ -314,7 +314,7 @@ class SearchIndex extends Component {
               selectedFilterKey={selectedFilterKey}
               filters={filters}
               customFilters={customFilters}
-              isDisabled={hasNoIndexer}
+              isDisabled={hasNoSearchResults}
               onFilterSelect={onFilterSelect}
             />
           </PageToolbarSection>

frontend/src/Search/Table/SearchIndexRow.tsx

@@ -184,9 +184,9 @@ function SearchIndexRow(props: SearchIndexRowProps) {
         if (name === 'select') {
           return (
             <VirtualTableSelectCell
+              key={name}
               inputClassName={styles.checkInput}
               id={guid}
-              key={name}
               isSelected={isSelected}
               isDisabled={false}
               onSelectedChange={onSelectedChange}

frontend/src/Settings/Applications/ApplicationSettings.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AppState from 'App/State/AppState';
 import { APP_INDEXER_SYNC } from 'Commands/commandNames';
@@ -56,7 +56,7 @@ function ApplicationSettings() {
         // @ts-ignore
         showSave={false}
         additionalButtons={
-          <Fragment>
+          <>
             <PageToolbarSeparator />
 
             <PageToolbarButton
@@ -78,7 +78,7 @@ function ApplicationSettings() {
               iconName={icons.MANAGE}
               onPress={onManageApplicationsPress}
             />
-          </Fragment>
+          </>
         }
       />
 

frontend/src/Settings/Applications/Applications/Application.js

@@ -57,6 +57,7 @@ class Application extends Component {
     const {
       id,
       name,
+      enable,
       syncLevel,
       fields,
       tags,
@@ -77,7 +78,7 @@ class Application extends Component {
           </div>
 
           {
-            applicationUrl ?
+            enable && applicationUrl ?
               <IconButton
                 className={styles.externalLink}
                 name={icons.EXTERNAL_LINK}
@@ -140,6 +141,7 @@ class Application extends Component {
 Application.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
+  enable: PropTypes.bool.isRequired,
   syncLevel: PropTypes.string.isRequired,
   fields: PropTypes.arrayOf(PropTypes.object).isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,

frontend/src/Settings/Applications/Applications/Manage/ManageApplicationsModalContent.tsx

@@ -213,9 +213,9 @@ function ManageApplicationsModalContent(
             selectAll={true}
             allSelected={allSelected}
             allUnselected={allUnselected}
-            onSelectAllChange={onSelectAllChange}
             sortKey={sortKey}
             sortDirection={sortDirection}
+            onSelectAllChange={onSelectAllChange}
             onSortPress={onSortPress}
           >
             <TableBody>
@@ -268,9 +268,9 @@ function ManageApplicationsModalContent(
 
       <ManageApplicationsEditModal
         isOpen={isEditModalOpen}
+        applicationIds={selectedIds}
         onModalClose={onEditModalClose}
         onSavePress={onSavePress}
-        applicationIds={selectedIds}
       />
 
       <TagsModal

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx

@@ -186,9 +186,9 @@ function ManageDownloadClientsModalContent(
             selectAll={true}
             allSelected={allSelected}
             allUnselected={allUnselected}
-            onSelectAllChange={onSelectAllChange}
             sortKey={sortKey}
             sortDirection={sortDirection}
+            onSelectAllChange={onSelectAllChange}
             onSortPress={onSortPress}
           >
             <TableBody>
@@ -233,9 +233,9 @@ function ManageDownloadClientsModalContent(
 
       <ManageDownloadClientsEditModal
         isOpen={isEditModalOpen}
+        downloadClientIds={selectedIds}
         onModalClose={onEditModalClose}
         onSavePress={onSavePress}
-        downloadClientIds={selectedIds}
       />
 
       <ConfirmModal

frontend/src/Settings/General/GeneralSettings.js

@@ -156,6 +156,7 @@ class GeneralSettings extends Component {
                 />
 
                 <LoggingSettings
+                  advancedSettings={advancedSettings}
                   settings={settings}
                   onInputChange={onInputChange}
                 />

frontend/src/Settings/General/LoggingSettings.js

@@ -15,12 +15,14 @@ const logLevelOptions = [
 
 function LoggingSettings(props) {
   const {
+    advancedSettings,
     settings,
     onInputChange
   } = props;
 
   const {
-    logLevel
+    logLevel,
+    logSizeLimit
   } = settings;
 
   return (
@@ -37,11 +39,30 @@ function LoggingSettings(props) {
           {...logLevel}
         />
       </FormGroup>
+
+      <FormGroup
+        advancedSettings={advancedSettings}
+        isAdvanced={true}
+      >
+        <FormLabel>{translate('LogSizeLimit')}</FormLabel>
+
+        <FormInputGroup
+          type={inputTypes.NUMBER}
+          name="logSizeLimit"
+          min={1}
+          max={10}
+          unit="MB"
+          helpText={translate('LogSizeLimitHelpText')}
+          onChange={onInputChange}
+          {...logSizeLimit}
+        />
+      </FormGroup>
     </FieldSet>
   );
 }
 
 LoggingSettings.propTypes = {
+  advancedSettings: PropTypes.bool.isRequired,
   settings: PropTypes.object.isRequired,
   onInputChange: PropTypes.func.isRequired
 };

frontend/src/Store/Actions/indexerActions.js

@@ -3,9 +3,13 @@ import { createAction } from 'redux-actions';
 import { filterTypePredicates, sortDirections } from 'Helpers/Props';
 import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
-import createSaveProviderHandler, { createCancelSaveProviderHandler } from 'Store/Actions/Creators/createSaveProviderHandler';
+import createSaveProviderHandler, {
+  createCancelSaveProviderHandler
+} from 'Store/Actions/Creators/createSaveProviderHandler';
 import createTestAllProvidersHandler from 'Store/Actions/Creators/createTestAllProvidersHandler';
-import createTestProviderHandler, { createCancelTestProviderHandler } from 'Store/Actions/Creators/createTestProviderHandler';
+import createTestProviderHandler, {
+  createCancelTestProviderHandler
+} from 'Store/Actions/Creators/createTestProviderHandler';
 import createSetProviderFieldValueReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValueReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import { createThunk, handleThunks } from 'Store/thunks';
@@ -16,6 +20,7 @@ import translate from 'Utilities/String/translate';
 import createBulkEditItemHandler from './Creators/createBulkEditItemHandler';
 import createBulkRemoveItemHandler from './Creators/createBulkRemoveItemHandler';
 import createHandleActions from './Creators/createHandleActions';
+import createClearReducer from './Creators/Reducers/createClearReducer';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
 
 //
@@ -95,11 +100,22 @@ export const filterPredicates = {
 };
 
 export const sortPredicates = {
-  vipExpiration: function(item) {
-    const vipExpiration =
-    item.fields.find((field) => field.name === 'vipExpiration')?.value ?? '';
+  status: function({ enable, redirect }) {
+    let result = 0;
 
-    return vipExpiration;
+    if (redirect) {
+      result++;
+    }
+
+    if (enable) {
+      result += 2;
+    }
+
+    return result;
+  },
+
+  vipExpiration: function({ fields = [] }) {
+    return fields.find((field) => field.name === 'vipExpiration')?.value ?? '';
   }
 };
 
@@ -110,6 +126,7 @@ export const FETCH_INDEXERS = 'indexers/fetchIndexers';
 export const FETCH_INDEXER_SCHEMA = 'indexers/fetchIndexerSchema';
 export const SELECT_INDEXER_SCHEMA = 'indexers/selectIndexerSchema';
 export const SET_INDEXER_SCHEMA_SORT = 'indexers/setIndexerSchemaSort';
+export const CLEAR_INDEXER_SCHEMA = 'indexers/clearIndexerSchema';
 export const CLONE_INDEXER = 'indexers/cloneIndexer';
 export const SET_INDEXER_VALUE = 'indexers/setIndexerValue';
 export const SET_INDEXER_FIELD_VALUE = 'indexers/setIndexerFieldValue';
@@ -129,6 +146,7 @@ export const fetchIndexers = createThunk(FETCH_INDEXERS);
 export const fetchIndexerSchema = createThunk(FETCH_INDEXER_SCHEMA);
 export const selectIndexerSchema = createAction(SELECT_INDEXER_SCHEMA);
 export const setIndexerSchemaSort = createAction(SET_INDEXER_SCHEMA_SORT);
+export const clearIndexerSchema = createAction(CLEAR_INDEXER_SCHEMA);
 export const cloneIndexer = createAction(CLONE_INDEXER);
 
 export const saveIndexer = createThunk(SAVE_INDEXER);
@@ -214,6 +232,8 @@ export const reducers = createHandleActions({
     });
   },
 
+  [CLEAR_INDEXER_SCHEMA]: createClearReducer(schemaSection, defaultState),
+
   [CLONE_INDEXER]: function(state, { payload }) {
     const id = payload.id;
     const newState = getSectionState(state, section);

frontend/src/Store/Actions/systemActions.js

@@ -110,7 +110,6 @@ export const defaultState = {
       {
         name: 'actions',
         columnLabel: () => translate('Actions'),
-        isSortable: true,
         isVisible: true,
         isModifiable: false
       }

frontend/src/System/Status/About/About.js

@@ -1,128 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-import FieldSet from 'Components/FieldSet';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import StartTime from './StartTime';
-import styles from './About.css';
-
-class About extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      version,
-      packageVersion,
-      packageAuthor,
-      isNetCore,
-      isDocker,
-      runtimeVersion,
-      databaseVersion,
-      databaseType,
-      migrationVersion,
-      appData,
-      startupPath,
-      mode,
-      startTime,
-      timeFormat,
-      longDateFormat
-    } = this.props;
-
-    return (
-      <FieldSet legend={translate('About')}>
-        <DescriptionList className={styles.descriptionList}>
-          <DescriptionListItem
-            title={translate('Version')}
-            data={version}
-          />
-
-          {
-            packageVersion &&
-              <DescriptionListItem
-                title={translate('PackageVersion')}
-                data={(packageAuthor ? <span> {packageVersion} {' by '} <InlineMarkdown data={packageAuthor} /> </span> : packageVersion)}
-              />
-          }
-
-          {
-            isNetCore &&
-              <DescriptionListItem
-                title={translate('NetCore')}
-                data={`Yes (${runtimeVersion})`}
-              />
-          }
-
-          {
-            isDocker &&
-              <DescriptionListItem
-                title={translate('Docker')}
-                data={'Yes'}
-              />
-          }
-
-          <DescriptionListItem
-            title={translate('Database')}
-            data={`${titleCase(databaseType)} ${databaseVersion}`}
-          />
-
-          <DescriptionListItem
-            title={translate('DatabaseMigration')}
-            data={migrationVersion}
-          />
-
-          <DescriptionListItem
-            title={translate('AppDataDirectory')}
-            data={appData}
-          />
-
-          <DescriptionListItem
-            title={translate('StartupDirectory')}
-            data={startupPath}
-          />
-
-          <DescriptionListItem
-            title={translate('Mode')}
-            data={titleCase(mode)}
-          />
-
-          <DescriptionListItem
-            title={translate('Uptime')}
-            data={
-              <StartTime
-                startTime={startTime}
-                timeFormat={timeFormat}
-                longDateFormat={longDateFormat}
-              />
-            }
-          />
-        </DescriptionList>
-      </FieldSet>
-    );
-  }
-
-}
-
-About.propTypes = {
-  version: PropTypes.string.isRequired,
-  packageVersion: PropTypes.string,
-  packageAuthor: PropTypes.string,
-  isNetCore: PropTypes.bool.isRequired,
-  runtimeVersion: PropTypes.string.isRequired,
-  isDocker: PropTypes.bool.isRequired,
-  databaseType: PropTypes.string.isRequired,
-  databaseVersion: PropTypes.string.isRequired,
-  migrationVersion: PropTypes.number.isRequired,
-  appData: PropTypes.string.isRequired,
-  startupPath: PropTypes.string.isRequired,
-  mode: PropTypes.string.isRequired,
-  startTime: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired
-};
-
-export default About;

frontend/src/System/Status/About/About.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import FieldSet from 'Components/FieldSet';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import { fetchStatus } from 'Store/Actions/systemActions';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import StartTime from './StartTime';
+import styles from './About.css';
+
+function About() {
+  const dispatch = useDispatch();
+  const { item } = useSelector((state: AppState) => state.system.status);
+
+  const {
+    version,
+    packageVersion,
+    packageAuthor,
+    isNetCore,
+    isDocker,
+    runtimeVersion,
+    databaseVersion,
+    databaseType,
+    migrationVersion,
+    appData,
+    startupPath,
+    mode,
+    startTime,
+  } = item;
+
+  useEffect(() => {
+    dispatch(fetchStatus());
+  }, [dispatch]);
+
+  return (
+    <FieldSet legend={translate('About')}>
+      <DescriptionList className={styles.descriptionList}>
+        <DescriptionListItem title={translate('Version')} data={version} />
+
+        {packageVersion && (
+          <DescriptionListItem
+            title={translate('PackageVersion')}
+            data={
+              packageAuthor ? (
+                <InlineMarkdown
+                  data={translate('PackageVersionInfo', {
+                    packageVersion,
+                    packageAuthor,
+                  })}
+                />
+              ) : (
+                packageVersion
+              )
+            }
+          />
+        )}
+
+        {isNetCore ? (
+          <DescriptionListItem
+            title={translate('NetCore')}
+            data={`Yes (${runtimeVersion})`}
+          />
+        ) : null}
+
+        {isDocker ? (
+          <DescriptionListItem title={translate('Docker')} data="Yes" />
+        ) : null}
+
+        <DescriptionListItem
+          title={translate('Database')}
+          data={`${titleCase(databaseType)} ${databaseVersion}`}
+        />
+
+        <DescriptionListItem
+          title={translate('DatabaseMigration')}
+          data={migrationVersion}
+        />
+
+        <DescriptionListItem
+          title={translate('AppDataDirectory')}
+          data={appData}
+        />
+
+        <DescriptionListItem
+          title={translate('StartupDirectory')}
+          data={startupPath}
+        />
+
+        <DescriptionListItem title={translate('Mode')} data={titleCase(mode)} />
+
+        <DescriptionListItem
+          title={translate('Uptime')}
+          data={<StartTime startTime={startTime} />}
+        />
+      </DescriptionList>
+    </FieldSet>
+  );
+}
+
+export default About;

frontend/src/System/Status/About/AboutConnector.js

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchStatus } from 'Store/Actions/systemActions';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import About from './About';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.system.status,
-    createUISettingsSelector(),
-    (status, uiSettings) => {
-      return {
-        ...status.item,
-        timeFormat: uiSettings.timeFormat,
-        longDateFormat: uiSettings.longDateFormat
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchStatus
-};
-
-class AboutConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchStatus();
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <About
-        {...this.props}
-      />
-    );
-  }
-}
-
-AboutConnector.propTypes = {
-  fetchStatus: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(AboutConnector);

frontend/src/System/Status/About/StartTime.js

@@ -1,93 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
-
-function getUptime(startTime) {
-  return formatTimeSpan(moment().diff(startTime));
-}
-
-class StartTime extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    const {
-      startTime,
-      timeFormat,
-      longDateFormat
-    } = props;
-
-    this._timeoutId = null;
-
-    this.state = {
-      uptime: getUptime(startTime),
-      startTime: formatDateTime(startTime, longDateFormat, timeFormat, { includeSeconds: true })
-    };
-  }
-
-  componentDidMount() {
-    this._timeoutId = setTimeout(this.onTimeout, 1000);
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      startTime,
-      timeFormat,
-      longDateFormat
-    } = this.props;
-
-    if (
-      startTime !== prevProps.startTime ||
-      timeFormat !== prevProps.timeFormat ||
-      longDateFormat !== prevProps.longDateFormat
-    ) {
-      this.setState({
-        uptime: getUptime(startTime),
-        startTime: formatDateTime(startTime, longDateFormat, timeFormat, { includeSeconds: true })
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    if (this._timeoutId) {
-      this._timeoutId = clearTimeout(this._timeoutId);
-    }
-  }
-
-  //
-  // Listeners
-
-  onTimeout = () => {
-    this.setState({ uptime: getUptime(this.props.startTime) });
-    this._timeoutId = setTimeout(this.onTimeout, 1000);
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      uptime,
-      startTime
-    } = this.state;
-
-    return (
-      <span title={startTime}>
-        {uptime}
-      </span>
-    );
-  }
-}
-
-StartTime.propTypes = {
-  startTime: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired
-};
-
-export default StartTime;

frontend/src/System/Status/About/StartTime.tsx

@@ -0,0 +1,44 @@
+import moment from 'moment';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+
+interface StartTimeProps {
+  startTime: string;
+}
+
+function StartTime(props: StartTimeProps) {
+  const { startTime } = props;
+  const { timeFormat, longDateFormat } = useSelector(
+    createUISettingsSelector()
+  );
+  const [time, setTime] = useState(Date.now());
+
+  const { formattedStartTime, uptime } = useMemo(() => {
+    return {
+      uptime: formatTimeSpan(moment(time).diff(startTime)),
+      formattedStartTime: formatDateTime(
+        startTime,
+        longDateFormat,
+        timeFormat,
+        {
+          includeSeconds: true,
+        }
+      ),
+    };
+  }, [startTime, time, longDateFormat, timeFormat]);
+
+  useEffect(() => {
+    const interval = setInterval(() => setTime(Date.now()), 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [setTime]);
+
+  return <span title={formattedStartTime}>{uptime}</span>;
+}
+
+export default StartTime;

frontend/src/System/Status/Donations/Donations.js

@@ -1,64 +0,0 @@
-import React, { Component } from 'react';
-import FieldSet from 'Components/FieldSet';
-import Link from 'Components/Link/Link';
-import translate from 'Utilities/String/translate';
-import styles from '../styles.css';
-
-class Donations extends Component {
-
-  //
-  // Render
-
-  render() {
-    return (
-      <FieldSet legend={translate('Donations')}>
-        <div className={styles.logoContainer} title="Radarr">
-          <Link to="https://radarr.video/donate">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-radarr.png`}
-            />
-          </Link>
-        </div>
-        <div className={styles.logoContainer} title="Lidarr">
-          <Link to="https://lidarr.audio/donate">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-lidarr.png`}
-            />
-          </Link>
-        </div>
-        <div className={styles.logoContainer} title="Readarr">
-          <Link to="https://readarr.com/donate">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-readarr.png`}
-            />
-          </Link>
-        </div>
-        <div className={styles.logoContainer} title="Prowlarr">
-          <Link to="https://prowlarr.com/donate">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-prowlarr.png`}
-            />
-          </Link>
-        </div>
-        <div className={styles.logoContainer} title="Sonarr">
-          <Link to="https://opencollective.com/sonarr">
-            <img
-              className={styles.logo}
-              src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-sonarr.png`}
-            />
-          </Link>
-        </div>
-      </FieldSet>
-    );
-  }
-}
-
-Donations.propTypes = {
-
-};
-
-export default Donations;

frontend/src/System/Status/Donations/Donations.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import FieldSet from 'Components/FieldSet';
+import Link from 'Components/Link/Link';
+import translate from 'Utilities/String/translate';
+import styles from '../styles.css';
+
+function Donations() {
+  return (
+    <FieldSet legend={translate('Donations')}>
+      <div className={styles.logoContainer} title="Radarr">
+        <Link to="https://radarr.video/donate">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-radarr.png`}
+          />
+        </Link>
+      </div>
+
+      <div className={styles.logoContainer} title="Lidarr">
+        <Link to="https://lidarr.audio/donate">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-lidarr.png`}
+          />
+        </Link>
+      </div>
+
+      <div className={styles.logoContainer} title="Readarr">
+        <Link to="https://readarr.com/donate">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-readarr.png`}
+          />
+        </Link>
+      </div>
+
+      <div className={styles.logoContainer} title="Prowlarr">
+        <Link to="https://prowlarr.com/donate">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-prowlarr.png`}
+          />
+        </Link>
+      </div>
+
+      <div className={styles.logoContainer} title="Sonarr">
+        <Link to="https://opencollective.com/sonarr">
+          <img
+            className={styles.logo}
+            src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-sonarr.png`}
+          />
+        </Link>
+      </div>
+    </FieldSet>
+  );
+}
+
+export default Donations;

frontend/src/System/Status/Health/Health.js

@@ -1,250 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import FieldSet from 'Components/FieldSet';
-import Icon from 'Components/Icon';
-import IconButton from 'Components/Link/IconButton';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
-import titleCase from 'Utilities/String/titleCase';
-import translate from 'Utilities/String/translate';
-import styles from './Health.css';
-
-function getInternalLink(source) {
-  switch (source) {
-    case 'ApplicationStatusCheck':
-    case 'ApplicationLongTermStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/applications"
-        />
-      );
-    case 'DownloadClientStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/downloadclients"
-        />
-      );
-    case 'NotificationStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/connect"
-        />
-      );
-    case 'IndexerProxyStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/indexers"
-        />
-      );
-    case 'IndexerRssCheck':
-    case 'IndexerSearchCheck':
-    case 'IndexerStatusCheck':
-    case 'IndexerLongTermStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/"
-        />
-      );
-    case 'UpdateCheck':
-      return (
-        <IconButton
-          name={icons.UPDATE}
-          title={translate('Updates')}
-          to="/system/updates"
-        />
-      );
-    default:
-      return;
-  }
-}
-
-function getTestLink(source, props) {
-  switch (source) {
-    case 'ApplicationStatusCheck':
-    case 'ApplicationLongTermStatusCheck':
-      return (
-        <SpinnerIconButton
-          name={icons.TEST}
-          title={translate('TestAll')}
-          isSpinning={props.isTestingAllApplications}
-          onPress={props.dispatchTestAllApplications}
-        />
-      );
-    case 'DownloadClientStatusCheck':
-      return (
-        <SpinnerIconButton
-          name={icons.TEST}
-          title={translate('TestAll')}
-          isSpinning={props.isTestingAllDownloadClients}
-          onPress={props.dispatchTestAllDownloadClients}
-        />
-      );
-    case 'IndexerStatusCheck':
-    case 'IndexerLongTermStatusCheck':
-      return (
-        <SpinnerIconButton
-          name={icons.TEST}
-          title={translate('TestAll')}
-          isSpinning={props.isTestingAllIndexers}
-          onPress={props.dispatchTestAllIndexers}
-        />
-      );
-    default:
-      break;
-  }
-}
-
-const columns = [
-  {
-    className: styles.status,
-    name: 'type',
-    isVisible: true
-  },
-  {
-    name: 'message',
-    label: () => translate('Message'),
-    isVisible: true
-  },
-  {
-    name: 'actions',
-    label: () => translate('Actions'),
-    isVisible: true
-  }
-];
-
-class Health extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      isFetching,
-      isPopulated,
-      items
-    } = this.props;
-
-    const healthIssues = !!items.length;
-
-    return (
-      <FieldSet
-        legend={
-          <div className={styles.legend}>
-            {translate('Health')}
-
-            {
-              isFetching && isPopulated &&
-                <LoadingIndicator
-                  className={styles.loading}
-                  size={20}
-                />
-            }
-          </div>
-        }
-      >
-        {
-          isFetching && !isPopulated &&
-            <LoadingIndicator />
-        }
-
-        {
-          !healthIssues &&
-            <div className={styles.healthOk}>
-              {translate('HealthNoIssues')}
-            </div>
-        }
-
-        {
-          healthIssues &&
-            <Table
-              columns={columns}
-            >
-              <TableBody>
-                {
-                  items.map((item) => {
-                    const internalLink = getInternalLink(item.source);
-                    const testLink = getTestLink(item.source, this.props);
-
-                    let kind = kinds.WARNING;
-                    switch (item.type.toLowerCase()) {
-                      case 'error':
-                        kind = kinds.DANGER;
-                        break;
-                      default:
-                      case 'warning':
-                        kind = kinds.WARNING;
-                        break;
-                      case 'notice':
-                        kind = kinds.INFO;
-                        break;
-                    }
-
-                    return (
-                      <TableRow key={`health${item.message}`}>
-                        <TableRowCell>
-                          <Icon
-                            name={icons.DANGER}
-                            kind={kind}
-                            title={titleCase(item.type)}
-                          />
-                        </TableRowCell>
-
-                        <TableRowCell>{item.message}</TableRowCell>
-
-                        <TableRowCell className={styles.actions}>
-                          <IconButton
-                            name={icons.WIKI}
-                            to={item.wikiUrl}
-                            title={translate('ReadTheWikiForMoreInformation')}
-                          />
-
-                          {
-                            internalLink
-                          }
-
-                          {
-                            !!testLink &&
-                              testLink
-                          }
-                        </TableRowCell>
-                      </TableRow>
-                    );
-                  })
-                }
-              </TableBody>
-            </Table>
-        }
-      </FieldSet>
-    );
-  }
-
-}
-
-Health.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  items: PropTypes.array.isRequired,
-  isTestingAllApplications: PropTypes.bool.isRequired,
-  isTestingAllDownloadClients: PropTypes.bool.isRequired,
-  isTestingAllIndexers: PropTypes.bool.isRequired,
-  dispatchTestAllApplications: PropTypes.func.isRequired,
-  dispatchTestAllDownloadClients: PropTypes.func.isRequired,
-  dispatchTestAllIndexers: PropTypes.func.isRequired
-};
-
-export default Health;

frontend/src/System/Status/Health/Health.tsx

@@ -0,0 +1,191 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Column from 'Components/Table/Column';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableRow from 'Components/Table/TableRow';
+import { icons, kinds } from 'Helpers/Props';
+import { testAllIndexers } from 'Store/Actions/indexerActions';
+import {
+  testAllApplications,
+  testAllDownloadClients,
+} from 'Store/Actions/settingsActions';
+import { fetchHealth } from 'Store/Actions/systemActions';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import createHealthSelector from './createHealthSelector';
+import HealthItemLink from './HealthItemLink';
+import styles from './Health.css';
+
+const columns: Column[] = [
+  {
+    className: styles.status,
+    name: 'type',
+    label: '',
+    isVisible: true,
+  },
+  {
+    name: 'message',
+    label: () => translate('Message'),
+    isVisible: true,
+  },
+  {
+    name: 'actions',
+    label: () => translate('Actions'),
+    isVisible: true,
+  },
+];
+
+function Health() {
+  const dispatch = useDispatch();
+  const { isFetching, isPopulated, items } = useSelector(
+    createHealthSelector()
+  );
+  const isTestingAllApplications = useSelector(
+    (state: AppState) => state.settings.applications.isTestingAll
+  );
+  const isTestingAllDownloadClients = useSelector(
+    (state: AppState) => state.settings.downloadClients.isTestingAll
+  );
+  const isTestingAllIndexers = useSelector(
+    (state: AppState) => state.indexers.isTestingAll
+  );
+
+  const healthIssues = !!items.length;
+
+  const handleTestAllApplicationsPress = useCallback(() => {
+    dispatch(testAllApplications());
+  }, [dispatch]);
+
+  const handleTestAllDownloadClientsPress = useCallback(() => {
+    dispatch(testAllDownloadClients());
+  }, [dispatch]);
+
+  const handleTestAllIndexersPress = useCallback(() => {
+    dispatch(testAllIndexers());
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(fetchHealth());
+  }, [dispatch]);
+
+  return (
+    <FieldSet
+      legend={
+        <div className={styles.legend}>
+          {translate('Health')}
+
+          {isFetching && isPopulated ? (
+            <LoadingIndicator className={styles.loading} size={20} />
+          ) : null}
+        </div>
+      }
+    >
+      {isFetching && !isPopulated ? <LoadingIndicator /> : null}
+
+      {isPopulated && !healthIssues ? (
+        <div className={styles.healthOk}>
+          {translate('NoIssuesWithYourConfiguration')}
+        </div>
+      ) : null}
+
+      {healthIssues ? (
+        <>
+          <Table columns={columns}>
+            <TableBody>
+              {items.map((item) => {
+                const source = item.source;
+
+                let kind = kinds.WARNING;
+                switch (item.type.toLowerCase()) {
+                  case 'error':
+                    kind = kinds.DANGER;
+                    break;
+                  default:
+                  case 'warning':
+                    kind = kinds.WARNING;
+                    break;
+                  case 'notice':
+                    kind = kinds.INFO;
+                    break;
+                }
+
+                return (
+                  <TableRow key={`health${item.message}`}>
+                    <TableRowCell>
+                      <Icon
+                        name={icons.DANGER}
+                        kind={kind}
+                        title={titleCase(item.type)}
+                      />
+                    </TableRowCell>
+
+                    <TableRowCell>{item.message}</TableRowCell>
+
+                    <TableRowCell>
+                      <IconButton
+                        name={icons.WIKI}
+                        to={item.wikiUrl}
+                        title={translate('ReadTheWikiForMoreInformation')}
+                      />
+
+                      <HealthItemLink source={source} />
+
+                      {source === 'ApplicationStatusCheck' ||
+                      source === 'ApplicationLongTermStatusCheck' ? (
+                        <SpinnerIconButton
+                          name={icons.TEST}
+                          title={translate('TestAll')}
+                          isSpinning={isTestingAllApplications}
+                          onPress={handleTestAllApplicationsPress}
+                        />
+                      ) : null}
+
+                      {source === 'IndexerStatusCheck' ||
+                      source === 'IndexerLongTermStatusCheck' ? (
+                        <SpinnerIconButton
+                          name={icons.TEST}
+                          title={translate('TestAll')}
+                          isSpinning={isTestingAllIndexers}
+                          onPress={handleTestAllIndexersPress}
+                        />
+                      ) : null}
+
+                      {source === 'DownloadClientStatusCheck' ? (
+                        <SpinnerIconButton
+                          name={icons.TEST}
+                          title={translate('TestAll')}
+                          isSpinning={isTestingAllDownloadClients}
+                          onPress={handleTestAllDownloadClientsPress}
+                        />
+                      ) : null}
+                    </TableRowCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+
+          <Alert kind={kinds.INFO}>
+            <InlineMarkdown
+              data={translate('HealthMessagesInfoBox', {
+                link: '/system/logs/files',
+              })}
+            />
+          </Alert>
+        </>
+      ) : null}
+    </FieldSet>
+  );
+}
+
+export default Health;

frontend/src/System/Status/Health/HealthConnector.js

@@ -1,74 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { testAllIndexers } from 'Store/Actions/indexerActions';
-import { testAllApplications } from 'Store/Actions/Settings/applications';
-import { testAllDownloadClients } from 'Store/Actions/Settings/downloadClients';
-import { fetchHealth } from 'Store/Actions/systemActions';
-import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
-import Health from './Health';
-
-function createMapStateToProps() {
-  return createSelector(
-    createHealthCheckSelector(),
-    (state) => state.system.health,
-    (state) => state.settings.applications.isTestingAll,
-    (state) => state.settings.downloadClients.isTestingAll,
-    (state) => state.indexers.isTestingAll,
-    (items, health, isTestingAllApplications, isTestingAllDownloadClients, isTestingAllIndexers) => {
-      const {
-        isFetching,
-        isPopulated
-      } = health;
-
-      return {
-        isFetching,
-        isPopulated,
-        items,
-        isTestingAllApplications,
-        isTestingAllDownloadClients,
-        isTestingAllIndexers
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchFetchHealth: fetchHealth,
-  dispatchTestAllApplications: testAllApplications,
-  dispatchTestAllDownloadClients: testAllDownloadClients,
-  dispatchTestAllIndexers: testAllIndexers
-};
-
-class HealthConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchHealth();
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchFetchHealth,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Health
-        {...otherProps}
-      />
-    );
-  }
-}
-
-HealthConnector.propTypes = {
-  dispatchFetchHealth: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(HealthConnector);

frontend/src/System/Status/Health/HealthItemLink.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+interface HealthItemLinkProps {
+  source: string;
+}
+
+function HealthItemLink(props: HealthItemLinkProps) {
+  const { source } = props;
+
+  switch (source) {
+    case 'ApplicationStatusCheck':
+    case 'ApplicationLongTermStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/applications"
+        />
+      );
+    case 'DownloadClientStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/downloadclients"
+        />
+      );
+    case 'NotificationStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/connect"
+        />
+      );
+    case 'IndexerProxyStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/indexers"
+        />
+      );
+    case 'IndexerRssCheck':
+    case 'IndexerSearchCheck':
+    case 'IndexerStatusCheck':
+    case 'IndexerLongTermStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/"
+        />
+      );
+    case 'UpdateCheck':
+      return (
+        <IconButton
+          name={icons.UPDATE}
+          title={translate('Updates')}
+          to="/system/updates"
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+export default HealthItemLink;

frontend/src/System/Status/Health/HealthStatus.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useMemo } 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 { fetchHealth } from 'Store/Actions/systemActions';
+import createHealthSelector from './createHealthSelector';
+
+function HealthStatus() {
+  const dispatch = useDispatch();
+  const { isConnected, isReconnecting } = useSelector(
+    (state: AppState) => state.app
+  );
+  const { isPopulated, items } = useSelector(createHealthSelector());
+
+  const wasReconnecting = usePrevious(isReconnecting);
+
+  const { count, errors, warnings } = useMemo(() => {
+    let errors = false;
+    let warnings = false;
+
+    items.forEach((item) => {
+      if (item.type === 'error') {
+        errors = true;
+      }
+
+      if (item.type === 'warning') {
+        warnings = true;
+      }
+    });
+
+    return {
+      count: items.length,
+      errors,
+      warnings,
+    };
+  }, [items]);
+
+  useEffect(() => {
+    if (!isPopulated) {
+      dispatch(fetchHealth());
+    }
+  }, [isPopulated, dispatch]);
+
+  useEffect(() => {
+    if (isConnected && wasReconnecting) {
+      dispatch(fetchHealth());
+    }
+  }, [isConnected, wasReconnecting, dispatch]);
+
+  return (
+    <PageSidebarStatus count={count} errors={errors} warnings={warnings} />
+  );
+}
+
+export default HealthStatus;

frontend/src/System/Status/Health/HealthStatusConnector.js

@@ -1,81 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
-import { fetchHealth } from 'Store/Actions/systemActions';
-import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app,
-    createHealthCheckSelector(),
-    (state) => state.system.health,
-    (app, items, health) => {
-      const count = items.length;
-      let errors = false;
-      let warnings = false;
-
-      items.forEach((item) => {
-        if (item.type === 'error') {
-          errors = true;
-        }
-
-        if (item.type === 'warning') {
-          warnings = true;
-        }
-      });
-
-      return {
-        isConnected: app.isConnected,
-        isReconnecting: app.isReconnecting,
-        isPopulated: health.isPopulated,
-        count,
-        errors,
-        warnings
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchHealth
-};
-
-class HealthStatusConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    if (!this.props.isPopulated) {
-      this.props.fetchHealth();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.isConnected && prevProps.isReconnecting) {
-      this.props.fetchHealth();
-    }
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <PageSidebarStatus
-        {...this.props}
-      />
-    );
-  }
-}
-
-HealthStatusConnector.propTypes = {
-  isConnected: PropTypes.bool.isRequired,
-  isReconnecting: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  fetchHealth: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(HealthStatusConnector);

frontend/src/System/Status/Health/createHealthSelector.ts

@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createHealthSelector() {
+  return createSelector(
+    (state: AppState) => state.system.health,
+    (health) => {
+      return health;
+    }
+  );
+}
+
+export default createHealthSelector;

frontend/src/System/Status/MoreInfo/MoreInfo.js

@@ -1,58 +0,0 @@
-import React, { Component } from 'react';
-import DescriptionList from 'Components/DescriptionList/DescriptionList';
-import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
-import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
-import FieldSet from 'Components/FieldSet';
-import Link from 'Components/Link/Link';
-import translate from 'Utilities/String/translate';
-
-class MoreInfo extends Component {
-
-  //
-  // Render
-
-  render() {
-    return (
-      <FieldSet legend={translate('MoreInfo')}>
-        <DescriptionList>
-          <DescriptionListItemTitle>{translate('HomePage')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://prowlarr.com/">prowlarr.com</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('Wiki')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://wiki.servarr.com/prowlarr">wiki.servarr.com/prowlarr</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('Reddit')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://reddit.com/r/prowlarr">r/prowlarr</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('Discord')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://prowlarr.com/discord">prowlarr.com/discord</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('Source')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://github.com/Prowlarr/Prowlarr/">github.com/Prowlarr/Prowlarr</Link>
-          </DescriptionListItemDescription>
-
-          <DescriptionListItemTitle>{translate('FeatureRequests')}</DescriptionListItemTitle>
-          <DescriptionListItemDescription>
-            <Link to="https://github.com/Prowlarr/Prowlarr/issues">github.com/Prowlarr/Prowlarr/issues</Link>
-          </DescriptionListItemDescription>
-
-        </DescriptionList>
-      </FieldSet>
-    );
-  }
-}
-
-MoreInfo.propTypes = {
-
-};
-
-export default MoreInfo;

frontend/src/System/Status/MoreInfo/MoreInfo.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
+import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
+import FieldSet from 'Components/FieldSet';
+import Link from 'Components/Link/Link';
+import translate from 'Utilities/String/translate';
+
+function MoreInfo() {
+  return (
+    <FieldSet legend={translate('MoreInfo')}>
+      <DescriptionList>
+        <DescriptionListItemTitle>
+          {translate('HomePage')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://prowlarr.com/">prowlarr.com</Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>{translate('Wiki')}</DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://wiki.servarr.com/prowlarr">
+            wiki.servarr.com/prowlarr
+          </Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>
+          {translate('Reddit')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://reddit.com/r/prowlarr">r/prowlarr</Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>
+          {translate('Discord')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://prowlarr.com/discord">prowlarr.com/discord</Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>
+          {translate('Source')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://github.com/Prowlarr/Prowlarr/">
+            github.com/Prowlarr/Prowlarr
+          </Link>
+        </DescriptionListItemDescription>
+
+        <DescriptionListItemTitle>
+          {translate('FeatureRequests')}
+        </DescriptionListItemTitle>
+        <DescriptionListItemDescription>
+          <Link to="https://github.com/Prowlarr/Prowlarr/issues">
+            github.com/Prowlarr/Prowlarr/issues
+          </Link>
+        </DescriptionListItemDescription>
+      </DescriptionList>
+    </FieldSet>
+  );
+}
+
+export default MoreInfo;

frontend/src/System/Status/Status.js

@@ -1,30 +0,0 @@
-import React, { Component } from 'react';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import translate from 'Utilities/String/translate';
-import AboutConnector from './About/AboutConnector';
-import Donations from './Donations/Donations';
-import HealthConnector from './Health/HealthConnector';
-import MoreInfo from './MoreInfo/MoreInfo';
-
-class Status extends Component {
-
-  //
-  // Render
-
-  render() {
-    return (
-      <PageContent title={translate('Status')}>
-        <PageContentBody>
-          <HealthConnector />
-          <AboutConnector />
-          <MoreInfo />
-          <Donations />
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-
-}
-
-export default Status;

frontend/src/System/Status/Status.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import translate from 'Utilities/String/translate';
+import About from './About/About';
+import Donations from './Donations/Donations';
+import Health from './Health/Health';
+import MoreInfo from './MoreInfo/MoreInfo';
+
+function Status() {
+  return (
+    <PageContent title={translate('Status')}>
+      <PageContentBody>
+        <Health />
+        <About />
+        <MoreInfo />
+        <Donations />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default Status;

frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.js

@@ -1,203 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableRow from 'Components/Table/TableRow';
-import { icons } from 'Helpers/Props';
-import formatDate from 'Utilities/Date/formatDate';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
-import styles from './ScheduledTaskRow.css';
-
-function getFormattedDates(props) {
-  const {
-    lastExecution,
-    nextExecution,
-    interval,
-    showRelativeDates,
-    shortDateFormat
-  } = props;
-
-  const isDisabled = interval === 0;
-
-  if (showRelativeDates) {
-    return {
-      lastExecutionTime: moment(lastExecution).fromNow(),
-      nextExecutionTime: isDisabled ? '-' : moment(nextExecution).fromNow()
-    };
-  }
-
-  return {
-    lastExecutionTime: formatDate(lastExecution, shortDateFormat),
-    nextExecutionTime: isDisabled ? '-' : formatDate(nextExecution, shortDateFormat)
-  };
-}
-
-class ScheduledTaskRow extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = getFormattedDates(props);
-
-    this._updateTimeoutId = null;
-  }
-
-  componentDidMount() {
-    this.setUpdateTimer();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      lastExecution,
-      nextExecution
-    } = this.props;
-
-    if (
-      lastExecution !== prevProps.lastExecution ||
-      nextExecution !== prevProps.nextExecution
-    ) {
-      this.setState(getFormattedDates(this.props));
-    }
-  }
-
-  componentWillUnmount() {
-    if (this._updateTimeoutId) {
-      this._updateTimeoutId = clearTimeout(this._updateTimeoutId);
-    }
-  }
-
-  //
-  // Listeners
-
-  setUpdateTimer() {
-    const { interval } = this.props;
-    const timeout = interval < 60 ? 10000 : 60000;
-
-    this._updateTimeoutId = setTimeout(() => {
-      this.setState(getFormattedDates(this.props));
-      this.setUpdateTimer();
-    }, timeout);
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      name,
-      interval,
-      lastExecution,
-      lastStartTime,
-      lastDuration,
-      nextExecution,
-      isQueued,
-      isExecuting,
-      longDateFormat,
-      timeFormat,
-      onExecutePress
-    } = this.props;
-
-    const {
-      lastExecutionTime,
-      nextExecutionTime
-    } = this.state;
-
-    const isDisabled = interval === 0;
-    const executeNow = !isDisabled && moment().isAfter(nextExecution);
-    const hasNextExecutionTime = !isDisabled && !executeNow;
-    const duration = moment.duration(interval, 'minutes').humanize().replace(/an?(?=\s)/, '1');
-    const hasLastStartTime = moment(lastStartTime).isAfter('2010-01-01');
-
-    return (
-      <TableRow>
-        <TableRowCell>{name}</TableRowCell>
-        <TableRowCell
-          className={styles.interval}
-        >
-          {isDisabled ? 'disabled' : duration}
-        </TableRowCell>
-
-        <TableRowCell
-          className={styles.lastExecution}
-          title={formatDateTime(lastExecution, longDateFormat, timeFormat)}
-        >
-          {lastExecutionTime}
-        </TableRowCell>
-
-        {
-          !hasLastStartTime &&
-            <TableRowCell className={styles.lastDuration}>-</TableRowCell>
-        }
-
-        {
-          hasLastStartTime &&
-            <TableRowCell
-              className={styles.lastDuration}
-              title={lastDuration}
-            >
-              {formatTimeSpan(lastDuration)}
-            </TableRowCell>
-        }
-
-        {
-          isDisabled &&
-            <TableRowCell className={styles.nextExecution}>-</TableRowCell>
-        }
-
-        {
-          executeNow && isQueued &&
-            <TableRowCell className={styles.nextExecution}>queued</TableRowCell>
-        }
-
-        {
-          executeNow && !isQueued &&
-            <TableRowCell className={styles.nextExecution}>now</TableRowCell>
-        }
-
-        {
-          hasNextExecutionTime &&
-            <TableRowCell
-              className={styles.nextExecution}
-              title={formatDateTime(nextExecution, longDateFormat, timeFormat, { includeSeconds: true })}
-            >
-              {nextExecutionTime}
-            </TableRowCell>
-        }
-
-        <TableRowCell
-          className={styles.actions}
-        >
-          <SpinnerIconButton
-            name={icons.REFRESH}
-            spinningName={icons.REFRESH}
-            isSpinning={isExecuting}
-            onPress={onExecutePress}
-          />
-        </TableRowCell>
-      </TableRow>
-    );
-  }
-}
-
-ScheduledTaskRow.propTypes = {
-  name: PropTypes.string.isRequired,
-  interval: PropTypes.number.isRequired,
-  lastExecution: PropTypes.string.isRequired,
-  lastStartTime: PropTypes.string.isRequired,
-  lastDuration: PropTypes.string.isRequired,
-  nextExecution: PropTypes.string.isRequired,
-  isQueued: PropTypes.bool.isRequired,
-  isExecuting: PropTypes.bool.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  onExecutePress: PropTypes.func.isRequired
-};
-
-export default ScheduledTaskRow;

frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.tsx

@@ -0,0 +1,170 @@
+import moment from 'moment';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRow from 'Components/Table/TableRow';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { icons } from 'Helpers/Props';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchTask } from 'Store/Actions/systemActions';
+import createCommandSelector from 'Store/Selectors/createCommandSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { isCommandExecuting } from 'Utilities/Command';
+import formatDate from 'Utilities/Date/formatDate';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import styles from './ScheduledTaskRow.css';
+
+interface ScheduledTaskRowProps {
+  id: number;
+  taskName: string;
+  name: string;
+  interval: number;
+  lastExecution: string;
+  lastStartTime: string;
+  lastDuration: string;
+  nextExecution: string;
+}
+
+function ScheduledTaskRow(props: ScheduledTaskRowProps) {
+  const {
+    id,
+    taskName,
+    name,
+    interval,
+    lastExecution,
+    lastStartTime,
+    lastDuration,
+    nextExecution,
+  } = props;
+
+  const dispatch = useDispatch();
+
+  const { showRelativeDates, longDateFormat, shortDateFormat, timeFormat } =
+    useSelector(createUISettingsSelector());
+  const command = useSelector(createCommandSelector(taskName));
+
+  const [time, setTime] = useState(Date.now());
+
+  const isQueued = !!(command && command.status === 'queued');
+  const isExecuting = isCommandExecuting(command);
+  const wasExecuting = usePrevious(isExecuting);
+  const isDisabled = interval === 0;
+  const executeNow = !isDisabled && moment().isAfter(nextExecution);
+  const hasNextExecutionTime = !isDisabled && !executeNow;
+  const hasLastStartTime = moment(lastStartTime).isAfter('2010-01-01');
+
+  const duration = useMemo(() => {
+    return moment
+      .duration(interval, 'minutes')
+      .humanize()
+      .replace(/an?(?=\s)/, '1');
+  }, [interval]);
+
+  const { lastExecutionTime, nextExecutionTime } = useMemo(() => {
+    const isDisabled = interval === 0;
+
+    if (showRelativeDates && time) {
+      return {
+        lastExecutionTime: moment(lastExecution).fromNow(),
+        nextExecutionTime: isDisabled ? '-' : moment(nextExecution).fromNow(),
+      };
+    }
+
+    return {
+      lastExecutionTime: formatDate(lastExecution, shortDateFormat),
+      nextExecutionTime: isDisabled
+        ? '-'
+        : formatDate(nextExecution, shortDateFormat),
+    };
+  }, [
+    time,
+    interval,
+    lastExecution,
+    nextExecution,
+    showRelativeDates,
+    shortDateFormat,
+  ]);
+
+  const handleExecutePress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: taskName,
+      })
+    );
+  }, [taskName, dispatch]);
+
+  useEffect(() => {
+    if (!isExecuting && wasExecuting) {
+      setTimeout(() => {
+        dispatch(fetchTask({ id }));
+      }, 1000);
+    }
+  }, [id, isExecuting, wasExecuting, dispatch]);
+
+  useEffect(() => {
+    const interval = setInterval(() => setTime(Date.now()), 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [setTime]);
+
+  return (
+    <TableRow>
+      <TableRowCell>{name}</TableRowCell>
+      <TableRowCell className={styles.interval}>
+        {isDisabled ? 'disabled' : duration}
+      </TableRowCell>
+
+      <TableRowCell
+        className={styles.lastExecution}
+        title={formatDateTime(lastExecution, longDateFormat, timeFormat)}
+      >
+        {lastExecutionTime}
+      </TableRowCell>
+
+      {hasLastStartTime ? (
+        <TableRowCell className={styles.lastDuration} title={lastDuration}>
+          {formatTimeSpan(lastDuration)}
+        </TableRowCell>
+      ) : (
+        <TableRowCell className={styles.lastDuration}>-</TableRowCell>
+      )}
+
+      {isDisabled ? (
+        <TableRowCell className={styles.nextExecution}>-</TableRowCell>
+      ) : null}
+
+      {executeNow && isQueued ? (
+        <TableRowCell className={styles.nextExecution}>queued</TableRowCell>
+      ) : null}
+
+      {executeNow && !isQueued ? (
+        <TableRowCell className={styles.nextExecution}>now</TableRowCell>
+      ) : null}
+
+      {hasNextExecutionTime ? (
+        <TableRowCell
+          className={styles.nextExecution}
+          title={formatDateTime(nextExecution, longDateFormat, timeFormat, {
+            includeSeconds: true,
+          })}
+        >
+          {nextExecutionTime}
+        </TableRowCell>
+      ) : null}
+
+      <TableRowCell className={styles.actions}>
+        <SpinnerIconButton
+          name={icons.REFRESH}
+          spinningName={icons.REFRESH}
+          isSpinning={isExecuting}
+          onPress={handleExecutePress}
+        />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+export default ScheduledTaskRow;

frontend/src/System/Tasks/Scheduled/ScheduledTaskRowConnector.js

@@ -1,92 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchTask } from 'Store/Actions/systemActions';
-import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import { findCommand, isCommandExecuting } from 'Utilities/Command';
-import ScheduledTaskRow from './ScheduledTaskRow';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state, { taskName }) => taskName,
-    createCommandsSelector(),
-    createUISettingsSelector(),
-    (taskName, commands, uiSettings) => {
-      const command = findCommand(commands, { name: taskName });
-
-      return {
-        isQueued: !!(command && command.state === 'queued'),
-        isExecuting: isCommandExecuting(command),
-        showRelativeDates: uiSettings.showRelativeDates,
-        shortDateFormat: uiSettings.shortDateFormat,
-        longDateFormat: uiSettings.longDateFormat,
-        timeFormat: uiSettings.timeFormat
-      };
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  const taskName = props.taskName;
-
-  return {
-    dispatchFetchTask() {
-      dispatch(fetchTask({
-        id: props.id
-      }));
-    },
-
-    onExecutePress() {
-      dispatch(executeCommand({
-        name: taskName
-      }));
-    }
-  };
-}
-
-class ScheduledTaskRowConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidUpdate(prevProps) {
-    const {
-      isExecuting,
-      dispatchFetchTask
-    } = this.props;
-
-    if (!isExecuting && prevProps.isExecuting) {
-      // Give the host a moment to update after the command completes
-      setTimeout(() => {
-        dispatchFetchTask();
-      }, 1000);
-    }
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchFetchTask,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <ScheduledTaskRow
-        {...otherProps}
-      />
-    );
-  }
-}
-
-ScheduledTaskRowConnector.propTypes = {
-  id: PropTypes.number.isRequired,
-  isExecuting: PropTypes.bool.isRequired,
-  dispatchFetchTask: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(ScheduledTaskRowConnector);

frontend/src/System/Tasks/Scheduled/ScheduledTasks.js

@@ -1,85 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import FieldSet from 'Components/FieldSet';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import translate from 'Utilities/String/translate';
-import ScheduledTaskRowConnector from './ScheduledTaskRowConnector';
-
-const columns = [
-  {
-    name: 'name',
-    label: () => translate('Name'),
-    isVisible: true
-  },
-  {
-    name: 'interval',
-    label: () => translate('Interval'),
-    isVisible: true
-  },
-  {
-    name: 'lastExecution',
-    label: () => translate('LastExecution'),
-    isVisible: true
-  },
-  {
-    name: 'lastDuration',
-    label: () => translate('LastDuration'),
-    isVisible: true
-  },
-  {
-    name: 'nextExecution',
-    label: () => translate('NextExecution'),
-    isVisible: true
-  },
-  {
-    name: 'actions',
-    isVisible: true
-  }
-];
-
-function ScheduledTasks(props) {
-  const {
-    isFetching,
-    isPopulated,
-    items
-  } = props;
-
-  return (
-    <FieldSet legend={translate('Scheduled')}>
-      {
-        isFetching && !isPopulated &&
-          <LoadingIndicator />
-      }
-
-      {
-        isPopulated &&
-          <Table
-            columns={columns}
-          >
-            <TableBody>
-              {
-                items.map((item) => {
-                  return (
-                    <ScheduledTaskRowConnector
-                      key={item.id}
-                      {...item}
-                    />
-                  );
-                })
-              }
-            </TableBody>
-          </Table>
-      }
-    </FieldSet>
-  );
-}
-
-ScheduledTasks.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  items: PropTypes.array.isRequired
-};
-
-export default ScheduledTasks;

frontend/src/System/Tasks/Scheduled/ScheduledTasks.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import FieldSet from 'Components/FieldSet';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Column from 'Components/Table/Column';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { fetchTasks } from 'Store/Actions/systemActions';
+import translate from 'Utilities/String/translate';
+import ScheduledTaskRow from './ScheduledTaskRow';
+
+const columns: Column[] = [
+  {
+    name: 'name',
+    label: () => translate('Name'),
+    isVisible: true,
+  },
+  {
+    name: 'interval',
+    label: () => translate('Interval'),
+    isVisible: true,
+  },
+  {
+    name: 'lastExecution',
+    label: () => translate('LastExecution'),
+    isVisible: true,
+  },
+  {
+    name: 'lastDuration',
+    label: () => translate('LastDuration'),
+    isVisible: true,
+  },
+  {
+    name: 'nextExecution',
+    label: () => translate('NextExecution'),
+    isVisible: true,
+  },
+  {
+    name: 'actions',
+    label: '',
+    isVisible: true,
+  },
+];
+
+function ScheduledTasks() {
+  const dispatch = useDispatch();
+  const { isFetching, isPopulated, items } = useSelector(
+    (state: AppState) => state.system.tasks
+  );
+
+  useEffect(() => {
+    dispatch(fetchTasks());
+  }, [dispatch]);
+
+  return (
+    <FieldSet legend={translate('Scheduled')}>
+      {isFetching && !isPopulated && <LoadingIndicator />}
+
+      {isPopulated && (
+        <Table columns={columns}>
+          <TableBody>
+            {items.map((item) => {
+              return <ScheduledTaskRow key={item.id} {...item} />;
+            })}
+          </TableBody>
+        </Table>
+      )}
+    </FieldSet>
+  );
+}
+
+export default ScheduledTasks;

frontend/src/System/Tasks/Scheduled/ScheduledTasksConnector.js

@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchTasks } from 'Store/Actions/systemActions';
-import ScheduledTasks from './ScheduledTasks';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.system.tasks,
-    (tasks) => {
-      return tasks;
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchFetchTasks: fetchTasks
-};
-
-class ScheduledTasksConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchTasks();
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <ScheduledTasks
-        {...this.props}
-      />
-    );
-  }
-}
-
-ScheduledTasksConnector.propTypes = {
-  dispatchFetchTasks: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(ScheduledTasksConnector);

frontend/src/System/Tasks/Tasks.tsx

@@ -3,13 +3,13 @@ import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import translate from 'Utilities/String/translate';
 import QueuedTasks from './Queued/QueuedTasks';
-import ScheduledTasksConnector from './Scheduled/ScheduledTasksConnector';
+import ScheduledTasks from './Scheduled/ScheduledTasks';
 
 function Tasks() {
   return (
     <PageContent title={translate('Tasks')}>
       <PageContentBody>
-        <ScheduledTasksConnector />
+        <ScheduledTasks />
         <QueuedTasks />
       </PageContentBody>
     </PageContent>

frontend/src/System/Updates/UpdateChanges.js

@@ -18,12 +18,14 @@ class UpdateChanges extends Component {
       return null;
     }
 
+    const uniqueChanges = [...new Set(changes)];
+
     return (
       <div>
         <div className={styles.title}>{title}</div>
         <ul>
           {
-            changes.map((change, index) => {
+            uniqueChanges.map((change, index) => {
               const checkChange = change.replace(/#\d{3,5}\b/g, (match, contents) => {
                 return `[${match}](https://github.com/Prowlarr/Prowlarr/issues/${match.substring(1)})`;
               });

frontend/src/Utilities/Number/formatBytes.ts

@@ -1,6 +1,6 @@
 import { filesize } from 'filesize';
 
-function formatBytes(input) {
+function formatBytes(input: string | number) {
   const size = Number(input);
 
   if (isNaN(size)) {
@@ -9,7 +9,7 @@ function formatBytes(input) {
 
   return `${filesize(size, {
     base: 2,
-    round: 1
+    round: 1,
   })}`;
 }
 

frontend/src/Utilities/getPathWithUrlBase.js

@@ -1,3 +0,0 @@
-export default function getPathWithUrlBase(path) {
-  return `${window.Prowlarr.urlBase}${path}`;
-}