Use react-query for tasks

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

@@ -4,10 +4,8 @@ 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';
@@ -27,20 +25,16 @@ interface ScheduledTaskRowProps {
   nextExecution: string;
 }
 
-function ScheduledTaskRow(props: ScheduledTaskRowProps) {
-  const {
-    id,
-    taskName,
-    name,
-    interval,
-    lastExecution,
-    lastStartTime,
-    lastDuration,
-    nextExecution,
-  } = props;
-
+function ScheduledTaskRow({
+  taskName,
+  name,
+  interval,
+  lastExecution,
+  lastStartTime,
+  lastDuration,
+  nextExecution,
+}: ScheduledTaskRowProps) {
   const dispatch = useDispatch();
-
   const { showRelativeDates, longDateFormat, shortDateFormat, timeFormat } =
     useSelector(createUISettingsSelector());
   const command = useSelector(createCommandSelector(taskName));
@@ -49,7 +43,6 @@ function ScheduledTaskRow(props: ScheduledTaskRowProps) {
 
   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;
@@ -88,21 +81,9 @@ function ScheduledTaskRow(props: ScheduledTaskRowProps) {
   ]);
 
   const handleExecutePress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: taskName,
-      })
-    );
+    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 () => {