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 () => {

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

@@ -1,13 +1,11 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
+import React from 'react';
 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 useTasks from '../useTasks';
 import ScheduledTaskRow from './ScheduledTaskRow';
 
 const columns: Column[] = [
@@ -44,28 +42,31 @@ const columns: Column[] = [
 ];
 
 function ScheduledTasks() {
-  const dispatch = useDispatch();
-  const { isFetching, isPopulated, items } = useSelector(
-    (state: AppState) => state.system.tasks
-  );
+  const { data: tasks, isLoading, error } = useTasks();
 
-  useEffect(() => {
-    dispatch(fetchTasks());
-  }, [dispatch]);
+  if (error) {
+    return (
+      <FieldSet legend={translate('Scheduled')}>
+        <div>Error loading tasks: {error.message}</div>
+      </FieldSet>
+    );
+  }
 
   return (
     <FieldSet legend={translate('Scheduled')}>
-      {isFetching && !isPopulated && <LoadingIndicator />}
+      {isLoading && <LoadingIndicator />}
 
-      {isPopulated && (
+      {tasks.length > 0 && (
         <Table columns={columns}>
           <TableBody>
-            {items.map((item) => {
-              return <ScheduledTaskRow key={item.id} {...item} />;
+            {tasks.map((task) => {
+              return <ScheduledTaskRow key={task.id} {...task} />;
             })}
           </TableBody>
         </Table>
       )}
+
+      {!isLoading && tasks.length === 0 && <div>No scheduled tasks found.</div>}
     </FieldSet>
   );
 }

frontend/src/System/Tasks/useTasks.ts

@@ -0,0 +1,15 @@
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+import Task from 'typings/Task';
+
+const useTasks = () => {
+  const result = useApiQuery<Task[]>({
+    path: '/system/task',
+  });
+
+  return {
+    ...result,
+    data: result.data ?? [],
+  };
+};
+
+export default useTasks;