From bb35a80e97912a40bdb228275a0e960aebde469a Mon Sep 17 00:00:00 2001
From: James Pace <jpace121@gmail.com>
Date: Mon, 2 Mar 2026 12:34:20 +0000
Subject: [PATCH] Display image.

---
 src/Home.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index 87855d0..31a767a 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,12 +1,40 @@
 import { AppNav, Footer } from "./AppNav.tsx";
 import { Container, Row, Col, Image } from "react-bootstrap";
+import { atom, useAtom } from "jotai";
+import { atomWithQuery } from "jotai-tanstack-query";
+
+const costmapImageQuery = async () => {
+    const resp = await fetch("api/costmap_image");
+    if (!resp.ok) {
+        throw new Error("Network response was not ok");
+    }
+    const blob = await resp.blob();
+    return URL.createObjectURL(blob);
+};
+
+const costmapImageAtom = atomWithQuery(() => ({
+    queryKey: ["costmap_image"],
+    queryFn: costmapImageQuery,
+    refetchInterval: 1000 // 1s
+}));
 
 export function Home() {
+  const [{ data, isPending, isError }] = useAtom(costmapImageAtom);
+
+  let costmapImage = () => {
+    if (isPending) {
+        return (<p>"Loading..."</p>);
+    }
+    if (isError) {
+        return(<p>"Error!"</p>);
+    }
+      return (<Image src={data} />);
+  };
   return (
     <div>
       <AppNav />
       <Container>
-        <p> Hello World! </p>
+          { costmapImage() }
       </Container>
       <Footer />
     </div>