Convert System to TypeScript

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>