Cleanup display.

src/AppNav.tsx

@@ -6,7 +6,7 @@ export function AppNav() {
     <Navbar bg="dark" variant="dark" expand="sm" className="py-0">
       <Container className="me-auto">
         <Navbar.Brand as={Link} to="/">
-          J7-Bridge
+          J7s-Bridge
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="collapse-navbar-nav" />
         <Navbar.Collapse id="collapse-navbar-nav">

src/Home.tsx

@@ -1,6 +1,6 @@
 import { AppNav, Footer } from "./AppNav.tsx";
 import { Container, Row, Col, Image, Card } from "react-bootstrap";
-import { atom, useAtom } from "jotai";
+import { atom, useAtomValue } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 
 const costmapImageQuery = async () => {
@@ -11,33 +11,66 @@ const costmapImageQuery = async () => {
   const blob = await resp.blob();
   return URL.createObjectURL(blob);
 };
-
-const costmapImageAtom = atomWithQuery(() => ({
+const costmapImageQueryAtom = atomWithQuery(() => ({
   queryKey: ["costmap_image"],
   queryFn: costmapImageQuery,
   refetchInterval: 1000, // 1s
 }));
+const costmapImageAtom = atom((get) => {
+  const response = get(costmapImageQueryAtom);
+  if (response.isPending) {
+    return <p>"Loading..."</p>;
+  }
+  if (response.isError) {
+    return <p>"Error loading!"</p>;
+  }
+  const costmapStyle = {
+    minHeight: "65svb",
+  };
+  return <Image src={response.data} fluid style={costmapStyle} />;
+});
+
+const statusStringQuery = async () => {
+  const resp = await fetch("api/status");
+  if (!resp.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return resp.json();
+};
+const statusStringQueryAtom = atomWithQuery(() => ({
+  queryKey: ["status_string"],
+  queryFn: statusStringQuery,
+  refetchInterval: 500, // 0.5s
+}));
+const statusStringAtom = atom((get) => {
+  const response = get(statusStringQueryAtom);
+  if (response.isPending) {
+    return "Loading...";
+  }
+  if (response.isError) {
+    return "Error loading!";
+  }
+  if (!response.data.status) {
+    return "N/A";
+  }
+  return response.data.message;
+});
 
 export function Home() {
-  const [{ data, isPending, isError }] = useAtom(costmapImageAtom);
+  const costmapImage = useAtomValue(costmapImageAtom);
+  const statusString = useAtomValue(statusStringAtom);
 
-  let costmapImage = () => {
-    if (isPending) {
-      return <p>"Loading..."</p>;
-    }
-    if (isError) {
-      return <p>"Error!"</p>;
-    }
-    return <Image src={data} />;
-  };
   return (
     <div>
       <AppNav />
       <Container className="vert-padded">
         <Card className="padded">
           <Row>
-            <Col lg={8}>{costmapImage()}</Col>
-            <Col lg={4}></Col>
+            <Col lg={8}>{costmapImage}</Col>
+            <Col lg={4}>
+              <p>Status:</p>
+              <pre>{statusString}</pre>
+            </Col>
           </Row>
         </Card>
       </Container>

src/Version.tsx

@@ -1,6 +1,6 @@
 import { AppNav, Footer } from "./AppNav.tsx";
 import { Container, Row, Col, Card } from "react-bootstrap";
-import { atom, useAtom } from "jotai";
+import { atom, useAtomValue } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 import YAML from "yaml";
 
@@ -19,24 +19,20 @@ const versionQueryAtom = atomWithQuery(() => ({
 
 const versionAtom = atom((get) => {
   const version = get(versionQueryAtom);
-  let parseVersion = () => {
-    if (version.isPending) {
-      return "Loading...";
-    }
-    if (version.isError) {
-      return "Error loading!";
-    }
-    if (!version.data.status) {
-      return "Can not find version";
-    }
-    return YAML.stringify(version.data.message);
-  };
-  const versionText = parseVersion();
-  return versionText;
+  if (version.isPending) {
+    return "Loading...";
+  }
+  if (version.isError) {
+    return "Error loading!";
+  }
+  if (!version.data.status) {
+    return "Can not find version";
+  }
+  return YAML.stringify(version.data.message);
 });
 
 export function Version() {
-  let versionText = useAtom(versionAtom);
+  let versionText = useAtomValue(versionAtom);
 
   return (
     <div>