poll for impox updates

src/components/Inbox.tsx

@@ -1,11 +1,10 @@
 import { createShapeId, Editor, Tldraw, TLGeoShape, TLShapePartial } from "@tldraw/tldraw";
+import { useEffect, useRef } from "react";
 
 export function Inbox() {
-  return (
+  const editorRef = useRef<Editor | null>(null);
-    <div className="tldraw__editor">
+
-      <Tldraw
+  const updateEmails = async (editor: Editor) => {
-        onMount={(editor: Editor) => {
-          (async () => {
     try {
       const response = await fetch('https://jeffemmett-canvas.web.val.run', {
         method: 'GET',
@@ -14,6 +13,7 @@ export function Inbox() {
 
       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
@@ -30,14 +30,43 @@ export function Inbox() {
             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) => {
+          editorRef.current = editor;
+          updateEmails(editor);
         }}
       />
     </div>