Use react-query for Health UI

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} />