Use react-query for System Status

frontend/src/System/Logs/LogFiles.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
@@ -14,6 +12,7 @@ import Column from 'Components/Table/Column';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import { icons, kinds } from 'Helpers/Props';
+import { useSystemStatusData } from 'System/Status/useSystemStatus';
 import LogFile from 'typings/LogFile';
 import combinePath from 'Utilities/String/combinePath';
 import translate from 'Utilities/String/translate';
@@ -58,9 +57,7 @@ function LogFiles({
   onDeleteFilesPress,
   ...otherProps
 }: LogFilesProps) {
-  const { appData, isWindows } = useSelector(
-    (state: AppState) => state.system.status.item
-  );
+  const { appData, isWindows } = useSystemStatusData();
 
   const currentLogView =
     type === 'update' ? translate('UpdaterLogFiles') : translate('LogFiles');

frontend/src/System/Status/About/About.tsx

@@ -1,19 +1,16 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import FieldSet from 'Components/FieldSet';
 import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import { fetchStatus } from 'Store/Actions/systemActions';
 import titleCase from 'Utilities/String/titleCase';
 import translate from 'Utilities/String/translate';
+import useSystemStatus from '../useSystemStatus';
 import StartTime from './StartTime';
 import styles from './About.css';
 
 function About() {
-  const dispatch = useDispatch();
-  const { item } = useSelector((state: AppState) => state.system.status);
+  const { data, refetch } = useSystemStatus();
 
   const {
     version,
@@ -29,11 +26,11 @@ function About() {
     startupPath,
     mode,
     startTime,
-  } = item;
+  } = data;
 
   useEffect(() => {
-    dispatch(fetchStatus());
-  }, [dispatch]);
+    refetch();
+  }, [refetch]);
 
   return (
     <FieldSet legend={translate('About')}>

frontend/src/System/Status/useSystemStatus.ts

@@ -0,0 +1,33 @@
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+import SystemStatus from 'typings/SystemStatus';
+
+const useSystemStatus = () => {
+  const result = useApiQuery<SystemStatus>({
+    path: '/system/status',
+  });
+
+  return {
+    ...result,
+    data: result.data ?? ({} as SystemStatus),
+  };
+};
+
+export default useSystemStatus;
+
+export const useSystemStatusData = () => {
+  const { data } = useSystemStatus();
+
+  return data;
+};
+
+export const useIsWindows = () => {
+  const { isWindows } = useSystemStatusData();
+
+  return isWindows;
+};
+
+export const useIsWindowsService = () => {
+  const { isWindows, mode } = useSystemStatusData();
+
+  return isWindows && mode === 'service';
+};

frontend/src/System/Updates/Updates.tsx

@@ -16,8 +16,8 @@ import useUpdateSettings from 'Settings/General/useUpdateSettings';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { fetchGeneralSettings } from 'Store/Actions/settingsActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { useSystemStatusData } from 'System/Status/useSystemStatus';
 import { UpdateMechanism } from 'typings/Settings/General';
 import formatDate from 'Utilities/Date/formatDate';
 import formatDateTime from 'Utilities/Date/formatDateTime';
@@ -30,9 +30,8 @@ const VERSION_REGEX = /\d+\.\d+\.\d+\.\d+/i;
 
 function Updates() {
   const currentVersion = useSelector((state: AppState) => state.app.version);
-  const { packageUpdateMechanismMessage } = useSelector(
-    createSystemStatusSelector()
-  );
+  const { packageUpdateMechanismMessage } = useSystemStatusData();
+
   const { shortDateFormat, longDateFormat, timeFormat } = useSelector(
     createUISettingsSelector()
   );

frontend/src/System/useIsWindows.ts

@@ -1,8 +0,0 @@
-import { useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-
-function useIsWindows() {
-  return useSelector((state: AppState) => state.system.status.item.isWindows);
-}
-
-export default useIsWindows;

frontend/src/System/useIsWindowsService.ts

@@ -1,9 +0,0 @@
-import useSystemStatus from './useSystemStatus';
-
-function useIsWindowsService() {
-  const { isWindows, mode } = useSystemStatus();
-
-  return isWindows && mode === 'service';
-}
-
-export default useIsWindowsService;

frontend/src/System/useSystemStatus.ts

@@ -1,8 +0,0 @@
-import { useSelector } from 'react-redux';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
-
-function useSystemStatus() {
-  return useSelector(createSystemStatusSelector());
-}
-
-export default useSystemStatus;