terrassumptions/client/src/components/util/ApiInfo.jsx

import { useEffect, useState } from "react";
import { getStatus } from "../../domain/apiMethods";

const ApiInfo = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    getStatus().then(setData);
  }, []);

  if (data === null) {
    return <p>Connecting to back-end...</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;