New: (Apps) Add force sync indexers for applications

frontend/src/App/AppRoutes.js

@@ -7,7 +7,7 @@ import HistoryConnector from 'History/HistoryConnector';
 import IndexerIndex from 'Indexer/Index/IndexerIndex';
 import IndexerStats from 'Indexer/Stats/IndexerStats';
 import SearchIndexConnector from 'Search/SearchIndexConnector';
-import ApplicationSettingsConnector from 'Settings/Applications/ApplicationSettingsConnector';
+import ApplicationSettings from 'Settings/Applications/ApplicationSettings';
 import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
@@ -98,7 +98,7 @@ function AppRoutes(props) {
 
       <Route
         path="/settings/applications"
-        component={ApplicationSettingsConnector}
+        component={ApplicationSettings}
       />
 
       <Route

frontend/src/App/State/SettingsAppState.ts

@@ -16,7 +16,9 @@ export interface AppProfileAppState
 export interface ApplicationAppState
   extends AppSectionState<Application>,
     AppSectionDeleteState,
-    AppSectionSaveState {}
+    AppSectionSaveState {
+  isTestingAll: boolean;
+}
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,

frontend/src/Indexer/Index/IndexerIndex.tsx

@@ -45,9 +45,7 @@ import IndexerIndexTable from './Table/IndexerIndexTable';
 import IndexerIndexTableOptions from './Table/IndexerIndexTableOptions';
 import styles from './IndexerIndex.css';
 
-function getViewComponent() {
-  return IndexerIndexTable;
-}
+const getViewComponent = () => IndexerIndexTable;
 
 interface IndexerIndexProps {
   initialScrollTop?: number;
@@ -84,14 +82,6 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
   );
   const [isSelectMode, setIsSelectMode] = useState(false);
 
-  const onAppIndexerSyncPress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: APP_INDEXER_SYNC,
-      })
-    );
-  }, [dispatch]);
-
   const onAddIndexerPress = useCallback(() => {
     setIsAddIndexerModalOpen(true);
   }, [setIsAddIndexerModalOpen]);
@@ -108,6 +98,15 @@ const IndexerIndex = withScrollPosition((props: IndexerIndexProps) => {
     setIsEditIndexerModalOpen(false);
   }, [setIsEditIndexerModalOpen]);
 
+  const onAppIndexerSyncPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: APP_INDEXER_SYNC,
+        forceSync: true,
+      })
+    );
+  }, [dispatch]);
+
   const onTestAllPress = useCallback(() => {
     dispatch(testAllIndexers());
   }, [dispatch]);

frontend/src/Settings/Applications/ApplicationSettings.js

