Use react-query for disk space

frontend/src/App/State/SystemAppState.ts

@@ -1,16 +1,13 @@
-import DiskSpace from 'typings/DiskSpace';
 import LogFile from 'typings/LogFile';
 import Task from 'typings/Task';
 import AppSectionState from './AppSectionState';
 import BackupAppState from './BackupAppState';
 
-export type DiskSpaceAppState = AppSectionState<DiskSpace>;
 export type TaskAppState = AppSectionState<Task>;
 export type LogFilesAppState = AppSectionState<LogFile>;
 
 interface SystemAppState {
   backups: BackupAppState;
-  diskSpace: DiskSpaceAppState;
   logFiles: LogFilesAppState;
   tasks: TaskAppState;
   updateLogFiles: LogFilesAppState;

frontend/src/Store/Actions/systemActions.js

@@ -18,13 +18,6 @@ const backupsSection = 'system.backups';
 // State
 
 export const defaultState = {
-  diskSpace: {
-    isFetching: false,
-    isPopulated: false,
-    error: null,
-    items: []
-  },
-
   tasks: {
     isFetching: false,
     isPopulated: false,
@@ -54,8 +47,6 @@ export const defaultState = {
 //
 // Actions Types
 
-export const FETCH_DISK_SPACE = 'system/diskSpace/fetchDiskSPace';
-
 export const FETCH_TASK = 'system/tasks/fetchTask';
 export const FETCH_TASKS = 'system/tasks/fetchTasks';
 
@@ -70,8 +61,6 @@ export const SHUTDOWN = 'system/shutdown';
 //
 // Action Creators
 
-export const fetchDiskSpace = createThunk(FETCH_DISK_SPACE);
-
 export const fetchTask = createThunk(FETCH_TASK);
 export const fetchTasks = createThunk(FETCH_TASKS);
 
@@ -87,7 +76,6 @@ export const shutdown = createThunk(SHUTDOWN);
 // Action Handlers
 
 export const actionHandlers = handleThunks({
-  [FETCH_DISK_SPACE]: createFetchHandler('system.diskSpace', '/diskspace'),
   [FETCH_TASK]: createFetchHandler('system.tasks', '/system/task'),
   [FETCH_TASKS]: createFetchHandler('system.tasks', '/system/task'),
 

frontend/src/System/Status/DiskSpace/DiskSpace.tsx

@@ -1,7 +1,4 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
+import React from 'react';
 import FieldSet from 'Components/FieldSet';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ProgressBar from 'Components/ProgressBar';
@@ -12,9 +9,9 @@ import TableBody from 'Components/Table/TableBody';
 import TableRow from 'Components/Table/TableRow';
 import { kinds, sizes } from 'Helpers/Props';
 import { Kind } from 'Helpers/Props/kinds';
-import { fetchDiskSpace } from 'Store/Actions/systemActions';
 import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
+import useDiskSpace from './useDiskSpace';
 import styles from './DiskSpace.css';
 
 const columns: Column[] = [
@@ -40,22 +37,8 @@ const columns: Column[] = [
   },
 ];
 
-function createDiskSpaceSelector() {
-  return createSelector(
-    (state: AppState) => state.system.diskSpace,
-    (diskSpace) => {
-      return diskSpace;
-    }
-  );
-}
-
 function DiskSpace() {
-  const dispatch = useDispatch();
-  const { isFetching, items } = useSelector(createDiskSpaceSelector());
-
-  useEffect(() => {
-    dispatch(fetchDiskSpace());
-  }, [dispatch]);
+  const { isFetching, data } = useDiskSpace();
 
   return (
     <FieldSet legend={translate('DiskSpace')}>
@@ -64,7 +47,7 @@ function DiskSpace() {
       {isFetching ? null : (
         <Table columns={columns}>
           <TableBody>
-            {items.map((item) => {
+            {data.map((item) => {
               const { freeSpace, totalSpace } = item;
 
               const diskUsage = 100 - (freeSpace / totalSpace) * 100;

frontend/src/System/Status/DiskSpace/useDiskSpace.ts

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