cleaning up the ApiInfo component

client/src/components/util/ApiInfo.jsx

@@ -1,32 +1,16 @@
 import React, { useState, useEffect } from "react";
 import { getStatus } from "../../domain/GGSHService";
 
-const ApiInfo = () => {
-  const [{ loading, version, status }, setState] = useState({ loading: true, version: null, status: null });
+export default () => {
+  const [data, setData] = useState(null);
+  useEffect(() => getStatus().then(setData), []);
 
-  useEffect(() => {
-    if (version && status) {
-      return;
-    }
-
-    const fetchStatus = async () => {
-      const { version, status } = await getStatus();
-      setState({ loading: false, version, status });
-    }
-
-    fetchStatus();
-  });
-  
-  if (loading) {
+  if (data === null) {
     return <p>Connecting to back-end...</p>
   }
-
-  if (status !== "healthy") {
-    return <p>Unable to communicate with API server! Error: {status}</p>
-  }
-
-  return <p>API Version: {version}</p>
   
+  const { status, version } = data;
+  return status === "healthy"
+    ? <p>API Version: {version}</p>
+    : <p>Unable to communicate with API server! Error: {status}</p>
 }
-
-export default ApiInfo;