@@ -1,103 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { icons } from 'Helpers/Props';
-import AppProfilesConnector from 'Settings/Profiles/App/AppProfilesConnector';
-import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
-import translate from 'Utilities/String/translate';
-import ApplicationsConnector from './Applications/ApplicationsConnector';
-import ManageApplicationsModal from './Applications/Manage/ManageApplicationsModal';
-
-class ApplicationSettings extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isManageApplicationsOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onManageApplicationsPress = () => {
-    this.setState({ isManageApplicationsOpen: true });
-  };
-
-  onManageApplicationsModalClose = () => {
-    this.setState({ isManageApplicationsOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      isTestingAll,
-      isSyncingIndexers,
-      onTestAllPress,
-      onAppIndexerSyncPress
-    } = this.props;
-
-    const { isManageApplicationsOpen } = this.state;
-
-    return (
-      <PageContent title={translate('Applications')}>
-        <SettingsToolbarConnector
-          showSave={false}
-          additionalButtons={
-            <Fragment>
-              <PageToolbarSeparator />
-
-              <PageToolbarButton
-                label={translate('SyncAppIndexers')}
-                iconName={icons.REFRESH}
-                isSpinning={isSyncingIndexers}
-                onPress={onAppIndexerSyncPress}
-              />
-
-              <PageToolbarButton
-                label={translate('TestAllApps')}
-                iconName={icons.TEST}
-                isSpinning={isTestingAll}
-                onPress={onTestAllPress}
-              />
-
-              <PageToolbarButton
-                label={translate('ManageApplications')}
-                iconName={icons.MANAGE}
-                onPress={this.onManageApplicationsPress}
-              />
-            </Fragment>
-          }
-        />
-
-        <PageContentBody>
-          <ApplicationsConnector />
-          <AppProfilesConnector />
-
-          <ManageApplicationsModal
-            isOpen={isManageApplicationsOpen}
-            onModalClose={this.onManageApplicationsModalClose}
-          />
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-}
-
-ApplicationSettings.propTypes = {
-  isTestingAll: PropTypes.bool.isRequired,
-  isSyncingIndexers: PropTypes.bool.isRequired,
-  onTestAllPress: PropTypes.func.isRequired,
-  onAppIndexerSyncPress: PropTypes.func.isRequired
-};
-
-export default ApplicationSettings;

frontend/src/Settings/Applications/ApplicationSettings.tsx

@@ -0,0 +1,102 @@
+import React, { Fragment, useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import { APP_INDEXER_SYNC } from 'Commands/commandNames';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import { icons } from 'Helpers/Props';
+import AppProfilesConnector from 'Settings/Profiles/App/AppProfilesConnector';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { testAllApplications } from 'Store/Actions/Settings/applications';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import translate from 'Utilities/String/translate';
+import ApplicationsConnector from './Applications/ApplicationsConnector';
+import ManageApplicationsModal from './Applications/Manage/ManageApplicationsModal';
+
+function ApplicationSettings() {
+  const isSyncingIndexers = useSelector(
+    createCommandExecutingSelector(APP_INDEXER_SYNC)
+  );
+  const isTestingAll = useSelector(
+    (state: AppState) => state.settings.applications.isTestingAll
+  );
+  const dispatch = useDispatch();
+
+  const [isManageApplicationsOpen, setIsManageApplicationsOpen] =
+    useState(false);
+
+  const onManageApplicationsPress = useCallback(() => {
+    setIsManageApplicationsOpen(true);
+  }, [setIsManageApplicationsOpen]);
+
+  const onManageApplicationsModalClose = useCallback(() => {
+    setIsManageApplicationsOpen(false);
+  }, [setIsManageApplicationsOpen]);
+
+  const onAppIndexerSyncPress = useCallback(() => {
+    dispatch(
+      executeCommand({
+        name: APP_INDEXER_SYNC,
+        forceSync: true,
+      })
+    );
+  }, [dispatch]);
+
+  const onTestAllPress = useCallback(() => {
+    dispatch(testAllApplications());
+  }, [dispatch]);
+
+  return (
+    <PageContent title={translate('Applications')}>
+      <SettingsToolbarConnector
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        showSave={false}
+        additionalButtons={
+          <Fragment>
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label={translate('SyncAppIndexers')}
+              iconName={icons.REFRESH}
+              isSpinning={isSyncingIndexers}
+              onPress={onAppIndexerSyncPress}
+            />
+
+            <PageToolbarButton
+              label={translate('TestAllApps')}
+              iconName={icons.TEST}
+              isSpinning={isTestingAll}
+              onPress={onTestAllPress}
+            />
+
+            <PageToolbarButton
+              label={translate('ManageApplications')}
+              iconName={icons.MANAGE}
+              onPress={onManageApplicationsPress}
+            />
+          </Fragment>
+        }
+      />
+
+      <PageContentBody>
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore */}
+        <ApplicationsConnector />
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore */}
+        <AppProfilesConnector />
+
+        <ManageApplicationsModal
+          isOpen={isManageApplicationsOpen}
+          onModalClose={onManageApplicationsModalClose}
+        />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default ApplicationSettings;

frontend/src/Settings/Applications/ApplicationSettingsConnector.js

@@ -1,35 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import * as commandNames from 'Commands/commandNames';
-import { executeCommand } from 'Store/Actions/commandActions';
-import { testAllApplications } from 'Store/Actions/settingsActions';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import ApplicationSettings from './ApplicationSettings';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.applications.isTestingAll,
-    createCommandExecutingSelector(commandNames.APP_INDEXER_SYNC),
-    (isTestingAll, isSyncingIndexers) => {
-      return {
-        isTestingAll,
-        isSyncingIndexers
-      };
-    }
-  );
-}
-
-function mapDispatchToProps(dispatch, props) {
-  return {
-    onTestAllPress() {
-      dispatch(testAllApplications());
-    },
-    onAppIndexerSyncPress() {
-      dispatch(executeCommand({
-        name: commandNames.APP_INDEXER_SYNC
-      }));
-    }
-  };
-}
-
-export default connect(createMapStateToProps, mapDispatchToProps)(ApplicationSettings);