Use react-query for System Status

frontend/src/Components/FileBrowser/FileBrowserModalContent.tsx

@@ -16,7 +16,7 @@ import TableBody from 'Components/Table/TableBody';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import { kinds, scrollDirections } from 'Helpers/Props';
 import { clearPaths, fetchPaths } from 'Store/Actions/pathActions';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import { useSystemStatusData } from 'System/Status/useSystemStatus';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
 import createPathsSelector from './createPathsSelector';
@@ -51,7 +51,8 @@ function FileBrowserModalContent(props: FileBrowserModalContentProps) {
 
   const dispatch = useDispatch();
 
-  const { isWindows, mode } = useSelector(createSystemStatusSelector());
+  const { isWindows, mode } = useSystemStatusData();
+
   const { isFetching, isPopulated, error, parent, directories, files, paths } =
     useSelector(createPathsSelector());
 

frontend/src/Components/Page/ErrorPage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Error } from 'App/State/AppSectionState';
+import { ApiError } from 'Utilities/Fetch/fetchJson';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
 import styles from './ErrorPage.css';
@@ -13,7 +14,7 @@ interface ErrorPageProps {
   tagsError?: Error;
   qualityProfilesError?: Error;
   uiSettingsError?: Error;
-  systemStatusError?: Error;
+  systemStatusError: ApiError | null;
 }
 
 function ErrorPage(props: ErrorPageProps) {

frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Shortcut, shortcuts } from 'Components/keyboardShortcuts';
 import Button from 'Components/Link/Button';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import { useSystemStatusData } from 'System/Status/useSystemStatus';
 import translate from 'Utilities/String/translate';
 import styles from './KeyboardShortcutsModalContent.css';
 
@@ -45,7 +44,7 @@ interface KeyboardShortcutsModalContentProps {
 function KeyboardShortcutsModalContent({
   onModalClose,
 }: KeyboardShortcutsModalContentProps) {
-  const { isOsx } = useSelector(createSystemStatusSelector());
+  const { isOsx } = useSystemStatusData();
   const allShortcuts = getShortcuts();
 
   return (

frontend/src/Components/Page/Header/PageHeaderActionsMenu.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
+import { useDispatch } from 'react-redux';
 import Icon from 'Components/Icon';
 import Menu from 'Components/Menu/Menu';
 import MenuButton from 'Components/Menu/MenuButton';
@@ -9,6 +8,7 @@ import MenuItem from 'Components/Menu/MenuItem';
 import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
 import { align, icons, kinds } from 'Helpers/Props';
 import { restart, shutdown } from 'Store/Actions/systemActions';
+import { useSystemStatusData } from 'System/Status/useSystemStatus';
 import translate from 'Utilities/String/translate';
 import styles from './PageHeaderActionsMenu.css';
 
@@ -20,10 +20,7 @@ function PageHeaderActionsMenu(props: PageHeaderActionsMenuProps) {
   const { onKeyboardShortcutsPress } = props;
 
   const dispatch = useDispatch();
-
-  const { authentication, isDocker } = useSelector(
-    (state: AppState) => state.system.status.item
-  );
+  const { authentication, isDocker } = useSystemStatusData();
 
   const formsAuth = authentication === 'forms';
 

frontend/src/Components/Page/Page.tsx

@@ -9,8 +9,8 @@ import AuthenticationRequiredModal from 'FirstRun/AuthenticationRequiredModal';
 import useAppPage from 'Helpers/Hooks/useAppPage';
 import { saveDimensions } from 'Store/Actions/appActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { useSystemStatusData } from 'System/Status/useSystemStatus';
 import ErrorPage from './ErrorPage';
 import PageHeader from './Header/PageHeader';
 import LoadingPage from './LoadingPage';
@@ -31,7 +31,8 @@ function Page({ children }: PageProps) {
 
   const { enableColorImpairedMode } = useSelector(createUISettingsSelector());
   const { isSmallScreen } = useSelector(createDimensionsSelector());
-  const { authentication } = useSelector(createSystemStatusSelector());
+  const { authentication } = useSystemStatusData();
+
   const authenticationEnabled = authentication !== 'none';
   const { isSidebarVisible, isUpdated, isDisconnected, version } = useSelector(
     (state: AppState) => state.app