Convert System to TypeScript

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

@@ -1,242 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-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 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 'IndexerRssCheck':
-    case 'IndexerSearchCheck':
-    case 'IndexerStatusCheck':
-    case 'IndexerJackettAllCheck':
-    case 'IndexerLongTermStatusCheck':
-      return (
-        <IconButton
-          name={icons.SETTINGS}
-          title={translate('Settings')}
-          to="/settings/indexers"
-        />
-      );
-    case 'DownloadClientCheck':
-    case 'DownloadClientStatusCheck':
-    case 'ImportMechanismCheck':
-      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 'RootFolderCheck':
-      return (
-        <IconButton
-          name={icons.SERIES_CONTINUING}
-          title={translate('SeriesEditor')}
-          to="/serieseditor"
-        />
-      );
-    case 'UpdateCheck':
-      return (
-        <IconButton
-          name={icons.UPDATE}
-          title={translate('Updates')}
-          to="/system/updates"
-        />
-      );
-    default:
-      return;
-  }
-}
-
-function getTestLink(source, props) {
-  switch (source) {
-    case 'IndexerStatusCheck':
-    case 'IndexerLongTermStatusCheck':
-      return (
-        <SpinnerIconButton
-          name={icons.TEST}
-          title={translate('TestAll')}
-          isSpinning={props.isTestingAllIndexers}
-          onPress={props.dispatchTestAllIndexers}
-        />
-      );
-    case 'DownloadClientCheck':
-    case 'DownloadClientStatusCheck':
-      return (
-        <SpinnerIconButton
-          name={icons.TEST}
-          title={translate('TestAll')}
-          isSpinning={props.isTestingAllDownloadClients}
-          onPress={props.dispatchTestAllDownloadClients}
-        />
-      );
-
-    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('NoIssuesWithYourConfiguration')}
-            </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>
-                          <IconButton
-                            name={icons.WIKI}
-                            to={item.wikiUrl}
-                            title={translate('ReadTheWikiForMoreInformation')}
-                          />
-
-                          {
-                            internalLink
-                          }
-
-                          {
-                            !!testLink &&
-                            testLink
-                          }
-                        </TableRowCell>
-                      </TableRow>
-                    );
-                  })
-                }
-              </TableBody>
-            </Table>
-        }
-        {
-          healthIssues &&
-            <Alert kind={kinds.INFO}>
-              <InlineMarkdown data={translate('HealthMessagesInfoBox', { link: '/system/logs/files' })} />
-            </Alert>
-        }
-      </FieldSet>
-    );
-  }
-
-}
-
-Health.propTypes = {
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  items: PropTypes.array.isRequired,
-  isTestingAllDownloadClients: PropTypes.bool.isRequired,
-  isTestingAllIndexers: PropTypes.bool.isRequired,
-  dispatchTestAllDownloadClients: PropTypes.func.isRequired,
-  dispatchTestAllIndexers: PropTypes.func.isRequired
-};
-
-export default Health;

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

@@ -0,0 +1,174 @@
+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 {
+  testAllDownloadClients,
+  testAllIndexers,
+} 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 isTestingAllDownloadClients = useSelector(
+    (state: AppState) => state.settings.downloadClients.isTestingAll
+  );
+  const isTestingAllIndexers = useSelector(
+    (state: AppState) => state.settings.indexers.isTestingAll
+  );
+
+  const healthIssues = !!items.length;
+
+  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 === 'IndexerStatusCheck' ||
+                      source === 'IndexerLongTermStatusCheck' ? (
+                        <SpinnerIconButton
+                          name={icons.TEST}
+                          title={translate('TestAll')}
+                          isSpinning={isTestingAllIndexers}
+                          onPress={handleTestAllIndexersPress}
+                        />
+                      ) : null}
+
+                      {source === 'DownloadClientCheck' ||
+                      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,68 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { testAllDownloadClients, testAllIndexers } from 'Store/Actions/settingsActions';
-import { fetchHealth } from 'Store/Actions/systemActions';
-import Health from './Health';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.system.health,
-    (state) => state.settings.downloadClients.isTestingAll,
-    (state) => state.settings.indexers.isTestingAll,
-    (health, isTestingAllDownloadClients, isTestingAllIndexers) => {
-      const {
-        isFetching,
-        isPopulated,
-        items
-      } = health;
-
-      return {
-        isFetching,
-        isPopulated,
-        items,
-        isTestingAllDownloadClients,
-        isTestingAllIndexers
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchFetchHealth: fetchHealth,
-  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,65 @@
+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 'IndexerRssCheck':
+    case 'IndexerSearchCheck':
+    case 'IndexerStatusCheck':
+    case 'IndexerJackettAllCheck':
+    case 'IndexerLongTermStatusCheck':
+      return (
+        <IconButton
+          name={icons.SETTINGS}
+          title={translate('Settings')}
+          to="/settings/indexers"
+        />
+      );
+    case 'DownloadClientCheck':
+    case 'DownloadClientStatusCheck':
+    case 'ImportMechanismCheck':
+      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 'RootFolderCheck':
+      return (
+        <IconButton
+          name={icons.SERIES_CONTINUING}
+          title={translate('SeriesEditor')}
+          to="/serieseditor"
+        />
+      );
+    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,79 +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';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app,
-    (state) => state.system.health,
-    (app, health) => {
-      const count = health.items.length;
-      let errors = false;
-      let warnings = false;
-
-      health.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;