diff --git a/frontend/src/App/State/SystemAppState.ts b/frontend/src/App/State/SystemAppState.ts index ac640e08a..f095d32e6 100644 --- a/frontend/src/App/State/SystemAppState.ts +++ b/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; export type TaskAppState = AppSectionState; export type LogFilesAppState = AppSectionState; interface SystemAppState { backups: BackupAppState; - diskSpace: DiskSpaceAppState; logFiles: LogFilesAppState; tasks: TaskAppState; updateLogFiles: LogFilesAppState; diff --git a/frontend/src/Store/Actions/systemActions.js b/frontend/src/Store/Actions/systemActions.js index c9af92a86..ca891e147 100644 --- a/frontend/src/Store/Actions/systemActions.js +++ b/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'), diff --git a/frontend/src/System/Status/DiskSpace/DiskSpace.tsx b/frontend/src/System/Status/DiskSpace/DiskSpace.tsx index ebbebe29e..ebc720882 100644 --- a/frontend/src/System/Status/DiskSpace/DiskSpace.tsx +++ b/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 (
@@ -64,7 +47,7 @@ function DiskSpace() { {isFetching ? null : ( - {items.map((item) => { + {data.map((item) => { const { freeSpace, totalSpace } = item; const diskUsage = 100 - (freeSpace / totalSpace) * 100; diff --git a/frontend/src/System/Status/DiskSpace/useDiskSpace.ts b/frontend/src/System/Status/DiskSpace/useDiskSpace.ts new file mode 100644 index 000000000..837ca3a0c --- /dev/null +++ b/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({ + path: '/diskspace', + }); + + return { + ...result, + data: result.data ?? [], + }; +}; + +export default useDiskSpace;