Use react-query for Health UI

frontend/src/System/Status/Health/Health.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
@@ -18,11 +18,10 @@ import {
   testAllDownloadClients,
   testAllIndexers,
 } from 'Store/Actions/settingsActions';
-import { fetchHealth } from 'Store/Actions/systemActions';
 import titleCase from 'Utilities/String/titleCase';
 import translate from 'Utilities/String/translate';
-import createHealthSelector from './createHealthSelector';
 import HealthItemLink from './HealthItemLink';
+import useHealth from './useHealth';
 import styles from './Health.css';
 
 const columns: Column[] = [
@@ -46,9 +45,7 @@ const columns: Column[] = [
 
 function Health() {
   const dispatch = useDispatch();
-  const { isFetching, isPopulated, items } = useSelector(
-    createHealthSelector()
-  );
+  const { data, isFetched, isFetching, isLoading } = useHealth();
   const isTestingAllDownloadClients = useSelector(
     (state: AppState) => state.settings.downloadClients.isTestingAll
   );
@@ -56,7 +53,7 @@ function Health() {
     (state: AppState) => state.settings.indexers.isTestingAll
   );
 
-  const healthIssues = !!items.length;
+  const healthIssues = !!data.length;
 
   const handleTestAllDownloadClientsPress = useCallback(() => {
     dispatch(testAllDownloadClients());
@@ -66,25 +63,21 @@ function Health() {
     dispatch(testAllIndexers());
   }, [dispatch]);
 
-  useEffect(() => {
-    dispatch(fetchHealth());
-  }, [dispatch]);
-
   return (
     <FieldSet
       legend={
         <div className={styles.legend}>
           {translate('Health')}
 
-          {isFetching && isPopulated ? (
+          {isFetching && !isFetched ? (
             <LoadingIndicator className={styles.loading} size={20} />
           ) : null}
         </div>
       }
     >
-      {isFetching && !isPopulated ? <LoadingIndicator /> : null}
+      {isLoading ? <LoadingIndicator /> : null}
 
-      {isPopulated && !healthIssues ? (
+      {isFetched && !healthIssues ? (
         <div className={styles.healthOk}>
           {translate('NoIssuesWithYourConfiguration')}
         </div>
@@ -94,7 +87,7 @@ function Health() {
         <>
           <Table columns={columns}>
             <TableBody>
-              {items.map((item) => {
+              {data.map((item) => {
                 const source = item.source;
 
                 let kind: IconKind = kinds.WARNING;

frontend/src/System/Status/Health/HealthStatus.tsx

@@ -1,17 +1,15 @@
 import React, { useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import AppState from 'App/State/AppState';
 import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
 import usePrevious from 'Helpers/Hooks/usePrevious';
-import { fetchHealth } from 'Store/Actions/systemActions';
-import createHealthSelector from './createHealthSelector';
+import useHealth from './useHealth';
 
 function HealthStatus() {
-  const dispatch = useDispatch();
   const { isConnected, isReconnecting } = useSelector(
     (state: AppState) => state.app
   );
-  const { isPopulated, items } = useSelector(createHealthSelector());
+  const { data, refetch } = useHealth();
 
   const wasReconnecting = usePrevious(isReconnecting);
 
@@ -19,7 +17,7 @@ function HealthStatus() {
     let errors = false;
     let warnings = false;
 
-    items.forEach((item) => {
+    data.forEach((item) => {
       if (item.type === 'error') {
         errors = true;
       }
@@ -30,23 +28,17 @@ function HealthStatus() {
     });
 
     return {
-      count: items.length,
+      count: data.length,
       errors,
       warnings,
     };
-  }, [items]);
-
-  useEffect(() => {
-    if (!isPopulated) {
-      dispatch(fetchHealth());
-    }
-  }, [isPopulated, dispatch]);
+  }, [data]);
 
   useEffect(() => {
     if (isConnected && wasReconnecting) {
-      dispatch(fetchHealth());
+      refetch();
     }
-  }, [isConnected, wasReconnecting, dispatch]);
+  }, [isConnected, wasReconnecting, refetch]);
 
   return (
     <PageSidebarStatus count={count} errors={errors} warnings={warnings} />

frontend/src/System/Status/Health/createHealthSelector.ts

@@ -1,13 +0,0 @@
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
-
-function createHealthSelector() {
-  return createSelector(
-    (state: AppState) => state.system.health,
-    (health) => {
-      return health;
-    }
-  );
-}
-
-export default createHealthSelector;

frontend/src/System/Status/Health/useHealth.ts

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