From 906c8c9cc9681215766718958626c7ea1fbc9f9a Mon Sep 17 00:00:00 2001
From: Nancy <3510671794@qq.com>
Date: Mon, 4 Nov 2024 20:01:03 +0800
Subject: [PATCH] feature/retry-on-export-option

---
 app/page.tsx | 138 +++++++++++++++++++++++++--------------------------
 1 file changed, 69 insertions(+), 69 deletions(-)
diff --git a/app/page.tsx b/app/page.tsx
index d0606508..de765347 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -27,87 +27,87 @@ export default function Home() {
     return () => {
       window.removeEventListener("keydown", listener);
     };
-  });
+  }, []);
 
   return (
-    <>
-      <div className={`w-screen h-screen`}>
-        <Tldraw persistenceKey="tldraw">
-          <ExportButton setHtml={setHtml} />
-        </Tldraw>
-      </div>
-      {html &&
-        ReactDOM.createPortal(
-          <div
-            className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center"
-            style={{ zIndex: 2000, backgroundColor: "rgba(0,0,0,0.5)" }}
-            onClick={() => setHtml(null)}
-          >
-            <PreviewModal html={html} setHtml={setHtml} />
-          </div>,
-          document.body
-        )}
-    </>
+      <>
+        <div className="w-screen h-screen">
+          <Tldraw persistenceKey="tldraw">
+            <ExportButton setHtml={setHtml} />
+          </Tldraw>
+        </div>
+        {html &&
+            ReactDOM.createPortal(
+                <div
+                    className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center"
+                    style={{ zIndex: 2000, backgroundColor: "rgba(0,0,0,0.5)" }}
+                    onClick={() => setHtml(null)}
+                >
+                  <PreviewModal html={html} setHtml={setHtml} />
+                </div>,
+                document.body
+            )}
+      </>
   );
 }
 
 function ExportButton({ setHtml }: { setHtml: (html: string) => void }) {
   const editor = useEditor();
   const [loading, setLoading] = useState(false);
-  // A tailwind styled button that is pinned to the bottom right of the screen
-  return (
-    <button
-      onClick={async (e) => {
-        setLoading(true);
-        try {
-          e.preventDefault();
-          const svg = await editor.getSvg(
-            Array.from(editor.currentPageShapeIds)
-          );
-          if (!svg) {
-            return;
-          }
-          const png = await getSvgAsImage(svg, {
-            type: "png",
-            quality: 1,
-            scale: 1,
-          });
-          const dataUrl = await blobToBase64(png!);
-          const resp = await fetch("/api/toHtml", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ image: dataUrl }),
-          });
 
-          const json = await resp.json();
+  const handleExport = async () => {
+    setLoading(true);
+    try {
+      const svg = await editor.getSvg(Array.from(editor.currentPageShapeIds));
+      if (!svg) return;
+
+      const png = await getSvgAsImage(svg, { type: "png", quality: 1, scale: 1 });
+      const dataUrl = await blobToBase64(png!);
 
-          if (json.error) {
-            alert("Error from open ai: " + JSON.stringify(json.error));
+      const sendRequest = async () => {
+        const resp = await fetch("/api/toHtml", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ image: dataUrl }),
+        });
+        const json = await resp.json();
+        if (json.error) {
+          if (confirm("Error from open ai: " + JSON.stringify(json.error) + ". Retry?")) {
+            await sendRequest(); // Retry the request
+          } else {
             return;
           }
-
-          const message = json.choices[0].message.content;
-          const start = message.indexOf("<!DOCTYPE html>");
-          const end = message.indexOf("</html>");
-          const html = message.slice(start, end + "</html>".length);
-          setHtml(html);
-        } finally {
-          setLoading(false);
         }
-      }}
-      className="fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ="
-      style={{ zIndex: 1000 }}
-      disabled={loading}
-    >
-      {loading ? (
-        <div className="flex justify-center items-center ">
-          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-        </div>
-      ) : (
-        "Make Real"
-      )}
-    </button>
+        const message = json.choices[0].message.content;
+        const start = message.indexOf("<!DOCTYPE html>");
+        const end = message.indexOf("</html>");
+        const html = message.slice(start, end + "</html>".length);
+        setHtml(html);
+      };
+
+      await sendRequest();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+      <button
+          onClick={(e) => {
+            e.preventDefault();
+            handleExport().then();
+          }}
+          className="fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          style={{ zIndex: 1000 }}
+          disabled={loading}
+      >
+        {loading ? (
+            <div className="flex justify-center items-center">
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+            </div>
+        ) : (
+            "Make Real"
+        )}
+      </button>
   );
 }
