poll for impox updates

src/components/Inbox.tsx

@@ -1,43 +1,72 @@
 import { createShapeId, Editor, Tldraw, TLGeoShape, TLShapePartial } from "@tldraw/tldraw";
+import { useEffect, useRef } from "react";
 
 export function Inbox() {
+  const editorRef = useRef<Editor | null>(null);
+
+  const updateEmails = async (editor: Editor) => {
+    try {
+      const response = await fetch('https://jeffemmett-canvas.web.val.run', {
+        method: 'GET',
+      });
+      const messages = await response.json();
+
+      for (let i = 0; i < messages.length; i++) { 
+        const message = messages[i];
+        const messageId = message.id;
+        const parsedEmailName = message.from.match(/^([^<]+)/)?.[1]?.trim() || message.from.match(/[^<@]+(?=@)/)?.[0] || message.from;
+        const messageText = `from: ${parsedEmailName}\nsubject: ${message.subject}\n\n${message.text}`
+        const shapeWidth = 500
+        const shapeHeight = 300
+        const spacing = 50
+        const shape: TLShapePartial<TLGeoShape> = {
+          id: createShapeId(),
+          type: 'geo',
+          x: shapeWidth * (i % 5) + spacing * (i % 5),
+          y: shapeHeight * Math.floor(i / 5) + spacing * Math.floor(i / 5),
+          props: {
+            w: shapeWidth,
+            h: shapeHeight,
+            text: messageText,
+            align:'start',
+            verticalAlign:'start'
+          },
+          meta: {
+            id: messageId
+          }
+        }
+        let found = false;
+        for (const s of editor.getCurrentPageShapes()) {
+          if (s.meta.id === messageId) {
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          editor.createShape(shape)
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (editorRef.current) {
+        updateEmails(editorRef.current);
+      }
+    }, 5*1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   return (
     <div className="tldraw__editor">
       <Tldraw
         onMount={(editor: Editor) => {
-          (async () => {
-            try {
-              const response = await fetch('https://jeffemmett-canvas.web.val.run', {
-                method: 'GET',
-              });
-              const messages = await response.json();
-
-              for (let i = 0; i < messages.length; i++) { 
-                const message = messages[i];
-                const parsedEmailName = message.from.match(/^([^<]+)/)?.[1]?.trim() || message.from.match(/[^<@]+(?=@)/)?.[0] || message.from;
-                const messageText = `from: ${parsedEmailName}\nsubject: ${message.subject}\n\n${message.text}`
-                const shapeWidth = 500
-                const shapeHeight = 300
-                const spacing = 50
-                const shape: TLShapePartial<TLGeoShape> = {
-                  id: createShapeId(),
-                  type: 'geo',
-                  x: shapeWidth * (i % 5) + spacing * (i % 5),
-                  y: shapeHeight * Math.floor(i / 5) + spacing * Math.floor(i / 5),
-                  props: {
-                    w: shapeWidth,
-                    h: shapeHeight,
-                    text: messageText,
-                    align:'start',
-                    verticalAlign:'start'
-                  }
-                }
-                editor.createShape(shape)
-              }
-            } catch (error) {
-              console.error('Error fetching data:', error);
-            }
-          })();
+          editorRef.current = editor;
+          updateEmails(editor);
         }}
       />
     </div>